mnml/client/src/components/game.component.jsx

const preact = require('preact');
const range = require('lodash/range');

const molecule = require('./molecule');

const { STATS, eventClasses, getCombatText } = require('../utils');

const GameCryp = require('./game.cryp');
const SkillBtn = require('./skill.btn');

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

function GamePanel(props) {
    const {
        game,
        resolution,
        activeSkill,
        setActiveSkill,
        setActiveCryp,
        selectSkillTarget,
        sendInstanceState,
        activeCryp,
        account,
        showLog,
        toggleLog,
        quit,
    } = props;

    if (!game) return <div>...</div>;
    if (showLog) {
        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
        return (
            <main className="game">
                <div className="instance-hdr">
                    <button
                        className="game-back-btn instance-btn instance-ui-btn left"
                        onClick={() => toggleLog(!showLog)}>
                        Game
                    </button>
                    <div className="spacer">
                        <div>&nbsp;</div>
                    </div>
                </div>
                <div className="logs">
                    {logs}
                </div>
            </main>
        );
    }

    function backClick() {
        quit();
        return sendInstanceState(game.instance);
    }

    const header = (
        <div className="instance-hdr">
            <button
                className="game-back-btn instance-btn instance-ui-btn left"
                disabled={game.phase !== 'Finish'}
                onClick={backClick}>
                Back
            </button>
            <div className="spacer">
                <div>&nbsp;</div>
            </div>
            <button
                className="game-back-btn instance-btn instance-ui-btn left"
                onClick={() => toggleLog(!showLog)}>
                Log
            </button>
        </div>
    );

    function findCryp(id) {
        const team = game.players.find(t => t.cryps.find(c => c.id === id));
        if (team) return team.cryps.find(c => c.id === id);
        return null;
    }

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

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

    function stackElement(c, i) {
        let skills = game.stack.filter(s => s.source_cryp_id === c.id).map((s, j) => {
            const target = findCryp(s.target_cryp_id);
            return (
                <div key={j}>{s.skill} -> {target.name}</div>
            );
        });

        if (!skills.length) skills = (<div>&nbsp;</div>);

        const effects = c.effects.map((e, j) => <div key={j}>{e.effect} - {e.duration}T</div>);

        return (
            <div
                key={i}
                className="stack-line">
                {effects}
                {skills}
            </div>
        );
    }

    function PlayerTeam(team) {
        const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);

        return (
            <div className="team-player cryp-list">
                {cryps}
            </div>
        );
    }

    function OpponentCryp(cryp, i) {
        const ko = cryp.green_life.value === 0 ? 'ko' : '';
        const classes = eventClasses(resolution, cryp);

        const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
            <figure key={j} alt={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
            </figure>
        ));

        const combatText = getCombatText(cryp, resolution);

        return (
            <div
                key={i}
                className={`cryp-box ${ko} ${classes}`}
                style={ activeSkill ? { cursor: 'pointer' } : {}}
                onClick={() => selectSkillTarget(cryp.id)} >
                <div className="cryp-box-top">
                    <figure className="img">
                        {molecule(combatText)}
                        <figcaption>{cryp.name}</figcaption>
                    </figure>
                </div>
                <div className="stats">
                    {stats}
                </div>
            </div>
        );
    }


    function OpponentTeam(team) {
        const cryps = team.cryps.map(OpponentCryp);
        return (
            <div className="cryp-list" >
                {cryps}
            </div>
        );
    }

    const selectedSkills = resolution
        ? <div>&nbsp;</div>
        : playerTeam.cryps.map((c, i) => stackElement(c, i));

    const mobileSkills = activeCryp && activeCryp.green_life.value
        ? range(0, 3).map(i => <SkillBtn key={i} cryp={activeCryp} i={i} mobile={true} />)
        : (<div/>);

    return (
        <main className="game" onClick={() => setActiveCryp(null)} >
            {header}
            {PlayerTeam(playerTeam, setActiveSkill)}
            <div className="mobile-skills">
                {mobileSkills}
            </div>
            <div className="selected-skills">
                {selectedSkills}
            </div>
            <div className="team-opponent cryp-list">
                {otherTeams.map(OpponentTeam)}
            </div>
        </main>
    );
}

module.exports = GamePanel;