mobile buttons

client/assets/styles/instance.css

@@ -3,7 +3,7 @@
 */
 
 .instance {
-    overflow: hidden;
+    overflow-x: hidden;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: min-content min-content min-content 1fr;
@@ -441,5 +441,4 @@ button.equipping {
 }
 
 /* Mobile Nav*/
-#toggle-vbox { display: none; }
-#toggle-vbox-label { display: none; }
+.instance .nav-btn { display: none; }

client/assets/styles/instance.mobile.css

@@ -9,6 +9,9 @@
             "vbox"
             "constructs"
     }
+
+    .instance .nav-btn { display: initial; }
+
     /* Default view */
     .instance .equip { display: none; }
     .instance .info { display: none; }
@@ -24,37 +27,21 @@
             "combiner";
     }
 
-    .vbox-inventory {
-        margin-left: 0;
+    /* constructs toggled on */
+    .instance.constructs-visible .vbox {
+        display: none;
     }
 
-    .vbox-combiner {
-        margin-left: 0;
-    }
-    /* Toggled view (constructs)*/
-    #toggle-vbox-label {
-        text-align: center;
-        border: 2px solid #555;
-     }
-     #toggle-vbox-label:after{
-        content: "Constructs";
-    }
-
-    #toggle-vbox:checked ~ #toggle-vbox-label:after{
-        content: "Vbox";
-    }
-
-    #toggle-vbox:checked ~ .vbox { display: none; }
-    #toggle-vbox:checked ~ .equip {
+    .instance.constructs-visible .equip {
         display: initial;
         grid-area: vbox;
     }
 
-    #toggle-vbox:checked ~ .highlight {
+    .instance.constructs-visible .highlight {
         display: initial;
     }
 
-    #toggle-vbox:checked ~ .construct-list {
+    .instance.constructs-visible .construct-list {
         grid-area: constructs;
         display: grid;
         justify-content: center;
@@ -63,16 +50,13 @@
         grid-template-rows: 1fr 1fr;
     }
 
-    #toggle-vbox { display: none; }
 
-    #toggle-vbox-label {
-        grid-area: controls;
-        color: whitesmoke;
-        line-height: 1.75em;
-        font-size: 1.5em;
-        display: block;
-        cursor: pointer;
-        margin-right: 0.5em;
+    .vbox-inventory {
+        margin-left: 0;
+    }
+
+    .vbox-combiner {
+        margin-left: 0;
     }
 
     .construct-list .skills {

client/src/components/instance.component.jsx

@@ -10,14 +10,14 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, account } = state;
+        const { ws, instance, account, nav } = state;
         const player = instance.players.find(p => p.id === account.id);
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.id);
         }
 
-        return { player, instance, sendInstanceReady };
+        return { player, instance, sendInstanceReady, nav };
     },
 
     function receiveDispatch(dispatch) {
@@ -25,8 +25,13 @@ const addState = connect(
             return dispatch(actions.setInfo(c));
         }
 
+        function setNav(v) {
+            return dispatch(actions.setNav(v));
+        }
+
         return {
             setInfo,
+            setNav,
         };
     }
 );
@@ -37,6 +42,9 @@ function Instance(args) {
         player,
         sendInstanceReady,
         setInfo,
+
+        nav,
+        setNav,
     } = args;
 
     if (!instance) return false;
@@ -59,6 +67,20 @@ function Instance(args) {
         </button>
     );
 
+    function navClick() {
+        if (nav === 'vbox') return setNav('constructs');
+        return setNav('vbox');
+    }
+
+    const navBtn = (
+        <button
+            className="nav-btn"
+            onClick={navClick}>
+            {nav === 'vbox' ? 'Constructs' : 'Vbox'}
+        </button>
+    );
+
+
     const actionBtn = player
         ? readyBtn
         : null;
@@ -124,15 +146,15 @@ function Instance(args) {
         </div>
     );
 
+    const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
+
     return (
-        <main className="instance" onMouseOver={() => setInfo(null)} >
+        <main className={instanceClasses} onMouseOver={() => setInfo(null)} >
             <div className="top">
                 {actionBtn}
                 {timer}
+                {navBtn}
             </div>
-
-            <input type="checkbox" id="toggle-vbox"/>
-            <label id="toggle-vbox-label" htmlFor="toggle-vbox">&nbsp;</label>
             <ScoreBoard />
             <Vbox />
             <InfoContainer />

client/src/events.jsx

@@ -120,7 +120,13 @@ function registerEvents(store) {
 
     function setInstance(v) {
         const { account, ws } = store.getState();
-        if (v) ws.startInstanceStateTimeout(v.id);
+        if (v) {
+            ws.startInstanceStateTimeout(v.id);
+            store.dispatch(actions.setNav('vbox'));
+
+            const first = v.players.find(p => p.id === account.id).constructs[0];
+            store.dispatch(actions.setActiveConstruct(first));
+        }
         return store.dispatch(actions.setInstance(v));
     }