vbox rearrange, rework reclaim

client/assets/styles/vbox.less

@@ -3,22 +3,21 @@
     align-content: space-between;
     grid-area: vbox;
     display: grid;
-    grid-template-rows: 9em 3em 2em min-content;
+    grid-template-rows: 9.5em 2.5em 4.5em min-content;
-    grid-template-columns: 7em 25em;
+    grid-template-columns: 7em 21em;
     grid-template-areas:
-        "shop-hdr   shop"
+        "shop-hdr shop"
-        "combiner   shop"
+        "stash-hdr shop"
-        "combiner   stash"
+        "stash-hdr combiner"
-        "stash-hdr  stash";
+        "stash  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-left: 0.5em;
         margin-bottom: 1em;
         margin-top: 0.5em;
         margin-right: 1em;
@@ -27,37 +26,63 @@
     .shop {
         grid-area: shop;
         border-bottom: 0.1em solid @gray-exists;
+        border-right: 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;
+        text-align: center;
+        button {
+            margin-top: 0.5em;
+            line-height: 1.6;
+            height: 4em;
+            letter-spacing: 0.1em;
+            background-color: #421010;
+        }
     }
 
     .combiner {
         grid-area: combiner;
+        border-bottom: 0.1em solid @gray-exists;
+        border-right: 0.1em solid @gray-exists;
         display: flex;
         flex-direction: column;
-        border-right: 0.1em solid @gray-exists;
+        button {
-
+            height: 3em;
+            letter-spacing: 0.1em;
+            background-color: #342100;
+            &[disabled] {
+                color: #342100;
+            };
+        }
     }
     
     .stash {
         grid-area: stash;
+        .items {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-gap: 0.5em 1em;
+            align-items: center;
+        }
+        border-right: 0.1em solid @gray-exists;
+        border-left: 0.1em solid @gray-exists;
     }
 
     .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;
+        border-right: 0.1em solid @gray-exists;
-
+        text-align: center;
-
+        button {
+            margin-top: 0.5em;
+            line-height: 1.6;
+            height: 4em;
+            letter-spacing: 0.1em;
+            background-color: #342100;
+        }
     }
 
     .vbox-hdr {
@@ -93,14 +118,6 @@
             color: white;
         }
 
-        &.reclaim {
-            height: auto;
-
-            &:hover {
-                color: @red;
-            };
-        }
-
         &[disabled] {
             background: black;
             border-width: 1px;

client/src/components/info.component.jsx

@@ -111,7 +111,7 @@ class InfoComponent extends preact.Component {
 
                 return (
                     <div class={isSkill ? 'info-item' : 'info-item'}>
-                        <h2>{infoName} {fullInfo.cost}b</h2>
+                        <h2>{infoName}</h2>
                         {header}
                         {itemSourceInfo}
                         {cooldown}
@@ -121,10 +121,10 @@ class InfoComponent extends preact.Component {
                     </div>
                 );
             }
-            const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
+
             return (
                 <div class="info-item">
-                    <h2>{fullInfo.item} {cost}</h2>
+                    <h2>{fullInfo.item}</h2>
                     {itemDescription()}
                 </div>
             );

client/src/components/vbox.component.jsx

@@ -253,10 +253,10 @@ class Vbox extends preact.Component {
                     <div class='items'>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
-                            onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
+                            onMouseOver={e => hoverInfo(e, 'vbox')}> STORE
                         </h3>
                         <div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')}>
-                            <h1> {vbox.bits}b </h1>
+                            <h2> {vbox.bits}b </h2>
                         </div>
                         <button
                             class='vbox-btn'
@@ -291,8 +291,6 @@ class Vbox extends preact.Component {
             const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
 
             function onClick(type) {
-                if (reclaiming) return sendVboxReclaim(i);
-
                 const combinerContainsIndex = stashSelect.indexOf(i) > -1;
                 // removing
                 if (combinerContainsIndex) {
@@ -360,12 +358,12 @@ class Vbox extends preact.Component {
                 let bits = 0;
                 shopSelect.forEach(item => bits += item[0] + 1);
                 text = bits
-                    ? <p>Buy<br /> {comboItem} <br/> {bits}b</p>
+                    ? `Buy ${comboItem} - ${bits}b`
-                    : <p>Combine<br />{comboItem}</p>;
+                    : `Combine - ${comboItem}`;
                 if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
             } else if (stashSelect.length === 0 && shopSelect.length === 1) {
                 const item = shopSelect[0];
-                text = <p>Buy <br/>{vbox.free[item[0]][item[1]]}<br/>{item[0] + 1}b</p>;
+                text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
                 mouseEvent = vboxBuySelected;
             } else {
                 for (let i = 0; i < 3; i++) {
@@ -378,7 +376,7 @@ class Vbox extends preact.Component {
             }
             return (
                 <div class='combiner'>
-                    <div clas='items'>
+                    <div class='items'>
                         <button
                             class='vbox-btn'
                             disabled={!mouseEvent}
@@ -407,39 +405,42 @@ class Vbox extends preact.Component {
                     onDrop={inventoryClick}
                 >
                     <div class='items'>
-                        <div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
+                        {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
-                            {range(0, 6).map(i => inventoryBtn(vbox.bound[i], i))}
-                        </div>
                     </div>
                 </div>
             );
         }
 
         function inventoryHdr() {
+            const refund = shopSelect.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;
+
             return (
                 <div class={`stash-hdr ${reclaiming ? 'reclaiming' : ''}`}>
                     <div class='items'>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
-                            onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
+                            onMouseOver={e => hoverInfo(e, 'inventory')}> STASH
                         </h3>
                         <button
-                            disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
+                            disabled={tutorialDisabled || !refund}
                             class='vbox-btn reclaim'
                             onMouseOver={e => hoverInfo(e, 'reclaim')}
                             onClick={e => e.stopPropagation()}
                             onMouseDown={e => {
-                                e.stopPropagation()
+                                e.stopPropagation();
-                                setReclaiming(!reclaiming)
+                                sendVboxReclaim(vboxSelected.stashSelect[0]);
                             }}>
-                            refund
+                            refund <br />
+                            {refund}b
                         </button>
                     </div>
                 </div>
             );
         }
 
-
         //
         // EVERYTHING
         //