Card Display
interface Props { | |
card: Card | |
} | |
export default (props: Props)=>{ | |
const { name, optional, requirements, effects } = props.card; | |
return <div class='game-card text-center'> | |
<div class='title'>{name}</div> | |
<div class='card-section req'> | |
{requirements.map((req, i) => <span key={i}><Requirement requirement={req} /></span>)} | |
</div> | |
<div class='card-section'> | |
{optional.map((opt, i) => <span key={i}> <Optional {...opt} /> </span>)} | |
</div> | |
<div class='card-section effect'> | |
{effects.map((effect, i) => <span key={i}><Effect effect={effect} /></span>)} | |
</div> | |
</div> | |
} |
interface Props { | |
effect: Mechanic | |
} | |
const Effect = (props: Props) => { | |
return renderSwitch(props.effect) | |
} | |
const renderSwitch = (effect: Mechanic) => { | |
if (effect.mechanic === undefined) { | |
return renderEffect(effect); | |
} | |
switch (MechanicDisplay[effect.mechanic]) { | |
case DisplayEnum.EFF: | |
case DisplayEnum.REQ_EFF: | |
return renderMechanic(effect); | |
case DisplayEnum.NONE: | |
return renderNone(effect); | |
case DisplayEnum.AMOUNT: | |
case DisplayEnum.NAME: | |
case DisplayEnum.NORMAL: | |
return renderEffect(effect); | |
} | |
return null; | |
} | |
const renderNone = (mechanic: Mechanic) => ( | |
<div class='mechanic'> | |
<div><b>{mechanic.mechanic}</b></div> | |
</div> | |
) | |
const renderMechanic = (mechanic: Mechanic) => { | |
const {mechanicRequirements: reqs = [], mechanicEffects: effs = []} = mechanic; | |
return <div class='mechanic'> | |
<div><b>{mechanic.mechanic}</b></div> | |
<div class='h-divider'/> | |
<div> | |
<div>{reqs.map((req, i) => <span key={i}><Requirement requirement={req} /></span>)}</div> | |
<div>{effs.map((eff, i) => <span key={i}><Effect effect={eff} /></span>)}</div> | |
</div> | |
</div> | |
} | |
const renderEffect = (effect: Mechanic) => { | |
return <div class='inline'> | |
{effect.mechanic !== undefined && <b> {effect.mechanic} </b>} | |
<Arrow player={effect.player} /> <Icon name={effect.axis} /> <b>{effect.amount}</b> | |
</div> | |
} | |
export default Effect; |
export default (props: RequirementEffect)=>{ | |
return <div className="optional"> | |
<div> | |
{props.requirements.map((req, i)=> <span key={i}><Requirement requirement={req}/></span>)} | |
</div> | |
<div class='h-divider' /> | |
<div> | |
{props.effects.map((eff, i)=> <span key={i}><Effect effect={eff}/></span>)} | |
</div> | |
</div> | |
} |
interface Props{ | |
requirement : StatePiece | |
} | |
export default (props: Props)=>( | |
<div class='inline'> | |
<Arrow player={props.requirement.player}/> <Icon name={props.requirement.axis} /> | |
</div> | |
) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment