mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-08-22 00:24:40 -05:00
working on #27: extended view
This commit is contained in:
Daniel
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -26,17 +26,17 @@ export default class CardList extends React.Component {
|
||||
return cards.map((card, i) => {
|
||||
switch (card.gsx$type) {
|
||||
case "Attacks":
|
||||
return (<Attack attack={card} key={i} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Attack card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
case "Battlegear":
|
||||
return (<Battlegear battlegear={card} key={i} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Battlegear card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
case "Creatures":
|
||||
return (<Creature creature={card} key={i} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Creature card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
case "Locations":
|
||||
return (<Location location={card} key={i} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Location card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
case "Mugic":
|
||||
return (<Mugic mugic={card} key={i} setImage={this.setImage.bind(this)}/>);
|
||||
return (<Mugic card={card} key={i} ext={this.props.ext} setImage={this.setImage.bind(this)}/>);
|
||||
default:
|
||||
return (<div key={i}>Invalid Type</div>);
|
||||
return (<div key={i}>Invalid Card Type</div>);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ export default class Home extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="collection">
|
||||
<div className={"collection " + (this.ext ? "extended" : "short")}>
|
||||
<div className="left">
|
||||
<ImagePreview url={API.base_image + this.card_img} ref={n => {if (n) this.changeImage = n.getInstance().changeImage}} />
|
||||
<SearchForm handleContent={this.handleContent.bind(this)} {...this.props} />
|
||||
@@ -49,7 +49,7 @@ export default class Home extends React.Component {
|
||||
|
||||
extended() {
|
||||
return (
|
||||
<div className="extended">
|
||||
<div className="ext-button">
|
||||
<button onClick={(e) => this.ext = !this.ext}
|
||||
>{this.ext ? "Short Format" : "Extended Format"}</button>
|
||||
</div>
|
||||
@@ -60,12 +60,12 @@ export default class Home extends React.Component {
|
||||
let numpages = Math.ceil(this.content.length / this.n);
|
||||
|
||||
let next = () => {
|
||||
if (this.p < numpages) return(<button onClick={ () => {this.p++;} }>next</button>);
|
||||
if (this.p < numpages) return(<button onClick={ () => {this.p++; window.scrollTo(0, 0);} }>next</button>);
|
||||
else return(<button disabled>next</button>);
|
||||
}
|
||||
|
||||
let prev = () => {
|
||||
if (this.p > 1) return(<button onClick={ () => {this.p--;} }>prev</button>);
|
||||
if (this.p > 1) return(<button onClick={ () => {this.p--; window.scrollTo(0, 0);} }>prev</button>);
|
||||
else return(<button disabled>prev</button>);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,31 +9,42 @@ import {Rarity, Unique, Name, Element, Ability} from '../../Snippets';
|
||||
export default class Attack extends React.Component {
|
||||
|
||||
render() {
|
||||
let attack = this.props.attack;
|
||||
let card = this.props.card;
|
||||
|
||||
return(
|
||||
<div className="card">
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (attack.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(attack.gsx$image)} />
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card attack">
|
||||
<img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={attack.gsx$name} /><br />
|
||||
<Rarity set={attack.gsx$set} rarity={attack.gsx$rarity} /><br />
|
||||
<span>Build Points: {attack.gsx$bp}</span><br />
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
|
||||
<span>Build Points: {card.gsx$bp}</span><br />
|
||||
<div>
|
||||
<span className="bigger">{attack.gsx$base}</span> |
|
||||
<Element element="fire" value={attack.gsx$fire} />{attack.gsx$fire}
|
||||
<Element element="air" value={attack.gsx$air} />{attack.gsx$air}
|
||||
<Element element="earth" value={attack.gsx$earth} />{attack.gsx$earth}
|
||||
<Element element="water" value={attack.gsx$water} />{attack.gsx$water}
|
||||
<span className="bigger">{card.gsx$base}</span> |
|
||||
<Element element="fire" value={card.gsx$fire} />{card.gsx$fire}
|
||||
<Element element="air" value={card.gsx$air} />{card.gsx$air}
|
||||
<Element element="earth" value={card.gsx$earth} />{card.gsx$earth}
|
||||
<Element element="water" value={card.gsx$water} />{card.gsx$water}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div className="right" >
|
||||
<Ability ability={attack.gsx$ability} />
|
||||
<Unique data={{unique: attack.gsx$unique, loyal: attack.gsx$loyal, legendary: attack.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{attack.gsx$flavortext}</span>
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
else return (
|
||||
<div className="card attack">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
<div className="right">
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,19 +10,30 @@ import {Rarity, Unique, Name, Ability} from '../../Snippets';
|
||||
export default class Battlegear extends React.Component {
|
||||
|
||||
render() {
|
||||
let battlegear = this.props.battlegear;
|
||||
let card = this.props.card;
|
||||
|
||||
return(
|
||||
<div className="card">
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (battlegear.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(battlegear.gsx$image)} />
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card battlegear">
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={battlegear.gsx$name} /><br />
|
||||
<Rarity set={battlegear.gsx$set} rarity={battlegear.gsx$rarity} /><br />
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
|
||||
</div>
|
||||
<div className="right" >
|
||||
<Ability ability={battlegear.gsx$ability} />
|
||||
<Unique data={{unique: battlegear.gsx$unique, loyal: battlegear.gsx$loyal, legendary: battlegear.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{battlegear.gsx$flavortext}</span>
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
else return (
|
||||
<div className="card battlegear">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
<div className="right" >
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,49 +10,71 @@ import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '
|
||||
export default class Creature extends React.Component {
|
||||
|
||||
render() {
|
||||
let creature = this.props.creature;
|
||||
let card = this.props.card;
|
||||
|
||||
let mugic = [];
|
||||
for (let i = 0; i < creature.gsx$mugicability; i++) {
|
||||
mugic.push(<Mugic key={i} tribe={creature.gsx$tribe} />);
|
||||
for (let i = 0; i < card.gsx$mugicability; i++) {
|
||||
mugic.push(<Mugic key={i} tribe={card.gsx$tribe} />);
|
||||
}
|
||||
|
||||
return(
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card creature">
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(creature.gsx$image)} />
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={creature.gsx$name} /><br />
|
||||
<Rarity set={creature.gsx$set} rarity={creature.gsx$rarity} /><br />
|
||||
<span><Tribe tribe={creature.gsx$tribe} /> {creature.gsx$tribe} {creature.gsx$types}</span><br />
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
|
||||
<span><Tribe tribe={card.gsx$tribe} /> {card.gsx$tribe} {card.gsx$types}</span><br />
|
||||
<div>
|
||||
<Element element="fire" value={creature.gsx$elements.toLowerCase().indexOf("fire") >=0} />
|
||||
<Element element="air" value={creature.gsx$elements.toLowerCase().indexOf("air") >=0} />
|
||||
<Element element="earth" value={creature.gsx$elements.toLowerCase().indexOf("earth") >=0} />
|
||||
<Element element="water" value={creature.gsx$elements.toLowerCase().indexOf("water") >=0} />
|
||||
<Element element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />
|
||||
<Element element="air" value={card.gsx$elements.toLowerCase().indexOf("air") >=0} />
|
||||
<Element element="earth" value={card.gsx$elements.toLowerCase().indexOf("earth") >=0} />
|
||||
<Element element="water" value={card.gsx$elements.toLowerCase().indexOf("water") >=0} />
|
||||
</div>
|
||||
<span>{mugic}</span>
|
||||
</div>
|
||||
<br />
|
||||
<div className="right" >
|
||||
<Ability ability={creature.gsx$ability} tribe={creature.gsx$tribe} />
|
||||
<Ability type="brainwashed" tribe={creature.gsx$tribe} ability={creature.gsx$brainwashed} />
|
||||
<Unique data={{unique: creature.gsx$unique, loyal: creature.gsx$loyal, legendary: creature.gsx$legendary, tribe: creature.gsx$tribe}} />
|
||||
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
|
||||
<Ability type="brainwashed" tribe={card.gsx$tribe} ability={card.gsx$brainwashed} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary, tribe: card.gsx$tribe}} />
|
||||
{/*chieftain*/
|
||||
creature.gsx$types.includes("Chieftain") &&
|
||||
card.gsx$types.includes("Chieftain") &&
|
||||
<span className="chieftain">(Minions use Brainwashed text. Minions may only play Generic Mugic.)<br /></span>
|
||||
}
|
||||
<span className="flavortext">{creature.gsx$flavortext}</span>
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
<br />
|
||||
<div className="stats">
|
||||
<span>{creature.gsx$courage} <img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />
|
||||
<span>{creature.gsx$power} <img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span><br />
|
||||
<span>{creature.gsx$wisdom} <img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span><br />
|
||||
<span>{creature.gsx$speed} <img className="icon16" src={"/src/img/icons/disciplines/speed.png"}></img></span><br />
|
||||
<span style={{fontWeight: 'bold'}}>{creature.gsx$energy}</span>
|
||||
<span>{card.gsx$courage} <img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />
|
||||
<span>{card.gsx$power} <img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span><br />
|
||||
<span>{card.gsx$wisdom} <img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span><br />
|
||||
<span>{card.gsx$speed} <img className="icon16" src={"/src/img/icons/disciplines/speed.png"}></img></span><br />
|
||||
<span style={{fontWeight: 'bold'}}>{card.gsx$energy}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
else return (
|
||||
<div className="card creature">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
<div className="right" >
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<span>{card.gsx$courage} <img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span>
|
||||
<span>{card.gsx$power} <img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span>
|
||||
<span>{card.gsx$wisdom} <img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span>
|
||||
<span>{card.gsx$speed} <img className="icon16" src={"/src/img/icons/disciplines/speed.png"}></img></span>
|
||||
<span style={{fontWeight: 'bold'}}>{card.gsx$energy}</span>
|
||||
<br />
|
||||
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
|
||||
<Ability type="brainwashed" tribe={card.gsx$tribe} ability={card.gsx$brainwashed} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary, tribe: card.gsx$tribe}} />
|
||||
{/*chieftain*/
|
||||
card.gsx$types.includes("Chieftain") &&
|
||||
<span className="chieftain">(Minions use Brainwashed text. Minions may only play Generic Mugic.)<br /></span>
|
||||
}
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,20 +10,31 @@ import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
|
||||
export default class Location extends React.Component {
|
||||
|
||||
render() {
|
||||
let location = this.props.location;
|
||||
let card = this.props.card;
|
||||
|
||||
return(
|
||||
<div className="card">
|
||||
<img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (location.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(location.gsx$image)} />
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card location">
|
||||
<img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={location.gsx$name} /><br />
|
||||
<Rarity set={location.gsx$set} rarity={location.gsx$rarity} /><br />
|
||||
<Initiative initiative={location.gsx$initiative} /><br />
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
|
||||
<Initiative initiative={card.gsx$initiative} /><br />
|
||||
</div>
|
||||
<div className="right">
|
||||
<Ability ability={location.gsx$ability} />
|
||||
<Unique data={{unique: location.gsx$unique, loyal: location.gsx$loyal, legendary: location.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{location.gsx$flavortext}</span>
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
else return (
|
||||
<div className="card location">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
<div className="right">
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,35 +10,46 @@ import {Rarity, Unique, Name, Mugic, Ability} from '../../Snippets';
|
||||
export default class Attack extends React.Component {
|
||||
|
||||
render() {
|
||||
let mugic = this.props.mugic;
|
||||
let card = this.props.card;
|
||||
|
||||
let mugicCounters = [];
|
||||
if (mugic.gsx$cost == 0) {
|
||||
if (card.gsx$cost == 0) {
|
||||
mugicCounters.push(<span key={0}>0</span>);
|
||||
}
|
||||
else if (mugic.gsx$cost.toLowerCase() == 'x') {
|
||||
else if (card.gsx$cost.toLowerCase() == 'x') {
|
||||
mugicCounters.push(<span key={0}>X</span>);
|
||||
}
|
||||
else {
|
||||
for (let i = 0; i < mugic.gsx$cost; i++) {
|
||||
mugicCounters.push(<Mugic tribe={mugic.gsx$tribe} key={i} />);
|
||||
for (let i = 0; i < card.gsx$cost; i++) {
|
||||
mugicCounters.push(<Mugic tribe={card.gsx$tribe} key={i} />);
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="card">
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (mugic.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(mugic.gsx$image)} />
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card mugic">
|
||||
<img className="thumb" style={{float: 'left'}} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={mugic.gsx$name} /><br />
|
||||
<Rarity set={mugic.gsx$set} rarity={mugic.gsx$rarity} /> <br />
|
||||
<img height="20" className="icon16" src={"/src/img/icons/tribes/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} /> {mugic.gsx$tribe}<br />
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /> <br />
|
||||
<img height="20" className="icon16" src={"/src/img/icons/tribes/"+(card.gsx$tribe.toLowerCase()||"generic")+".png"} /> {card.gsx$tribe}<br />
|
||||
<span>{mugicCounters}</span><br />
|
||||
</div>
|
||||
<br />
|
||||
<div className="right" >
|
||||
<Ability ability={mugic.gsx$ability} tribe={mugic.gsx$tribe} />
|
||||
<Unique data={{unique: mugic.gsx$unique, loyal: mugic.gsx$loyal, legendary: mugic.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{mugic.gsx$flavortext}</span>
|
||||
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
else return (
|
||||
<div className="card mugic">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
<div className="right" >
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} /><br />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -103,6 +103,10 @@
|
||||
height: 98px;
|
||||
}
|
||||
|
||||
.card .thumb {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.Collapsible {
|
||||
margin-bottom: 10px;
|
||||
width: 250px;
|
||||
@@ -171,9 +175,15 @@
|
||||
.list-nav-top {
|
||||
display: flex;
|
||||
|
||||
.extended {
|
||||
.ext-button {
|
||||
float: right;
|
||||
margin: auto 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.extended {
|
||||
.fullcard {
|
||||
max-width: 250px;
|
||||
max-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user