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,41 +82,45 @@ function GamePanel(props) {
         );
     }
 
+    function Skill(cryp, i) {
+        const ko = cryp.hp.value === 0 ? 'ko' : '';
+
+        const s = cryp.skills[i];
+        if (!s) {
+            return (
+                <button
+                    disabled='true'
+                    key={i}
+                    className='cryp-skill-btn disabled'>
+                    <span>&nbsp;</span>
+                </button>
+            );
+        }
+
+        const cdText = cryp.skills[i].cd > 0
+            ? `- ${s.cd}`
+            : '';
+
+        const highlight = activeSkill
+            ? activeSkill.crypId === cryp.id && activeSkill.skill === s
+            : false;
+
+        return (
+            <button
+                key={i}
+                disabled={!!cdText || ko}
+                className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
+                type="submit"
+                onClick={() => setActiveSkill(cryp.id, s.skill)}>
+                {s.skill} {cdText}
+            </button>
+        );
+    }
+
     function Cryp(cryp) {
         const ko = cryp.hp.value === 0 ? 'ko' : '';
 
-        const skills = range(0, 4).map(i => {
+        const skills = range(0, 4).map(i => Skill(cryp, i));
-            const s = cryp.skills[i];
-            if (!s) {
-                return (
-                    <button
-                        disabled='true'
-                        key={i}
-                        className='cryp-skill-btn disabled'>
-                        <span>&nbsp;</span>
-                    </button>
-                );
-            }
-
-            const cdText = cryp.skills[i].cd > 0
-                ? `- ${s.cd}`
-                : '';
-
-            const highlight = activeSkill
-                ? activeSkill.crypId === cryp.id && activeSkill.skill === s
-                : false;
-
-            return (
-                <button
-                    key={i}
-                    disabled={!!cdText || ko}
-                    className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
-                    type="submit"
-                    onClick={() => setActiveSkill(cryp.id, s.skill)}>
-                    {s.skill} {cdText}
-                </button>
-            );
-        });
 
         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,