vbox arrangement change

client/src/components/vbox.component.jsx

@@ -125,9 +125,14 @@ function Vbox(args) {
     // VBOX
     //
     const free = [];
-    for (let i = 0; i < 6; i++) {
-        free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
-    }
+
+    // Colours
+    free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]);
+    free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]);
+    // Skills
+    free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
+    // Specs
+    free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
 
     let vboxTimer;
     const LONG_TOUCH_TIME = 500;
@@ -163,7 +168,8 @@ function Vbox(args) {
     const freeRows = free.map((row, i) => {
         const cells = row.map((c, j) => {
             const highlighted = c && vboxHighlight.includes(c);
-
+            const sendItemType = i > 1 ? i - 1 : 0;
+            const sendItemIndex = i === 1 ? j + 3 : j;
             return <td
                 key={j}
                 class={`${highlighted ? 'highlight' : ''}`}
@@ -172,7 +178,7 @@ function Vbox(args) {
                 onTouchMove={e => vboxTouchMove(e)}
 
                 // onClick={freeClick}
-                onDblClick={() => sendVboxAccept(j, i) }
+                onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
                 onMouseOver={e => vboxHover(e, c)}
                 >
                 {convertItem(c)}
@@ -282,12 +288,14 @@ function Vbox(args) {
         return setInfo(info);
     }
 
-    const classes = `vbox`;
+    const classes = "vbox";
     const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
         <div class={classes}>
-            <div class='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
+            <div class='vbox-box'
+                onClick={() => setReclaiming(false)}
+                onMouseOver={e => hoverInfo(e, 'vbox')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
@@ -305,7 +313,9 @@ function Vbox(args) {
             </div>
             <div class="vbox-arrow">⮞</div>
             <div class="vbox-arrow-mobile">⮟</div>
-            <div class='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
+            <div class='vbox-inventory'
+                onClick={() => setReclaiming(false)}
+                onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                     <button