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

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

const { ITEMS: { SPECS: SPEC_CONSTANT }, INFO } = require('./../constants');
const { COLOUR_ICONS, convertItem } = require('../utils');

function Info(args) {
    const {
        info,
        itemInfo,

        combiner,
        instance,
        player,
    } = args;

    function Info() {
        if (!info) return false;
        const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
        if (!fullInfo) return false;
        const isSkill = fullInfo.skill;
        const isSpec = fullInfo.spec;

        let red = 0;
        let blue = 0;
        let green = 0;
        player.cryps.forEach(cryp => {
            red += cryp.colours.red;
            blue += cryp.colours.blue;
            green += cryp.colours.green;
        });
        const teamColours = { red, blue, green };

        if (isSkill) {
            return (
                <div className="info-skill">
                    <h2>{fullInfo.item}</h2>
                    <div>{fullInfo.description}</div>
                </div>
            );
        }

        if (isSpec) {
            const breaks = SPEC_CONSTANT[info].thresholds;
            const colourReqs = SPEC_CONSTANT[info].colours || [];

            const thresholdEl = colourReqs.map((c, i) => {
                const numIcons = Math.max(...breaks);
                const dots = range(0, numIcons).map(j => {
                    const unmet = teamColours[c] < j + 1;
                    const caption = breaks.includes(j + 1)
                        ? '+ x'
                        : '';

                    const reqClass = unmet
                        ? 'unmet'
                        : '';

                    return (
                        <figure key={j} alt={c.colour} className={reqClass} >
                            {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
                            <figcaption>{caption}</figcaption>
                        </figure>
                    );
                });

                return (
                    <div key={i} className="spec-goals">
                        {dots}
                    </div>
                );
            });

            return (
                <div className="info-spec">
                    <div>{info}</div>
                    <div>{fullInfo.description}</div>
                    <div className="thresholds">
                        {thresholdEl}
                    </div>
                </div>
            );
        }

        return (
            <div className="info-item">
                <h2>{fullInfo.item}</h2>
                <div>{fullInfo.description}</div>
            </div>
        );
    }

    function playerRound(id) {
        if (!instance.rounds.length) return null;
        return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
    }

    function playerText(p) {
        const round = playerRound(p.id);
        if (!round) {
            return p.ready
                ? 'ready'
                : '';
        }

        if (round.finished) return 'finished';
        if (round.game_id) return 'in game';

        return p.ready
            ? 'ready'
            : '';
    }

    function ScoreBoard() {
        if (info[0]) return null;

        const players = instance.players.map((p, i) => {
            const pText = playerText(p);
            return (
                <tr key={i}
                    className={p.ready ? 'ready' : ''}>
                    <td>{p.name}</td>
                    <td>{p.score.wins} / {p.score.losses}</td>
                    <td>{pText}</td>
                </tr>
            );
        });

        return (
            <table>
                <tbody>
                    {players}
                </tbody>
            </table>
        );
    }

    function Combos() {
        if (info) return false;
        if (!player) return false;

        if (!(combiner.every(u => u === null))) {
            const filteredCombos = itemInfo.combos
                .filter(combo => combiner.every(u => u === null
                    || combo.units.includes(player.vbox.bound[u])));
            if (filteredCombos.length > 6) return false;
            return (
                <table>
                    <tbody>
                        {filteredCombos.map((c, i) =>
                            <tr key={i} >
                                <td className="highlight" >{convertItem(c.item)}</td>
                                {c.units.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
                            </tr>
                        )}
                    </tbody>
                </table>
            );
        }
        const vboxCombos = itemInfo.combos.filter(c => c.units.includes(info));
        if (vboxCombos.length > 6) return false;
        return (
            <table>
                <tbody>
                    {vboxCombos.map((c, i) =>
                        <tr key={i} >
                            <td className="highlight" >{convertItem(c.item)}</td>
                            {c.units.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    // const beginningHdr = instance.phase === 'Lobby'
    //     ? <h2>game beginning...</h2>
    //     : null;

    return (
        <div className='info' >
            <Info />
            <Combos />
        </div>
    );
}

// <ScoreBoard /> Takes up too much space maybe a context switch

module.exports = Info;