mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-21 17:24:14 -05:00
collection now displays stats on cards; min/max toggle
This commit is contained in:
Daniel
parent
bc3cb96ee7
commit
5fdfa53628
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
66
package-lock.json
generated
66
package-lock.json
generated
|
|
@ -3180,25 +3180,25 @@
|
|||
"dev": true
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.9.53",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.53.tgz",
|
||||
"integrity": "sha512-4nW60Sd4L7+WMXH1D6jCdVftuW7j4Za6zdp6tJ33Rqv0nk1ZAmQKML9ZLD4H0dehA3FZxXR/GM8gXplf82oNGw==",
|
||||
"version": "16.9.55",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.55.tgz",
|
||||
"integrity": "sha512-6KLe6lkILeRwyyy7yG9rULKJ0sXplUsl98MGoCfpteXf9sPWFWWMknDcsvubcpaTdBuxtsLF6HDUwdApZL/xIg==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
|
||||
"integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.4.tgz",
|
||||
"integrity": "sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"version": "16.9.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
|
||||
"integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
|
||||
"version": "16.9.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.9.tgz",
|
||||
"integrity": "sha512-jE16FNWO3Logq/Lf+yvEAjKzhpST/Eac8EMd1i4dgZdMczfgqC8EjpxwNgEe3SExHYLliabXDh9DEhhqnlXJhg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
|
|
@ -9266,9 +9266,9 @@
|
|||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.1.2.tgz",
|
||||
"integrity": "sha512-tIq578wiGzmo9Ll+JOgHPssV4eoMDTcj3MKkjPbzgooaakMklViJG1qbT0zcwoogUKKliFy/kKjUJaFb4DBHxQ==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.2.1.tgz",
|
||||
"integrity": "sha512-G3yw7/TQaPfkuiR73MDcyiqhyP8SnbmLhUbpC76H+wtQxA6wfKhMCQOCb6wnPK0dQbjORAeOILQqEesg4/wF7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0",
|
||||
|
|
@ -10538,9 +10538,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.3.tgz",
|
||||
"integrity": "sha512-AKsHGqd7HmXmL/EgyAjI4Gx719A5yQdt9HzyXrI8M/hzxfumecYS95kfvIt40UZqPVNoEt0Va1M3PG54XtNPbg==",
|
||||
"version": "8.1.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.4.tgz",
|
||||
"integrity": "sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"colorette": "^1.2.1",
|
||||
|
|
@ -10550,9 +10550,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"nanoid": {
|
||||
"version": "3.1.15",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.15.tgz",
|
||||
"integrity": "sha512-n8rXUZ8UU3lV6+43atPrSizqzh25n1/f00Wx1sCiE7R1sSHytZLTTiQl8DjC4IDLOnEZDlgJhy0yO4VsIpMxow==",
|
||||
"version": "3.1.16",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
|
||||
"integrity": "sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
|
|
@ -13830,9 +13830,9 @@
|
|||
}
|
||||
},
|
||||
"terser-webpack-plugin": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.0.1.tgz",
|
||||
"integrity": "sha512-EwUe+XDTFf/2cAlmAlZZ7vRpNKMZUAypX2kIRm0Fmjlz4l7SqbI/VabmgiesNZW2nq/LR0N7ku/wlTQ6ygen0w==",
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.0.3.tgz",
|
||||
"integrity": "sha512-zFdGk8Lh9ZJGPxxPE6jwysOlATWB8GMW8HcfGULWA/nPal+3VdATflQvSBSLQJRCmYZnfFJl6vkRTiwJGNgPiQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"jest-worker": "^26.6.1",
|
||||
|
|
@ -14105,9 +14105,9 @@
|
|||
}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
|
||||
"integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==",
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz",
|
||||
"integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"typical": {
|
||||
|
|
@ -14443,9 +14443,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"webpack": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.2.0.tgz",
|
||||
"integrity": "sha512-evtOjOJQq3zaHJIWsJjM4TGtNHtSrNVAIyQ+tdPW/fRd+4PLGbUG6S3xt+N4+QwDBOaCVd0xCWiHd4R6lWO5DQ==",
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.3.1.tgz",
|
||||
"integrity": "sha512-pQfG9Mjyis1HkHb5gpXYF+ymjnuq7/7ssE+m1VdiyulwmCpxjXDPNcNXyObb7vGBZ4vEXnsjPCXUYSQLf1TJAQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/eslint-scope": "^3.7.0",
|
||||
|
|
@ -14457,7 +14457,7 @@
|
|||
"acorn": "^8.0.4",
|
||||
"browserslist": "^4.14.5",
|
||||
"chrome-trace-event": "^1.0.2",
|
||||
"enhanced-resolve": "^5.3.0",
|
||||
"enhanced-resolve": "^5.3.1",
|
||||
"eslint-scope": "^5.1.1",
|
||||
"events": "^3.2.0",
|
||||
"glob-to-regexp": "^0.4.1",
|
||||
|
|
@ -14469,9 +14469,9 @@
|
|||
"pkg-dir": "^4.2.0",
|
||||
"schema-utils": "^3.0.0",
|
||||
"tapable": "^2.0.0",
|
||||
"terser-webpack-plugin": "^5.0.0",
|
||||
"terser-webpack-plugin": "^5.0.3",
|
||||
"watchpack": "^2.0.0",
|
||||
"webpack-sources": "^2.0.1"
|
||||
"webpack-sources": "^2.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"acorn": {
|
||||
|
|
@ -14578,9 +14578,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"webpack-sources": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.0.1.tgz",
|
||||
"integrity": "sha512-A9oYz7ANQBK5EN19rUXbvNgfdfZf5U2gP0769OXsj9CvYkCR6OHOsd6OKyEy4H38GGxpsQPKIL83NC64QY6Xmw==",
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.2.0.tgz",
|
||||
"integrity": "sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"source-list-map": "^2.0.1",
|
||||
|
|
|
|||
14
package.json
14
package.json
|
|
@ -57,8 +57,8 @@
|
|||
"@babel/runtime": "^7.12.1",
|
||||
"@types/chai": "^4.2.14",
|
||||
"@types/mocha": "^8.0.3",
|
||||
"@types/react": "^16.9.53",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/react": "^16.9.55",
|
||||
"@types/react-dom": "^16.9.9",
|
||||
"@types/react-router-dom": "^5.1.6",
|
||||
"@typescript-eslint/eslint-plugin": "^3.3.0",
|
||||
"@typescript-eslint/parser": "^3.3.0",
|
||||
|
|
@ -77,16 +77,16 @@
|
|||
"ignore-styles": "^5.0.1",
|
||||
"jsdom": "^16.4.0",
|
||||
"jsdom-global": "^3.0.2",
|
||||
"mini-css-extract-plugin": "^1.1.2",
|
||||
"mini-css-extract-plugin": "^1.2.1",
|
||||
"mocha": "^8.2.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"postcss": "^8.1.3",
|
||||
"postcss": "^8.1.4",
|
||||
"sass-loader": "^10.0.4",
|
||||
"style-loader": "^2.0.0",
|
||||
"terser-webpack-plugin": "^5.0.1",
|
||||
"terser-webpack-plugin": "^5.0.3",
|
||||
"ts-node": "^9.0.0",
|
||||
"typescript": "^4.0.3",
|
||||
"webpack": "^5.2.0",
|
||||
"typescript": "^4.0.5",
|
||||
"webpack": "^5.3.1",
|
||||
"webpack-cli": "^4.1.0",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default class CardList extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { cards } = this.props;
|
||||
const { cards, ext, stats } = this.props;
|
||||
|
||||
if (cards.length == 1 && cards[0].text) {
|
||||
return (
|
||||
|
|
@ -26,15 +26,15 @@ export default class CardList extends React.Component {
|
|||
return cards.map((card, i) => {
|
||||
switch (card.gsx$type) {
|
||||
case "Attacks":
|
||||
return (<Attack card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Attack card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
|
||||
case "Battlegear":
|
||||
return (<Battlegear card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Battlegear card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
|
||||
case "Creatures":
|
||||
return (<Creature card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Creature card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
|
||||
case "Locations":
|
||||
return (<Location card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Location card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
|
||||
case "Mugic":
|
||||
return (<Mugic card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Mugic card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
|
||||
default:
|
||||
return (<div key={i}>Invalid Card Type</div>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,10 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
.ext-button,
|
||||
.next-button,
|
||||
.prev-button,
|
||||
.stats-button {
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
|
|
@ -364,6 +367,64 @@
|
|||
}
|
||||
}
|
||||
|
||||
.creature .fullcard {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.image-cover {
|
||||
width: 250px;
|
||||
height: 350px;
|
||||
background-size: cover;
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
top: -350px;
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
color: black;
|
||||
display: block;
|
||||
left: 28px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
&.long {
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-of-type(1) {
|
||||
top: 220px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
top: 229px;
|
||||
}
|
||||
span:nth-of-type(3) {
|
||||
top: 237px;
|
||||
}
|
||||
span:nth-of-type(4) {
|
||||
top: 245px;
|
||||
}
|
||||
span:nth-of-type(5) {
|
||||
text-align: right;
|
||||
top: 256px;
|
||||
left: -17px;
|
||||
font-size: 21px;
|
||||
|
||||
&.long {
|
||||
left: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location .fullcard {
|
||||
width: 350px;
|
||||
height: 250px;
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ export default class Home extends React.Component {
|
|||
@observable n = 10;
|
||||
@observable p = 1;
|
||||
@observable ext = false;
|
||||
@observable stats = "avg";
|
||||
@observable content = [];
|
||||
@observable card_img = API.card_back;
|
||||
@observable fixedStyles;
|
||||
|
|
@ -46,8 +47,13 @@ export default class Home extends React.Component {
|
|||
constructor() {
|
||||
super();
|
||||
const ext = localStorage.getItem("extended");
|
||||
if (ext == null) this.ext = false;
|
||||
this.ext = (/true/i).test(ext);
|
||||
if (ext != null) this.ext = (/true/i).test(ext);
|
||||
|
||||
const stats = localStorage.getItem("stats");
|
||||
if (stats != null) {
|
||||
if (stats == "min") this.stats = "min";
|
||||
if (stats == "max") this.stats = "max";
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -75,6 +81,13 @@ export default class Home extends React.Component {
|
|||
localStorage.setItem("extended", this.ext);
|
||||
}
|
||||
|
||||
setStats() {
|
||||
if (this.stats == "min") this.stats = "avg";
|
||||
else if (this.stats == "avg") this.stats = "max";
|
||||
else if (this.stats == "max") this.stats = "min";
|
||||
localStorage.setItem("stats", this.stats);
|
||||
}
|
||||
|
||||
handleScroll = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -138,10 +151,17 @@ export default class Home extends React.Component {
|
|||
<div className="right">
|
||||
<div className="list-nav-top">
|
||||
{this.navigation()}
|
||||
{this.extended()}
|
||||
<button className="stats-button" onClick={this.setStats.bind(this)}>
|
||||
{this.stats == "min" && "Min Stats"}
|
||||
{this.stats == "avg" && "Average Stats"}
|
||||
{this.stats == "max" && "Max Stats"}
|
||||
</button>
|
||||
<button className="ext-button" onClick={this.setExt.bind(this)}>
|
||||
{this.ext ? "Extended Format" : "Short Format"}
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
<CardList ext={this.ext} cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage.bind(this)}/>
|
||||
<CardList ext={this.ext} stats={this.stats} cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage.bind(this)}/>
|
||||
<br />
|
||||
{this.navigation()}
|
||||
</div>
|
||||
|
|
@ -149,26 +169,17 @@ export default class Home extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
extended() {
|
||||
return (
|
||||
<div className="ext-button">
|
||||
<button id="buttons" onClick={this.setExt.bind(this)}
|
||||
>{this.ext ? "Short Format" : "Extended Format"}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
navigation() {
|
||||
const numpages = Math.ceil(this.content.length / this.n);
|
||||
|
||||
const next = () => {
|
||||
if (this.p < numpages) return (<button id="buttons" onClick={ () => {this.p++; window.scrollTo(0, 0)} }>next</button>);
|
||||
else return (<button id="buttons" disabled>next</button>);
|
||||
if (this.p < numpages) return (<button className="next-button" onClick={ () => {this.p++; window.scrollTo(0, 0)} }>next</button>);
|
||||
else return (<button className="next-button" disabled>next</button>);
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
if (this.p > 1) return (<button id="buttons" onClick={ () => {this.p--; window.scrollTo(0, 0)} }>prev</button>);
|
||||
else return (<button id="buttons" disabled>prev</button>);
|
||||
if (this.p > 1) return (<button className="prev-button" onClick={ () => {this.p--; window.scrollTo(0, 0)} }>prev</button>);
|
||||
else return (<button className="prev-button" disabled>prev</button>);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe } from
|
|||
export default class Creature extends React.Component {
|
||||
|
||||
render() {
|
||||
const { card } = this.props;
|
||||
const { card, stats } = this.props;
|
||||
|
||||
const mugic = [];
|
||||
for (let i = 0; i < card.gsx$mugicability; i++) {
|
||||
|
|
@ -29,6 +29,18 @@ export default class Creature extends React.Component {
|
|||
return <span><Tribe tribe={tribe} />{line}</span>;
|
||||
};
|
||||
|
||||
const stat_range = (stat) => {
|
||||
if (stats == "min") return Number(stat) - 10;
|
||||
if (stats == "max") return Number(stat) + 10;
|
||||
return Number(stat);
|
||||
};
|
||||
|
||||
const energy_range = (energy) => {
|
||||
if (stats == "min") return Number(energy) - 5;
|
||||
if (stats == "max") return Number(energy) + 5;
|
||||
return Number(energy);
|
||||
};
|
||||
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card creature">
|
||||
<img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
|
||||
|
|
@ -63,32 +75,44 @@ export default class Creature extends React.Component {
|
|||
<br />
|
||||
<div className="stats">
|
||||
<div className="energy">
|
||||
{card.gsx$courage}<Discipline discipline="courage" />
|
||||
{stat_range(card.gsx$courage)}<Discipline discipline="courage" />
|
||||
</div>
|
||||
<div className="energy">
|
||||
{card.gsx$power}<Discipline discipline="power" />
|
||||
{stat_range(card.gsx$power)}<Discipline discipline="power" />
|
||||
</div>
|
||||
<div className="energy">
|
||||
{card.gsx$wisdom}<Discipline discipline="wisdom" />
|
||||
{stat_range(card.gsx$wisdom)}<Discipline discipline="wisdom" />
|
||||
</div>
|
||||
<div className="energy">
|
||||
{card.gsx$speed}<Discipline discipline="speed" />
|
||||
{stat_range(card.gsx$speed)}<Discipline discipline="speed" />
|
||||
</div>
|
||||
<div className="energy" style={{ fontWeight: 'bold' }}>{card.gsx$energy}
|
||||
<div className="energy" style={{ fontWeight: 'bold' }}>{energy_range(card.gsx$energy)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
else return (
|
||||
<div className="card creature">
|
||||
<div className="fullcard"><img src={API.cardImage(card)} /></div>
|
||||
<div className="fullcard">
|
||||
{/* style={{ backgroundImage: `url("${API.cardImage(card)}")` }} */}
|
||||
<img src={API.cardImage(card)} />
|
||||
<div className="image-cover" >
|
||||
<div>
|
||||
<span key="courage" {...(stat_range(card.gsx$courage) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$courage)}</span>
|
||||
<span key="power" {...(stat_range(card.gsx$power) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$power)}</span>
|
||||
<span key="wisdom" {...(stat_range(card.gsx$wisdom) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$wisdom)}</span>
|
||||
<span key="speed" {...(stat_range(card.gsx$speed) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$speed)}</span>
|
||||
<span key="energy" {...(stat_range(card.gsx$energy) >= 100 ? { className: "long" } : null)}>{energy_range(card.gsx$energy)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right" >
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<span>{card.gsx$courage} <Discipline discipline="courage" /></span>
|
||||
<span>{card.gsx$power} <Discipline discipline="power" /></span>
|
||||
<span>{card.gsx$wisdom} <Discipline discipline="wisdom" /></span>
|
||||
<span>{card.gsx$speed} <Discipline discipline="speed" /></span>
|
||||
<span style={{ fontWeight: 'bold' }}>{card.gsx$energy}</span>
|
||||
<span>{stat_range(card.gsx$courage)} <Discipline discipline="courage" /></span>
|
||||
<span>{stat_range(card.gsx$power)} <Discipline discipline="power" /></span>
|
||||
<span>{stat_range(card.gsx$wisdom)} <Discipline discipline="wisdom" /></span>
|
||||
<span>{stat_range(card.gsx$speed)} <Discipline discipline="speed" /></span>
|
||||
<span style={{ fontWeight: 'bold' }}>{energy_range(card.gsx$energy)}</span>
|
||||
<br />
|
||||
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
|
||||
{ card.gsx$brainwashed && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user