info hover init

client/src/actions.jsx

@@ -3,7 +3,6 @@ export const setCryps = value => ({ type: 'SET_CRYPS', value });
 export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
-export const setVboxHidden = value => ({ type: 'SET_VBOX_HIDDEN', value });
 export const setInstances = value => ({ type: 'SET_INSTANCES', value });
 export const setNav = value => ({ type: 'SET_NAV', value });
 export const setInstance = value => ({ type: 'SET_INSTANCE', value });

client/src/components/info.component.jsx

@@ -1,26 +1,20 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
+const { ITEMS: { SPECS: SPEC_CONSTANT } } = require('./../constants');
-const { COLOUR_ICONS, STATS, SPECS, convertItem, crypAvatar } = require('../utils');
+const { COLOUR_ICONS, convertItem } = require('../utils');
-const shapes = require('./shapes');
 
 function Info(args) {
     const {
-        activeCryp,
-
         info,
-        infoCryp,
         itemInfo,
 
         combiner,
-        sendUnequip,
         instance,
         player,
-        vboxHidden,
     } = args;
 
-    function CrypItem() {
+    function Info() {
         if (!info) return false;
         const fullInfo = itemInfo.items.find(i => i.item === info);
         if (!fullInfo) return false;
@@ -37,16 +31,11 @@ function Info(args) {
         });
         const teamColours = { red, blue, green };
 
-        const unequipBtn = activeCryp
-            ? <button onClick={() => sendUnequip(activeCryp.id, info)}>unequip</button>
-            : null;
-
         if (isSkill) {
             return (
                 <div className="info-skill">
                     <div>{fullInfo.item}</div>
                     <div>{fullInfo.description}</div>
-                    {unequipBtn}
                 </div>
             );
         }
@@ -89,7 +78,6 @@ function Info(args) {
                     <div className="thresholds">
                         {thresholdEl}
                     </div>
-                    {unequipBtn}
                 </div>
             );
         }
@@ -123,7 +111,7 @@ function Info(args) {
     }
 
     function ScoreBoard() {
-        if (activeCryp || info[0]) return null;
+        if (info[0]) return null;
 
         const players = instance.players.map((p, i) => {
             const pText = playerText(p);
@@ -148,7 +136,6 @@ function Info(args) {
 
     function Combos() {
         if (info) return false;
-        if (activeCryp) return false;
         if (!player) return false;
 
         if (!(combiner.every(u => u === null))) {
@@ -189,11 +176,9 @@ function Info(args) {
     //     ? <h2>game beginning...</h2>
     //     : null;
 
-    const classes = `info ${vboxHidden ? '' : 'hidden'}`;
-
     return (
-        <div className={classes} >
+        <div className='info' >
-            <CrypItem />
+            <Info />
             <Combos />
         </div>
     );

client/src/components/info.container.jsx

@@ -6,29 +6,21 @@ const Info = require('./info.component');
 const addState = connect(
     function receiveState(state) {
         const {
-            activeCryp,
+            ws,
             combiner,
             info,
-            ws,
-            instance,
             itemInfo,
-            vboxHidden,
+            instance,
             player,
         } = state;
 
-        function sendUnequip(crypId, item) {
-            return ws.sendVboxUnequip(instance.id, crypId, item);
-        }
-
         return {
-            activeCryp,
+            ws,
-            info,
             combiner,
-            sendUnequip,
+            info,
+            itemInfo,
             instance,
             player,
-            itemInfo,
-            vboxHidden,
         };
     },
 );

client/src/components/instance.component.jsx

@@ -1,15 +1,41 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 
-const VboxContainer = require('./vbox.container');
+const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
 const InstanceCrypsContainer = require('./instance.cryps');
 const EquipmentContainer = require('./instance.equip');
 
-function InstanceComponent(args) {
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, instance, player } = state;
+
+        function sendInstanceReady() {
+            return ws.sendInstanceReady(instance.id);
+        }
+
+        return { instance, player, sendInstanceReady };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(c) {
+            return dispatch(actions.setInfo(c));
+        }
+
+        return {
+            setInfo,
+        };
+    }
+);
+
+function Instance(args) {
     const {
         instance,
         player,
         sendInstanceReady,
+        setInfo,
     } = args;
 
     if (!instance) return false;
@@ -44,7 +70,7 @@ function InstanceComponent(args) {
     );
 
     return (
-        <main className="instance" >
+        <main className="instance" onMouseOver={() => setInfo(null)} >
             <div className="top">
                 {actionBtn}
                 {timer}
@@ -52,7 +78,7 @@ function InstanceComponent(args) {
 
             <input type="checkbox" id="toggle-vbox"/>
             <label id="toggle-vbox-label" htmlFor="toggle-vbox">&nbsp;</label>
-            <VboxContainer />
+            <Vbox />
             <InfoContainer />
             <EquipmentContainer />
             <InstanceCrypsContainer />
@@ -60,4 +86,4 @@ function InstanceComponent(args) {
     );
 }
 
-module.exports = InstanceComponent;
+module.exports = addState(Instance);

client/src/components/instance.container.jsx

@@ -14,6 +14,16 @@ const addState = connect(
 
         return { instance, player, sendInstanceReady };
     },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(c) {
+            return dispatch(actions.setInfo(c));
+        }
+
+        return {
+            setInfo,
+        };
+    }
 );
 
 module.exports = addState(Instance);

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, itemInfo, itemEquip, activeCryp } = state;
+        const { ws, instance, player, account, itemInfo, itemEquip, activeCryp } = 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, itemInfo, itemEquip, activeCryp };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, itemInfo, itemEquip, activeCryp };
     },
 
     function receiveDispatch(dispatch) {
@@ -196,7 +196,6 @@ function InstanceCryps(props) {
         setActiveCryp,
 
         sendVboxApply,
-        vboxHidden,
         itemInfo,
         setVboxHighlight,
         setItemUnequip,
@@ -220,7 +219,7 @@ function InstanceCryps(props) {
         setVboxHighlight,
     }));
 
-    const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
+    const classes = `cryp-list`;
     return (
         <div className={classes} onClick={() => setActiveCryp(null)}>
             {cryps}

client/src/components/main.jsx

@@ -4,7 +4,7 @@ const { connect } = require('preact-redux');
 
 const LoginContainer = require('./login.container');
 const GameContainer = require('./game.container');
-const InstanceContainer = require('./instance.container');
+const Instance = require('./instance.component');
 const Team = require('./team');
 const List = require('./list');
 
@@ -32,7 +32,6 @@ function Main(props) {
     }
 
     if (game) {
-        console.log('game time');
         return (
             <GameContainer />
         );
@@ -40,7 +39,7 @@ function Main(props) {
 
     if (instance) {
         return (
-            <InstanceContainer />
+            <Instance />
         );
     }
 

client/src/components/vbox.component.jsx

@@ -1,32 +1,98 @@
 const preact = require('preact');
 const range = require('lodash/range');
+const { connect } = require('preact-redux');
 
 const shapes = require('./shapes');
-
 const { convertItem } = require('./../utils');
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            instance,
+            player,
+            combiner,
+            reclaiming,
+            vboxHighlight,
+            itemInfo,
+        } = state;
+
+        function sendVboxDiscard() {
+            return ws.sendVboxDiscard(instance.id);
+        }
+
+        function sendVboxAccept(group, index) {
+            return ws.sendVboxAccept(instance.id, group, index);
+        }
+
+        function sendVboxCombine() {
+            return ws.sendVboxCombine(instance.id, combiner);
+        }
+
+        function sendVboxReclaim(i) {
+            return ws.sendVboxReclaim(instance.id, i);
+        }
+
+
+        return {
+            combiner,
+            instance,
+            player,
+            reclaiming,
+            sendVboxAccept,
+            sendVboxCombine,
+            sendVboxDiscard,
+            sendVboxReclaim,
+            vboxHighlight,
+            itemInfo,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setCombiner(c) {
+            return dispatch(actions.setCombiner(c));
+        }
+
+        function setReclaiming(v) {
+            return dispatch(actions.setReclaiming(v));
+        }
+
+        function setInfo(item) {
+            return dispatch(actions.setInfo(item));
+        }
+
+        function setVboxHighlight(v) {
+            return dispatch(actions.setVboxHighlight(v));
+        }
+
+        return {
+            setCombiner,
+            setReclaiming,
+            setInfo,
+            setVboxHighlight,
+        };
+    }
+
+);
 
 function Vbox(args) {
     const {
-        activeCryp,
-        setActiveCryp,
         combiner,
-        info,
         instance,
+        itemInfo,
         player,
         reclaiming,
         sendVboxAccept,
-        sendVboxApply,
         sendVboxCombine,
         sendVboxDiscard,
         sendVboxReclaim,
+        vboxHighlight,
+
         setCombiner,
         setInfo,
         setReclaiming,
-        showTeam,
-        vboxHidden,
-        vboxHighlight,
         setVboxHighlight,
-        itemInfo,
     } = args;
 
     if (!player) return false;
@@ -82,18 +148,18 @@ function Vbox(args) {
         return true;
     }
 
+    function vboxHover(e, v) {
+        if (v) {
+            setInfo(v);
+            e.stopPropagation();
+        }
+        return true;
+    }
+
     const freeRows = free.map((row, i) => {
         const cells = row.map((c, j) => {
             const highlighted = c && vboxHighlight.includes(c);
 
-            function freeClick() {
-                if (c) {
-                    setActiveCryp(null);
-                    return setInfo(c);
-                }
-                return false;
-            }
-
             return <td
                 key={j}
                 className={`${highlighted ? 'highlight' : ''}`}
@@ -101,8 +167,9 @@ function Vbox(args) {
                 onTouchEnd={e => vboxTouchEnd(e, i, j)}
                 onTouchMove={e => vboxTouchMove(e)}
 
-                onClick={freeClick}
+                // onClick={freeClick}
                 onDblClick={() => sendVboxAccept(j, i) }
+                onMouseOver={(e) => vboxHover(e, c)}
                 >
                 {convertItem(c)}
             </td>;
@@ -118,19 +185,13 @@ function Vbox(args) {
     //
     //  INVENTORY
     //
-    function boundClick(e, i, highlight) {
+    function boundClick(e, i) {
         const value = vbox.bound[i];
-        if (reclaiming && value) sendVboxReclaim(i);
+        if (reclaiming && value) return sendVboxReclaim(i);
-        else if (highlight && activeCryp) {
+        if (value) {
-            sendVboxApply(i);
-            setVboxHighlight([]);
-            showTeam();
-        } else if (value) {
             const insert = combiner.findIndex(j => j === null);
             if (insert === -1) return combinerChange([i, null, null]);
             combiner[insert] = i;
-            setInfo(value);
-            setActiveCryp(null);
             return combinerChange(combiner);
         }
         return false;
@@ -153,6 +214,7 @@ function Vbox(args) {
             <td
                 key={i}
                 className={`${highlighted ? 'highlight' : ''}`}
+                onMouseOver={(e) => vboxHover(e, value)}
                 onClick={e => boundClick(e, i, highlighted) }>
                 {convertItem(value)}
             </td>
@@ -211,7 +273,7 @@ function Vbox(args) {
         return setReclaiming(!reclaiming);
     }
 
-    const classes = `vbox ${vboxHidden ? 'hidden' : ''}`;
+    const classes = `vbox`;
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
@@ -258,4 +320,4 @@ function Vbox(args) {
     );
 }
 
-module.exports = Vbox;
+module.exports = addState(Vbox);

client/src/components/vbox.container.jsx

@@ -1,101 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Vbox = require('./vbox.component');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            ws,
-            instance,
-            player,
-            combiner,
-            reclaiming,
-            activeItem,
-            activeCryp,
-            info,
-            vboxHidden,
-            vboxHighlight,
-            itemInfo,
-        } = state;
-
-        function sendVboxApply(i) {
-            return ws.sendVboxApply(instance.id, activeCryp.id, i);
-        }
-
-        function sendVboxDiscard() {
-            return ws.sendVboxDiscard(instance.id);
-        }
-
-        function sendVboxAccept(group, index) {
-            return ws.sendVboxAccept(instance.id, group, index);
-        }
-
-        function sendVboxCombine() {
-            return ws.sendVboxCombine(instance.id, combiner);
-        }
-
-        function sendVboxReclaim(i) {
-            return ws.sendVboxReclaim(instance.id, i);
-        }
-
-        return {
-            instance,
-            player,
-            combiner,
-            reclaiming,
-            activeItem,
-            activeCryp,
-            info,
-            itemInfo,
-            vboxHidden,
-            vboxHighlight,
-            sendVboxAccept,
-            sendVboxDiscard,
-            sendVboxReclaim,
-            sendVboxCombine,
-            sendVboxApply,
-        };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setCombiner(c) {
-            return dispatch(actions.setCombiner(c));
-        }
-
-        function setReclaiming(v) {
-            return dispatch(actions.setReclaiming(v));
-        }
-
-        function setInfo(item) {
-            return dispatch(actions.setInfo(item));
-        }
-
-        function setActiveCryp(v) {
-            return dispatch(actions.setActiveCryp(v));
-        }
-
-        function setVboxHighlight(v) {
-            return dispatch(actions.setVboxHighlight(v));
-        }
-
-        function showTeam() {
-            dispatch(actions.setInfo(null));
-            dispatch(actions.setVboxHidden(true));
-            return true;
-        }
-
-        return {
-            setCombiner,
-            setActiveCryp,
-            setReclaiming,
-            setInfo,
-            setVboxHighlight,
-            showTeam,
-        };
-    }
-
-);
-
-module.exports = addState(Vbox);

client/src/events.jsx

@@ -143,7 +143,6 @@ function registerEvents(store) {
         const player = v.players.find(p => p.id === account.id);
         if (player) store.dispatch(actions.setPlayer(player));
         if (v) ws.startInstanceStateTimeout(v.id);
-        if (v.phase === 'Lobby') store.dispatch(actions.setVboxHidden(true));
         return store.dispatch(actions.setInstance(v));
     }
 

client/src/reducers.jsx

@@ -13,26 +13,25 @@ function createReducer(defaultState, actionType) {
 module.exports = {
     account:            createReducer(null, 'SET_ACCOUNT'),
     activeCryp:         createReducer(null, 'SET_ACTIVE_CRYP'),
-    activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
     activeItem:         createReducer(null, 'SET_ACTIVE_VAR'),
+    activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
     combiner:           createReducer([null, null, null], 'SET_COMBINER'),
     cryps:              createReducer([], 'SET_CRYPS'),
     game:               createReducer(null, 'SET_GAME'),
     info:               createReducer(null, 'SET_INFO'),
-    itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
-    itemUnequip:       createReducer(null, 'SET_ITEM_UNEQUIP'),
     instance:           createReducer(null, 'SET_INSTANCE'),
     instances:          createReducer([], 'SET_INSTANCES'),
-    skip:               createReducer(false, 'SET_SKIP'),
+    itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
+    itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
+    itemUnequip:        createReducer(null, 'SET_ITEM_UNEQUIP'),
     nav:                createReducer(null, 'SET_NAV'),
     ping:               createReducer(null, 'SET_PING'),
     player:             createReducer(null, 'SET_PLAYER'),
     reclaiming:         createReducer(false, 'SET_RECLAIMING'),
     resolution:         createReducer(null, 'SET_RESOLUTION'),
-    team:               createReducer([null, null, null], 'SET_SELECTED_CRYPS'),
     showLog:            createReducer(false, 'SET_SHOW_LOG'),
-    vboxHidden:         createReducer(false, 'SET_VBOX_HIDDEN'),
+    skip:               createReducer(false, 'SET_SKIP'),
+    team:               createReducer([null, null, null], 'SET_SELECTED_CRYPS'),
     vboxHighlight:      createReducer([], 'SET_VBOX_HIGHLIGHT'),
-    itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
     ws:                 createReducer(null, 'SET_WS'),
 };