wip

client/instance.css

@@ -6,13 +6,13 @@
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(11, 1fr);
-    grid-template-areas: 
-        "n v v v v v v v v i i i"
-        "n v v v v v v v v i i i"
-        "n v v v v v v v v i i i"
-        "n v v v v v v v v i i i"
-        "n e e e e e e e e e e e"
-        "n e e e e e e e e e e e"
+    grid-template-areas:
+        "n n n n n n n n n n n n"
+        "v v v v v v v v v i i i"
+        "v v v v v v v v v i i i"
+        "v v v v v v v v v i i i"
+        "e e e e e e e e e e e e"
+        "c c c c c c c c c c c c"
         "c c c c c c c c c c c c"
         "c c c c c c c c c c c c"
         "c c c c c c c c c c c c"
@@ -24,9 +24,7 @@
     grid-area: n;
     display: flex;
     flex-flow: column;
-    flex: 0 0 100%;
-    padding-top: 50px;
-    padding-right: 20px;
+    flex: 1;
 }
 
 .instance-info {
@@ -42,7 +40,6 @@
 .vbox {
     grid-area: v;
     display: flex;
-    justify-content: flex-end;
 }
 
 .vbox-box {
@@ -168,11 +165,7 @@
     flex: 1 1 auto;
     display: flex;
     flex-flow: row;
-    padding: 0 2em 0 2em;
-    align-content: flex-start;
-    justify-content: center; 
     min-width: 300px;
-
     overflow: hidden;
 }
 
@@ -180,7 +173,7 @@
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(5, 1fr);
-    grid-template-areas: 
+    grid-template-areas:
         "sp sp sp sp sp"
         "av av av sk sk"
         "av av av sk sk"
@@ -196,6 +189,10 @@
     transition-timing-function: ease;
 }
 
+.instance-cryp:first-child {
+    margin-left: 0;
+}
+
 .instance-cryp .avatar {
     grid-area: av;
     display: flex;
@@ -249,7 +246,7 @@
     display: grid;
     grid-template-rows: 1fr 3fr;
     grid-template-columns: 3fr 1fr 3fr;
-    grid-template-areas: 
+    grid-template-areas:
         "dl sl ll"
         "di si li";
     border-top: 1px solid whitesmoke;

client/src/components/instance.component.jsx

@@ -16,40 +16,7 @@ function InstanceComponent(args) {
         setVboxHidden,
     } = args;
 
-    if (!instance) return <div>...</div>;
-
-    function toggleVbox(e) {
-        setVboxHidden(!vboxHidden);
-        e.stopPropagation();
-    }
-
-    const vboxBtn = (
-        <button
-            className="instance-btn instance-ui-btn nav-btn left"
-            onClick={toggleVbox}>
-            vBox
-        </button>
-    );
-
-    const teamBtn = (
-        <button
-            className="instance-btn instance-ui-btn nav-btn right"
-            onClick={toggleVbox}>
-            team
-        </button>
-    );
-
-    const navBtn = vboxHidden
-        ? vboxBtn
-        : teamBtn;
-
-    const menuBtn = (
-        <button
-            className="instance-btn instance-ui-btn menu-btn left"
-            onClick={quit}>
-            menu
-        </button>
-    );
+    if (!instance) return false;
 
     const rdyClasses = `instance-btn instance-ui-btn ready-btn ${player.ready ? 'ready' : ''}`;
     const readyBtn = (
@@ -83,11 +50,6 @@ function InstanceComponent(args) {
     return (
         <section className="instance" >
             <div className="instance-hdr">
-                {navBtn}
-                {menuBtn}
-                <div className="spacer">
-                    <div>&nbsp;</div>
-                </div>
                 {actionBtn}
                 {timer}
             </div>

client/src/main.jsx

@@ -59,6 +59,9 @@ document.fonts.load('16pt "Jura"').then(() => {
             <Header />
             <nav>
                 <h2>Team</h2>
+                <button>zzz</button>
+                <button>muji</button>
+                <button>kaast</button>
                 <h2>Instances</h2>
                 <button>
                     six