From 3dddf4b1a8984f70ec07f6db1fb830a0f40befc9 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 20 Nov 2019 23:07:44 +1000
Subject: [PATCH] wip

---
 WORKLOG.md                               |   2 +
 client/assets/styles/instance.less       |   2 +-
 client/assets/styles/vbox.less           |  43 +++++++---
 client/src/components/vbox.component.jsx | 105 ++++++++++++-----------
 4 files changed, 89 insertions(+), 63 deletions(-)

diff --git a/WORKLOG.md b/WORKLOG.md
index 9ea59bde..24084a60 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -1,6 +1,8 @@
 # WORK WORK
 ## NOW
 
+* add combine between all of shop and stash, stash size -> 4
+
 *PRODUCTION*
 
 * can't reset password without knowing password =\
diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index e54bf31e..04e4f1c6 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -1,7 +1,7 @@
 .instance {
     overflow: hidden;
     display: grid;
-    grid-template-columns: 1fr minmax(min-content, 1fr);
+    grid-template-columns: min-content minmax(min-content, 1fr);
     grid-template-rows: min-content 1fr;
 
     grid-template-areas:
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index c928028b..f3a51bc0 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -3,46 +3,61 @@
     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-rows: 9em 3em 2em min-content;
+    grid-template-columns: 7em 25em;
     grid-template-areas:
-        "shop-hdr  . shop"
-        ".         . shop"
-        "combiner  . shop"
-        "combiner  . ."
-        "combiner  . stash"
-        ".         . stash"
-        "stash-hdr . stash";
+        "shop-hdr   shop"
+        "combiner   shop"
+        "combiner   stash"
+        "stash-hdr  stash";
+    border-top: 0.1em solid @gray-exists;
+    border-right: 0.1em solid @gray-exists;
+    border-bottom: 0.1em solid @gray-exists;
 
     margin-bottom: 1em;
     line-height: 0;
 
+    .items {
+        margin-left: 1em;
+        margin-bottom: 1em;
+        margin-top: 0.5em;
+        margin-right: 1em;
+    }
+
     .shop {
         grid-area: shop;
+        border-bottom: 0.1em solid @gray-exists;
     }
 
     .shop-hdr {
         grid-area: shop-hdr;
         display: flex;
         flex-direction: column;
+        border-bottom: 0.1em solid @gray-exists;
+        border-left: 0.1em solid @gray-exists;
     }
 
     .combiner {
         grid-area: combiner;
         display: flex;
         flex-direction: column;
+        border-right: 0.1em solid @gray-exists;
 
     }
     
     .stash {
         grid-area: stash;
-        display: flex;
-        flex-direction: column;
-
     }
 
     .stash-hdr {
         grid-area: stash-hdr;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        border-left: 0.1em solid @gray-exists;
+        border-top: 0.1em solid @gray-exists;
+
+
     }
 
     .vbox-hdr {
@@ -109,7 +124,7 @@
     }
 
     button {
-        height: 4em;
+        height: 3.25em;
         margin: 0;
         width: 100%;
 
@@ -138,7 +153,7 @@
     // figures don't scale well
     figure {
         svg {
-            height: 2em;
+            height: 1.5em;
             stroke-width: 0.5em;
         }
 
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index eedb6527..a2333fef 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -234,14 +234,15 @@ class Vbox extends preact.Component {
             return (
                 <div class='shop'
                     onClick={e => e.stopPropagation()}>
-                    <div class="vbox-colours">
-                        {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
+                    <div class='items'>
+                        <div class="vbox-colours">
+                            {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
+                        </div>
+                        <div class="vbox-items">
+                            {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>
-                    <div class="vbox-items">
-                        {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>
             );
         }
@@ -249,24 +250,26 @@ class Vbox extends preact.Component {
         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 class='items'>
+                        <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')}
+                            disabled={vbox.bits < 2
+                                || (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
+                            }
+                            onClick={e => e.stopPropagation()}
+                            onMouseDown={() => sendVboxDiscard()}>
+                            refill <br />
+                            2b
+                        </button>
                     </div>
-                    <button
-                        class='vbox-btn'
-                        onMouseOver={e => hoverInfo(e, 'refill')}
-                        disabled={vbox.bits < 2
-                            || (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
-                        }
-                        onClick={e => e.stopPropagation()}
-                        onMouseDown={() => sendVboxDiscard()}>
-                        refill <br />
-                        2b
-                    </button>
                 </div>
             );
         }
@@ -375,13 +378,15 @@ class Vbox extends preact.Component {
             }
             return (
                 <div class='combiner'>
-                    <button
-                        class='vbox-btn'
-                        disabled={!mouseEvent}
-                        onClick={e => e.stopPropagation()}
-                        onMouseDown={() => mouseEvent()}>
-                        {text}
-                    </button>
+                    <div clas='items'>
+                        <button
+                            class='vbox-btn'
+                            disabled={!mouseEvent}
+                            onClick={e => e.stopPropagation()}
+                            onMouseDown={() => mouseEvent()}>
+                            {text}
+                        </button>
+                    </div>
                 </div>
             );
         }
@@ -401,8 +406,10 @@ class Vbox extends preact.Component {
                     onDragOver={ev => ev.preventDefault()}
                     onDrop={inventoryClick}
                 >
-                    <div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
-                        {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
+                    <div class='items'>
+                        <div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
+                            {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
+                        </div>
                     </div>
                 </div>
             );
@@ -411,21 +418,23 @@ class Vbox extends preact.Component {
         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 class='items'>
+                        <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>
                 </div>
             );
         }