Card Display

Card.tsx

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>
}

Effect.tsx

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; 

Optional.tsx

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>
}

Requirements.tsx

interface Props{
    requirement : StatePiece
}

export default (props: Props)=>(
    <div class='inline'>
    <Arrow player={props.requirement.player}/> <Icon name={props.requirement.axis} />
    </div>
)