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

const preact = require('preact');
const range = require('lodash/range');
const reactStringReplace = require('react-string-replace');

const { INFO } = require('./../constants');
const { convertItem, removeTier } = require('../utils');
const shapes = require('./shapes');

function InfoComponent(args) {
    const {
        itemInfo,
        player,
        info,
    } = args;

    // args.info = 'Life';
    // const { info } = args;

    function Info() {
        if (!info) {
            return (
                <div>
                    <h2>VBOX phase</h2>
                    <p>Strengthen and specialise your constructs by equipping items to them.</p>
                    <p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
                    <p>
                        Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
                        Combine <b>3 of the same item</b> to upgrade it.<br />
                        Click an item and then click a construct to <b>equip</b> that item to it.<br />
                    </p>
                    <p>Click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
                </div>
            );
        }
        const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
        if (!fullInfo) return false;
        const isSkill = fullInfo.skill;
        const isSpec = fullInfo.spec;

        if (isSkill) {
            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
            const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
            const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
            const itemSourceInfo = itemSource.length
                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
                : false;
            const itemRegEx = /(Red|Blue|Green)/;
            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
            const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
            const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
            return (
                <div class="info-skill">
                    <h2>{fullInfo.item} - {fullInfo.cost}b</h2>
                    <h3> SKILL </h3>
                    {itemSourceDescription}
                    <div> {cooldown} </div>
                    <div>{infoDescription}</div>
                    {speed}
                </div>
            );
        }

        if (isSpec) {
            let red = 0;
            let blue = 0;
            let green = 0;
            player.constructs.forEach(construct => {
                red += construct.colours.red;
                blue += construct.colours.blue;
                green += construct.colours.green;
            });
            const teamColours = { red, blue, green };

            const colourReqs = fullInfo.values.bonuses || [];

            const thresholds = colourReqs.map((bonus, i) => {
                const colours = ['red', 'green', 'blue'];
                const colourGoals = {
                    red: [],
                    green: [],
                    blue: [],
                };
                const overFlow = [];

                colours.forEach(c => {
                    const colourReq = bonus.req[c];
                    if (colourReqs === 0) return false;

                    const start = i === 0
                        ? 0
                        : colourReqs[i - 1].req[c];

                    const dots = range(start, colourReq).map(j => {
                        const unmet = teamColours[c] < j + 1;


                        const reqClass = unmet
                            ? 'unmet'
                            : '';

                        if (j - start > 4) {
                            overFlow.push(
                                <figure key={j} alt={c.colour} class={reqClass} >
                                    {shapes.vboxColour(c)}
                                </figure>
                            );
                        } else {
                            colourGoals[c].push(
                                <figure key={j} alt={c.colour} class={reqClass} >
                                    {shapes.vboxColour(c)}
                                </figure>
                            );
                        }

                        return true;
                    });

                    return dots;
                });

                const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);

                const reqClass = reqsMet
                    ? ''
                    : 'unmet';

                const goals = colours.map((c, j) => {
                    if (colourGoals[c].length) {
                        return (
                            <div key={j}>{colourGoals[c]}</div>
                        );
                    }
                    return false;
                });
                const bonusObj = info.includes('Life')
                    ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
                    : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
                const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
                return (
                    <div key={i} class="spec-goal">
                        {goals}
                        {overFlowObj}
                        {bonusObj}
                    </div>
                );
            });
            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
            const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
            const itemSource = itemInfo.combos.filter(c => c.item === info);
            const itemSourceInfo = itemSource.length
                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
                : false;
            const itemRegEx = /(Red|Blue|Green)/;
            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());

            return (
                <div class="info-spec">
                    <h2>{info} - {fullInfo.cost}b</h2>
                    <h3>SPEC</h3>
                    {itemSourceDescription}
                    <div>{infoDescription}</div>
                    <div class="thresholds">
                        {thresholds}
                    </div>
                </div>
            );
        }
        const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
        return (
            <div class="info-item">
                <h2>{fullInfo.item} {cost}</h2>
                <div>{fullInfo.description}</div>
            </div>
        );
    }

    function Combos() {
        if (!player) return false;
        if (!info) return false;

        const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
        if (vboxCombos.length > 6) return false;

        return (
            <table class="combos">
                <tbody>
                    {vboxCombos.map((c, i) =>
                        <tr key={i} >
                            <td class="highlight" >{convertItem(c.item)}</td>
                            {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    return (
        <div class='info' >
            <Info />
            <Combos />
        </div>
    );
}

module.exports = InfoComponent;