added vbox headers

client/src/components/vbox.component.jsx

@@ -168,6 +168,7 @@ function Vbox(args) {
     const freeRows = free.map((row, i) => {
         const cells = row.map((c, j) => {
             const highlighted = c && vboxHighlight.includes(c);
+            // First two rows are colours
             const sendItemType = i > 1 ? i - 1 : 0;
             const sendItemIndex = i === 1 ? j + 3 : j;
             return <td
@@ -180,11 +181,10 @@ function Vbox(args) {
                 // onClick={freeClick}
                 onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
                 onMouseOver={e => vboxHover(e, c)}
-                >
+            >
                 {convertItem(c)}
             </td>;
         });
-
         return (
             <tr key={i}>
                 {cells}
@@ -300,9 +300,22 @@ function Vbox(args) {
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
+                <div style="text-align: center"> Colours </div>
                 <table class="vbox-table">
                     <tbody>
-                        {freeRows}
+                        {freeRows.slice(0, 2)}
+                    </tbody>
+                </table>
+                <div style="text-align: center"> Skills </div>
+                <table class="vbox-table">
+                    <tbody>
+                        {freeRows[2]}
+                    </tbody>
+                </table>
+                <div style="text-align: center"> Specs </div>
+                <table class="vbox-table">
+                    <tbody>
+                        {freeRows[3]}
                     </tbody>
                 </table>
                 <button