Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-08-21 08:04:18 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

closes #25; stats on cards

Browse Source
This commit is contained in:
Daniel
2018-02-04 01:53:33 -05:00
parent 9724827af1
commit 4ec8d30234
3 changed files with 109 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
build/bundle.js
View File

File diff suppressed because one or more lines are too long

32
src/components/entercode/PackSimulator.js
View File

@@ -97,6 +97,17 @@ export default class PackSimulator extends React.Component {
else return "Rare";
};
const gendisp = (avg) => {
let min = parseInt(avg) - 10;
if (min < 0) min = 0;
return (Math.floor(Math.random() * 5)) * 5 + min;
}
const geneng = (avg) => {
let min = parseInt(avg) - 5;
if (min < 0) min = 0;
return (Math.floor(Math.random() * 3)) * 5 + min;
}
const gencard = (results) => {
let id = Math.floor(Math.random() * results.length);
let card = results[id];
@@ -111,7 +122,26 @@ export default class PackSimulator extends React.Component {
}
card_names.push(card.gsx$name);
cards.push(<div key={key++} className="card" style={{backgroundImage: `url("${API.base_image + (card.gsx$image||API.card_back)}")`}}></div>);
if (card.gsx$type != "Creatures") {
cards.push(<div key={key++} className="card" style={{backgroundImage: `url("${API.base_image + (card.gsx$image||API.card_back)}")`}}></div>);
}
else {
const courage = gendisp(card.gsx$courage);
const power = gendisp(card.gsx$power);
const wisdom = gendisp(card.gsx$wisdom);
const speed = gendisp(card.gsx$speed);
const energy = geneng(card.gsx$energy);
cards.push(<div key={key++} className="card" style={{backgroundImage: `url("${API.base_image + (card.gsx$image||API.card_back)}")`}}>
<div className="stats">
<span key="courage">{courage}</span>
<span key="power">{power}</span>
<span key="wisdom">{wisdom}</span>
<span key="speed">{speed}</span>
<span key="energy">{energy}</span>
</div>
</div>);
}
}
const genrarity = (rarity, num) => {

76
src/css/packs.css
View File

@@ -19,14 +19,14 @@
background-size: cover;
box-sizing: content-box;
margin: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
-webkit-border-radius: 5px;
-o-transition-property: width,height,-o-transform,background,font-size,opacity;
-o-transition-duration: 1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity;
transition-duration: 1s,1s,1s,1s,1s,1s;
-o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity,top,left;
transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
}
.card:hover {
@@ -38,3 +38,65 @@ input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
.stats {
height: 100%
width: 100%;
text-align: left;
}
.stats span {
position: relative;
color: black;
display: block;
left: 10px;
font-size: 12px;
}
.stats span:nth-of-type(1) {
top: 130px;
}
.stats span:nth-of-type(2) {
top: 128px;
}
.stats span:nth-of-type(3) {
top: 126px;
}
.stats span:nth-of-type(4) {
top: 124px;
}
/* Energy */
.stats span:nth-of-type(5) {
text-align: right;
top: 125px;
left: -11px;
font-size: 14px;
}
.card:hover .stats span {
left: 20px;
font-size: 14px;
font-weight: bold;
}
.card:hover .stats span:nth-of-type(1) {
top: 220px;
}
.card:hover .stats span:nth-of-type(2) {
top: 229px;
}
.card:hover .stats span:nth-of-type(3) {
top: 237px;
}
.card:hover .stats span:nth-of-type(4) {
top: 245px;
}
/* Energy */
.card:hover .stats span:nth-of-type(5) {
text-align: right;
top: 258px;
left: -21px;
font-size: 20px;
}