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

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

const { NULL_UUID } = require('./../utils');

const { stringSort } = require('./../utils');
const molecule = require('./molecule');
const SpawnButton = require('./spawn.button');

const InstanceCreateForm = require('./instance.create.form');

const idSort = stringSort('id');

const COLOURS = [
    '#a52a2a',
    '#1FF01F',
    '#3498db',
];

function Menu(args) {
    const {
        account,
        cryps,
        selectedCryps,
        setSelectedCryps,
        sendInstanceState,
        sendPlayerMmCrypsSet,
        sendInstanceJoin,
        sendInstanceList,
        sendCrypSpawn,
        instances,
    } = args;

    function instanceList() {
        if (!instances) return <div>...</div>;

        const instancePanels = instances.map(instance => {
            const player = instance.players.find(p => p.id === account.id);
            const scoreText = player
                ? `${player.score.wins} : ${player.score.losses}`
                : '';

            function instanceClick() {
                if (!player) return sendInstanceJoin(instance);
                return sendInstanceState(instance);
            }

            return (
                <tr key={instance.id}
                    className="right"
                    onClick={instanceClick} >
                    <td>{instance.name}</td>
                    <td>{instance.players.length} / {instance.max_players}</td>
                    <td>{scoreText}</td>
                </tr>
            );
        });

        const instanceJoinHidden = !selectedCryps.every(c => !!c);

        const mmSet = (
            <button
                className={'menu-instance-btn left'}
                disabled={instanceJoinHidden}
                onClick={() => sendPlayerMmCrypsSet()}>
                Set Matchmaking Team
            </button>
        );

        return (
            <section className="menu-instance-list" >
                <table>
                    <thead>
                        <tr>
                            <th>instance name</th>
                            <th>players</th>
                            <th>status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {instancePanels}
                        <tr className="right" onClick={() => sendInstanceList()}>
                            <td colSpan={3} >↺</td>
                        </tr>
                    </tbody>
                </table>
                <InstanceCreateForm />
                {mmSet}
            </section>
        );
    }

    function crypList() {
        if (!cryps) return <div></div>;

        // redux limitation + suggested workaround
        // so much for dumb components
        function selectCryp(id) {
            // remove
            const i = selectedCryps.findIndex(sid => sid === id);
            if (i > -1) {
                selectedCryps[i] = null;
                return setSelectedCryps(selectedCryps);
            }

            // window insert
            const insert = selectedCryps.findIndex(j => j === null);
            if (insert === -1) return setSelectedCryps([id, null, null]);
            selectedCryps[insert] = id;
            return setSelectedCryps(selectedCryps);
        }

        const crypPanels = cryps.sort(idSort).map(cryp => {
            const colour = selectedCryps.indexOf(cryp.id);
            const selected = colour > -1;

            const borderColour = selected ? COLOURS[colour] : '#000000';

            return (
                <div
                    key={cryp.id}
                    className="menu-cryp-ctr">
                    <div
                        className="menu-cryp"
                        style={ { 'border-color': borderColour || 'whitesmoke' } }
                        onClick={() => selectCryp(cryp.id)} >
                        <figure className="img">
                            {molecule()}
                        </figure>
                        <h2>{cryp.name}</h2>
                    </div>
                </div>
            );
        });

        const spawnButtonsNum = cryps.length < 3
            ? (3 - cryps.length)
            : 1;

        const spawnButtons = range(spawnButtonsNum)
            .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);

        return (
            <div className="menu-cryps">
                {crypPanels}
                {spawnButtons}
            </div>
        );
    }

    return (
        <main className="menu">
            {instanceList()}
            {crypList()}
        </main>
    );
}

module.exports = Menu;