move combiner into info (clear buy/combine) on combo hover

client/src/components/vbox.combiner.jsx

@@ -1,92 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const addState = connect(
-    function receiveState(state) {
-        const {
-            ws,
-            instance,
-            vboxSelected,
-            itemInfo,
-            player,
-        } = state;
-
-        const { vbox } = player;
-        function sendVboxAccept(group, index) {
-            document.activeElement.blur();
-            return ws.sendVboxAccept(instance.id, group, index);
-        }
-
-        function sendVboxCombine() {
-            return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
-        }
-
-        return {
-            vbox,
-            vboxSelected,
-            sendVboxAccept,
-            sendVboxCombine,
-        };
-    }
-);
-
-class CombinerBtn extends preact.Component {
-    shouldComponentUpdate(newProps) {
-        // Single variable props
-        if (newProps.vbox !== this.props.vbox) return true;
-        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
-        return false;
-    }
-
-    render(props) {
-        const {
-            vbox,
-            vboxSelected,
-            sendVboxAccept,
-            sendVboxCombine,
-            combinerCombo,
-
-        } = props;
-
-        const { stashSelect, storeSelect } = vboxSelected;
-
-        function vboxBuySelected() {
-            if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false;
-            document.activeElement.blur();
-            sendVboxAccept(storeSelect[0][0], storeSelect[0][1]);
-            return true;
-        }
-        let text = '';
-        let mouseEvent = false;
-        if (combinerCombo) {
-            const comboItem = combinerCombo.replace('Plus', '+');
-            let bits = 0;
-            storeSelect.forEach(item => bits += item[0] + 1);
-            text = bits
-                ? `Buy ${comboItem} ${bits}b`
-                : `Combine ${comboItem}`;
-            if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
-        } else if (stashSelect.length === 0 && storeSelect.length === 1) {
-            const item = storeSelect[0];
-            text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
-            mouseEvent = vboxBuySelected;
-        } else {
-            return false;
-        }
-        return (
-            <div class='combiner'>
-                <button
-                    class='vbox-btn'
-                    disabled={!mouseEvent}
-                    onClick={e => e.stopPropagation()}
-                    onMouseDown={() => mouseEvent()}>
-                    {text}
-                </button>
-            </div>
-        );
-    }
-}
-
-module.exports = addState(CombinerBtn);

client/src/components/vbox.info.jsx

@@ -8,7 +8,6 @@ const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
-const Combiner = require('./vbox.combiner');
 
 const actions = require('../actions');
 
@@ -25,6 +24,15 @@ const addState = connect(
             vboxSelected,
         } = state;
 
+        function sendVboxAccept(group, index) {
+            document.activeElement.blur();
+            return ws.sendVboxAccept(instance.id, group, index);
+        }
+
+        function sendVboxCombine() {
+            return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.storeSelect);
+        }
+
         return {
             ws,
             info,
@@ -34,6 +42,8 @@ const addState = connect(
             account,
             tutorial,
             vboxSelected,
+            sendVboxAccept,
+            sendVboxCombine,
         };
     },
 
@@ -81,6 +91,8 @@ class InfoComponent extends preact.Component {
             itemInfo,
             instance, // Only used for instance id
             // functions
+            sendVboxAccept,
+            sendVboxCombine,
             setTutorialNull,
         } = args;
         const { comboItem } = this.state;
@@ -246,11 +258,49 @@ class InfoComponent extends preact.Component {
             );
         };
 
+        const Combiner = () => {
+            if (comboItem) return false;
+            function vboxBuySelected() {
+                if (!(storeSelect.length === 1 && stashSelect.length === 0)) return false;
+                document.activeElement.blur();
+                sendVboxAccept(storeSelect[0][0], storeSelect[0][1]);
+                return true;
+            }
+            let text = '';
+            let mouseEvent = false;
+            if (combinerCombo) {
+                const combinerComboText = combinerCombo.replace('Plus', '+');
+                let bits = 0;
+                storeSelect.forEach(item => bits += item[0] + 1);
+                text = bits
+                    ? `Buy ${combinerComboText} ${bits}b`
+                    : `Combine ${combinerComboText}`;
+                if (vbox.bits >= bits) mouseEvent = sendVboxCombine;
+            } else if (stashSelect.length === 0 && storeSelect.length === 1) {
+                const item = storeSelect[0];
+                text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
+                mouseEvent = vboxBuySelected;
+            } else {
+                return false;
+            }
+            return (
+                <div class='combiner'>
+                    <button
+                        class='vbox-btn'
+                        disabled={!mouseEvent}
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={() => mouseEvent()}>
+                        {text}
+                    </button>
+                </div>
+            );
+        };
+
         return (
             <div class='info'>
                 <div onMouseOver={() => this.setState({ comboItem: null })}>
                     <Info />
-                    <Combiner vboxHighlight={vboxHighlight} combinerCombo={combinerCombo} />
+                    <Combiner />
                 </div>
                 <Combos />
             </div>