wip

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 =\

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:

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-rows: 9em 3em 2em min-content;
-    grid-template-columns: 7em 1em 25em;
+    grid-template-columns: 7em 25em;
     grid-template-areas:
-        "shop-hdr  . shop"
+        "shop-hdr   shop"
-        ".         . shop"
+        "combiner   shop"
-        "combiner  . shop"
+        "combiner   stash"
-        "combiner  . ."
+        "stash-hdr  stash";
-        "combiner  . stash"
+    border-top: 0.1em solid @gray-exists;
-        ".         . stash"
+    border-right: 0.1em solid @gray-exists;
-        "stash-hdr . stash";
+    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;
         }
 

client/src/components/vbox.component.jsx

@@ -234,6 +234,7 @@ class Vbox extends preact.Component {
             return (
                 <div class='shop'
                     onClick={e => e.stopPropagation()}>
+                    <div class='items'>
                         <div class="vbox-colours">
                             {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
                         </div>
@@ -241,7 +242,7 @@ 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>
                 </div>
             );
         }
@@ -249,6 +250,7 @@ class Vbox extends preact.Component {
         function vboxHdr() {
             return (
                 <div class="shop-hdr">
+                    <div class='items'>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
                             onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
@@ -268,6 +270,7 @@ class Vbox extends preact.Component {
                             2b
                         </button>
                     </div>
+                </div>
             );
         }
         //
@@ -375,6 +378,7 @@ class Vbox extends preact.Component {
             }
             return (
                 <div class='combiner'>
+                    <div clas='items'>
                         <button
                             class='vbox-btn'
                             disabled={!mouseEvent}
@@ -383,6 +387,7 @@ class Vbox extends preact.Component {
                             {text}
                         </button>
                     </div>
+                </div>
             );
         }
 
@@ -401,16 +406,19 @@ class Vbox extends preact.Component {
                     onDragOver={ev => ev.preventDefault()}
                     onDrop={inventoryClick}
                 >
+                    <div class='items'>
                         <div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
                             {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
                         </div>
                     </div>
+                </div>
             );
         }
 
         function inventoryHdr() {
             return (
                 <div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
+                    <div class='items'>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
                             onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
@@ -427,6 +435,7 @@ class Vbox extends preact.Component {
                             refund
                         </button>
                     </div>
+                </div>
             );
         }