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

const preact = require('preact');
const key = require('keymaster');
const range = require('lodash/range');
const molecule = require('./molecule');
const saw = require('./saw.component');

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

function GamePanel(props) {
    const {
        game,
        activeSkill,
        activeIncoming,
        setActiveSkill,
        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);

    function Cryp(cryp) {
        const skills = range(0, 4).map((i) => {
            const s = cryp.skills[i]
                ? cryp.skills[i].skill
                : (<span>&nbsp;</span>);

            return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
        });

        const stats = [
            { stat: 'hp', colour: '#1FF01F' },
            { stat: 'red_shield', colour: '#a52a2a' },
            { stat: 'blue_shield', colour: '#3498db' },
        ].map((s, i) => (
            <figure key={i} alt={s.stat}>
                {saw(s.colour)}
                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
            </figure>
        ));

        return (
            <div className="cryp-box">
                <figure className="img">
                    {molecule}
                </figure>
                <div className="skills">
                    {skills}
                </div>
                <div className="stats">
                    {stats}
                </div>
            </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">
                {Cryp(cryp, setActiveSkill)}
            </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;