more mobile

client/cryps.css

@@ -529,6 +529,10 @@ header {
     flex: 1;
 }
 
+.mobile-skills {
+    display: none;
+}
+
 @media (max-width: 1000px) {
     .selected-skills {
         display: none;
@@ -542,6 +546,23 @@ header {
         justify-content: space-between;
     }
 
+    main.game {
+        flex-flow: column-reverse;
+    }
+
+    main.game .instance-hdr {
+        order: 99;
+    }
+
+    .header-username {
+        display: none;
+    }
+
+    .menu-instance-list {
+        order: -1;
+        width: 100%;
+    }
+
     .cryps {
         font-size: 0.75em;
         padding: 0 1em;
@@ -584,11 +605,33 @@ header {
         display: none;
     }
 
-
     .selected-skills {
         display: block;
     }
 
+    .mobile-skills {
+        display: flex;
+        flex-flow: row;
+        width: 100%;
+    }
+
+    .cryp-skill-btn {
+        flex: 1;
+        font-size: 16pt;
+        border-width: 1px;
+        padding: 0;
+        margin: 0;
+        border-bottom-width: 0px;
+        border-left-width: 0px;
+        border-top-width: 1px;
+        border-right-width: 1px;
+    }
+
+    .cryp-skill-btn:first-child {
+        border-top-width: 1px;
+    }
+
+
     .cryp-box .stats figure {
         padding: 0.2em 0;
     }

client/src/actions.jsx

@@ -22,12 +22,12 @@ export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(val
 export const SET_SELECTED_CRYPS = 'SET_SELECTED_CRYPS';
 export const setSelectedCryps = value => ({ type: SET_SELECTED_CRYPS, value: Array.from(value) });
 
-export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
-export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value });
-
 export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
 export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
 
+export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
+export const setActiveCryp = value => ({ type: SET_ACTIVE_CRYP, value });
+
 export const SET_INFO = 'SET_INFO';
 export const setInfo = value => ({ type: SET_INFO, value });
 

client/src/components/game.component.jsx

@@ -12,7 +12,9 @@ function GamePanel(props) {
         game,
         activeSkill,
         setActiveSkill,
+        setActiveCryp,
         selectSkillTarget,
+        activeCryp,
         account,
         showLog,
         toggleLog,
@@ -42,7 +44,7 @@ function GamePanel(props) {
     if (showLog) {
         const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
         return (
-            <main>
+            <main className="game">
                 {header}
                 <div className="logs">
                     {logs}
@@ -80,10 +82,9 @@ function GamePanel(props) {
         );
     }
 
-    function Cryp(cryp) {
+    function Skill(cryp, i) {
         const ko = cryp.hp.value === 0 ? 'ko' : '';
 
-        const skills = range(0, 4).map(i => {
         const s = cryp.skills[i];
         if (!s) {
             return (
@@ -114,7 +115,12 @@ function GamePanel(props) {
                 {s.skill} {cdText}
             </button>
         );
-        });
+    }
+
+    function Cryp(cryp) {
+        const ko = cryp.hp.value === 0 ? 'ko' : '';
+
+        const skills = range(0, 4).map(i => Skill(cryp, i));
 
         const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
             <figure key={j} alt={s.stat}>
@@ -124,10 +130,16 @@ function GamePanel(props) {
         ));
 
 
+        function onClick(e) {
+            e.stopPropagation();
+            return setActiveCryp(cryp);
+        }
+
         return (
             <div
                 key={cryp.id}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
+                onClick={onClick}
                 className={`cryp-box ${ko}`} >
                 <div className="cryp-box-top">
                     <figure
@@ -196,11 +208,17 @@ function GamePanel(props) {
 
     const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
 
+    const mobileSkills = activeCryp
+        ? range(0, 4).map(i => Skill(activeCryp, i))
+        : (<div/>);
 
     return (
-        <main>
+        <main className="game" onClick={() => setActiveCryp(null)} >
             {header}
             {PlayerTeam(playerTeam, setActiveSkill)}
+            <div className="mobile-skills">
+                {mobileSkills}
+            </div>
             <div className="selected-skills">
                 {selectedSkills}
             </div>

client/src/components/game.container.jsx

@@ -1,17 +1,24 @@
-import 'particles.js/particles';
+// import 'particles.js/particles';
 
 const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
 const Game = require('./game.component');
-const config = require('./particles.config');
+// const config = require('./particles.config');
 
-const particlesJS = window.particlesJS;
+// const particlesJS = window.particlesJS;
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, game, account, showLog, activeSkill, activeIncoming } = state;
+        const {
+            ws,
+            game,
+            account,
+            showLog,
+            activeSkill,
+            activeCryp,
+        } = state;
 
         function selectSkillTarget(targetCrypId) {
             if (activeSkill) {
@@ -25,14 +32,14 @@ const addState = connect(
             ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
         }
 
-        function selectIncomingTarget(crypId) {
+        return {
-            if (activeIncoming) {
+            game,
-                return ws.sendGameTarget(game.id, crypId, activeIncoming);
+            showLog,
-            }
+            account,
-            return false;
+            activeSkill,
-        }
+            activeCryp,
-
+            selectSkillTarget,
-        return { game, showLog, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
+        };
     },
 
     function receiveDispatch(dispatch) {
@@ -41,8 +48,8 @@ const addState = connect(
             // particlesJS(`particles-${crypId}`, config);
         }
 
-        function setActiveIncoming(skillId) {
+        function setActiveCryp(cryp) {
-            dispatch(actions.setActiveIncoming(skillId));
+            dispatch(actions.setActiveCryp(cryp));
         }
 
         function quit() {
@@ -54,7 +61,7 @@ const addState = connect(
         }
 
 
-        return { setActiveSkill, setActiveIncoming, quit, toggleLog };
+        return { setActiveSkill, setActiveCryp, quit, toggleLog };
     }
 
 );

client/src/components/vbox.component.jsx

@@ -35,19 +35,19 @@ function Vbox(args) {
         free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
     }
 
-    let freeDbl = false;
+    let freeDbl = -1;
     function freeClick(e, i, j) {
         // touch + double handling
-        if (!freeDbl) {
+        if (freeDbl !== j) {
-            freeDbl = true;
+            freeDbl = j;
             setTimeout(() => {
-                freeDbl = false;
+                freeDbl = -1;
                 if (free[i][j]) setInfo('item', free[i][j]);
             }, 300);
             return false;
         }
         e.preventDefault();
-        freeDbl = false;
+        freeDbl = -1;
 
         return sendVboxAccept(j, i);
     }
@@ -73,16 +73,16 @@ function Vbox(args) {
     //  INVENTORY
     //
     // lots of rubbish to make it flow nice
-    let boundDbl = false;
+    let boundDbl = -1;
     function boundClick(e, i) {
         // touch + double handling
-        if (!boundDbl) {
+        if (boundDbl !== i) {
-            boundDbl = true;
+            boundDbl = i;
-            setTimeout(() => boundDbl = false, 300);
+            setTimeout(() => boundDbl = -1, 300);
             return false;
         }
         e.preventDefault();
-        boundDbl = false;
+        boundDbl = -1;
 
         // action
         if (reclaiming && i) {
@@ -158,7 +158,7 @@ function Vbox(args) {
     return (
         <div className="vbox" onClick={() => setReclaiming(false)} >
             <div className="vbox-hdr">
-                <div>VBOX</div>
+                <div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
                 <div className="bits" >{vbox.bits}b</div>
             </div>
             <button
@@ -182,7 +182,7 @@ function Vbox(args) {
                     {boundRows}
                 </tbody>
             </table>
-            <span>I-COMBINATOR</span>
+            <span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxCombine()}>

client/src/main.jsx

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

client/src/reducers.jsx

@@ -20,6 +20,16 @@ function activeSkillReducer(state = defaultActiveSkill, action) {
     }
 }
 
+const defaultActiveCryp = null;
+function activeCrypReducer(state = defaultActiveCryp, action) {
+    switch (action.type) {
+        case actions.SET_ACTIVE_CRYP:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultCryps = null;
 function crypsReducer(state = defaultCryps, action) {
     switch (action.type) {
@@ -123,6 +133,7 @@ function infoReducer(state = defaultInfo, action) {
 module.exports = {
     accountReducer,
     activeSkillReducer,
+    activeCrypReducer,
     combinerReducer,
     crypsReducer,
     gameReducer,