rearrange vbox wip

client/assets/styles/vbox.less

@@ -1,6 +1,50 @@
 .vbox {
-    margin-bottom: 2em;
+    
+    align-content: space-between;
+    grid-area: vbox;
+    display: grid;
+    grid-template-rows: min-content 3.5em min-content 1em min-content 3.5em min-content;
+    grid-template-columns: 7em 1em 25em;
+    grid-template-areas:
+        "shop-hdr  . shop"
+        ".         . shop"
+        "combiner  . shop"
+        "combiner  . ."
+        "combiner  . stash"
+        ".         . stash"
+        "stash-hdr . stash";
+
+    margin-bottom: 1em;
     line-height: 0;
+
+    .shop {
+        grid-area: shop;
+    }
+
+    .shop-hdr {
+        grid-area: shop-hdr;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .combiner {
+        grid-area: combiner;
+        display: flex;
+        flex-direction: column;
+
+    }
+    
+    .stash {
+        grid-area: stash;
+        display: flex;
+        flex-direction: column;
+
+    }
+
+    .stash-hdr {
+        grid-area: stash-hdr;
+    }
+
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;
@@ -104,22 +148,6 @@
     }
 }
 
-/* VBOX */
-.vbox {
-    align-content: space-between;
-    grid-area: vbox;
-    display: grid;
-    grid-template-rows: min-content min-content min-content;
-    grid-template-columns: 1fr min-content 1fr;
-    grid-template-areas:
-        "vbox varrow inventory"
-        "vbox varrow combiner";
-}
-
-.vbox-inventory {
-    grid-area: inventory;
-}
-
 .vbox-combiner {
     grid-area: combiner;
     display: flex;
@@ -127,18 +155,6 @@
     justify-content: flex-end;
 }
 
-.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: @gray-hint;
-}
-
 .vbox-combiner button {
     flex: 0;
 }
@@ -156,9 +172,4 @@
     font-size: 2em;
     line-height: 1em;
     animation: bits 1s ease-out;
-}
+}
-
-.arrow {
-    grid-area: arrow;
-    color: @gray-hint;
-}

client/src/components/vbox.component.jsx

@@ -232,15 +232,8 @@ class Vbox extends preact.Component {
 
         function vboxElement() {
             return (
-                <div class='vbox-vbox'
+                <div class='shop'
                     onClick={e => e.stopPropagation()}>
-                    <div class="vbox-hdr">
-                        <h3
-                            onTouchStart={e => e.target.scrollIntoView(true)}
-                            onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
-                        </h3>
-                        <div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
-                    </div>
                     <div class="vbox-colours">
                         {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
                     </div>
@@ -248,6 +241,21 @@ class Vbox extends preact.Component {
                         {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
                         {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
                     </div>
+
+                </div>
+            );
+        }
+
+        function vboxHdr() {
+            return (
+                <div class="shop-hdr">
+                    <h3
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
+                    </h3>
+                    <div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')}>
+                        <h1> {vbox.bits}b </h1>
+                    </div>
                     <button
                         class='vbox-btn'
                         onMouseOver={e => hoverInfo(e, 'refill')}
@@ -256,19 +264,15 @@ class Vbox extends preact.Component {
                         }
                         onClick={e => e.stopPropagation()}
                         onMouseDown={() => sendVboxDiscard()}>
-                        refill - 2b
+                        refill <br />
+                        2b
                     </button>
                 </div>
             );
         }
-
         //
         //  INVENTORY
         //
-        function reclaimClick(e) {
-            e.stopPropagation();
-            return setReclaiming(!reclaiming);
-        }
 
         function inventoryBtn(v, i) {
             const inventoryHighlight = vboxSelecting || itemUnequip.length;
@@ -353,12 +357,12 @@ class Vbox extends preact.Component {
                 let bits = 0;
                 shopSelect.forEach(item => bits += item[0] + 1);
                 text = bits
-                    ? `Buy ${comboItem} - ${bits}b`
+                    ? <p>Buy<br /> {comboItem} <br/> {bits}b</p>
-                    : `Combine - ${comboItem}`;
+                    : <p>Combine<br />{comboItem}</p>;
                 if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
             } else if (stashSelect.length === 0 && shopSelect.length === 1) {
                 const item = shopSelect[0];
-                text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
+                text = <p>Buy <br/>{vbox.free[item[0]][item[1]]}<br/>{item[0] + 1}b</p>;
                 mouseEvent = vboxBuySelected;
             } else {
                 for (let i = 0; i < 3; i++) {
@@ -370,13 +374,15 @@ class Vbox extends preact.Component {
                 }
             }
             return (
-                <button
+                <div class='combiner'>
-                    class='vbox-btn'
+                    <button
-                    disabled={!mouseEvent}
+                        class='vbox-btn'
-                    onClick={e => e.stopPropagation()}
+                        disabled={!mouseEvent}
-                    onMouseDown={() => mouseEvent()}>
+                        onClick={e => e.stopPropagation()}
-                    {text}
+                        onMouseDown={() => mouseEvent()}>
-                </button>
+                        {text}
+                    </button>
+                </div>
             );
         }
 
@@ -389,34 +395,42 @@ class Vbox extends preact.Component {
 
             return (
                 <div
+                    class='stash'
                     onMouseDown={inventoryClick}
                     onClick={e => e.stopPropagation()}
                     onDragOver={ev => ev.preventDefault()}
                     onDrop={inventoryClick}
                 >
-                    <div class={`vbox-hdr ${reclaiming ? 'reclaiming' : ''}`}>
-                        <h3
-                            onTouchStart={e => e.target.scrollIntoView(true)}
-                            onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
-                        </h3>
-                        <button
-                            disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
-                            class='vbox-btn reclaim'
-                            onMouseOver={e => hoverInfo(e, 'reclaim')}
-                            onClick={e => e.stopPropagation()}
-                            onMouseDown={reclaimClick}>
-                            reclaim
-                        </button>
-                    </div>
-
                     <div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
-                        {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+                        {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
                     </div>
-                    {combinerBtn()}
                 </div>
             );
         }
 
+        function inventoryHdr() {
+            return (
+                <div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
+                    <h3
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
+                    </h3>
+                    <button
+                        disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
+                        class='vbox-btn reclaim'
+                        onMouseOver={e => hoverInfo(e, 'reclaim')}
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={e => {
+                            e.stopPropagation()
+                            setReclaiming(!reclaiming)
+                        }}>
+                        refund
+                    </button>
+                </div>
+            );
+        }
+
+
         //
         // EVERYTHING
         //
@@ -429,12 +443,13 @@ class Vbox extends preact.Component {
             return setInfo(newInfo);
         }
 
-        const classes = 'vbox';
         return (
-            <div class={classes}>
+            <div class='vbox'>
+                {vboxHdr()}
                 {vboxElement()}
-                <div class="vbox-arrow">⮞</div>
+                {inventoryHdr()}
                 {inventoryElement()}
+                {combinerBtn()}
             </div>
         );
     }