swiping pog

client/assets/styles/instance.mobile.less

@@ -1,3 +1,5 @@
+@import 'colours.less';
+
 @media (max-width: 800px) {
     .instance {
         font-size: 8pt;
@@ -7,14 +9,14 @@
         grid-template-areas:
             "vbox"
             "constructs";
+
+        .info {
+            display: none;
+        }
     }
 
     .instance .nav-btn { display: initial; }
 
-    /* Default view */
-    .instance .equip { display: none; }
-    .instance .info { display: none; }
-    .instance .construct-list { display: none; }
     .vbox {
         grid-area: vbox;
         margin-bottom: 0;
@@ -27,6 +29,9 @@
             "inventory"
             "combiner";
 
+        &:not(.visible) {
+            display: none;
+        }
     }
 
     .vbox-arrow {
@@ -45,24 +50,13 @@
         margin: 0;
     }
 
-    /* constructs toggled on */
+    .construct-list {
-    .instance.constructs-visible .vbox {
-        display: none;
-    }
-
-    .instance.constructs-visible .equip {
-        display: initial;
-        grid-area: vbox;
-        margin: 0;
-    }
-
-    .instance.constructs-visible .highlight {
-        display: initial;
-    }
-
-    .instance.constructs-visible .construct-list {
         display: grid;
         grid-auto-rows: 1fr;
+
+        .instance-construct:not(.visible) {
+            display: none;
+        };
     }
 
     .vbox-inventory {

client/index.js

@@ -9,7 +9,7 @@ require('./assets/styles/vbox.less');
 require('./assets/styles/game.less');
 require('./assets/styles/player.less');
 require('./assets/styles/styles.mobile.css');
-require('./assets/styles/instance.mobile.css');
+require('./assets/styles/instance.mobile.less');
 
 // kick it off
 require('./src/app');

client/package.json

@@ -19,6 +19,7 @@
     "async": "^2.6.2",
     "borc": "^2.0.3",
     "docco": "^0.7.0",
+    "hammerjs": "^2.0.8",
     "izitoast": "^1.4.0",
     "keymaster": "^1.6.2",
     "linkstate": "^1.1.1",

client/src/actions.jsx

@@ -27,6 +27,7 @@ export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
 export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value });
 export const setNav = value => ({ type: 'SET_NAV', value });
+export const setNavInstance = value => ({ type: 'SET_NAV_INSTANCE', value });
 export const setPing = value => ({ type: 'SET_PING', value });
 export const setPlayer = value => ({ type: 'SET_PLAYER', value });
 export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });

client/src/components/instance.component.jsx

@@ -1,6 +1,9 @@
+const { Component } = require('preact');
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
+const Hammer = require('hammerjs');
+
 const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
 const InstanceConstructsContainer = require('./instance.constructs');
@@ -11,8 +14,14 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { instance, nav } = state;
+        const { instance,
-        return { instance, nav };
+            nav,
+            navInstance,
+        } = state;
+        return { instance,
+            nav,
+            navInstance,
+        };
     },
 
     function receiveDispatch(dispatch) {
@@ -20,6 +29,11 @@ const addState = connect(
             return dispatch(actions.setInfo(c));
         }
 
+        function setNavInstance(c) {
+            return dispatch(actions.setNavInstance(c));
+        }
+
+
         function clearItems() {
             dispatch(actions.setCombiner([]));
             dispatch(actions.setReclaiming(false));
@@ -33,17 +47,17 @@ const addState = connect(
         return {
             setInfo,
             clearItems,
+            setNavInstance,
         };
     }
 );
 
-function Instance(args) {
+class Instance extends Component {
+    render(args) {
         const {
             instance,
             setInfo,
             clearItems,
-
-        nav,
         } = args;
 
         if (!instance) return false;
@@ -57,14 +71,44 @@ function Instance(args) {
             clearItems();
         }
 
-    const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
         return (
-        <main class={instanceClasses} onClick={instanceClick} onMouseOver={() => setInfo(null)} >
+            <main id="instance" class='instance' onClick={instanceClick} onMouseOver={() => setInfo(null)} >
                 <Vbox />
                 <InfoContainer />
                 <InstanceConstructsContainer />
             </main>
         );
+    }
+
+    componentDidMount() {
+        this.bindSwipes();
+    }
+
+    bindSwipes() {
+        const instance = document.getElementById('instance');
+        if (!instance) return setTimeout(this.bindSwipes, 50);
+        if (this.h) this.h.destroy();
+        this.h = new Hammer(instance);
+        const display = ['vbox', 'c0', 'c1', 'c2'];
+
+        this.h.on('swiperight', () => {
+            const {
+                navInstance,
+                setNavInstance,
+            } = this.props;
+            setNavInstance(navInstance === 0 ? 3 : navInstance - 1);
+        });
+
+        this.h.on('swipeleft', () => {
+            const {
+                navInstance,
+                setNavInstance,
+            } = this.props;
+            setNavInstance((navInstance + 1) % 4);
+        });
+
+        return true;
+    }
 }
 
 module.exports = addState(Instance);

client/src/components/instance.constructs.jsx

@@ -9,7 +9,16 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, itemInfo, itemEquip, activeConstruct } = state;
+        const {
+            ws,
+            instance,
+            player,
+            account,
+            itemInfo,
+            itemEquip,
+            activeConstruct,
+            navInstance,
+        } = state;
 
         function sendVboxApply(constructId, i) {
             return ws.sendVboxApply(instance.id, constructId, i);
@@ -26,6 +35,7 @@ const addState = connect(
             sendVboxApply,
             itemInfo,
             itemEquip,
+            navInstance,
             activeConstruct,
             sendUnequip,
         };
@@ -63,7 +73,6 @@ const addState = connect(
 
 function Construct(props) {
     const {
-        activeConstruct,
         itemEquip,
         construct,
         player,
@@ -74,6 +83,7 @@ function Construct(props) {
         itemInfo,
         setInfo,
         sendUnequip,
+        mobileVisible,
     } = props;
 
     function onClick(e) {
@@ -191,8 +201,10 @@ function Construct(props) {
         </div>;
     });
 
+    const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
+
     return (
-        <div key={construct.id} class="instance-construct" onClick={onClick} >
+        <div key={construct.id} class={classes} onClick={onClick} >
             <ConstructAvatar construct={construct} />
             <h2 class="name" >{construct.name}</h2>
             <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
@@ -224,6 +236,7 @@ function InstanceConstructs(props) {
         setItemUnequip,
         setItemEquip,
         sendUnequip,
+        navInstance,
     } = props;
 
     if (!player) return false;
@@ -242,6 +255,7 @@ function InstanceConstructs(props) {
         itemInfo,
         setVboxHighlight,
         sendUnequip,
+        mobileVisible: navInstance === i + 1,
     }));
 
     const classes = `construct-list`;

client/src/components/instance.footer.jsx

@@ -15,16 +15,11 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setInfo(c) {
-            return dispatch(actions.setInfo(c));
-        }
-
         function setNav(v) {
             return dispatch(actions.setNav(v));
         }
 
         return {
-            setInfo,
             setNav,
         };
     }
@@ -34,29 +29,11 @@ function Instance(args) {
     const {
         instance,
         player,
-        nav,
-        showNav,
-
-        setInfo,
-        setNav,
 
         sendInstanceReady,
     } = args;
 
-    if (!instance || !player) {
+    const rdyClasses = `ready-btn ready`;
-        return (
-            <footer id="footer">
-                <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
-            </footer>
-        );
-    }
-
-    function hoverInfo(e, info) {
-        e.stopPropagation();
-        return setInfo(info);
-    }
-
-    const rdyClasses = `${player.ready ? 'ready ready-btn' : 'ready-btn'}`;
     const readyInfo = instance.phase === 'Lobby'
         ? 'lobbyReady'
         : 'ready';
@@ -64,27 +41,11 @@ function Instance(args) {
     const readyBtn = (
         <button
             class={rdyClasses}
-            onMouseOver={e => hoverInfo(e, readyInfo)}
             onClick={() => sendInstanceReady()}>
             Ready
         </button>
     );
 
-    function navClick() {
-        if (nav === 'vbox') return setNav('constructs');
-        return setNav('vbox');
-    }
-
-    const navBtn = instance.phase === 'InProgress'
-        ? (
-            <button
-                id="instance-nav"
-                onClick={navClick}>
-                {nav === 'vbox' ? 'Constructs' : 'Vbox'}
-            </button>
-        )
-        : null;
-
     const zero = Date.parse(instance.phase_start);
     const now = Date.now();
     const end = Date.parse(instance.phase_end);
@@ -112,7 +73,6 @@ function Instance(args) {
     return (
         <footer id="footer">
             {timer}
-            {navBtn}
             {readyBtn}
         </footer>
     );

client/src/components/vbox.component.jsx

@@ -17,6 +17,7 @@ const addState = connect(
             vboxSelected,
             itemInfo,
             itemUnequip,
+            navInstance,
         } = state;
 
         function sendVboxDiscard() {
@@ -51,7 +52,8 @@ const addState = connect(
             vboxSelected,
             itemInfo,
             itemUnequip,
-            sendItemUnequip
+            sendItemUnequip,
+            navInstance,
         };
     },
 
@@ -90,6 +92,7 @@ const addState = connect(
 function Vbox(args) {
     const {
         combiner,
+        navInstance,
         // instance,
         itemInfo,
         player,
@@ -348,7 +351,7 @@ function Vbox(args) {
         return setInfo(info);
     }
 
-    const classes = 'vbox';
+    const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
     return (
         <div class={classes}>
             {vboxElement()}

client/src/reducers.jsx

@@ -40,6 +40,7 @@ module.exports = {
     itemUnequip:        createReducer([], 'SET_ITEM_UNEQUIP'),
     mtxActive:          createReducer(null, 'SET_MTX_ACTIVE'),
     nav:                createReducer(null, 'SET_NAV'),
+    navInstance:        createReducer(0, 'SET_NAV_INSTANCE'),
     showNav:            createReducer(null, 'SET_SHOW_NAV'),
     ping:               createReducer(null, 'SET_PING'),
     player:             createReducer(null, 'SET_PLAYER'),