nav btns

client/cryps.css

@@ -311,7 +311,7 @@ header {
     flex-grow: 1
 }
 
-.menu-btn {
+.menu-btn, .nav-btn {
     flex: 1 0 25%;
 }
 
@@ -319,6 +319,11 @@ header {
     flex: 1 0 50%;
 }
 
+/* nav hidden on desktop */
+.nav-btn {
+    display: none;
+}
+
 .ready-btn:hover {
     transition-property: all;
     transition-duration: 2s;
@@ -642,6 +647,18 @@ header {
         padding: 0.2em;
     }
 
+    .menu-btn {
+        display: none;
+    }
+
+    .nav-btn {
+        display: unset;
+    }
+
+    .vbox {
+        flex: 1 1 100%;
+    }
+
     .cryps {
         font-size: 0.75em;
         padding: 0 0.5em;

client/src/components/info.component.jsx

@@ -138,7 +138,7 @@ function Info(args) {
 
         return (
             <div className="info-cryp">
-                <h5>{cryp.name}</h5>
+                <h2>{cryp.name}</h2>
                 <div className="stats">
                     {stats}
                 </div>

client/src/components/instance.component.jsx

@@ -116,6 +116,7 @@ function InstanceComponent(args) {
         sendVboxApply,
         setInfo,
         activeVar,
+        activeCryp,
         setActiveVar,
         setActiveCryp,
     } = args;
@@ -126,18 +127,55 @@ function InstanceComponent(args) {
         cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
     }));
 
-    function onClick(e) {
+    function showVbox(e) {
         setActiveVar(null);
+        setActiveCryp(null);
+        e.stopPropagation();
     }
 
-    return (
-        <main className="instance" onClick={onClick} >
-            <div className="instance-hdr">
+    function showTeam(e) {
+        setActiveCryp(instance.cryps[0]);
+        e.stopPropagation();
+    }
+
+    const vboxBtn = (
+        <button
+            className="instance-btn instance-ui-btn nav-btn left"
+            onClick={showVbox}>
+            vBox
+        </button>
+    );
+
+    const teamBtn = (
+        <button
+            className="instance-btn instance-ui-btn nav-btn right"
+            onClick={showTeam}>
+            team
+        </button>
+    );
+
+    const infoSelected = activeVar !== null || activeCryp;
+
+    const navBtn = infoSelected
+        ? vboxBtn
+        : teamBtn;
+
+    const crypListClass = `cryp-list ${infoSelected ? '' : 'hidden'}`;
+
+    const menuBtn = (
         <button
             className="instance-btn instance-ui-btn menu-btn left"
             onClick={quit}>
-                    Menu
+            menu
         </button>
+    );
+
+
+    return (
+        <main className="instance" >
+            <div className="instance-hdr">
+                {navBtn}
+                {menuBtn}
                 <div className="spacer">
                     <div>&nbsp;</div>
                 </div>
@@ -148,7 +186,7 @@ function InstanceComponent(args) {
                 </button>
             </div>
             <VboxContainer />
-            <div className="cryp-list">
+            <div className={crypListClass}>
                 {cryps}
             </div>
             <InfoContainer />

client/src/components/instance.container.jsx

@@ -6,7 +6,7 @@ const Instance = require('./instance.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, account, activeVar } = state;
+        const { ws, instance, account, activeVar, activeCryp } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.instance);
@@ -16,7 +16,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.instance, crypId, i);
         }
 
-        return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
+        return { instance, account, sendInstanceReady, sendVboxApply, activeVar, activeCryp };
     },
 
     function receiveDispatch(dispatch) {

client/src/components/vbox.component.jsx

@@ -13,6 +13,7 @@ function convertVar(v) {
 function Vbox(args) {
     const {
         activeVar,
+        activeCryp,
         instance,
         combiner,
         reclaiming,
@@ -195,7 +196,7 @@ function Vbox(args) {
     //
     // EVERYTHING
     //
-    const classes = `vbox ${activeVar !== null ? 'hidden' : ''}`;
+    const classes = `vbox ${activeVar !== null || activeCryp ? 'hidden' : ''}`;
     return (
         <div className={classes} onClick={() => setReclaiming(false)} >
             <div className="vbox-hdr">

client/src/components/vbox.container.jsx

@@ -6,7 +6,15 @@ const Vbox = require('./vbox.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, combiner, reclaiming, activeVar, info } = state;
+        const {
+            ws,
+            instance,
+            combiner,
+            reclaiming,
+            activeVar,
+            activeCryp,
+            info,
+        } = state;
 
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.instance);
@@ -29,6 +37,7 @@ const addState = connect(
             combiner,
             reclaiming,
             activeVar,
+            activeCryp,
             info,
             sendVboxAccept,
             sendVboxDiscard,

client/src/socket.jsx

@@ -261,7 +261,7 @@ function createSocket(events) {
 
             // if (!account) events.loginPrompt();
             if (process.env.NODE_ENV !== 'production') {
-                // send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+                send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
             }
 
             return true;