Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

WORKLOG.md

@@ -1,17 +1,9 @@
 # WORK WORK
 ## NOW
 
-_ntr_
+*PRODUCTION*
+
 * can't reset password without knowing password =\
-* change cooldowns to delay & recharge
-  - delay is cooldown before skill can first be used
-  - recharge is cooldown after using skill
-  - every x speed reduces delay of skills
-
-_mashy_
-
-_somebody else_
-* look into ruin event bug
 
 * Graphics
   * Img
@@ -23,10 +15,28 @@ _somebody else_
       - Speed (e.g. boots)
       - Life (e.g. heart)
 
-  * represent construct colours during game phase (coloured border?)
+* reduce inventory size and consolidate vbox and inventory on left side
+
+* audio
+  * background music
+  * animation effects
+  * vbox combine / buy / equip etc
+
+* reclaim change colour from red (clashes with red items)
+
+* represent construct colours during game phase (coloured border?)
+* supporter gold name in instance (anyone whos put any money into game)
+
+* Give the bots some ai / make stronger so its a challenge for new people to beat
+  - train a few games of with some round losses to get them into the game
+
+* Speed up animations slightly (3s per normal event too long)
+  - Improve combat text to start at the opposite end of construct and float towards health stats
+  - Show combat text for skill cast possibly? Watch some pokemans etc for modern combat smoothing
+
+* skip faceoff on server side
 
 ## SOON
-* supporter gold name in instance (anyone whos put any money into game)
 
 * buy from preview if you have the required bases in vbox / inventory
     - a "buy" becomes available under the current info / preview section
@@ -36,8 +46,33 @@ _somebody else_
     - if this was added we could reduce inventory size to 3 and rearrange vbox (see mockup img)
 
 
-* audio
+* change cooldowns to delay & recharge
+  - delay is cooldown before skill can first be used
+  - recharge is cooldown after using skill
+  - every x speed reduces delay of skills
+
+* combo rework
+  - reduce number of items for creating t2/t3 items from 3 -> 2
+  - add lost complexity by adding skill spec items
+  - Created by combining a skill with corresponding spec
+    e.g.
+      - Strike + PowerRR -> StrikePower (Will be the power symbol with strike text under)
+        - Construct does Y% more damage with Strike
+      - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed)
+      - Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life)
+
+    - Can also work as module style passive keystones 
+        * troll life -> dmg -> Invert life spec?
+        * prince of peace 
+          * bonus healing / no damage -> Heal power spec?
+        * fuck magic -> Some sort of reflect spec?
+        * empower on ko -> Amplify + Power spec
+
 * elo + leaderboards
+* reconnect based on time delta
+
+* ACP
+  * essential
 
 ## LATER
 
@@ -54,16 +89,6 @@ _somebody else_
 * remove names so games/instances are copy
 * consolidate game and instance
 
-* combo rework
-  - reduce number of items for creating t2/t3 items from 3 -> 2
-  - add lost complexity by adding skill spec items
-  - Created by combining a skill with corresponding spec
-    e.g.
-      - Strike + PowerRR -> StrikePower (Will be the power symbol with strike text under)
-        - Construct does Y% more damage with Strike
-      - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed)
-      - Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life)
-
 * Energy generators / spenders
   - Current skills generate team wide red / blue / green energy
   - New special skill base consumes team energy to do "special" powerful moves
@@ -75,12 +100,7 @@ _somebody else_
 
 * mnml tv
 
-* modules
+
-  * troll life -> dmg
-  * prince of peace
-    * bonus healing / no damage
-  * fuck magic
-  * empower on ko
 
 ## $$$
 * Items

client/assets/styles/instance.less

@@ -162,6 +162,23 @@
 }
 
 .construct-list {
+    button {
+        &.highlight {
+            color: black;
+            background: @white;
+            // border: 1px solid @white; (this bangs around the vbox)
+
+            // overwrite the classes on white svg elements
+            svg {
+                stroke-width: 0.75em;
+            }
+
+            .white {
+                stroke: black;
+            }
+        }
+    }
+
     .name {
         grid-area: name;
         margin-bottom: 0.5em;

client/src/actions.jsx

@@ -16,7 +16,6 @@ export const setInstanceChat = value => ({ type: 'SET_INSTANCE_CHAT', value });
 
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
 export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
-export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
 export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
 export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
 export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', value });
@@ -30,7 +29,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

@@ -33,11 +33,9 @@ const addState = connect(
         function accountPage() {
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
-            dispatch(actions.setCombiner([]));
             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

@@ -32,11 +32,9 @@ const addState = connect(
         function setNav(place) {
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
-            dispatch(actions.setCombiner([]));
             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/info.container.jsx

@@ -7,7 +7,6 @@ const addState = connect(
     function receiveState(state) {
         const {
             ws,
-            combiner,
             info,
             itemInfo,
             instance,
@@ -18,7 +17,6 @@ const addState = connect(
 
         return {
             ws,
-            combiner,
             info,
             itemInfo,
             instance,

client/src/components/instance.component.jsx

@@ -27,12 +27,10 @@ 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({ shopSelect: [], stashSelect: [] }));
             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], vboxSelected[1], constructId);
+            return ws.sendVboxAcceptEquip(instance.id, vboxSelected.shopSelect[0][0], vboxSelected.shopSelect[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,15 +59,12 @@ const addState = connect(
             dispatch(actions.setInfo(item));
         }
 
-        function setItemEquip(v) {
-            return dispatch(actions.setItemEquip(v));
-        }
-
         function setItemUnequip(v) {
+            dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] }));
             return dispatch(actions.setItemUnequip(v));
         }
 
-        return { quit, setInfo, setItemUnequip, setItemEquip };
+        return { quit, setInfo, setItemUnequip };
     }
 
 );
@@ -84,7 +74,6 @@ function Construct(props) {
         // Changing state variables
         construct,
         iter,
-        itemEquip,
         itemUnequip,
         instance,
         player,
@@ -96,13 +85,16 @@ function Construct(props) {
         sendVboxApply,
         sendVboxAcceptEquip,
         sendVboxUnequipApply,
-        sendUnequip,
         setItemUnequip,
-        setItemEquip,
         setInfo,
     } = props;
+
     const { vbox } = player;
 
+    const itemEquip = vboxSelected.shopSelect.length === 0 && vboxSelected.stashSelect.length === 1
+        ? vboxSelected.stashSelect[0]
+        : -1;
+
     const duplicateSkill = construct.skills.length !== 0 && construct.skills.every(sk => {
         if (!itemEquip && itemEquip !== 0) return false;
         if (!sk) return false;
@@ -113,17 +105,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[0]) return sendVboxAcceptEquip(construct.id);
+        if (vboxSelected.shopSelect.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[0] || itemEquip > -1) return false;
+        if (vboxSelected.shopSelect.length || vboxSelected.stashSelect.length) return false;
         return setInfo(info);
     }
 
@@ -138,20 +129,11 @@ function Construct(props) {
 
         function skillClick(e) {
             if (!skill) return false;
-            setItemUnequip([construct.id, skill.skill]);
+            setItemUnequip([construct.id, skill.skill, i]);
             e.stopPropagation();
             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 = () => {
@@ -161,7 +143,9 @@ function Construct(props) {
             return borderFn();
         };
 
-        const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''} ${border()}`;
+        const highlight = itemUnequip[0] === construct.id && itemUnequip[1] === s ? 'highlight' : '';
+
+        const classes = `${highlight} ${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''} ${border()}`;
         return (
             <label onDragStart={ev => {
                 ev.dataTransfer.setData('text', '');
@@ -172,7 +156,6 @@ function Construct(props) {
                     disabled={!skill && !equipping}
                     class={classes}
                     onClick={skillClick}
-                    onDblClick={skillDblClick}
                     onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
                     {s}
                 </button>
@@ -195,18 +178,10 @@ function Construct(props) {
 
         function specClick(e) {
             e.stopPropagation();
-            setItemUnequip([construct.id, s]);
+            setItemUnequip([construct.id, s, i]);
         }
 
-        function specDblClick(e) {
+        const highlight = itemUnequip[0] === construct.id && itemUnequip[1] === s && i === itemUnequip[2];
-            sendUnequip(construct.id, s);
-            setItemUnequip([]);
-            e.stopPropagation();
-            e.preventDefault();
-            return true;
-        }
-
-
         return (
             <label onDragStart={ev => {
                 ev.dataTransfer.setData('text', '');
@@ -214,8 +189,8 @@ function Construct(props) {
             }} key={i} draggable="true" onDragEnd={() => setItemUnequip([])}>
                 <button
                     key={i}
+                    class={`${highlight ? 'highlight' : ''}`}
                     onClick={specClick}
-                    onDblClick={specDblClick}
                     onMouseOver={e => hoverInfo(e, s)} >
                     {shapes[s]()}
                 </button>
@@ -259,7 +234,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
@@ -272,7 +246,6 @@ class InstanceConstructs extends preact.Component {
     render(props) {
         const {
             // Changing state variables
-            itemEquip,
             itemUnequip,
             instance,
             player,
@@ -287,8 +260,6 @@ class InstanceConstructs extends preact.Component {
             sendVboxUnequipApply,
             setVboxHighlight,
             setItemUnequip,
-            setItemEquip,
-            sendUnequip,
         } = props;
 
         if (!player) return false;
@@ -301,11 +272,9 @@ class InstanceConstructs extends preact.Component {
             return Construct({
                 iter: i,
                 construct: player.constructs[i],
-                itemEquip,
                 itemUnequip,
                 instance,
                 setItemUnequip,
-                setItemEquip,
                 player,
                 sendVboxApply,
                 sendVboxAcceptEquip,
@@ -313,7 +282,6 @@ class InstanceConstructs extends preact.Component {
                 setInfo,
                 itemInfo,
                 setVboxHighlight,
-                sendUnequip,
                 vboxSelected,
                 tutorial,
             });

client/src/components/nav.jsx

@@ -33,11 +33,9 @@ const addState = connect(
         function setNav(place) {
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
-            dispatch(actions.setCombiner([]));
             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

@@ -3,6 +3,7 @@ const { connect } = require('preact-redux');
 const range = require('lodash/range');
 const countBy = require('lodash/countBy');
 const without = require('lodash/without');
+const forEach = require('lodash/forEach');
 
 const { removeTier } = require('../utils');
 const shapes = require('./shapes');
@@ -15,7 +16,6 @@ const addState = connect(
             ws,
             instance,
             player,
-            combiner,
             reclaiming,
             vboxSelected,
             itemInfo,
@@ -33,7 +33,7 @@ const addState = connect(
         }
 
         function sendVboxCombine() {
-            return ws.sendVboxCombine(instance.id, combiner);
+            return ws.sendVboxCombine(instance.id, vboxSelected.stashSelect, vboxSelected.shopSelect);
         }
 
         function sendVboxReclaim(i) {
@@ -45,7 +45,6 @@ const addState = connect(
         }
 
         return {
-            combiner,
             instance,
             player,
             reclaiming,
@@ -62,11 +61,9 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setCombiner(c) {
-            return dispatch(actions.setCombiner(c));
-        }
-
         function setReclaiming(v) {
+            dispatch(actions.setItemUnequip([]));
+            dispatch(actions.setVboxSelected({ shopSelect: [], stashSelect: [] }));
             return dispatch(actions.setReclaiming(v));
         }
 
@@ -75,28 +72,52 @@ 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,
         };
     }
-
 );
 
+function validVboxSelect(vbox, itemInfo, shopSelect, stashSelect) {
+    if (shopSelect.length === 0 && stashSelect.length === 0) return false;
+
+    const validSelects = [];
+
+    const stashItems = stashSelect.map(j => vbox.bound[j]);
+    const shopItems = shopSelect.map(j => vbox.free[j[0]][j[1]]);
+
+    const selectedItems = stashItems.concat(shopItems);
+    const itemCount = countBy(selectedItems, co => co);
+
+    itemInfo.combos.forEach(combo => {
+        const comboCount = countBy(combo.components, co => co);
+        const buyCount = countBy(combo.components, co => co);
+        const valid = selectedItems.every(c => {
+            if (!combo.components.includes(c)) return false;
+            if (itemCount[c] > comboCount[c]) return false;
+            buyCount[c] -= itemCount[c];
+            return true;
+        });
+        if (valid) {
+            forEach(buyCount, (value, key) => {
+                if (value > 0 && !validSelects.includes(key)) validSelects.push(key);
+            });
+        }
+    });
+
+    return validSelects;
+}
+
 class Vbox extends preact.Component {
     shouldComponentUpdate(newProps) {
         // Single variable props
-        if (newProps.combiner !== this.props.combiner) return true;
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.reclaiming !== this.props.reclaiming) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
@@ -109,7 +130,6 @@ class Vbox extends preact.Component {
     render(args) {
         const {
             // Changing state variables
-            combiner,
             itemUnequip,
             player,
             reclaiming,
@@ -126,37 +146,29 @@ 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 { shopSelect, stashSelect } = vboxSelected;
+        const vboxSelecting = shopSelect.length === 1 && stashSelect.length === 0;
 
-        function combinerChange(newCombiner) {
+        function combinerChange(newStashSelect) {
-            setCombiner(newCombiner);
+            return setVboxSelected({ shopSelect, stashSelect: newStashSelect });
-
-            if (newCombiner.length === 1) {
-                setItemEquip(newCombiner[0]);
-            } else {
-                setItemEquip(null);
-            }
-
-            return true;
         }
 
+        const vboxHighlight = validVboxSelect(vbox, itemInfo, shopSelect, stashSelect);
         //
         // VBOX
         //
         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 (shopSelect.find(c => c[0])) return true; // There is a base skill or spec selected in the vbox
-                if (combiner.length !== 0) {
+                if (stashSelect.length !== 0) {
-                    const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
+                    const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                     if (base || base === 0) return true;
                 }
                 setInfo(v);
@@ -165,51 +177,36 @@ class Vbox extends preact.Component {
         }
 
         function clearVboxSelected() {
-            setVboxSelected([]);
+            setVboxSelected({ shopSelect: [], stashSelect: [] });
         }
 
         function vboxBuySelected() {
             if (!vboxSelecting) return false;
             document.activeElement.blur();
-            clearVboxSelected();
+            sendVboxAccept(shopSelect[0][0], shopSelect[0][1]);
-            sendVboxAccept(vboxSelected[0], vboxSelected[1]);
             return true;
         }
 
         function availableBtn(v, group, index) {
             if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
-            const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+            const selected = shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index);
 
-            // state not yet set in double click handler
+            const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
-            function onDblClick(e) {
-                clearVboxSelected();
-                sendVboxAccept(group, index);
-                e.stopPropagation();
-            }
 
             function onClick(e) {
                 e.stopPropagation();
-                setItemEquip(null);
+                if (!comboHighlight) setInfo(vbox.free[group][index]);
-                setCombiner([]);
+                if (shopSelect.length && shopSelect.some(vs => vs[0] === group && vs[1] === index)) {
-                setInfo(vbox.free[group][index]);
+                    return setVboxSelected({ shopSelect: shopSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect });
-                if (vboxSelected[0] === group && vboxSelected[1] === index) return clearVboxSelected();
+                }
-                return setVboxSelected([group, index]);
+
+                if (!shopSelect.length && !stashSelect.length) return setVboxSelected({ shopSelect: [[group, index]], stashSelect });
+                if (comboHighlight !== 'combo-border') {
+                    return setVboxSelected({ shopSelect: [[group, index]], stashSelect: [] });
+                }
+                return setVboxSelected({ shopSelect: [...shopSelect, [group, index]], stashSelect });
             }
 
-            const combinerItems = combiner.map(j => vbox.bound[j]);
-            const combinerCount = countBy(combinerItems, co => co);
-
-            const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
-                if (combo.components.includes(v)) {
-                    return combinerItems.every(c => {
-                        if (!combo.components.includes(c)) return false;
-                        const comboCount = countBy(combo.components, co => co);
-                        if (combinerCount[c] > comboCount[c]) return false;
-                        if (c === v && combinerCount[c] + 1 > comboCount[c]) return false;
-                        return true;
-                    });
-                } return false;
-            }) ? 'combo-border' : '';
 
             const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
 
@@ -217,10 +214,7 @@ class Vbox extends preact.Component {
             const disabled = vbox.bits <= group;
             return (
                 <label draggable='true'
-                    onDragStart={ev => {
+                    onDragStart={ev => ev.dataTransfer.setData('text', '')}
-                        onClick(ev);
-                        ev.dataTransfer.setData('text', '')
-                    }}
                     key={group * 10 + index}
                     onDragEnd={clearVboxSelected}>
                     <button
@@ -229,7 +223,6 @@ class Vbox extends preact.Component {
                         onMouseOver={e => vboxHover(e, v)}
                         onMouseDown={onClick}
                         onClick={e => e.stopPropagation()}
-                        onDblClick={onDblClick}
                     > {vboxObject}
                     </button>
                 </label>
@@ -240,7 +233,6 @@ class Vbox extends preact.Component {
         function vboxElement() {
             return (
                 <div class='vbox-vbox'
-                    onMouseDown={() => setReclaiming(false)}
                     onClick={e => e.stopPropagation()}>
                     <div class="vbox-hdr">
                         <h3
@@ -259,7 +251,9 @@ class Vbox extends preact.Component {
                     <button
                         class='vbox-btn'
                         onMouseOver={e => hoverInfo(e, 'refill')}
-                        disabled={tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1}
+                        disabled={vbox.bits < 2
+                            || (tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1)
+                        }
                         onClick={e => e.stopPropagation()}
                         onMouseDown={() => sendVboxDiscard()}>
                         refill - 2b
@@ -276,60 +270,42 @@ class Vbox extends preact.Component {
             return setReclaiming(!reclaiming);
         }
 
-        const inventoryClass = `vbox-section ${reclaiming ? 'reclaiming' : ''}`;
-
         function inventoryBtn(v, i) {
             const inventoryHighlight = vboxSelecting || itemUnequip.length;
 
             if (!v && v !== 0) {
-                return <button key={i} disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
+                const emptyInvClick = () => {
+                    if (vboxSelecting) return vboxBuySelected();
+                    return false;
+                };
+                return <button key={i} onClick={emptyInvClick} disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
             }
 
-            const combinerItems = combiner.map(j => vbox.bound[j]);
+            const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
-            const combinerCount = countBy(combinerItems, co => co);
-
-            const comboItem = itemInfo.combos.find(combo => {
-                if (combo.components.includes(v)) {
-                    return combinerItems.every(c => {
-                        if (!combo.components.includes(c)) return false;
-                        const comboCount = countBy(combo.components, co => co);
-                        if (combinerCount[c] > comboCount[c]) return false;
-                        if (c === v && combinerCount[c] + 1 > comboCount[c]) return false;
-                        return true;
-                    });
-                } return false;
-            });
-            const comboHighlight = combinerItems.length > 0 && comboItem  ? 'combo-border' : '';
 
             function onClick(type) {
-                if (vboxSelecting) clearVboxSelected();
                 if (reclaiming) return sendVboxReclaim(i);
 
-                const combinerContainsIndex = combiner.indexOf(i) > -1;
+                const combinerContainsIndex = stashSelect.indexOf(i) > -1;
-                // 4 things selected
-                if (combiner.length > 2 && !combinerContainsIndex) {
-                    setInfo(vbox.bound[i]);
-                    return combinerChange([i]);
-                }
                 // removing
                 if (combinerContainsIndex) {
                     if (type === 'click') {
-                        return combinerChange(without(combiner, i));
+                        return combinerChange(without(stashSelect, i));
                     }
                     return true;
                 }
 
-                if (!comboHighlight && !combinerContainsIndex) {
+                if (!comboHighlight) {
                     setInfo(vbox.bound[i]);
-                    return combinerChange([i]);
+                    return setVboxSelected({ shopSelect: [], stashSelect: [i] });
                 }
 
-                combiner.push(i);
+                stashSelect.push(i);
-                if (combiner.length === 3) setInfo(comboItem.item);
+                // if (stashSelect.length === 3) setInfo(comboItem.item);
-                return combinerChange(combiner);
+                return combinerChange(stashSelect);
             }
 
-            const highlighted = combiner.indexOf(i) > -1;
+            const highlighted = stashSelect.indexOf(i) > -1;
             const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
             const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
 
@@ -356,37 +332,49 @@ class Vbox extends preact.Component {
 
         function combinerBtn() {
             let text = '';
-            let comboItem = '';
+            let mouseEvent = false;
-            if (combiner.length < 3) {
+            const combineLength = stashSelect.length + shopSelect.length;
-                for (let i = 0; i < 3; i++) {
+            if (vboxHighlight && vboxHighlight.length === 0) {
-                    if (combiner.length > i) {
+                // The selected items can't be combined with additional items therefore valid combo
-                        text += '■ ';
+                const stashItems = stashSelect.map(j => vbox.bound[j]);
-                    } else {
+                const shopItems = shopSelect.map(j => vbox.free[j[0]][j[1]]);
-                        text += '▫ ';
+                const selectedItems = stashItems.concat(shopItems);
-                    }
+                const combinerCount = countBy(selectedItems, co => co);
-                }
+
-            } else {
+                const comboItemObj = itemInfo.combos.find(combo => selectedItems.every(c => {
-                // Since theres 3 items in combiner and you can't have invalid combos we can preview it
-                const combinerItems = combiner.map(j => vbox.bound[j]);
-                const combinerCount = countBy(combinerItems, co => co);
-                const comboItemObj = itemInfo.combos.find(combo => combinerItems.every(c => {
                     if (!combo.components.includes(c)) return false;
                     const comboCount = countBy(combo.components, co => co);
                     if (combinerCount[c] > comboCount[c]) return false;
                     return true;
                 }));
-                comboItem = comboItemObj ? comboItemObj.item : 'refine';
+                let comboItem = comboItemObj ? comboItemObj.item : 'refine';
+                setInfo(comboItem);
                 comboItem = comboItem.replace('Plus', '+');
-                text = `Combine - ${comboItem}`;
+                let bits = 0;
+                shopSelect.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 && shopSelect.length === 1) {
+                const item = shopSelect[0];
+                text = `Buy ${vbox.free[item[0]][item[1]]} ${item[0] + 1}b`;
+                mouseEvent = vboxBuySelected;
+            } else {
+                for (let i = 0; i < 3; i++) {
+                    if (combineLength > i) {
+                        text += '■ ';
+                    } else {
+                        text += '▫ ';
+                    }
+                }
             }
-
             return (
                 <button
                     class='vbox-btn'
-                    disabled={combiner.length !== 3}
+                    disabled={!mouseEvent}
-                    onMouseOver={e => hoverInfo(e, comboItem)}
                     onClick={e => e.stopPropagation()}
-                    onMouseDown={() => sendVboxCombine()}>
+                    onMouseDown={() => mouseEvent()}>
                     {text}
                 </button>
             );
@@ -395,21 +383,18 @@ class Vbox extends preact.Component {
         function inventoryElement() {
             function inventoryClick(e) {
                 e.stopPropagation();
-                setReclaiming(false);
-                if (vboxSelecting) return vboxBuySelected();
                 if (itemUnequip.length) return sendItemUnequip(itemUnequip);
                 return true;
             }
 
             return (
-                <div class={inventoryClass}
+                <div
                     onMouseDown={inventoryClick}
                     onClick={e => e.stopPropagation()}
-                    style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
                     onDragOver={ev => ev.preventDefault()}
                     onDrop={inventoryClick}
                 >
-                    <div class="vbox-hdr">
+                    <div class={`vbox-hdr ${reclaiming ? 'reclaiming' : ''}`}>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
                             onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
@@ -423,7 +408,8 @@ class Vbox extends preact.Component {
                             reclaim
                         </button>
                     </div>
-                    <div class='vbox-items'>
+
+                    <div class={`vbox-items ${reclaiming ? 'reclaiming' : ''}`}>
                         {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
                     </div>
                     {combinerBtn()}
@@ -435,11 +421,9 @@ class Vbox extends preact.Component {
         // EVERYTHING
         //
         function hoverInfo(e, newInfo) {
-            e.stopPropagation();
+            if (shopSelect.find(c => c[0])) return true;
-
+            if (stashSelect.length !== 0) {
-            if (vboxSelected[0]) return true;
+                const base = stashSelect.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
-            if (combiner.length !== 0) {
-                const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                 if (base || base === 0) return true;
             }
             return setInfo(newInfo);

client/src/events.jsx

@@ -157,11 +157,6 @@ function registerEvents(store) {
         store.dispatch(actions.setShop(v));
     }
 
-    function clearCombiner() {
-        store.dispatch(actions.setInfo([]));
-        store.dispatch(actions.setCombiner([]));
-    }
-
     function clearConstructRename() {
         store.dispatch(actions.setConstructRename(null));
     }
@@ -184,14 +179,12 @@ function registerEvents(store) {
     }
 
     function clearInstance() {
-        store.dispatch(actions.setCombiner([]));
         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({ shopSelect: [], stashSelect: [] }));
     }
 
     function setAccountInstances(v) {
@@ -345,7 +338,6 @@ function registerEvents(store) {
     window.addEventListener('hashchange', urlHashChange, false);
 
     return {
-        clearCombiner,
         clearConstructRename,
         clearInfo,
         clearInstance,

client/src/keyboard.jsx

@@ -6,14 +6,12 @@ function setupKeys(store) {
     key.unbind('esc');
 
     key('esc', () => document.activeElement.blur());
-    key('esc', () => store.dispatch(actions.setCombiner([])));
     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({ shopSelect: [], stashSelect: [] })));
     key('esc', () => store.dispatch(actions.setMtxActive(null)));
 }
 

client/src/reducers.jsx

@@ -26,7 +26,6 @@ module.exports = {
     chatShow:           createReducer(null, 'SET_CHAT_SHOW'),
     chatWheel:          createReducer([], 'SET_CHAT_WHEEL'),
 
-    combiner:           createReducer([], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),
     constructRename:    createReducer(null, 'SET_CONSTRUCT_RENAME'),
@@ -39,7 +38,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 +57,7 @@ module.exports = {
     tutorial:           createReducer(1, 'SET_TUTORIAL'),
     tutorialGame:       createReducer(1, 'SET_TUTORIAL_GAME'),
 
-    vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),
+    vboxSelected:       createReducer({ shopSelect: [], stashSelect: [] }, 'SET_VBOX_SELECTED'),
 
     ws:                 createReducer(null, 'SET_WS'),
 };

client/src/socket.jsx

@@ -107,8 +107,8 @@ function createSocket(events) {
         events.clearInstance();
     }
 
-    function sendVboxCombine(instanceId, indices) {
+    function sendVboxCombine(instanceId, invIndicies, vboxIndicies) {
-        send(['VboxCombine', { instance_id: instanceId, indices }]);
+        send(['VboxCombine', { instance_id: instanceId, inv_indices: invIndicies, vbox_indices: vboxIndicies }]);
         events.clearInstance();
     }
 

client/src/tutorial.utils.jsx

@@ -4,7 +4,7 @@ const actions = require('./actions');
 function tutorialConstructDisplay(player, instance, tutorial, i) {
     if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
         if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
-            const classes = `instance-construct`;
+            const classes = 'instance-construct';
             return (<div key={player.constructs[i].id} class={classes}></div>);
         }
     }
@@ -112,9 +112,8 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                 <div class='info-item'>
                     <h2>Tutorial</h2>
                     <p> Welcome to the vbox phase tutorial.</p>
-                    <p> Colours are used to create powerful combinations. </p>
+                    <p> Colours are used to create powerful combinations with base items. </p>
-                    <p> Buy two colours from the vbox by double clicking. <br />
+                    <p> Buy the two colours from the vbox to continue. </p>
-                        You can also click the colour once and then click the inventory. </p>
                 </div>
             );
         }
@@ -151,8 +150,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                     <h2>Tutorial</h2>
                     <p> You can also buy specialisation items for your constructs. <br />
                         Specialisation items increase stats including power, speed and life. </p>
-                    <p> Buy the specialisation item from the vbox by double clicking. <br />
+                    <p> Buy the specialisation item from the vbox to continue. </p>
-                        You can also click the specialisation once and then click the inventory. </p>
                 </div>
             );
         }

server/src/instance.rs

@@ -480,10 +480,10 @@ impl Instance {
         Ok(self)
     }
 
-    pub fn vbox_combine(mut self, account: Uuid, indices: Vec<usize>) -> Result<Instance, Error> {
+    pub fn vbox_combine(mut self, account: Uuid, inv_indices: Vec<usize>, vbox_indices: Vec<Vec<usize>>) -> Result<Instance, Error> {
         self.vbox_action_allowed(account)?;
         self.account_player(account)?
-            .vbox_combine(indices)?;
+            .vbox_combine(inv_indices, vbox_indices)?;
         Ok(self)
     }
 

server/src/player.rs

@@ -229,7 +229,7 @@ impl Player {
             };
 
             // first 2 colours can be whatever
-            self.vbox_combine(vec![0, 1, combo_i]).ok();
+            self.vbox_combine(vec![0, 1, combo_i], vec![]).ok();
             let item_i = self.vbox.bound.len() - 1;
             self.vbox_apply(item_i, target_construct_id).ok();
         }
@@ -257,8 +257,8 @@ impl Player {
         Ok(self)
     }
 
-    pub fn vbox_combine(&mut self, indices: Vec<usize>) -> Result<&mut Player, Error> {
+    pub fn vbox_combine(&mut self, inv_indices: Vec<usize>, vbox_indices: Vec<Vec<usize>>) -> Result<&mut Player, Error> {
-        self.vbox.combine(indices)?;
+        self.vbox.combine(inv_indices, vbox_indices)?;
         Ok(self)
     }
 

server/src/rpc.rs

@@ -117,7 +117,7 @@ pub enum RpcRequest {
     VboxAccept { instance_id: Uuid, group: usize, index: usize },
     VboxAcceptEquip { instance_id: Uuid, group: usize, index: usize, construct_id: Uuid },
     VboxDiscard { instance_id: Uuid },
-    VboxCombine { instance_id: Uuid, indices: Vec<usize> },
+    VboxCombine { instance_id: Uuid, inv_indices: Vec<usize>, vbox_indices: Vec<Vec<usize>> },
     VboxApply { instance_id: Uuid, construct_id: Uuid, index: usize },
     VboxUnequip { instance_id: Uuid, construct_id: Uuid, target: Item },
     VboxUnequipApply { instance_id: Uuid, construct_id: Uuid, target: Item, target_construct_id: Uuid },
@@ -254,8 +254,8 @@ impl Connection {
                             RpcRequest::VboxApply { instance_id, construct_id, index } =>
                                 Ok(RpcMessage::InstanceState(vbox_apply(&mut tx, account, instance_id, construct_id, index)?)),
 
-                            RpcRequest::VboxCombine { instance_id, indices } =>
+                            RpcRequest::VboxCombine { instance_id, inv_indices, vbox_indices } =>
-                                Ok(RpcMessage::InstanceState(vbox_combine(&mut tx, account, instance_id, indices)?)),
+                                Ok(RpcMessage::InstanceState(vbox_combine(&mut tx, account, instance_id, inv_indices, vbox_indices)?)),
 
                             RpcRequest::VboxDiscard { instance_id } =>
                                 Ok(RpcMessage::InstanceState(vbox_discard(&mut tx, account, instance_id)?)),

server/src/vbox.rs

@@ -142,19 +142,20 @@ impl Vbox {
         Ok(self)
     }
 
-    pub fn combine(&mut self, mut indices: Vec<usize>) -> Result<&mut Vbox, Error> {
+    pub fn combine(&mut self, mut inv_indices: Vec<usize>, vbox_indicies: Vec<Vec<usize>>) -> Result<&mut Vbox, Error> {
-        if indices.len() != 3 {
+        if !inv_indices.iter().all(|i| self.bound.get(*i).is_some()) {
-            return Err(err_msg("exactly 3 indices required"));
-        }
-
-        if !indices.iter().all(|i| self.bound.get(*i).is_some()) {
             return Err(err_msg("item missing index"));
         }
+        // try to buy up the vbox indicies and add them to the inventory indicies for combining
+        for vi in vbox_indicies.iter() {
+            inv_indices.push(self.bound.len());
+            self.accept(vi[0], vi[1], Some(Uuid::nil()))?;
+        } 
 
         // have to sort the indices and keep track of the iteration
         // because when removing the elements the array shifts
-        indices.sort_unstable();
+        inv_indices.sort_unstable();
-        let mut input = indices
+        let mut input = inv_indices
             .iter()
             .enumerate()
             .map(|(i, index)| {
@@ -170,7 +171,9 @@ impl Vbox {
 
         self.bound.push(combo.item);
         // self.bound.sort_unstable();
-
+        if self.bound.len() >= 10 {
+            return Err(err_msg("too many items bound"));
+        }
         Ok(self)
     }
 }
@@ -187,9 +190,9 @@ pub fn vbox_accept(tx: &mut Transaction, account: &Account, instance_id: Uuid, g
     return instance_update(tx, instance);
 }
 
-pub fn vbox_combine(tx: &mut Transaction, account: &Account, instance_id: Uuid, indices: Vec<usize>) -> Result<Instance, Error> {
+pub fn vbox_combine(tx: &mut Transaction, account: &Account, instance_id: Uuid, inv_indices: Vec<usize>, vbox_indices: Vec<Vec<usize>>) -> Result<Instance, Error> {
     let instance = instance_get(tx, instance_id)?
-        .vbox_combine(account.id, indices)?;
+        .vbox_combine(account.id, inv_indices, vbox_indices)?;
     return instance_update(tx, instance);
 }
 
@@ -219,7 +222,7 @@ mod tests {
     fn combine_test() {
         let mut vbox = Vbox::new();
         vbox.bound = vec![Item::Attack, Item::Green, Item::Green];
-        vbox.combine(vec![1,2,0]).unwrap();
+        vbox.combine(vec![1,2,0], vec![]).unwrap();
         assert_eq!(vbox.bound[0], Item::Heal);
     }
 
@@ -240,7 +243,7 @@ mod tests {
         let mut vbox = Vbox::new();
         vbox.bound = vec![Item::Strike];
         vbox.reclaim(0).unwrap();
-        assert_eq!(vbox.bits, 20);
+        assert_eq!(vbox.bits, 32);
     }
 
     #[test]