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

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

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

const addState = connect(
    function receiveState(state) {
        const { activeCryp, player } = state;
        return { activeCryp, player };
    },

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

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

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

        return { setInfo, setActiveCryp, setVboxHidden };
    }

);

function InfoCryp(args) {
    const {
        activeCryp,
        player,

        setVboxHidden,
        setInfo,
        setActiveCryp,
    } = args;

    if (!activeCryp) return false;
    const cryp = player.cryps.find(c => c.id === activeCryp.id);

    if (!cryp) return false;

    // onClick={() => setInfo('skill', { skill: s, cryp })}
    const skills = range(0, 3).map(i => {
        const skill = cryp.skills[i];

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

        const s = cryp.skills[i]
            ? cryp.skills[i].skill
            : (<span>&nbsp;</span>);
        return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
    });

    const stats = Object.values(STATS).map((s, j) => (
        <figure key={j} alt={s.stat} className={s.stat}>
            {s.svg(`stat-icon ${s.colour}`)}
            <figcaption>{cryp[s.stat].value}</figcaption>
        </figure>
    ));

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

        function blankSpecClick(e) {
            e.stopPropagation();
            setActiveCryp(cryp);
            setInfo('highlight', 'spec');
            setVboxHidden(true);
        }

        if (!s) {
            return (
                <figure key={i} className="gray" onClick={blankSpecClick}>
                    {shapes.diamond('stat-icon gray')}
                    <figcaption>&nbsp;</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>
        );
    });

    return (
        <div className="info-cryp">
            <div className="stats">
                {stats}
            </div>
            <div className="specs">
                {specs}
            </div>
            <div className="skills">
                {skills}
            </div>
        </div>
    );
}

module.exports = addState(InfoCryp);