Merge branch 'horizontal-vbox' of ssh://cryps.gg:40022/~/cryps into horizontal-vbox

2019-05-14 14:02:05 +10:00
parent a4bd7abe7a 2318ff3974
commit e628f615b1
9 changed files with 442 additions and 107 deletions
@@ -55,10 +55,12 @@ function Info(args) {
        }

        if (type === 'skill') {
+            const skillInfo = SKILLS[value.skill];
+            const description = skillInfo ? skillInfo.description : '?????';
            return (
                <div className="info-skill">
                    <div> {value.skill} </div>
-                    <div> {SKILLS[value.skill].description} </div>
+                    <div> {description} </div>
                    <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                    unequip
                    </button>
@@ -165,11 +167,11 @@ function Info(args) {
        if (activeCryp) return false;
        if (!player) return false;

-        if (combiner[0] !== null) {
+        if (!(combiner.every(u => u === null))) {
            const filteredCombos = vboxInfo.combos
                .filter(combo => combiner.every(u => u === null
                    || combo.units.includes(player.vbox.bound[u])));
-
+            if (filteredCombos.length > 6) return false;
            return (
                <table>
                    <tbody>
@@ -183,11 +185,12 @@ function Info(args) {
                </table>
            );
        }
-
+        const vboxCombos = vboxInfo.combos.filter(c => c.units.includes(info[1]));
+        if (vboxCombos.length > 6) return false;
        return (
            <table>
                <tbody>
-                    {vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) =>
+                    {vboxCombos.map((c, i) =>
                        <tr key={i} >
                            <td className="highlight" >{convertVar(c.var)}</td>
                            {c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)}
@@ -206,12 +209,12 @@ function Info(args) {

    return (
        <div className={classes} >
-            <InfoCryp />
            <CrypVar />
            <Combos />
-            <ScoreBoard />
        </div>
    );
 }
+// <InfoCryp /> not required anymore
+// <ScoreBoard /> Takes up too much space maybe a context switch

 module.exports = Info;
@@ -3,6 +3,7 @@ const preact = require('preact');
 const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const InstanceCrypsContainer = require('./instance.cryps');
+const EquipmentContainer = require('./instance.equip');

 function InstanceComponent(args) {
    const {
@@ -88,10 +89,11 @@ function InstanceComponent(args) {
                    <div>&nbsp;</div>
                </div>
                {actionBtn}
+                {timer}
            </div>
-            {timer}
            <VboxContainer />
            <InstanceCrypsContainer />
+            <EquipmentContainer />
            <InfoContainer />
        </main>
    );
@@ -3,12 +3,12 @@ const preact = require('preact');
 const range = require('lodash/range');

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

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

        function sendInstanceReady() {
            return ws.sendInstanceReady(instance.id);
@@ -18,7 +18,7 @@ const addState = connect(
            return ws.sendVboxApply(instance.id, crypId, i);
        }

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

    function receiveDispatch(dispatch) {
@@ -49,11 +49,14 @@ const addState = connect(

 function Cryp(props) {
    const {
+        activeVar,
        cryp,
+        player,
+        sendVboxApply,
        setInfo,
        setActiveCryp,
-        vboxInfo,
        setVboxHighlight,
+        vboxInfo,
    } = props;

    function setHighlight(type) {
@@ -62,6 +65,17 @@ function Cryp(props) {
        return false;
    }

+    function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
+        return setActiveCryp(cryp);
+    }
+
+    const { vbox } = player;
+    const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
+    const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
+
    const skills = range(0, 3).map(i => {
        const skill = cryp.skills[i];
        const s = skill
@@ -69,36 +83,43 @@ function Cryp(props) {
            : (<span className="gray">+</span>);

        function skillClick(e) {
+            if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar);
            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>;
+        const action = skill ? '' : 'action';
+        const equip = skillList.includes(vbox.bound[activeVar]) && !skill ? 'equip' : '';
+        const classes = `right ${action} ${equip}`;
+        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);
+            if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
            setHighlight('spec');
+            return setActiveCryp(cryp);
        }

        if (!s) {
+            const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
            return (
+<<<<<<< HEAD
                <figure key={i} className="gray" onClick={blankSpecClick}>
                    {shapes.diamond('stat-icon gray')}
                    <figcaption>+</figcaption>
+=======
+                <figure key={i} onClick={blankSpecClick}>
+                    {shapes.diamond(`stat-icon ${equip}`)}
+                    <figcaption>&nbsp;</figcaption>
+>>>>>>> 2318ff3974d80a7c29246cdc8a3eb1653ea45b91
                </figure>
            );
        }
@@ -117,6 +138,27 @@ function Cryp(props) {
        );
    });

+    const damage = Object.values(STATS).slice(0, 3).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
+    const speed = Object.values(STATS).slice(3, 4).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
+    const life = Object.values(STATS).slice(4, 8).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
    // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
    // const colours = mapValues(cryp.colours, c => {
    //     if (cTotal === 0) return 245;
@@ -130,20 +172,39 @@ function Cryp(props) {
    //     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">
+            <div className="avatar">
                <figure className="img">
                    {crypAvatar(cryp.name)}
                    <figcaption>{cryp.name}</figcaption>
                </figure>
-                <div className="skills">
-                    {skills}
-                </div>
+            </div>
+            <div className="skills">
+                {skills}
+            </div>
+            <div className="specs">
+                {specs}
            </div>
            <div className="stats">
-                {specs}
+                <div className="damage-label">
+                    Damage
+                </div>
+                <div className="damage-icons">
+                    {damage}
+                </div>
+                <div className="speed-label">
+                    Speed
+                </div>
+                <div className="speed-icons">
+                    {speed}
+                </div>
+                <div className="life-label">
+                    Life
+                </div>
+                <div className="life-icons">
+                    {life}
+                </div>
            </div>
        </div>
    );
@@ -151,9 +212,9 @@ function Cryp(props) {

 function InstanceCryps(props) {
    const {
+        activeVar,
        player,
        instance,
-
        // clearInfo,
        setInfo,
        setActiveCryp,
@@ -168,7 +229,7 @@ function InstanceCryps(props) {
    if (instance.phase === 'Lobby') return false;

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

    const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
@@ -0,0 +1,102 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+const range = require('lodash/range');
+
+const actions = require('../actions');
+const { convertVar, SPECS } = require('./../utils');
+
+const addState = connect(
+    function receiveState(state) {
+        const { player, vboxInfo } = state;
+
+        return { player, vboxInfo };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(item, value) {
+            dispatch(actions.setInfo([item, value]));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        function setActiveVar(v) {
+            return dispatch(actions.setActiveVar(v));
+        }
+
+        return { setInfo, setActiveVar, clearInfo };
+    }
+
+);
+
+function Equipment(props) {
+    const {
+        player,
+        vboxInfo,
+        setInfo,
+        setActiveVar,
+    } = props;
+
+    const { vbox } = player;
+
+    function boundClick(e, i) {
+        const value = vbox.bound[i];
+        setInfo('item', value);
+        setActiveVar(i);
+        return false;
+    }
+
+    // const classes = `right ${skill ? '' : 'action'}`;
+    const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
+    const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
+
+    const skills = range(0, 9).map(i => {
+        const item = convertVar(vbox.bound[i]);
+        if (skillList.includes(item)) {
+            return (
+                <button key={i} className={''} onClick={e => boundClick(e, i)}>
+                    {item}
+                </button>
+            );
+        } return false;
+    });
+
+    const specs = range(0, 9).map(i => {
+        const item = convertVar(vbox.bound[i]);
+        if (specList.includes(item)) {
+            return (
+                <figure key={i} onClick={e => boundClick(e, i)}>
+                    {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
+                    <figcaption>{SPECS[item].caption}</figcaption>
+                </figure>
+            );
+        } return false;
+    });
+
+    const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
+    const specLabel = specs.every(i => i === false) ? '' : 'Specs';
+
+    return (
+        <div className="instance-equip" >
+            <div className="skills">
+                <div className="label">
+                    {skillLabel}
+                </div>
+                <div className ="items">
+                    {skills}
+                </div>
+            </div>
+            <div className="specs">
+                <div className="label">
+                    {specLabel}
+                </div>
+                <div className ="items">
+                    {specs}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(Equipment);
@@ -65,10 +65,10 @@ function crypAvatar(name) {
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';

 const STATS = {
-    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
    redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle },
    greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle },
    blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
+    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
    redLife: { stat: 'red_life', colour: 'red', svg: shapes.square },
    greenLife: { stat: 'green_life', colour: 'green', svg: shapes.square },
    blueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square },