improved?

client/.eslintrc.js

@@ -833,7 +833,7 @@ module.exports = {
 
         // enforce consistent line breaks inside function parentheses
         // https://eslint.org/docs/rules/function-paren-newline
-        'function-paren-newline': ['error', 'consistent'],
+        'function-paren-newline': 'off',
 
         // Blacklist certain identifiers to prevent them being used
         // https://eslint.org/docs/rules/id-blacklist
@@ -848,7 +848,7 @@ module.exports = {
 
         // Enforce the location of arrow function bodies with implicit returns
         // https://eslint.org/docs/rules/implicit-arrow-linebreak
-        'implicit-arrow-linebreak': ['error', 'beside'],
+        'implicit-arrow-linebreak': 'off',
 
         // this option sets a specific tab width for your code
         // https://eslint.org/docs/rules/indent

client/src/actions.jsx

@@ -7,6 +7,9 @@ export const setCryps = value => ({ type: SET_CRYPS, value });
 export const SET_VBOX_INFO = 'SET_VBOX_INFO';
 export const setVboxInfo = value => ({ type: SET_VBOX_INFO, value });
 
+export const SET_VBOX_HIGHLIGHT = 'SET_VBOX_HIGHLIGHT';
+export const setVboxHighlight = value => ({ type: SET_VBOX_HIGHLIGHT, value });
+
 export const SET_VBOX_HIDDEN = 'SET_VBOX_HIDDEN';
 export const setVboxHidden = value => ({ type: SET_VBOX_HIDDEN, value });
 

client/src/components/info.component.jsx

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

client/src/components/info.cryp.jsx

@@ -8,8 +8,8 @@ const shapes = require('./shapes');
 
 const addState = connect(
     function receiveState(state) {
-        const { activeCryp, player } = state;
+        const { activeCryp, player, vboxInfo } = state;
-        return { activeCryp, player };
+        return { activeCryp, player, vboxInfo };
     },
 
     function receiveDispatch(dispatch) {
@@ -25,7 +25,11 @@ const addState = connect(
             dispatch(actions.setVboxHidden(value));
         }
 
-        return { setInfo, setActiveCryp, setVboxHidden };
+        function setVboxHighlight(v) {
+            dispatch(actions.setVboxHighlight(v));
+        }
+
+        return { setInfo, setActiveCryp, setVboxHidden, setVboxHighlight };
     }
 
 );
@@ -34,10 +38,12 @@ function InfoCryp(args) {
     const {
         activeCryp,
         player,
+        vboxInfo,
 
         setVboxHidden,
         setInfo,
         setActiveCryp,
+        setVboxHighlight,
     } = args;
 
     if (!activeCryp) return false;
@@ -45,6 +51,12 @@ function InfoCryp(args) {
 
     if (!cryp) return false;
 
+    function setHighlight(type) {
+        if (type === 'skill') return setVboxHighlight(vboxInfo.vars.filter(v => v.skill));
+        if (type === 'spec') return setVboxHighlight(vboxInfo.vars.filter(v => v.spec));
+        return false;
+    }
+
     // onClick={() => setInfo('skill', { skill: s, cryp })}
     const skills = range(0, 3).map(i => {
         const skill = cryp.skills[i];
@@ -52,7 +64,7 @@ function InfoCryp(args) {
         function skillClick(e) {
             if (!skill) {
                 setVboxHidden(false);
-                setInfo('highlight', 'skill');
+                setHighlight('skill');
             } else setInfo('skill', { skill: skill.skill, cryp });
             e.stopPropagation();
             return setActiveCryp(cryp);
@@ -77,7 +89,7 @@ function InfoCryp(args) {
         function blankSpecClick(e) {
             e.stopPropagation();
             setActiveCryp(cryp);
-            setInfo('highlight', 'spec');
+            setHighlight('spec');
             setVboxHidden(true);
         }
 

client/src/components/instance.cryps.jsx

@@ -8,7 +8,7 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, vboxHidden } = state;
+        const { ws, instance, player, account, vboxHidden, vboxInfo } = 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 };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo };
     },
 
     function receiveDispatch(dispatch) {
@@ -38,7 +38,11 @@ const addState = connect(
             return dispatch(actions.setInfo([]));
         }
 
-        return { quit, clearInfo, setInfo, setActiveCryp };
+        function setVboxHighlight(v) {
+            dispatch(actions.setVboxHighlight(v));
+        }
+
+        return { quit, clearInfo, setInfo, setActiveCryp, setVboxHighlight };
     }
 
 );
@@ -48,8 +52,16 @@ function Cryp(props) {
         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
@@ -57,7 +69,7 @@ function Cryp(props) {
             : (<span>&nbsp;</span>);
 
         function skillClick(e) {
-            if (!skill) setInfo('highlight', 'skill');
+            if (!skill) setHighlight('skill');
             else setInfo('skill', { skill: skill.skill, cryp });
             e.stopPropagation();
             return setActiveCryp(cryp);
@@ -79,7 +91,7 @@ function Cryp(props) {
         function blankSpecClick(e) {
             e.stopPropagation();
             setActiveCryp(cryp);
-            setInfo('highlight', 'spec');
+            setHighlight('spec');
         }
 
         if (!s) {
@@ -148,13 +160,15 @@ function InstanceCryps(props) {
 
         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,
+        cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;

client/src/components/vbox.component.jsx

@@ -24,6 +24,8 @@ function Vbox(args) {
         setReclaiming,
         showTeam,
         vboxHidden,
+        vboxHighlight,
+        setVboxHighlight,
         vboxInfo,
     } = args;
 
@@ -31,6 +33,24 @@ function Vbox(args) {
     if (instance.phase === 'Lobby') return false;
     const { vbox } = player;
 
+    function combinerChange(newCombiner) {
+        setCombiner(newCombiner);
+        if (newCombiner.every(c => c === null)) return setVboxHighlight([]);
+
+        const combinerValues = newCombiner.map(cv => player.vbox.bound[cv]).filter(cv => cv);
+
+        const filteredCombos = vboxInfo.combos
+            .filter(combo => combinerValues.every(u => combo.units.includes(u)));
+
+        const comboValues = vboxInfo.vars.filter(v => {
+            if (!filteredCombos.some(c => c.units.includes(v.v))) return false;
+            if (!['Red', 'Green', 'Blue'].includes(v.v) && combinerValues.includes(v.v)) return false;
+            return true;
+        });
+
+        return setVboxHighlight(comboValues.map(v => v.v));
+    }
+
     //
     // VBOX
     //
@@ -62,16 +82,9 @@ function Vbox(args) {
         return true;
     }
 
-    const freeShouldHighlight = info[0] && info[0] === 'highlight';
-
     const freeRows = free.map((row, i) => {
         const cells = row.map((c, j) => {
-            const highlighted = () => {
+            const highlighted = c && vboxHighlight.includes(c);
-                if (!c || !freeShouldHighlight) return false;
-                if (info[1] === 'skill') return j === 1;
-                if (info[1] === 'spec') return j === 2;
-                return false;
-            };
 
             function freeClick() {
                 if (c) {
@@ -83,7 +96,7 @@ function Vbox(args) {
 
             return <td
                 key={j}
-                className={`${highlighted() ? 'highlight' : ''}`}
+                className={`${highlighted ? 'highlight' : ''}`}
                 onTouchStart={e => vboxTouchStart(e, i, j)}
                 onTouchEnd={e => vboxTouchEnd(e, i, j)}
                 onTouchMove={e => vboxTouchMove(e)}
@@ -110,14 +123,15 @@ function Vbox(args) {
         if (reclaiming && value) sendVboxReclaim(i);
         else if (highlight && activeCryp) {
             sendVboxApply(i);
+            setVboxHighlight([]);
             showTeam();
         } else if (value) {
             const insert = combiner.findIndex(j => j === null);
-            if (insert === -1) return setCombiner([i, null, null]);
+            if (insert === -1) return combinerChange([i, null, null]);
             combiner[insert] = i;
             setInfo('item', value);
             setActiveCryp(null);
-            return setCombiner(combiner);
+            return combinerChange(combiner);
         }
         return false;
     }
@@ -133,21 +147,13 @@ function Vbox(args) {
             );
         }
 
-        const highlighted = () => {
+        const highlighted = value && vboxHighlight.includes(value);
-            if (!value || !info[0] || info[0] !== 'highlight') return false;
-            const v = vboxInfo.vars.find(vi => vi.v === value);
-            if (info[1] === 'skill') return v.skill;
-            if (info[1] === 'spec') return v.spec;
-            return false;
-        };
-
-        const highlight = highlighted();
 
         return (
             <td
                 key={i}
-                className={`${highlight ? 'highlight' : ''}`}
+                className={`${highlighted ? 'highlight' : ''}`}
-                onClick={e => boundClick(e, i, highlight) }>
+                onClick={e => boundClick(e, i, highlighted) }>
                 {convertVar(value)}
             </td>
         );
@@ -176,7 +182,7 @@ function Vbox(args) {
     //
     function combinerRmv(i) {
         combiner[i] = null;
-        return setCombiner(combiner);
+        return combinerChange(combiner);
     }
     const combinerElement = (
         <table className="vbox-table">

client/src/components/vbox.container.jsx

@@ -16,6 +16,7 @@ const addState = connect(
             activeCryp,
             info,
             vboxHidden,
+            vboxHighlight,
             vboxInfo,
         } = state;
 
@@ -49,6 +50,7 @@ const addState = connect(
             info,
             vboxInfo,
             vboxHidden,
+            vboxHighlight,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,
@@ -74,6 +76,10 @@ const addState = connect(
             return dispatch(actions.setActiveCryp(v));
         }
 
+        function setVboxHighlight(v) {
+            return dispatch(actions.setVboxHighlight(v));
+        }
+
         function showTeam() {
             dispatch(actions.setInfo([null, null]));
             dispatch(actions.setVboxHidden(true));
@@ -85,7 +91,7 @@ const addState = connect(
             setActiveCryp,
             setReclaiming,
             setInfo,
-            setActiveCryp,
+            setVboxHighlight,
             showTeam,
         };
     }

client/src/keyboard.jsx

@@ -9,6 +9,7 @@ function setupKeys(store) {
     key('esc', () => store.dispatch(actions.setActiveSkill(null)));
     key('esc', () => store.dispatch(actions.setActiveCryp(null)));
     key('esc', () => store.dispatch(actions.setInfo([null, null])));
+    key('esc', () => store.dispatch(actions.setVboxHighlight([])));
 }
 
 module.exports = setupKeys;

client/src/main.jsx

@@ -36,6 +36,7 @@ const store = createStoreWithMiddleware(
         selectedCryps: reducers.selectedCrypsReducer,
         vboxInfo: reducers.vboxInfoReducer,
         vboxHidden: reducers.vboxHiddenReducer,
+        vboxHighlight: reducers.vboxHighlightReducer,
         showLog: reducers.showLogReducer,
         ws: reducers.wsReducer,
     })
@@ -44,7 +45,7 @@ const store = createStoreWithMiddleware(
 
 document.fonts.load('16pt "Jura"').then(() => {
     const events = registerEvents(store);
-    // store.subscribe(() => console.log(store.getState()));
+    store.subscribe(() => console.log(store.getState()));
     setupKeys(store);
 
     const ws = createSocket(events);

client/src/reducers.jsx

@@ -30,6 +30,16 @@ function vboxInfoReducer(state = defaultVboxInfo, action) {
     }
 }
 
+const defaultVboxHighlight = [];
+function vboxHighlightReducer(state = defaultVboxHighlight, action) {
+    switch (action.type) {
+        case actions.SET_VBOX_HIGHLIGHT:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultActiveSkill = null;
 function activeSkillReducer(state = defaultActiveSkill, action) {
     switch (action.type) {
@@ -210,4 +220,5 @@ module.exports = {
     infoReducer,
     pingReducer,
     vboxInfoReducer,
+    vboxHighlightReducer,
 };