mnml/html-client/src/components/game.jsx

const preact = require('preact');
const key = require('keymaster');

const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];

function GamePanel(props) {
    const {
        game,
        activeSkill,
        activeIncoming,
        setActiveSkill,
        setActiveIncoming,
        selectSkillTarget,
        selectIncomingTarget,
        account,
    } = props;

    if (!game) return <div>...</div>;

    const otherTeams = game.teams.filter(t => t.id !== account.id);

    const playerTeam = game.teams.find(t => t.id === account.id);

    const incoming = game.stack.filter(s => s.target_team_id === playerTeam.id).map((inc) => {
        key.unbind('1');
        key('1', () => setActiveIncoming(inc.id));
        return (
            <div className="tile is-child" key={inc.id}>
                <div>{JSON.stringify(inc)}</div>
                <button
                    className="button is-dark is-fullwidth"
                    type="submit"
                    onClick={() => setActiveIncoming(inc.id)}>
                    (1) Block skill: {inc.skill}
                </button>
            </div>
        );
    });

    function PlayerCrypCard(cryp) {
        const skills = cryp.skills.map((skill, i) => {
            const hotkey = SKILL_HOT_KEYS[i];
            key.unbind(hotkey);
            key(hotkey, () => setActiveSkill(cryp.id, skill));

            return (
                <button
                    key={i}
                    className="button is-dark"
                    type="submit"
                    onClick={() => setActiveSkill(cryp.id, skill)}
                >
                    ({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
                </button>
            );
        });

        const effects = cryp.effects.map((effect, i) => (
            <div key={i}>{effect} for {effect.turns}T</div>
        ));

        return (
            <div
                key={cryp.id}
                style={ activeIncoming ? { cursor: 'pointer' } : {}}
                onClick={() => selectIncomingTarget(cryp.id)}
                className="tile is-vertical">
                <div className="tile is-child">
                    <div className="columns" >
                        <div className="column is-10">
                            <p className="title">{cryp.name}</p>
                        </div>
                        <div className="column">
                            <figure className="image">
                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
                            </figure>
                        </div>

                    </div>
                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.max} HP </div>
                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>

                </div>
                {effects}
                {skills}
            </div>
        );
    }

    function PlayerTeam(team) {
        const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));

        return (
            <div className="tile">
                {cryps}
            </div>
        );
    }

    function OpponentCrypCard(cryp) {
        const effects = cryp.effects.map((effect, i) => (
            <div key={i}>{effect.effect} for {effect.turns}T</div>
        ));

        return (
            <div className="tile"
                style={activeSkill ? { cursor: 'pointer' } : {}}
                onClick={() => selectSkillTarget(cryp.id)} >
                <div key={cryp.id} className="tile is-vertical">
                    <div className="tile is-child">
                        <div className="columns" >
                            <div className="column is-10">
                                <p className="title">{cryp.name}</p>
                            </div>
                            <div className="column">
                                <figure className="image">
                                    <svg width="40" height="40" data-jdenticon-value={cryp.name} />
                                </figure>
                            </div>

                        </div>
                        <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
                        <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>

                    </div>
                    {effects}
                </div>
            </div>
        );
    }

    function OpponentTeam(team) {
        const cryps = team.cryps.map(OpponentCrypCard);
        return (
            <div>
                {cryps}
            </div>
        );
    }

    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));

    return (
        <section>
            <div className="row">
                <div className="three columns">
                    {playerTeam.id}
                    {PlayerTeam(playerTeam, setActiveSkill)}
                </div>
                <div className="six columns" align="center">
                    Round X
                </div>
                <div className="three columns">
                    {otherTeams.id}
                    {otherTeams.map(OpponentTeam)}
                </div>
            </div>
            <div className="row">
            </div>
        </section>
    );
}

module.exports = GamePanel;