new combiner

client/assets/styles/vbox.less

@@ -71,27 +71,34 @@
     button {
         height: 3em;
         margin: 0;
+
+        &.empty {
+            border-style: dashed;
         }
 
-    button.empty {
+        &.highlight {
-        border-style: dashed;
+            color: black;
+            background: @white;
+            border: 1px solid @white;
+        }
     }
 
     svg {
         stroke: none;
         margin: 0 auto;
         display: block;
-    }
 
-    svg.red {
+        &.red {
             fill: @red;
         }
 
-    svg.green {
+        &.green {
             fill: @green;
         }
 
-    .blue {
+        &.blue {
             fill: @blue;
         }
     }
+
+}

client/src/components/vbox.component.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const range = require('lodash/range');
+const without = require('lodash/without');
 const { connect } = require('preact-redux');
 
 const shapes = require('./shapes');
@@ -142,7 +143,7 @@ function Vbox(args) {
         return true;
     }
 
-    function boundBtn(v, group, index) {
+    function availableBtn(v, group, index) {
         if (!v) return <button disabled class='empty' >&nbsp;</button>;
 
         function onClick() {
@@ -158,11 +159,21 @@ function Vbox(args) {
 
         if (['Red', 'Green', 'Blue'].includes(v)) {
             return (
-                <button onClick={onClick} >{shapes.vboxColour(v.toLowerCase())}</button>
+                <button
+                    onMouseOver={e => vboxHover(e, v)}
+                    onClick={onClick}>
+                    {shapes.vboxColour(v.toLowerCase())}
+                </button>
             );
         }
 
-        return <button onClick={onClick} >{v}</button>;
+        return (
+            <button
+                onClick={onClick}
+                onMouseOver={e => vboxHover(e, v)}>
+                {v}
+            </button>
+        );
     }
 
 
@@ -176,11 +187,11 @@ function Vbox(args) {
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <div class="vbox-colours">
-                    {range(0, 6).map(i => boundBtn(vbox.free[0][i], 0, i))}
+                    {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
                 </div>
                 <div class="vbox-items">
-                    {range(0, 3).map(i => boundBtn(vbox.free[1][i], 1, i))}
+                    {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
-                    {range(0, 3).map(i => boundBtn(vbox.free[2][i], 2, i))}
+                    {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
                 </div>
                 <button
                     class='vbox-btn'
@@ -192,47 +203,9 @@ 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
-    //             key={j}
-    //             class={`${highlighted ? 'highlight' : ''}`}
-    //             onTouchStart={e => vboxTouchStart(e, i, j)}
-    //             onTouchEnd={e => vboxTouchEnd(e, i, j)}
-    //             onTouchMove={e => vboxTouchMove(e)}
-
-    //             // onClick={freeClick}
-    //             onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
-    //             onMouseOver={e => vboxHover(e, c)}
-    //         >
-    //             {convertItem(c)}
-    //         </td>;
-    //     });
-    //     return (
-    //         <tr key={i}>
-    //             {cells}
-    //         </tr>
-    //     );
-    // });
-
     //
     //  INVENTORY
     //
-    function boundClick(e, i) {
-        const value = vbox.bound[i];
-        if (reclaiming && value) return sendVboxReclaim(i);
-        if (value) {
-            const insert = combiner.findIndex(j => j === null);
-            if (insert === -1) return combinerChange([i, null, null]);
-            combiner[insert] = i;
-            return combinerChange(combiner);
-        }
-        return false;
-    }
 
     // const boundTds = range(0, 9).map(i => {
     //     const value = vbox.bound[i];
@@ -258,18 +231,79 @@ function Vbox(args) {
     //     );
     // });
 
+
+    function reclaimClick(e) {
+        e.stopPropagation();
+        return setReclaiming(!reclaiming);
+    }
+
+    const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
+
     function inventoryBtn(v, i) {
         if (!v) return <button disabled class='empty' >&nbsp;</button>;
 
+        function onClick(e) {
+            if (reclaiming) return sendVboxReclaim(i);
+
+            const combinerIndex = combiner.indexOf(i);
+            if (combinerIndex > -1) {
+                return combinerChange(without(combiner, i));
+            }
+
+            combiner.push(i);
+            return combinerChange(combiner);
+        }
+
+        const highlighted = combiner.indexOf(i) > -1;
+        const classes = `${highlighted ? 'highlight' : ''}`;
+
         if (['Red', 'Green', 'Blue'].includes(v)) {
             return (
-                <button>{shapes.vboxColour(v.toLowerCase())}</button>
+                <button
+                    class={classes}
+                    onMouseOver={e => vboxHover(e, v)}
+                    onClick={onClick}>
+                    {shapes.vboxColour(v.toLowerCase())}
+                </button>
             );
         }
 
-        return <button onDblClick={() => sendVboxAccept(0, i)}>{v}</button>;
+        return (
+            <button
+                class={classes}
+                onClick={onClick}
+                onMouseOver={e => vboxHover(e, v)}>
+                {v}
+            </button>
+        );
     }
 
+    function combinerBtn() {
+        const dots = combiner.filter(v => v).length;
+        let text = '';
+
+        if (dots < 3) {
+            for (let i = 0; i < 3; i++) {
+                if (dots > i) {
+                    text += '■ ';
+                } else {
+                    text += '▫ ';
+                }
+            }
+        } else {
+            text = 'combine'
+        }
+
+        return (
+            <button
+                class='vbox-btn'
+                disabled={dots !== 3}
+                onMouseOver={e => hoverInfo(e, 'refine')}
+                onClick={() => sendVboxCombine()}>
+                {text}
+            </button>
+        );
+    }
 
     function inventoryElement() {
         return (
@@ -288,13 +322,7 @@ function Vbox(args) {
                 <div class='vbox-items'>
                     {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
                 </div>
-                <button
+                {combinerBtn()}
-                    class='vbox-btn'
-                    disabled
-                    onMouseOver={e => hoverInfo(e, 'reroll')}
-                    onClick={() => sendVboxDiscard()}>
-                    ■ ▫ ▫
-                </button>
             </div>
         );
     }
@@ -303,10 +331,6 @@ function Vbox(args) {
     // EVERYTHING
     //
 
-    function reclaimClick(e) {
-        e.stopPropagation();
-        return setReclaiming(!reclaiming);
-    }
 
     function hoverInfo(e, info) {
         e.stopPropagation();
@@ -314,8 +338,6 @@ function Vbox(args) {
     }
 
     const classes = 'vbox';
-    const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
-
     return (
         <div class={classes}>
             {vboxElement()}

client/src/utils.jsx

@@ -297,12 +297,26 @@ function errorToast(message) {
     });
 }
 
+function convertItem(v) {
+    if (['Red', 'Green', 'Blue'].includes(v)) {
+        return (
+            shapes.vboxColour(v.toLowerCase())
+        );
+    }
+    return v || <span>&nbsp;</span>;
+    // uncomment for double borders in vbox;
+    // if (v) {
+    //     return <div>{v}</div>;
+    // }
+    // return;
+}
 
 module.exports = {
     stringSort,
     numSort,
     eventClasses,
     postData,
+    convertItem,
     errorToast,
     NULL_UUID,
     STATS,