mobile buttons

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 />