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

const preact = require('preact');
// const key = require('keymaster');
const range = require('lodash/range');
const mapValues = require('lodash/mapValues');

const VboxContainer = require('./vbox.container');
const InfoContainer = require('./info.container');
const molecule = require('./molecule');

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

function Cryp(props) {
    const {
        cryp,
        sendVboxApply,
        setInfo,
        activeVar,
        setActiveCryp,
    } = props;

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

        function skillClick() {
            if (!skill) return false;
            setInfo('skill', { skill: skill.skill, cryp });
            return setActiveCryp(cryp);
        }

        return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
    });

    // needed for ondrop to fire
    function onDragOver(e) {
        e.preventDefault();
        return false;
    }

    function onDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        const item = parseInt(e.dataTransfer.getData('text'), 10);
        return sendVboxApply(cryp.id, item);
    }

    function onClick(e) {
        e.stopPropagation();
        e.preventDefault();

        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
        setInfo(null);
        return setActiveCryp(cryp);
    }

    const specs = cryp.specs.map((s, i) => {
        function specClick() {
            setActiveCryp(cryp);
            setInfo('spec', { spec: s, cryp });
        }
        return (
            <figure key={i} onClick={specClick}>
                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
                <figcaption>{SPECS[s].caption}</figcaption>
            </figure>
        );
    });

    const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
    const colours = mapValues(cryp.colours, c => {
        if (cTotal === 0) return 245;
        return Math.floor(c / cTotal * 255);
    });
    const alpha = cTotal === 0 ? 1 : 0.75;
    const thickness = total => {
        if (total < 3) return 1;
        if (total < 6) return 2;
        if (total < 9) return 3;
        return 4;
    };
    const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };

    return (
        <div
            key={cryp.id}
            className="cryp-box"
            onDragOver={onDragOver}
            onDrop={onDrop}
            style={border}
            >
            <div className="cryp-box-top">
                <figure className="img" onClick={onClick}>
                    {molecule()}
                    <figcaption>{cryp.name}</figcaption>
                </figure>
                <div className="skills">
                    {skills}
                </div>
            </div>
            <div className="stats">
                {specs}
            </div>
        </div>
    );
}

function InstanceComponent(args) {
    const {
        account,
        instance,
        quit,
        // clearInfo,
        sendInstanceReady,
        sendVboxApply,
        setInfo,
        activeVar,
        activeCryp,
        setActiveVar,
        setActiveCryp,
    } = args;

    if (!instance) return <div>...</div>;

    const player = instance.players.find(p => p.account === account.id);

    const cryps = player.cryps.map((c, i) => Cryp({
        cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
    }));

    function showVbox(e) {
        setActiveVar(null);
        setActiveCryp(null);
        e.stopPropagation();
    }

    function showTeam(e) {
        setActiveCryp(player.cryps[0]);
        e.stopPropagation();
    }

    const vboxBtn = (
        <button
            className="instance-btn instance-ui-btn nav-btn left"
            onClick={showVbox}>
            vBox
        </button>
    );

    const teamBtn = (
        <button
            className="instance-btn instance-ui-btn nav-btn right"
            onClick={showTeam}>
            team
        </button>
    );

    const infoSelected = activeVar !== null || activeCryp;

    const navBtn = infoSelected
        ? vboxBtn
        : teamBtn;

    const crypListClass = `cryp-list ${infoSelected ? '' : 'hidden'}`;

    const menuBtn = (
        <button
            className="instance-btn instance-ui-btn menu-btn left"
            onClick={quit}>
            menu
        </button>
    );


    return (
        <main className="instance" >
            <div className="instance-hdr">
                {navBtn}
                {menuBtn}
                <div className="spacer">
                    <div>&nbsp;</div>
                </div>
                <button
                    className="instance-btn instance-ui-btn ready-btn"
                    onClick={() => sendInstanceReady()}>
                    Ready
                </button>
            </div>
            <VboxContainer />
            <div className={crypListClass}>
                {cryps}
            </div>
            <InfoContainer />
        </main>
    );
}

module.exports = InstanceComponent;