From 9f294078d5559caeeb2da63c749dfb924a0ab382 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 8 Apr 2019 17:22:53 +1000
Subject: [PATCH] nav btns

---
 client/cryps.css                             | 19 ++++++-
 client/src/components/info.component.jsx     |  2 +-
 client/src/components/instance.component.jsx | 54 +++++++++++++++++---
 client/src/components/instance.container.jsx |  4 +-
 client/src/components/vbox.component.jsx     |  3 +-
 client/src/components/vbox.container.jsx     | 11 +++-
 client/src/socket.jsx                        |  2 +-
 7 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index 5a72e68a..a0c2b966 100644
--- a/client/cryps.css
+++ b/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;
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 2bb0d31b..1041937a 100644
--- a/client/src/components/info.component.jsx
+++ b/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>
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index dcbaf084..3a75cda9 100644
--- a/client/src/components/instance.component.jsx
+++ b/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();
     }
 
+    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
+        </button>
+    );
+
+
     return (
-        <main className="instance" onClick={onClick} >
+        <main className="instance" >
             <div className="instance-hdr">
-                <button
-                    className="instance-btn instance-ui-btn menu-btn left"
-                    onClick={quit}>
-                    Menu
-                </button>
+                {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 />
diff --git a/client/src/components/instance.container.jsx b/client/src/components/instance.container.jsx
index b301af50..cbca9a30 100644
--- a/client/src/components/instance.container.jsx
+++ b/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) {
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 3c5af8cf..078b4758 100644
--- a/client/src/components/vbox.component.jsx
+++ b/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">
diff --git a/client/src/components/vbox.container.jsx b/client/src/components/vbox.container.jsx
index f6646ec3..ed0305cf 100644
--- a/client/src/components/vbox.container.jsx
+++ b/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,
diff --git a/client/src/socket.jsx b/client/src/socket.jsx
index da74992a..17a1783f 100644
--- a/client/src/socket.jsx
+++ b/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;