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

const { connect } = require('preact-redux');
const preact = require('preact');
const range = require('lodash/range');

const shapes = require('./shapes');
const { SPECS, crypAvatar } = require('../utils');
const actions = require('../actions');

const addState = connect(
    function receiveState(state) {
        const { ws, instance, player, account, vboxHidden, vboxInfo } = state;

        function sendInstanceReady() {
            return ws.sendInstanceReady(instance.id);
        }

        function sendVboxApply(crypId, i) {
            return ws.sendVboxApply(instance.id, crypId, i);
        }

        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo };
    },

    function receiveDispatch(dispatch) {
        function quit() {
            dispatch(actions.setInstance(null));
        }

        function setInfo(item, value) {
            dispatch(actions.setInfo([item, value]));
        }

        function setActiveCryp(value) {
            dispatch(actions.setActiveCryp(value));
        }

        function clearInfo() {
            return dispatch(actions.setInfo([]));
        }

        function setVboxHighlight(v) {
            dispatch(actions.setVboxHighlight(v));
        }

        return { quit, clearInfo, setInfo, setActiveCryp, setVboxHighlight };
    }

);

function Cryp(props) {
    const {
        cryp,
        setInfo,
        setActiveCryp,
        vboxInfo,
        setVboxHighlight,
    } = props;

    function setHighlight(type) {
        if (type === 'skill') return setVboxHighlight(vboxInfo.vars.filter(v => v.skill).map(v => v.v));
        if (type === 'spec') return setVboxHighlight(vboxInfo.vars.filter(v => v.spec).map(v => v.v));
        return false;
    }

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

        function skillClick(e) {
            if (!skill) setHighlight('skill');
            else setInfo('skill', { skill: skill.skill, cryp });
            e.stopPropagation();
            return setActiveCryp(cryp);
        }

        const classes = `right ${skill ? '' : 'action'}`;
        return <button key={i} className={classes} onClick={skillClick} >{s}</button>;
    });

    function onClick(e) {
        e.stopPropagation();
        e.preventDefault();
        return setActiveCryp(cryp);
    }

    const specs = range(0, 6).map(i => {
        const s = cryp.specs[i];

        function blankSpecClick(e) {
            e.stopPropagation();
            setActiveCryp(cryp);
            setHighlight('spec');
        }

        if (!s) {
            return (
                <figure key={i} className="gray" onClick={blankSpecClick}>
                    {shapes.diamond('stat-icon gray')}
                    <figcaption>+</figcaption>
                </figure>
            );
        }

        function specClick(e) {
            e.stopPropagation();
            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="instance-cryp" onClick={onClick} >
            <div className="instance-cryp-top">
                <figure className="img">
                    {crypAvatar(cryp.name)}
                    <figcaption>{cryp.name}</figcaption>
                </figure>
                <div className="skills">
                    {skills}
                </div>
            </div>
            <div className="stats">
                {specs}
            </div>
        </div>
    );
}

function InstanceCryps(props) {
    const {
        player,
        instance,

        // clearInfo,
        setInfo,
        setActiveCryp,

        sendVboxApply,
        vboxHidden,
        vboxInfo,
        setVboxHighlight,
    } = props;

    if (!player) return false;
    if (instance.phase === 'Lobby') return false;

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

    const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
    return (
        <div className={classes} onClick={() => setActiveCryp(null)}>
            {cryps}
        </div>
    );
}

module.exports = addState(InstanceCryps);