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

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

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

const { stringSort, constructAvatar } = require('./../utils');
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,
        constructs,
        team,
        setTeam,
        sendInstanceState,
        sendPlayerMmConstructsSet,
        sendInstanceJoin,
        sendInstanceList,
        sendConstructSpawn,
        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 = !team.every(c => !!c);

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

        return (
            <div 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 />
            </div>
        );
    }

    function constructList() {
        if (!constructs) return <div></div>;

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

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

        const constructPanels = constructs.sort(idSort).map(construct => {
            const colour = team.indexOf(construct.id);
            const selected = colour > -1;

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

            return (
                <div
                    key={construct.id}
                    className="menu-construct-ctr">
                    <div
                        className="menu-construct"
                        style={ { 'border-color': borderColour || 'whitesmoke' } }
                        onClick={() => selectConstruct(construct.id)} >
                        {constructAvatar(construct.name)}
                        <h2>{construct.name}</h2>
                    </div>
                </div>
            );
        });

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

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

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

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

module.exports = Menu;