return of the combo preview

client/src/actions.jsx

@@ -23,7 +23,9 @@ export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', valu
 export const setGame = value => ({ type: 'SET_GAME', value });
 export const setGameSkillInfo = value => ({ type: 'SET_GAME_SKILL_INFO', value });
 export const setGameEffectInfo = value => ({ type: 'SET_GAME_EFFECT_INFO', value });
+
 export const setInfo = value => ({ type: 'SET_INFO', value });
+export const setComboPreview = value => ({ type: 'SET_COMBO_PREVIEW', value });
 
 export const setEmail = value => ({ type: 'SET_EMAIL', value });
 export const setInvite = value => ({ type: 'SET_INVITE', value });

client/src/components/instance.component.jsx

@@ -10,10 +10,12 @@ const actions = require('../actions');
 const addState = connect(
     function receiveState(state) {
         const {
+            comboPreview,
             instance,
             nav,
         } = state;
         return {
+            comboPreview,
             instance,
             nav,
         };
@@ -34,7 +36,12 @@ const addState = connect(
             return true;
         }
 
+        function clearComboPreview() {
+            return dispatch(actions.setComboPreview(null));
+        }
+
         return {
+            clearComboPreview,
             setInfo,
             clearItems,
         };
@@ -43,7 +50,9 @@ const addState = connect(
 
 function Instance(args) {
     const {
+        comboPreview,
         instance,
+        clearComboPreview,
         clearItems,
     } = args;
 
@@ -58,8 +67,13 @@ function Instance(args) {
         clearItems();
     }
 
+    function mouseOver(e) {
+        e.stopPropagation();
+        if (comboPreview) clearComboPreview();
+    }
+
     return (
-        <main id="instance" class='instance' onClick={instanceClick}>
+        <main id="instance" class='instance' onClick={instanceClick} onMouseOver={mouseOver}>
             <Vbox />
             <InstanceConstructsContainer />
         </main>

client/src/components/vbox.combos.jsx

@@ -2,11 +2,28 @@ const preact = require('preact');
 const { connect } = require('preact-redux');
 
 const { convertItem } = require('../utils');
+const actions = require('../actions');
 
 const addState = connect(
-    ({ info, instance, itemInfo, tutorial, vboxInfo }) => ({
+    function receiveState(state) {
+        const {
             info, instance, itemInfo, tutorial, vboxInfo,
-    }));
+        } = state;
+        return {
+            info, instance, itemInfo, tutorial, vboxInfo,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setComboPreview(item) {
+            return dispatch(actions.setComboPreview(item));
+        }
+
+        return {
+            setComboPreview,
+        };
+    }
+);
 
 class Combos extends preact.Component {
     shouldComponentUpdate(newProps) {
@@ -25,6 +42,7 @@ class Combos extends preact.Component {
             itemInfo,
             tutorial,
             vboxInfo,
+            setComboPreview,
         } = props;
         if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
 
@@ -34,8 +52,7 @@ class Combos extends preact.Component {
         const comboTable = vboxCombos.map((c, i) => {
             const mouseOver = e => {
                 e.stopPropagation();
-                // this.setState({ comboItem: c.item });
+                setComboPreview(c.item);
-                // set comboInfo state here
             };
             const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
                 ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
@@ -56,7 +73,9 @@ class Combos extends preact.Component {
                     <h2>COMBOS</h2>
                     Combine colours and items.
                 </div>
-                <div class="combo-list" onClick={e => e.stopPropagation()}>
+                <div class="combo-list"
+                    onMouseOver={e => e.stopPropagation()}
+                    onClick={e => e.stopPropagation()}>
                     {comboTable}
                 </div>
             </div>

client/src/components/vbox.component.jsx

@@ -15,17 +15,12 @@ const addState = connect(
     function receiveState(state) {
         const {
             ws,
+            itemUnequip,
             instance,
             player,
-            info,
-            itemInfo,
-            itemUnequip,
             tutorial,
-
-            vboxCombiner,
-            vboxHighlight,
-            vboxInfo,
             vboxSelected,
+            itemInfo,
         } = state;
 
         function clearTutorial() {
@@ -55,20 +50,16 @@ const addState = connect(
         }
 
         return {
-            player,
-            instance,
-            info,
-            itemInfo,
             itemUnequip,
-            sendItemUnequip,
+            instance,
+            player,
             tutorial,
-
-            vboxCombiner,
-            vboxHighlight,
-            vboxInfo,
             vboxSelected,
 
+            itemInfo,
+
             clearTutorial,
+            sendItemUnequip,
             sendVboxAccept,
             sendVboxCombine,
             sendVboxDiscard,

client/src/components/vbox.info.jsx

@@ -5,8 +5,8 @@ const { tutorialStage } = require('../tutorial.utils');
 const { genItemInfo } = require('./vbox.utils');
 
 const addState = connect(
-    ({ info, player, tutorial, vboxInfo, itemInfo, instance }) => ({
+    ({ info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview }) => ({
-        info, player, tutorial, vboxInfo, itemInfo, instance,
+        info, player, tutorial, vboxInfo, itemInfo, instance, comboPreview,
     }));
 
 
@@ -19,6 +19,7 @@ class Info extends preact.Component {
         if (newProps.vboxInfo !== this.props.vboxInfo) return true;
         if (newProps.itemInfo !== this.props.itemInfo) return true;
         if (newProps.instance !== this.props.instance) return true;
+        if (newProps.comboPreview !== this.props.comboPreview) return true;
         return false;
     }
 
@@ -33,17 +34,18 @@ class Info extends preact.Component {
             vboxInfo,
             itemInfo,
             instance,
+            comboPreview,
         } = props;
 
+        // dispaly priority
+        // tutorial -> comboPreview -> vboxInfo -> info
         if (tutorial) {
             const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
             if (tutorialStageInfo) return tutorialStageInfo;
         }
+        if (comboPreview) return genItemInfo(comboPreview, itemInfo, player);
+        if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player);
 
-        // Prioritise the vbox info
-        if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
-
-        // check normal info state
         if (!info) return false;
         if (info.includes('constructName')) {
             return (

client/src/components/vbox.utils.jsx

@@ -69,7 +69,7 @@ function setVboxState(dispatch, vboxSelected, state) {
     dispatch(actions.setVboxHighlight(vboxHighlight));
 }
 
-function genItemInfo(item, itemInfo, player, info) {
+function genItemInfo(item, itemInfo, player) {
     const fullInfo = itemInfo.items.find(i => i.item === item) || INFO[item];
     const isSkill = fullInfo.skill;
     const isSpec = fullInfo.spec;
@@ -102,7 +102,7 @@ function genItemInfo(item, itemInfo, player, info) {
             ? <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>
             : null;
 
-        const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
+        const thresholds = isSpec ? specThresholds(player, fullInfo, item) : null;
 
         return (
             <div class="info info-item">

client/src/reducers.jsx

@@ -34,7 +34,6 @@ module.exports = {
     gameEffectInfo:     createReducer(null, 'SET_GAME_EFFECT_INFO'),
     email:              createReducer(null, 'SET_EMAIL'),
     invite:             createReducer(null, 'SET_INVITE'),
-    info:               createReducer(null, 'SET_INFO'),
     instance:           createReducer(null, 'SET_INSTANCE'),
     instanceChat:       createReducer(null, 'SET_INSTANCE_CHAT'),
     instances:          createReducer([], 'SET_INSTANCES'),
@@ -47,6 +46,9 @@ module.exports = {
     shop:               createReducer(false, 'SET_SHOP'),
     pvp:                createReducer(null, 'SET_PVP'),
 
+    info:               createReducer(null, 'SET_INFO'),
+    comboPreview:       createReducer(null, 'SET_COMBO_PREVIEW'),
+
     subscription:       createReducer(null, 'SET_SUBSCRIPTION'),
 
     team:               createReducer([], 'SET_TEAM'),