moar mobile

client/.eslintrc.js

@@ -45,7 +45,7 @@ module.exports = {
         'import/no-extraneous-dependencies': [0],
         'prefer-arrow-callback': [0],
         'arrow-body-style': [0],
-        'no-return-assign': [2, 'except-parens'],
+        'no-return-assign': 0,
         'no-console': [0],
         // i like loops
         'no-plusplus': [0],
@@ -301,7 +301,7 @@ module.exports = {
         }],
 
         // disallow use of assignment in return statement
-        'no-return-assign': ['error', 'always'],
+        'no-return-assign': 0,
 
         // disallow redundant `return await`
         'no-return-await': 'error',

client/cryps.css

@@ -84,6 +84,10 @@ button.right[disabled]:hover, button.left[disabled]:hover {
     box-shadow: none;
 }
 
+button.top:hover, button.top:focus {
+    box-shadow: inset 0 0.25em 0 0 whitesmoke;
+}
+
 button.right:hover, button.right:focus {
     box-shadow: inset -0.5em 0 0 0 whitesmoke;
 }
@@ -622,16 +626,16 @@ header {
         padding: 0;
         margin: 0;
         border-bottom-width: 0px;
-        border-left-width: 0px;
+        border-left-width: 1px;
         border-top-width: 1px;
-        border-right-width: 1px;
+        border-right-width: 0px;
     }
 
     .cryp-skill-btn:first-child {
         border-top-width: 1px;
+        border-left-width: 0px;
     }
 
-
     .cryp-box .stats figure {
         padding: 0.2em 0;
     }

client/src/actions.jsx

@@ -28,6 +28,9 @@ export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, valu
 export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
 export const setActiveCryp = value => ({ type: SET_ACTIVE_CRYP, value });
 
+export const SET_ACTIVE_VAR = 'SET_ACTIVE_VAR';
+export const setActiveVar = value => ({ type: SET_ACTIVE_VAR, value });
+
 export const SET_INFO = 'SET_INFO';
 export const setInfo = value => ({ type: SET_INFO, value });
 

client/src/components/game.component.jsx

@@ -82,7 +82,7 @@ function GamePanel(props) {
         );
     }
 
-    function Skill(cryp, i) {
+    function Skill(cryp, i, mobile) {
         const ko = cryp.hp.value === 0 ? 'ko' : '';
 
         const s = cryp.skills[i];
@@ -97,6 +97,10 @@ function GamePanel(props) {
             );
         }
 
+        const side = mobile
+            ? 'top'
+            : 'right';
+
         const cdText = cryp.skills[i].cd > 0
             ? `- ${s.cd}`
             : '';
@@ -105,13 +109,18 @@ function GamePanel(props) {
             ? activeSkill.crypId === cryp.id && activeSkill.skill === s
             : false;
 
+        function onClick(e) {
+            e.stopPropagation();
+            return setActiveSkill(cryp.id, s.skill);
+        }
+
         return (
             <button
                 key={i}
                 disabled={!!cdText || ko}
-                className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
+                className={`cryp-skill-btn ${side} ${highlight ? 'active' : ''}`}
                 type="submit"
-                onClick={() => setActiveSkill(cryp.id, s.skill)}>
+                onClick={onClick}>
                 {s.skill} {cdText}
             </button>
         );
@@ -209,7 +218,7 @@ function GamePanel(props) {
     const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
 
     const mobileSkills = activeCryp
-        ? range(0, 4).map(i => Skill(activeCryp, i))
+        ? range(0, 4).map(i => Skill(activeCryp, i, true))
         : (<div/>);
 
     return (

client/src/components/instance.component.jsx

@@ -9,7 +9,7 @@ const molecule = require('./molecule');
 const shapes = require('./shapes');
 const { STATS, SPECS } = require('../utils');
 
-function Cryp(cryp, sendVboxApply, setInfo) {
+function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
     const skills = range(0, 4).map(i => {
         const s = cryp.skills[i]
             ? cryp.skills[i].skill
@@ -29,6 +29,17 @@ function Cryp(cryp, sendVboxApply, setInfo) {
         const item = parseInt(e.dataTransfer.getData('text'), 10);
         return sendVboxApply(cryp.id, item);
     }
+
+    function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
+        document.getElementsByClassName('instance-info')[0].scrollIntoView();
+
+        return setInfo('cryp', cryp);
+    }
+
     const specs = (cryp.specs.length > 0) ? cryp.specs.map((s, i) => (
         <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
             {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
@@ -44,7 +55,7 @@ function Cryp(cryp, sendVboxApply, setInfo) {
             onDrop={onDrop}
             >
             <div className="cryp-box-top">
-                <figure className="img" onClick={() => setInfo('cryp', cryp)}>
+                <figure className="img" onClick={onClick}>
                     {molecule}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>
@@ -67,11 +78,12 @@ function InstanceComponent(args) {
         sendInstanceReady,
         sendVboxApply,
         setInfo,
+        activeVar,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo));
+    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
 
     return (
         <main className="instance" >

client/src/components/instance.container.jsx

@@ -6,7 +6,7 @@ const Instance = require('./instance.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, account, combiner } = state;
+        const { ws, instance, account, activeVar } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.instance);
@@ -16,9 +16,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.instance, crypId, i);
         }
 
-        console.log(instance, 'instaince')
-
-        return { instance, account, sendInstanceReady, sendVboxApply };
+        return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
     },
 
     function receiveDispatch(dispatch, { instance, combiner }) {

client/src/components/vbox.component.jsx

@@ -21,6 +21,7 @@ function Vbox(args) {
         sendVboxCombine,
         setCombiner,
         setReclaiming,
+        setActiveVar,
         setInfo,
     } = args;
 
@@ -78,7 +79,11 @@ function Vbox(args) {
         // touch + double handling
         if (boundDbl !== i) {
             boundDbl = i;
-            setTimeout(() => boundDbl = -1, 300);
+            setTimeout(() => {
+                if (vbox.bound[i]) setActiveVar(i);
+                boundDbl = -1;
+                return true;
+            }, 300);
             return false;
         }
         e.preventDefault();

client/src/components/vbox.container.jsx

@@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, combiner, reclaiming } = state;
+        const { ws, instance, combiner, reclaiming, activeVar } = state;
 
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.instance);
@@ -28,6 +28,7 @@ const addState = connect(
             instance,
             combiner,
             reclaiming,
+            activeVar,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,
@@ -48,8 +49,16 @@ const addState = connect(
             return dispatch(actions.setInfo([type, info]));
         }
 
+        function setActiveVar(v) {
+            return dispatch(actions.setActiveVar(v));
+        }
 
-        return { setCombiner, setReclaiming, setInfo };
+        return {
+            setCombiner,
+            setReclaiming,
+            setInfo,
+            setActiveVar,
+        };
     }
 
 );

client/src/events.jsx

@@ -32,6 +32,10 @@ function registerEvents(store) {
         store.dispatch(actions.setActiveSkill(skill));
     }
 
+    function setActiveVar(v) {
+        store.dispatch(actions.setActiveVar(v));
+    }
+
     function clearInfo(info) {
         store.dispatch(actions.setInfo([]));
         console.log('event clear item');
@@ -199,6 +203,7 @@ function registerEvents(store) {
         clearCombiner,
         setAccount,
         setActiveSkill,
+        setActiveVar,
         setCryps,
         setCrypList,
         setGame,

client/src/main.jsx

@@ -19,6 +19,7 @@ const store = createStore(
         account: reducers.accountReducer,
         activeSkill: reducers.activeSkillReducer,
         activeCryp: reducers.activeCrypReducer,
+        activeVar: reducers.activeVarReducer,
         combiner: reducers.combinerReducer,
         cryps: reducers.crypsReducer,
         game: reducers.gameReducer,

client/src/reducers.jsx

@@ -20,6 +20,16 @@ function activeSkillReducer(state = defaultActiveSkill, action) {
     }
 }
 
+const defaultActiveVar = null;
+function activeVarReducer(state = defaultActiveVar, action) {
+    switch (action.type) {
+        case actions.SET_ACTIVE_VAR:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultActiveCryp = null;
 function activeCrypReducer(state = defaultActiveCryp, action) {
     switch (action.type) {
@@ -134,6 +144,7 @@ module.exports = {
     accountReducer,
     activeSkillReducer,
     activeCrypReducer,
+    activeVarReducer,
     combinerReducer,
     crypsReducer,
     gameReducer,

client/src/socket.jsx

@@ -91,6 +91,7 @@ function createSocket(events) {
 
     function sendVboxApply(instanceId, crypId, index) {
         send({ method: 'player_vbox_apply', params: { instance_id: instanceId, cryp_id: crypId, index } });
+        events.setActiveVar(null);
     }
 
     function sendVboxUnequip(instanceId, crypId, target) {