vbox rework

WORKLOG.md

@@ -29,7 +29,13 @@
 
 *$$$*
 
-* balances table
+buy supporter pack
+  account credited with features
+    char sets
+    emotes
+
+
+* balances table (ingame currency)
   id
   account
   balance

client/assets/styles/instance.css

@@ -70,13 +70,15 @@
 
 /* VBOX */
 .vbox {
-    align-items: flex-end;
+    align-content: space-between;
     grid-area: vbox;
     display: grid;
-    grid-template-rows: min-content min-content;
+    grid-template-rows: min-content min-content min-content;
+    grid-template-columns: 1fr min-content 1fr;
     grid-template-areas:
-        "vbox combiner"
-        "vbox inventory";
+        "vbox varrow inventory"
+        "vbox .     carrow"
+        "vbox .     combiner";
 }
 
 .vbox-box {
@@ -85,14 +87,39 @@
 
 .vbox-inventory {
     grid-area: inventory;
-    margin-left: 1em;
 }
 
 .vbox-combiner {
-    margin-left: 1em;
     grid-area: combiner;
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
 }
 
+.vbox-combiner-arrow {
+    color: #444;
+    grid-area: carrow;
+    display: block;
+    text-align: center;
+    font-size: 2em;
+    vertical-align: center;
+}
+
+.vbox-arrow, .vbox-arrow-mobile {
+    display: flex;
+    justify-content:center;
+    align-content:center;
+    flex-direction:column;
+
+    margin: 1em 0.25em 0 0.25em;
+    grid-area: varrow;
+    font-size: 2em;
+    color: #444;
+}
+
+.vbox-combiner button {
+    flex: 0;
+}
 
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: white;
@@ -111,8 +138,6 @@
 .vbox-hdr {
     display: flex;
     align-items: flex-end;
-
-    flex: 1 0 100%;
 }
 
 .vbox-hdr h3 {
@@ -125,6 +150,11 @@
     animation: bits 1s ease-out;
 }
 
+.arrow {
+    grid-area: arrow;
+    color: #444;
+}
+
 @keyframes action {
     0% {
         color: palegoldenrod;
@@ -415,3 +445,5 @@
 
 /* Mobile Nav*/
 .instance-nav { display: none; }
+
+.vbox-arrow-mobile { display: none }

client/assets/styles/instance.mobile.css

@@ -18,14 +18,32 @@
     .vbox {
         grid-area: vbox;
         display: grid;
-        grid-template-rows: min-content min-content min-content;
+        grid-template-rows: min-content min-content min-content min-content min-content;
         grid-template-columns: 1fr;
         grid-template-areas:
             "vbox"
+            "varrow"
             "inventory"
+            "carrow"
             "combiner";
     }
 
+    .vbox-arrow {
+        display: none;
+    }
+
+    .vbox-inventory .vbox-hdr {
+        display: block;
+    }
+
+    .vbox-arrow-mobile {
+        display: block;
+        grid-area: varrow;
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
     /* constructs toggled on */
     .instance.constructs-visible .vbox {
         display: none;

client/src/components/vbox.component.jsx

@@ -292,39 +292,43 @@ function Vbox(args) {
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
-                <button
-                    onMouseOver={e => hoverInfo(e, 'reroll')}
-                    onClick={() => sendVboxDiscard()}>
-                    Reroll
-                </button>
                 <table class="vbox-table">
                     <tbody>
                         {freeRows}
                     </tbody>
                 </table>
-            </div>
-            <div class='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
-                <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                 <button
-                    class={reclaimClass}
-                    onMouseOver={e => hoverInfo(e, 'reclaim')}
-                    onClick={reclaimClick}>
-                    reclaim
+                    onMouseOver={e => hoverInfo(e, 'reroll')}
+                    onClick={() => sendVboxDiscard()}>
+                    Reroll
                 </button>
+            </div>
+            <div class="vbox-arrow">⮞</div>
+            <div class="vbox-arrow-mobile">⮟</div>
+            <div class='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
+                <div class="vbox-hdr">
+                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
+                    <button
+                        class={reclaimClass}
+                        onMouseOver={e => hoverInfo(e, 'reclaim')}
+                        onClick={reclaimClick}>
+                        reclaim
+                    </button>
+                </div>
                 <table class="vbox-table">
                     <tbody>
                         {boundRows}
                     </tbody>
                 </table>
             </div>
+            <div class="vbox-combiner-arrow" onTouchStart={e => e.target.scrollIntoView(true)}>⮟⮝</div>
             <div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
-                <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
+                {combinerElement}
                 <button
                     onMouseOver={e => hoverInfo(e, 'refine')}
                     onClick={() => sendVboxCombine()}>
-                    refine
+                    combine
                 </button>
-                {combinerElement}
             </div>
         </div>
     );