vbox rearrange, rework reclaim

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>
-                    : <p>Combine<br />{comboItem}</p>;
+                    ? `Buy ${comboItem} - ${bits}b`
+                    : `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, 6).map(i => inventoryBtn(vbox.bound[i], i))}
-                        </div>
+                        {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
                     </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()
-                                setReclaiming(!reclaiming)
+                                e.stopPropagation();
+                                sendVboxReclaim(vboxSelected.stashSelect[0]);
                             }}>
-                            refund
+                            refund <br />
+                            {refund}b
                         </button>
                     </div>
                 </div>
             );
         }
 
-
         //
         // EVERYTHING
         //