SIX size stash

client/assets/styles/instance.less

@@ -5,7 +5,7 @@
 .instance {
     overflow: hidden;
     display: grid;
-    grid-template-columns: 3fr minmax(min-content, 6fr);
+    grid-template-columns: 1fr minmax(min-content, 1fr);
     grid-template-rows: min-content 1fr;
 
     grid-template-areas:

client/assets/styles/vbox.less

@@ -2,12 +2,11 @@
     align-content: space-between;
     grid-area: vbox;
     display: grid;
-    grid-template-rows: 1fr min-content;
+    grid-template-rows: 3fr 2fr;
-    grid-template-columns: 1fr 3fr;
+    grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas:
-        "store-hdr store"
+        "store-hdr store combiner"
-        "stash-hdr stash"
+        "stash-hdr stash combiner";
-        "refund    combiner";
     margin-bottom: 1em;
     line-height: 0;
 
@@ -48,7 +47,7 @@
         display: flex;
         flex-direction: column;
 
-        padding: 0.5em 0 0 0;
+        padding: 0;
 
         .vbox-padding {
             margin-right: 0em;
@@ -58,20 +57,24 @@
         button {
             letter-spacing: 0.1em;
             background-color: #996100;
+            border-radius: 0;
+            border: 0;
             &[disabled] {
-                color: #996100;
+                border: 0.2em solid @gray-exists;
+                border-left: 0;
             };
+
+            transition-property: 0;
         }
     }
 
     .stash {
         grid-area: stash;
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         grid-gap: 0.5em 1em;
 
         align-items: center;
-        padding: 0.5em;
         border: 0.2em solid @gray-exists;
         border-left: 0;
     }
@@ -85,6 +88,10 @@
         text-align: center;
         border: 0.2em solid @gray-exists;
         border-right: 0;
+
+        h3 {
+            margin-bottom: 2.5em;
+        }
     }
 
     .refund {

client/src/components/vbox.combiner.jsx

@@ -34,7 +34,7 @@ function combinerBtn(props) {
         let bits = 0;
         storeSelect.forEach(item => bits += item[0] + 1);
         text = bits
-            ? `Buy ${comboItem} - ${bits}b`
+            ? `${comboItem} - ${bits}b`
             : `Combine - ${comboItem}`;
         if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
     } else if (stashSelect.length === 0 && storeSelect.length === 1) {

client/src/components/vbox.component.jsx

@@ -201,33 +201,31 @@ class Vbox extends preact.Component {
         }
 
         function stashHdr() {
-            return (
-                <div class='stash-hdr'>
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}
-                        onMouseOver={e => vboxHover(e, 'stash')}> STASH
-                    </h3>
-                </div>
-            );
-        }
-        function refundBtn() {
             const refund = storeSelect.length === 0 && stashSelect.length === 1
                 ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
                 : 0;
             const tutorialDisabled = tutorial && tutorial < 8
                 && instance.time_control === 'Practice' && instance.rounds.length === 1;
+            const refundBtn = (
+                <button
+                    disabled={tutorialDisabled || !refund}
+                    class='vbox-btn'
+                    onClick={e => e.stopPropagation()}
+                    onMouseDown={e => {
+                        e.stopPropagation();
+                        sendVboxReclaim(vboxSelected.stashSelect[0]);
+                    }}>
+                    refund <br />
+                    {refund}b
+                </button>
+            );
+
             return (
-                <div class='refund'>
+                <div class='stash-hdr'>
-                    <button
+                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}
-                        disabled={tutorialDisabled || !refund}
+                        onMouseOver={e => vboxHover(e, 'stash')}> STASH
-                        class='vbox-btn'
+                    </h3>
-                        onClick={e => e.stopPropagation()}
+                    {refundBtn}
-                        onMouseDown={e => {
-                            e.stopPropagation();
-                            sendVboxReclaim(vboxSelected.stashSelect[0]);
-                        }}>
-                        refund <br />
-                        {refund}b
-                    </button>
                 </div>
             );
         }
@@ -237,7 +235,6 @@ class Vbox extends preact.Component {
             <div class='vbox'>
                 {storeHdr()}
                 {stashHdr()}
-                {refundBtn()}
                 <StoreElement
                     clearVboxSelected = {clearVboxSelected}
                     setInfo = {setInfo}

client/src/components/vbox.stash.jsx

@@ -99,7 +99,7 @@ function stashElement(props) {
             onDragOver={ev => ev.preventDefault()}
             onDrop={stashClick}
         >
-            {range(0, 4).map(i => stashBtn(vbox.bound[i], i))}
+            {range(0, 6).map(i => stashBtn(vbox.bound[i], i))}
         </div>
     );
 }

server/src/vbox.rs

@@ -100,7 +100,7 @@ impl Vbox {
     }
 
     pub fn accept(&mut self, i: usize, j: usize, construct_id: Option<Uuid>) -> Result<&mut Vbox, Error> {
-        if self.bound.len() >= 4 && !construct_id.is_some() {
+        if self.bound.len() >= 6 && !construct_id.is_some() {
             return Err(err_msg("too many items bound"));
         }
 
@@ -150,7 +150,7 @@ impl Vbox {
         for vi in vbox_indicies.iter() {
             inv_indices.push(self.bound.len());
             self.accept(vi[0], vi[1], Some(Uuid::nil()))?;
-        } 
+        }
 
         // have to sort the indices and keep track of the iteration
         // because when removing the elements the array shifts
@@ -171,7 +171,7 @@ impl Vbox {
 
         self.bound.push(combo.item);
         // self.bound.sort_unstable();
-        if self.bound.len() >= 5 {
+        if self.bound.len() >= 6 {
             return Err(err_msg("too many items bound"));
         }
         Ok(self)