Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.