getting there

client/instance.css

@@ -3,83 +3,59 @@
 */
 
 .instance {
-    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: min-content min-content 1fr 2fr;
+
+    grid-template-areas:
+        "top    top     top"
+        "vbox   vbox    info"
+        "equip  equip   info"
+        "cryps  cryps   info";
 }
 
-.instance-info {
+.instance .top {
-    flex: 0 1 35%;
+    grid-area: top;
-    padding-left: 1em;
 }
 
-.instance .spacer {
+.instance .info {
-    flex-grow: 1
+    margin-left: 1em;
+    grid-area: info;
 }
 
-.vbox-top {
+.instance .cryps {
-    display: flex;
+    grid-area: cryps;
-    flex: 1;
 }
 
-.vbox {
+.instance .equip {
-    display: flex;
+    grid-area: equip;
-    flex: 0 0 65%;
-}
-
-.vbox-box {
-    display: flex;
-    flex-flow: row wrap;
-    padding-right: 5%;
-    flex: 0 0 50%;
-}
-
-.vbox-inventory {
-    display: flex;
-    flex-flow: row wrap;
-    flex: 0 0 50%;
-}
-
-.ready:hover {
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-timing-function: ease;
-    color: forestgreen;
-    border-color: forestgreen;
-    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
-}
-
-.ready {
-    color: forestgreen;
-    border-color: forestgreen;
-    box-shadow: inset -0.5em 0 0 0 forestgreen;
-}
-
-.timer-container {
-    display: flex;
-    flex: 1 1 100%;
-    width: 100%;
-    height: 0.25em;
-    max-height: 0.25em;
-
-    border: none;
-    margin: 1em 0;
-}
-
-.timer {
-    background: whitesmoke;
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-
-}
-
-.instance-ui-btn {
-    font-size: 100%;
-    padding: 0;
-    margin: 0;
 }
 
 /* VBOX */
+.vbox {
+    grid-area: vbox;
+
+    display: grid;
+    grid-template-rows: min-content min-content;
+    grid-template-areas:
+        "vbox combiner"
+        "vbox inventory";
+}
+
+.vbox-box {
+    grid-area: vbox;
+}
+
+.vbox-inventory {
+    grid-area: inventory;
+    margin-left: 1em;
+}
+
+.vbox-combiner {
+    margin-left: 1em;
+    grid-area: combiner;
+}
+
 
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: black;
@@ -106,8 +82,8 @@
     line-height: 1em;
 }
 
-.vbox-btn {
+.vbox button {
-    flex: 1 0 100%;
+    width: 100%;
     margin: 0;
     background-color: whitesmoke;
     color: black;
@@ -118,7 +94,6 @@
     color: black;
 }
 
-
 .vbox-table td {
     transition-property: all;
     transition-duration: 0.5s;
@@ -132,16 +107,12 @@
     color: black;
 }
 
-.spacer {
+/* CRYP LIST */
-    flex: 1 0 25%;
-}
 
-/* CRYP BOX */
+.cryp-list {
-
+    grid-area: cryps;
-.instance-cryp-list {
+    display: grid;
-    flex: 1;
+    grid-template-columns: 1fr 1fr 1fr;
-    display: flex;
-    flex-flow: row;
 }
 
 .instance-cryp {
@@ -178,6 +149,11 @@
 
 .instance-cryp img {
     grid-area: avatar;
+    min-width: 150px;
+}
+
+.instance-cryp .name {
+    text-align: center;
 }
 
 .instance-cryp .avatar figure {
@@ -253,7 +229,6 @@
     fill: none;
 }
 
-
 .instance-cryp .stat-icon {
     width: 100%;
 }
@@ -361,7 +336,6 @@ button.equip {
     100% {
         color:  #7a7a7a;
         stroke:  #7a7a7a;
-
     }
 }
 

client/src/components/info.component.jsx

@@ -205,7 +205,7 @@ function Info(args) {
     //     ? <h2>game beginning...</h2>
     //     : null;
 
-    const classes = `instance-info ${vboxHidden ? '' : 'hidden'}`;
+    const classes = `info ${vboxHidden ? '' : 'hidden'}`;
 
     return (
         <div className={classes} >

client/src/components/instance.component.jsx

@@ -53,10 +53,8 @@ function InstanceComponent(args) {
                 {actionBtn}
                 {timer}
             </div>
-            <div className="vbox-top">
+            <VboxContainer />
-                <VboxContainer />
+            <InfoContainer />
-                <InfoContainer />
-            </div>
             <EquipmentContainer />
             <InstanceCrypsContainer />
         </section>

client/src/components/instance.cryps.jsx

@@ -202,7 +202,7 @@ function InstanceCryps(props) {
         activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
-    const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
+    const classes = `cryp-list ${vboxHidden ? '' : 'hidden'}`;
     return (
         <div className={classes} onClick={() => setActiveCryp(null)}>
             {cryps}

client/src/components/instance.equip.jsx

@@ -78,7 +78,7 @@ function Equipment(props) {
     const specLabel = specs.every(i => i === false) ? '' : 'Specs';
 
     return (
-        <div className="instance-equip" >
+        <div className="equip" >
             <div className="skills">
                 <div className="label">
                     {skillLabel}

client/src/components/vbox.component.jsx

@@ -244,6 +244,8 @@ function Vbox(args) {
                         {boundRows}
                     </tbody>
                 </table>
+            </div>
+            <div className="vbox-combiner">
                 <span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
                 <button
                     className="instance-btn instance-ui-btn vbox-btn"

client/styles.css

@@ -184,7 +184,8 @@ img {
 table {
     table-layout: fixed;
     width: 100%;
-    margin-bottom: 2em;
+    /*margin-bottom: 2em;*/
+    margin-bottom: 0;
 }
 
 table td {
@@ -555,3 +556,44 @@ section .top {
         font-size: 75%;
     }
 }
+
+.ready:hover {
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+    color: forestgreen;
+    border-color: forestgreen;
+    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
+}
+
+.ready {
+    color: forestgreen;
+    border-color: forestgreen;
+    box-shadow: inset -0.5em 0 0 0 forestgreen;
+}
+
+.timer-container {
+    display: flex;
+    flex: 1 1 100%;
+    width: 100%;
+    height: 0.25em;
+    max-height: 0.25em;
+
+    border: none;
+    margin: 1em 0;
+}
+
+.timer {
+    background: whitesmoke;
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+
+}
+
+.instance-ui-btn {
+    font-size: 100%;
+    padding: 0;
+    margin: 0;
+}