remove old hammer and swiping code

client/assets/styles/styles.mobile.less

@@ -1,4 +1,4 @@
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
     body {
         overflow-y: initial;
     }

client/src/actions.jsx

@@ -36,12 +36,10 @@ 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 });
 export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
-export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
 export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value });

client/src/components/demo.jsx

@@ -84,7 +84,7 @@ function Demo(args) {
 
         function inventoryElement() {
             return (
-                <div class="vbox visible">
+                <div class="vbox">
                     <div class='vbox-section'>
                         <h2 class='colour-info'>
                             VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
@@ -117,7 +117,7 @@ function Demo(args) {
             : 'empty gray';
 
         const constructEl = c => (
-            <div class="instance-construct visible">
+            <div class="instance-construct">
                 <h2 class="name" >{c.name}</h2>
                 <ConstructAvatar construct={c} />
                 <div class="skills">

client/src/components/instance.component.jsx

@@ -1,9 +1,6 @@
-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');
@@ -16,12 +13,10 @@ const addState = connect(
         const {
             instance,
             nav,
-            navInstance,
         } = state;
         return {
             instance,
             nav,
-            navInstance,
         };
     },
 
@@ -30,10 +25,6 @@ const addState = connect(
             return dispatch(actions.setInfo(c));
         }
 
-        function setNavInstance(c) {
-            return dispatch(actions.setNavInstance(c));
-        }
-
 
         function clearItems() {
             dispatch(actions.setCombiner([]));
@@ -48,18 +39,11 @@ const addState = connect(
         return {
             setInfo,
             clearItems,
-            setNavInstance,
         };
     }
 );
 
-class Instance extends Component {
+function Instance(args) {
-    shouldComponentUpdate(newProps) {
-        if (newProps.instance !== this.props.instance) return true;
-        return false;
-    }
-
-    render(args) {
     const {
         instance,
         clearItems,
@@ -87,41 +71,6 @@ class Instance extends Component {
             <InstanceConstructsContainer />
         </main>
     );
-    }
-
-    componentDidMount() {
-        if (!this.h) this.bindSwipes();
-    }
-
-    componentDidUpdate() {
-        if (!this.h) 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);
-        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

@@ -1,5 +1,6 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
+
 const range = require('lodash/range');
 
 const buttons = require('./buttons');
@@ -19,7 +20,6 @@ const addState = connect(
             account,
             itemInfo,
             itemEquip,
-            navInstance,
             tutorial,
         } = state;
 
@@ -38,7 +38,6 @@ const addState = connect(
             sendVboxApply,
             itemInfo,
             itemEquip,
-            navInstance,
             sendUnequip,
             tutorial,
         };
@@ -77,7 +76,6 @@ function Construct(props) {
         iter,
         itemEquip,
         instance,
-        mobileVisible,
         player,
         tutorial,
         // Static Info
@@ -220,7 +218,7 @@ function Construct(props) {
         </div>;
     });
 
-    const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
+    const classes = `instance-construct`;
     const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     return (
         <div key={construct.id} class={classes} onClick={onClick}>
@@ -243,7 +241,6 @@ class InstanceConstructs extends preact.Component {
     shouldComponentUpdate(newProps) {
         if (newProps.itemEquip !== this.props.itemEquip) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.navInstance !== this.props.navInstance) return true;
         // JSON or Array objects
         if (newProps.player !== this.props.player) return true;
         if (newProps.instance !== this.props.instance) return true;
@@ -255,7 +252,6 @@ class InstanceConstructs extends preact.Component {
             // Changing state variables
             itemEquip,
             instance,
-            navInstance,
             player,
             tutorial,
             // Static data
@@ -274,7 +270,7 @@ class InstanceConstructs extends preact.Component {
         if (instance.phase === 'Lobby') return false;
 
         const constructs = range(0, 3).map(i => {
-            const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
+            const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, i);
             if (tutorialConstruct) return (tutorialConstruct);
 
             return Construct({
@@ -292,7 +288,6 @@ class InstanceConstructs extends preact.Component {
                 setVboxHighlight,
                 sendUnequip,
                 tutorial,
-                mobileVisible: navInstance === i + 1,
             });
         });
 

client/src/components/mnml.jsx

@@ -10,21 +10,14 @@ const addState = connect(
     state => ({ showNav: state.showNav })
 );
 
-class Mnml extends preact.Component {
+function Mnml(args) {
-    shouldComponentUpdate(newProps) {
-        if (newProps.showNav !== this.props.showNav) return true;
-        return false;
-    }
-
-    render(args) {
     return (
-            <div id="mnml" class={args.showNav ? 'nav-visible' : ''}>
+        <div id="mnml">
             <Main />
             <Controls />
             <Footer />
         </div>
     );
-    }
 }
 
 module.exports = addState(Mnml);

client/src/components/vbox.component.jsx

@@ -20,7 +20,6 @@ const addState = connect(
             vboxSelected,
             itemInfo,
             itemUnequip,
-            navInstance,
             tutorial,
         } = state;
 
@@ -57,7 +56,6 @@ const addState = connect(
             itemInfo,
             itemUnequip,
             sendItemUnequip,
-            navInstance,
             tutorial,
         };
     },
@@ -100,7 +98,6 @@ class Vbox extends preact.Component {
         if (newProps.combiner !== this.props.combiner) return true;
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.reclaiming !== this.props.reclaiming) return true;
-        if (newProps.navInstance !== this.props.navInstance) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
         if (newProps.player !== this.props.player) return true;
@@ -116,7 +113,6 @@ class Vbox extends preact.Component {
             player,
             reclaiming,
             tutorial,
-            navInstance,
             vboxSelected,
             instance,
 
@@ -439,7 +435,7 @@ class Vbox extends preact.Component {
             return setInfo(newInfo);
         }
 
-        const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
+        const classes = `vbox`;
         return (
             <div class={classes}>
                 {vboxElement()}

client/src/reducers.jsx

@@ -45,8 +45,6 @@ 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'),
     reclaiming:         createReducer(false, 'SET_RECLAIMING'),

client/src/tutorial.utils.jsx

@@ -1,11 +1,10 @@
 const preact = require('preact');
 const actions = require('./actions');
 
-function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
+function tutorialConstructDisplay(player, instance, tutorial, i) {
     if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
         if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
-            const mobileVisible = navInstance === i + 1;
+            const classes = `instance-construct`;
-            const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
             return (<div key={player.constructs[i].id} class={classes}></div>);
         }
     }