Combine vboxselect and combiner. Remove itemEquip and dblclick.

client/src/actions.jsx

@@ -30,7 +30,6 @@ export const setEmail = value => ({ type: 'SET_EMAIL', value });
 export const setInvite = value => ({ type: 'SET_INVITE', value });
 export const setInstance = value => ({ type: 'SET_INSTANCE', value });
 export const setInstances = value => ({ type: 'SET_INSTANCES', value });
-export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
 export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
 export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value });

client/src/components/account.status.jsx

@@ -37,7 +37,6 @@ const addState = connect(
             dispatch(actions.setReclaiming(false));
             dispatch(actions.setActiveSkill(null));
             dispatch(actions.setInfo(null));
-            dispatch(actions.setItemEquip(null));
             dispatch(actions.setItemUnequip([]));
             dispatch(actions.setVboxHighlight([]));
             return dispatch(actions.setNav('account'));

client/src/components/header.jsx

@@ -36,7 +36,6 @@ const addState = connect(
             dispatch(actions.setReclaiming(false));
             dispatch(actions.setActiveSkill(null));
             dispatch(actions.setInfo(null));
-            dispatch(actions.setItemEquip(null));
             dispatch(actions.setItemUnequip([]));
             dispatch(actions.setVboxHighlight([]));
             dispatch(actions.setMtxActive(null));

client/src/components/instance.component.jsx

@@ -29,10 +29,9 @@ const addState = connect(
         function clearItems() {
             dispatch(actions.setCombiner([]));
             dispatch(actions.setReclaiming(false));
-            dispatch(actions.setItemEquip(null));
             dispatch(actions.setItemUnequip([]));
             dispatch(actions.setVboxHighlight([]));
-            dispatch(actions.setVboxSelected([]));
+            dispatch(actions.setVboxSelected({ vbox: [], combiner: [] }));
             return true;
         }
 

client/src/components/instance.constructs.jsx

@@ -19,24 +19,19 @@ const addState = connect(
             player,
             account,
             itemInfo,
-            itemEquip,
             itemUnequip,
             vboxSelected,
             tutorial,
         } = state;
 
         function sendVboxAcceptEquip(constructId) {
-            return ws.sendVboxAcceptEquip(instance.id, vboxSelected[0][0], vboxSelected[0][1], constructId);
+            return ws.sendVboxAcceptEquip(instance.id, vboxSelected.vbox[0][0], vboxSelected.vbox[0][1], constructId);
         }
 
         function sendVboxApply(constructId, i) {
             return ws.sendVboxApply(instance.id, constructId, i);
         }
 
-        function sendUnequip(constructId, item) {
-            return ws.sendVboxUnequip(instance.id, constructId, item);
-        }
-
         function sendVboxUnequipApply(targetConstructId) {
             return ws.sendVboxUnequipApply(instance.id, itemUnequip[0], itemUnequip[1], targetConstructId);
         }
@@ -49,9 +44,7 @@ const addState = connect(
             sendVboxUnequipApply,
             sendVboxApply,
             itemInfo,
-            itemEquip,
             itemUnequip,
-            sendUnequip,
             vboxSelected,
             tutorial,
         };
@@ -66,17 +59,13 @@ const addState = connect(
             dispatch(actions.setInfo(item));
         }
 
-        function setItemEquip(v) {
-            return dispatch(actions.setItemEquip(v));
-        }
-
         function setItemUnequip(v) {
-            dispatch(actions.setVboxSelected([]));
+            dispatch(actions.setVboxSelected({ vbox: [], combiner: [] }));
             dispatch(actions.setCombiner([]));
             return dispatch(actions.setItemUnequip(v));
         }
 
-        return { quit, setInfo, setItemUnequip, setItemEquip };
+        return { quit, setInfo, setItemUnequip };
     }
 
 );
@@ -86,7 +75,6 @@ function Construct(props) {
         // Changing state variables
         construct,
         iter,
-        itemEquip,
         itemUnequip,
         instance,
         player,
@@ -98,13 +86,16 @@ function Construct(props) {
         sendVboxApply,
         sendVboxAcceptEquip,
         sendVboxUnequipApply,
-        sendUnequip,
         setItemUnequip,
-        setItemEquip,
         setInfo,
     } = props;
+
     const { vbox } = player;
 
+    const itemEquip = vboxSelected.vbox.length === 0 && vboxSelected.combiner.length === 1
+        ? vboxSelected.combiner[0]
+        : -1;
+
     const duplicateSkill = construct.skills.length !== 0 && construct.skills.every(sk => {
         if (!itemEquip && itemEquip !== 0) return false;
         if (!sk) return false;
@@ -115,17 +106,16 @@ function Construct(props) {
         e.stopPropagation();
         e.preventDefault();
         if (duplicateSkill || tutorialDisableEquip) return true;
-        if (itemEquip !== null) return sendVboxApply(construct.id, itemEquip);
+        if (itemEquip !== -1) return sendVboxApply(construct.id, itemEquip);
-        if (vboxSelected.length === 1) return sendVboxAcceptEquip(construct.id);
+        if (vboxSelected.vbox.length === 1) return sendVboxAcceptEquip(construct.id);
         if (itemUnequip.length && itemUnequip[0] !== construct.id) return sendVboxUnequipApply(construct.id);
-        setItemEquip(null);
         setItemUnequip([]);
         return true;
     }
     function hoverInfo(e, info) {
         e.stopPropagation();
         if (!info) return false;
-        if (vboxSelected.length || itemEquip > -1) return false;
+        if (vboxSelected.vbox.length || itemEquip > -1) return false;
         return setInfo(info);
     }
 
@@ -145,15 +135,6 @@ function Construct(props) {
             return true;
         }
 
-        function skillDblClick(e) {
-            if (!skill) return false;
-            sendUnequip(construct.id, skill.skill);
-            setItemUnequip([]);
-            e.stopPropagation();
-            e.preventDefault();
-            return true;
-        }
-
         const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill
             && !tutorialDisableEquip && !duplicateSkill && i === construct.skills.length;
         const border = () => {
@@ -176,7 +157,6 @@ function Construct(props) {
                     disabled={!skill && !equipping}
                     class={classes}
                     onClick={skillClick}
-                    onDblClick={skillDblClick}
                     onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
                     {s}
                 </button>
@@ -202,13 +182,6 @@ function Construct(props) {
             setItemUnequip([construct.id, s, i]);
         }
 
-        function specDblClick(e) {
-            sendUnequip(construct.id, s);
-            setItemUnequip([]);
-            e.stopPropagation();
-            e.preventDefault();
-            return true;
-        }
         const highlight = itemUnequip[0] === construct.id && itemUnequip[1] === s && i === itemUnequip[2];
         return (
             <label onDragStart={ev => {
@@ -219,7 +192,6 @@ function Construct(props) {
                     key={i}
                     class={`${highlight ? 'highlight' : ''}`}
                     onClick={specClick}
-                    onDblClick={specDblClick}
                     onMouseOver={e => hoverInfo(e, s)} >
                     {shapes[s]()}
                 </button>
@@ -263,7 +235,6 @@ function Construct(props) {
 
 class InstanceConstructs extends preact.Component {
     shouldComponentUpdate(newProps) {
-        if (newProps.itemEquip !== this.props.itemEquip) return true;
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
         // JSON or Array objects
@@ -276,7 +247,6 @@ class InstanceConstructs extends preact.Component {
     render(props) {
         const {
             // Changing state variables
-            itemEquip,
             itemUnequip,
             instance,
             player,
@@ -291,8 +261,6 @@ class InstanceConstructs extends preact.Component {
             sendVboxUnequipApply,
             setVboxHighlight,
             setItemUnequip,
-            setItemEquip,
-            sendUnequip,
         } = props;
 
         if (!player) return false;
@@ -305,11 +273,9 @@ class InstanceConstructs extends preact.Component {
             return Construct({
                 iter: i,
                 construct: player.constructs[i],
-                itemEquip,
                 itemUnequip,
                 instance,
                 setItemUnequip,
-                setItemEquip,
                 player,
                 sendVboxApply,
                 sendVboxAcceptEquip,
@@ -317,7 +283,6 @@ class InstanceConstructs extends preact.Component {
                 setInfo,
                 itemInfo,
                 setVboxHighlight,
-                sendUnequip,
                 vboxSelected,
                 tutorial,
             });

client/src/components/nav.jsx

@@ -37,7 +37,6 @@ const addState = connect(
             dispatch(actions.setReclaiming(false));
             dispatch(actions.setActiveSkill(null));
             dispatch(actions.setInfo(null));
-            dispatch(actions.setItemEquip(null));
             dispatch(actions.setItemUnequip([]));
             dispatch(actions.setVboxHighlight([]));
 

client/src/components/vbox.component.jsx

@@ -33,7 +33,7 @@ const addState = connect(
         }
 
         function sendVboxCombine() {
-            return ws.sendVboxCombine(instance.id, combiner, vboxSelected);
+            return ws.sendVboxCombine(instance.id, vboxSelected.combiner, vboxSelected.vbox);
         }
 
         function sendVboxReclaim(i) {
@@ -70,7 +70,7 @@ const addState = connect(
         function setReclaiming(v) {
             dispatch(actions.setItemUnequip([]));
             dispatch(actions.setCombiner([]));
-            dispatch(actions.setVboxSelected([]));
+            dispatch(actions.setVboxSelected({ vbox: [], combiner: [] }));
             return dispatch(actions.setReclaiming(v));
         }
 
@@ -80,19 +80,15 @@ const addState = connect(
 
         function setVboxSelected(v) {
             dispatch(actions.setItemUnequip([]));
+            dispatch(actions.setVboxSelected(v));
             return dispatch(actions.setVboxSelected(v));
         }
 
-        function setItemEquip(v) {
-            return dispatch(actions.setItemEquip(v));
-        }
-
         return {
             setCombiner,
             setReclaiming,
             setInfo,
             setVboxSelected,
-            setItemEquip,
         };
     }
 
@@ -114,7 +110,6 @@ class Vbox extends preact.Component {
     render(args) {
         const {
             // Changing state variables
-            combiner,
             itemUnequip,
             player,
             reclaiming,
@@ -131,26 +126,17 @@ class Vbox extends preact.Component {
             sendVboxDiscard,
             sendVboxReclaim,
             setVboxSelected,
-            setItemEquip,
             setInfo,
-            setCombiner,
             setReclaiming,
         } = args;
 
         if (!player) return false;
         const { vbox } = player;
-        const vboxSelecting = vboxSelected.length;
+        const { combiner } = vboxSelected;
+        const vboxSelecting = vboxSelected.vbox.length;
 
         function combinerChange(newCombiner) {
-            setCombiner(newCombiner);
+            return setVboxSelected({ vbox: vboxSelected.vbox, combiner: newCombiner });
-
-            if (newCombiner.length === 1) {
-                setItemEquip(newCombiner[0]);
-            } else {
-                setItemEquip(null);
-            }
-
-            return true;
         }
 
         //
@@ -159,7 +145,7 @@ class Vbox extends preact.Component {
         function vboxHover(e, v) {
             if (v) {
                 e.stopPropagation();
-                if (vboxSelected[0]) return true; // There is a base skill or spec selected in the vbox
+                if (vboxSelected.vbox[0]) return true; // There is a base skill or spec selected in the vbox
                 if (combiner.length !== 0) {
                     const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                     if (base || base === 0) return true;
@@ -170,36 +156,26 @@ class Vbox extends preact.Component {
         }
 
         function clearVboxSelected() {
-            setVboxSelected([]);
+            setVboxSelected({ vbox: [], combiner });
         }
 
         function vboxBuySelected() {
             if (!vboxSelecting) return false;
             document.activeElement.blur();
             clearVboxSelected();
-            sendVboxAccept(vboxSelected[0][0], vboxSelected[0][1]);
+            sendVboxAccept(vboxSelected.vbox[0][0], vboxSelected.vbox[0][1]);
             return true;
         }
 
         function availableBtn(v, group, index) {
             if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
-            const selected = vboxSelected.length && vboxSelected.some(vs => vs[0] === group && vs[1] === index);
+            const selected = vboxSelected.vbox.length && vboxSelected.vbox.some(vs => vs[0] === group && vs[1] === index);
             // state not yet set in double click handler
-            function onDblClick(e) {
+            /*function onDblClick(e) {
                 clearVboxSelected();
                 sendVboxAccept(group, index);
                 e.stopPropagation();
-            }
+            }*/
-
-            function onClick(e) {
-                e.stopPropagation();
-                setItemEquip(null);
-                setInfo(vbox.free[group][index]);
-                if (vboxSelected.length && vboxSelected.some(vs => vs[0] === group && vs[1] === index)) {
-                    return setVboxSelected(vboxSelected.filter(vs => !(vs[0] === group && vs[1] === index)));
-                }
-                return setVboxSelected([...vboxSelected, [group, index]]);
-            }
 
             const combinerItems = combiner.map(j => vbox.bound[j]);
             const combinerCount = countBy(combinerItems, co => co);
@@ -216,6 +192,21 @@ class Vbox extends preact.Component {
                 } return false;
             }) ? 'combo-border' : '';
 
+            function onClick(e) {
+                e.stopPropagation();
+                setInfo(vbox.free[group][index]);
+                if (vboxSelected.vbox.length && vboxSelected.vbox.some(vs => vs[0] === group && vs[1] === index)) {
+                    return setVboxSelected({ vbox: vboxSelected.vbox.filter(vs => !(vs[0] === group && vs[1] === index)), combiner });
+                }
+
+                if (!vboxSelected.vbox.length && !combiner.length) return setVboxSelected({ vbox: [[group, index]], combiner });
+                if (comboHighlight !== 'combo-border') {
+                    return setVboxSelected({ vbox: [[group, index]], combiner: [] });
+                }
+                return setVboxSelected({ vbox: [...vboxSelected.vbox, [group, index]], combiner });
+            }
+
+
             const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
 
             const vboxObject = shapes[v] ? shapes[v]() : v;
@@ -231,7 +222,6 @@ class Vbox extends preact.Component {
                         onMouseOver={e => vboxHover(e, v)}
                         onMouseDown={onClick}
                         onClick={e => e.stopPropagation()}
-                        onDblClick={onDblClick}
                     > {vboxObject}
                     </button>
                 </label>
@@ -439,7 +429,7 @@ class Vbox extends preact.Component {
         function hoverInfo(e, newInfo) {
             e.stopPropagation();
 
-            if (vboxSelected[0]) return true;
+            if (vboxSelected.vbox[0]) return true;
             if (combiner.length !== 0) {
                 const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                 if (base || base === 0) return true;

client/src/events.jsx

@@ -188,10 +188,9 @@ function registerEvents(store) {
         store.dispatch(actions.setReclaiming(false));
         store.dispatch(actions.setActiveSkill(null));
         store.dispatch(actions.setInfo(null));
-        store.dispatch(actions.setItemEquip(null));
         store.dispatch(actions.setItemUnequip([]));
         store.dispatch(actions.setVboxHighlight([]));
-        store.dispatch(actions.setVboxSelected([]));
+        store.dispatch(actions.setVboxSelected({ vbox: [], combiner: [] }));
     }
 
     function setAccountInstances(v) {

client/src/keyboard.jsx

@@ -10,10 +10,9 @@ function setupKeys(store) {
     key('esc', () => store.dispatch(actions.setReclaiming(false)));
     key('esc', () => store.dispatch(actions.setActiveSkill(null)));
     key('esc', () => store.dispatch(actions.setInfo(null)));
-    key('esc', () => store.dispatch(actions.setItemEquip(null)));
     key('esc', () => store.dispatch(actions.setItemUnequip([])));
     key('esc', () => store.dispatch(actions.setVboxHighlight([])));
-    key('esc', () => store.dispatch(actions.setVboxSelected([])));
+    key('esc', () => store.dispatch(actions.setVboxSelected({ vbox: [], combiner: [] })));
     key('esc', () => store.dispatch(actions.setMtxActive(null)));
 }
 

client/src/reducers.jsx

@@ -39,7 +39,6 @@ module.exports = {
     instance:           createReducer(null, 'SET_INSTANCE'),
     instanceChat:       createReducer(null, 'SET_INSTANCE_CHAT'),
     instances:          createReducer([], 'SET_INSTANCES'),
-    itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
     itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
     itemUnequip:        createReducer([], 'SET_ITEM_UNEQUIP'),
     mtxActive:          createReducer(null, 'SET_MTX_ACTIVE'),
@@ -59,7 +58,7 @@ module.exports = {
     tutorial:           createReducer(1, 'SET_TUTORIAL'),
     tutorialGame:       createReducer(1, 'SET_TUTORIAL_GAME'),
 
-    vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),
+    vboxSelected:       createReducer({ vbox: [], combiner: [] }, 'SET_VBOX_SELECTED'),
 
     ws:                 createReducer(null, 'SET_WS'),
 };