wip

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_HIDDEN = 'SET_VBOX_HIDDEN';
+export const setVboxHidden = value => ({ type: SET_VBOX_HIDDEN, value });
+
 export const SET_INSTANCES = 'SET_INSTANCES';
 export const setInstances = value => ({ type: SET_INSTANCES, value });
 
@@ -25,8 +28,8 @@ export const setGame = value => ({ type: SET_GAME, value });
 export const SET_RESOLUTION = 'SET_RESOLUTION';
 export const setResolution = value => ({ type: SET_RESOLUTION, value });
 
-export const SET_SHOW_ALT = 'SET_SHOW_ALT';
+export const SET_SHOW_LOG = 'SET_SHOW_LOG';
-export const setShowAlt = value => ({ type: SET_SHOW_ALT, value });
+export const setShowLog = value => ({ type: SET_SHOW_LOG, value });
 
 export const SET_COMBINER = 'SET_COMBINER';
 export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) });

client/src/components/game.container.jsx

@@ -66,7 +66,7 @@ const addState = connect(
         }
 
         function toggleLog(v) {
-            dispatch(actions.setShowAlt(v));
+            dispatch(actions.setShowLog(v));
         }
 
 

client/src/components/info.component.jsx

@@ -7,12 +7,14 @@ const { COLOUR_ICONS, STATS, SPECS, convertVar, crypAvatar } = require('../utils
 function Info(args) {
     const {
         activeCryp,
+        setActiveCryp,
         info,
         sendUnequip,
         instance,
         player,
         setInfo,
         vboxInfo,
+        vboxHidden,
     } = args;
 
     function CrypVar() {
@@ -116,9 +118,11 @@ function Info(args) {
         const skills = range(0, 3).map(i => {
             const skill = cryp.skills[i];
 
-            function skillClick() {
+            function skillClick(e) {
-                if (!skill) return false;
+                if (!skill) setInfo('highlight', 'skill');
-                return setInfo('skill', { skill: skill.skill, cryp });
+                else setInfo('skill', { skill: skill.skill, cryp });
+                e.stopPropagation();
+                return setActiveCryp(cryp);
             }
 
             const s = cryp.skills[i]
@@ -229,8 +233,10 @@ function Info(args) {
     //     ? <h2>game beginning...</h2>
     //     : null;
 
+    const classes = `instance-info ${vboxHidden ? '' : 'hidden'}`;
+
     return (
-        <div className="instance-info" >
+        <div className={classes} >
             <ScoreBoard />
             <CrypInfo />
             <Combos />

client/src/components/info.container.jsx

@@ -11,6 +11,7 @@ const addState = connect(
             ws,
             instance,
             vboxInfo,
+            vboxHidden,
             player,
         } = state;
 
@@ -25,6 +26,7 @@ const addState = connect(
             instance,
             player,
             vboxInfo,
+            vboxHidden,
         };
     },
 
@@ -33,6 +35,10 @@ const addState = connect(
             dispatch(actions.setInfo([item, value]));
         }
 
+        function setActiveCryp(value) {
+            dispatch(actions.setActiveCryp(value));
+        }
+
         function setActiveVar(value) {
             dispatch(actions.setActiveVar(value));
         }
@@ -40,6 +46,7 @@ const addState = connect(
         return {
             setInfo,
             setActiveVar,
+            setActiveCryp,
         };
     }
 

client/src/components/instance.component.jsx

@@ -10,21 +10,22 @@ function InstanceComponent(args) {
         player,
         quit,
         sendInstanceReady,
-        showAlt,
+
-        toggleAlt,
+        vboxHidden,
+        setVboxHidden,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    function swapPane(e) {
+    function toggleVbox(e) {
-        toggleAlt(!showAlt);
+        setVboxHidden(!vboxHidden);
         e.stopPropagation();
     }
 
     const vboxBtn = (
         <button
             className="instance-btn instance-ui-btn nav-btn left"
-            onClick={swapPane}>
+            onClick={toggleVbox}>
             vBox
         </button>
     );
@@ -32,12 +33,12 @@ function InstanceComponent(args) {
     const teamBtn = (
         <button
             className="instance-btn instance-ui-btn nav-btn right"
-            onClick={swapPane}>
+            onClick={toggleVbox}>
             team
         </button>
     );
 
-    const navBtn = showAlt
+    const navBtn = vboxHidden
         ? vboxBtn
         : teamBtn;
 

client/src/components/instance.container.jsx

@@ -6,7 +6,7 @@ const Instance = require('./instance.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, activeVar, showAlt } = state;
+        const { ws, instance, player, account, activeVar, vboxHidden } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.id);
@@ -16,7 +16,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.id, crypId, i);
         }
 
-        return { instance, player, account, sendInstanceReady, sendVboxApply, activeVar, showAlt };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, activeVar, vboxHidden };
     },
 
     function receiveDispatch(dispatch) {
@@ -28,8 +28,8 @@ const addState = connect(
             dispatch(actions.setInfo([item, value]));
         }
 
-        function toggleAlt(v) {
+        function setVboxHidden(v) {
-            dispatch(actions.setShowAlt(v));
+            dispatch(actions.setVboxHidden(v));
         }
 
         function setActiveCryp(value) {
@@ -40,7 +40,7 @@ const addState = connect(
             return dispatch(actions.setInfo([]));
         }
 
-        return { quit, clearInfo, setInfo, toggleAlt, setActiveCryp };
+        return { quit, clearInfo, setInfo, setVboxHidden, setActiveCryp };
     }
 
 );

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 } = state;
+        const { ws, instance, player, account, vboxHidden } = 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 };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden };
     },
 
     function receiveDispatch(dispatch) {
@@ -147,6 +147,7 @@ function InstanceCryps(props) {
         setActiveCryp,
 
         sendVboxApply,
+        vboxHidden,
     } = props;
 
     if (!player) return false;
@@ -156,8 +157,9 @@ function InstanceCryps(props) {
         cryp: c, sendVboxApply, setInfo, setActiveCryp,
     }));
 
+    const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
     return (
-        <div className="cryp-list" onClick={() => setActiveCryp(null)}>
+        <div className={classes} onClick={() => setActiveCryp(null)}>
             {cryps}
         </div>
     );

client/src/components/vbox.component.jsx

@@ -7,22 +7,22 @@ const { convertVar } = require('./../utils');
 
 function Vbox(args) {
     const {
-        activeVar,
         activeCryp,
-        player,
-        instance,
-        info,
-        vboxInfo,
         combiner,
+        info,
+        instance,
+        player,
         reclaiming,
         sendVboxAccept,
+        sendVboxApply,
+        sendVboxCombine,
         sendVboxDiscard,
         sendVboxReclaim,
-        sendVboxCombine,
-        sendVboxApply,
         setCombiner,
-        setReclaiming,
         setInfo,
+        setReclaiming,
+        vboxHidden,
+        vboxInfo,
     } = args;
 
     if (!player) return false;
@@ -111,7 +111,6 @@ function Vbox(args) {
         const highlighted = () => {
             if (!value || !info[0] || info[0] !== 'highlight') return false;
             const v = vboxInfo.vars.find(vi => vi.v === value);
-            console.log(v);
             if (info[1] === 'skill') return v.skill;
             if (info[1] === 'spec') return v.spec;
             return false;
@@ -122,8 +121,6 @@ function Vbox(args) {
         return (
             <td
                 key={i}
-                draggable="true"
-                onDragStart={e => e.dataTransfer.setData('text', i)}
                 className={`${highlight ? 'highlight' : ''}`}
                 onClick={e => boundClick(e, i, highlight) }>
                 {convertVar(value)}
@@ -183,7 +180,7 @@ function Vbox(args) {
         return setReclaiming(!reclaiming);
     }
 
-    const classes = `vbox`;
+    const classes = `vbox ${vboxHidden ? 'hidden' : ''}`;
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;
 
     return (

client/src/components/vbox.container.jsx

@@ -15,6 +15,7 @@ const addState = connect(
             activeVar,
             activeCryp,
             info,
+            vboxHidden,
             vboxInfo,
         } = state;
 
@@ -47,6 +48,7 @@ const addState = connect(
             activeCryp,
             info,
             vboxInfo,
+            vboxHidden,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,

client/src/main.jsx

@@ -20,22 +20,22 @@ const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
 const store = createStoreWithMiddleware(
     combineReducers({
         account: reducers.accountReducer,
-        activeSkill: reducers.activeSkillReducer,
         activeCryp: reducers.activeCrypReducer,
+        activeSkill: reducers.activeSkillReducer,
         activeVar: reducers.activeVarReducer,
         combiner: reducers.combinerReducer,
         cryps: reducers.crypsReducer,
         game: reducers.gameReducer,
-        resolution: reducers.resolutionReducer,
-        showAlt: reducers.showAltReducer,
         info: reducers.infoReducer,
-        vboxInfo: reducers.vboxInfoReducer,
         instance: reducers.instanceReducer,
-        player: reducers.playerReducer,
-        ping: reducers.pingReducer,
         instances: reducers.instancesReducer,
+        ping: reducers.pingReducer,
+        player: reducers.playerReducer,
         reclaiming: reducers.reclaimingReducer,
+        resolution: reducers.resolutionReducer,
         selectedCryps: reducers.selectedCrypsReducer,
+        vboxInfo: reducers.vboxInfoReducer,
+        vboxHidden: reducers.vboxHiddenReducer,
         ws: reducers.wsReducer,
     })
 );

client/src/reducers.jsx

@@ -140,10 +140,20 @@ function resolutionReducer(state = defaultResolution, action) {
     }
 }
 
-const defaultShowAlt = false;
+const defaultShowLog = false;
-function showAltReducer(state = defaultShowAlt, action) {
+function showLogReducer(state = defaultShowLog, action) {
     switch (action.type) {
-        case actions.SET_SHOW_ALT:
+        case actions.SET_SHOW_LOG:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
+const defaultVboxHidden = false;
+function vboxHiddenReducer(state = defaultVboxHidden, action) {
+    switch (action.type) {
+        case actions.SET_VBOX_HIDDEN:
             return action.value;
         default:
             return state;
@@ -188,7 +198,8 @@ module.exports = {
     combinerReducer,
     crypsReducer,
     gameReducer,
-    showAltReducer,
+    showLogReducer,
+    vboxHiddenReducer,
     instanceReducer,
     instancesReducer,
     playerReducer,