From bb94e43ca17a11794739883ca6e69f1e4fa7bf43 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 27 Oct 2019 19:05:55 +1000
Subject: [PATCH 01/53] tutorial init

---
 client/src/actions.jsx                        |   2 +
 client/src/components/info.component.jsx      |  11 +-
 client/src/components/info.container.jsx      |  11 +
 client/src/components/instance.constructs.jsx |  64 ++++--
 client/src/components/vbox.component.jsx      |  32 +--
 client/src/events.jsx                         |  15 +-
 client/src/reducers.jsx                       |   2 +
 client/src/tutorial.utils.jsx                 | 198 ++++++++++++++++++
 8 files changed, 284 insertions(+), 51 deletions(-)
 create mode 100644 client/src/tutorial.utils.jsx

diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index 8c58ed0d..f9fb6cd5 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -50,6 +50,8 @@ export const setTeam = value => ({ type: 'SET_TEAM', value: Array.from(value) })
 export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });
 export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.from(value) });
 
+export const setTutorial = value => ({ type: 'SET_TUTORIAL', value });
+
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });
 
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 3aebbc14..bf1c8cd6 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -4,19 +4,23 @@ const reactStringReplace = require('react-string-replace');
 
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
+const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
 function InfoComponent(args) {
     const {
+        ws,
         itemInfo,
         player,
+        instance,
         info,
+        tutorial,
+        clearTutorial,
     } = args;
 
-    // args.info = 'Life';
-    // const { info } = args;
-
     function Info() {
+        if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
+
         if (!info) {
             return (
                 <div>
@@ -178,6 +182,7 @@ function InfoComponent(args) {
     function Combos() {
         if (!player) return false;
         if (!info) return false;
+        if (tutorial) return false;
 
         const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
         if (vboxCombos.length > 6) return false;
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index 5f8639b8..b19fff8e 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -13,6 +13,7 @@ const addState = connect(
             instance,
             player,
             account,
+            tutorial,
         } = state;
 
         return {
@@ -23,8 +24,18 @@ const addState = connect(
             instance,
             player,
             account,
+            tutorial,
         };
     },
+
+    function receiveDispatch(dispatch) {
+        function clearTutorial() {
+            dispatch(actions.setTutorial(null));
+        }
+        return { clearTutorial };
+    }
+
+
 );
 
 module.exports = addState(Info);
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index bc7e005f..5d3ec130 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -20,6 +20,7 @@ const addState = connect(
             itemEquip,
             activeConstruct,
             navInstance,
+            tutorial,
         } = state;
 
         function sendVboxApply(constructId, i) {
@@ -40,6 +41,7 @@ const addState = connect(
             navInstance,
             activeConstruct,
             sendUnequip,
+            tutorial,
         };
     },
 
@@ -75,6 +77,7 @@ const addState = connect(
 
 function Construct(props) {
     const {
+        iter,
         itemEquip,
         construct,
         player,
@@ -86,11 +89,22 @@ function Construct(props) {
         setInfo,
         sendUnequip,
         mobileVisible,
+        tutorial,
     } = props;
 
+    const { vbox } = player;
+
+    const duplicateSkill = construct.skills.length !== 0 && construct.skills.every(sk => {
+        if (!itemEquip && itemEquip !== 0) return false;
+        if (!sk) return false;
+        return sk.skill === vbox.bound[itemEquip];
+    });
+    const tutorialDisableEquip = tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0;
+
     function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
+        if (duplicateSkill || tutorialDisableEquip) return true;
         if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
         setItemEquip(null);
         return setActiveConstruct(construct);
@@ -102,7 +116,6 @@ function Construct(props) {
         return setInfo(info);
     }
 
-    const { vbox } = player;
     const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
     const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
 
@@ -129,9 +142,9 @@ function Construct(props) {
             e.preventDefault();
             return true;
         }
-
+        
         // const action = skill ? '' : 'action';
-        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
+        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill && !tutorialDisableEquip && !duplicateSkill;
         const border = () => {
             if (!skill) return '';
             const borderFn = buttons[removeTier(skill.skill)];
@@ -246,30 +259,41 @@ function InstanceConstructs(props) {
         setItemEquip,
         sendUnequip,
         navInstance,
+        tutorial,
     } = props;
 
     if (!player) return false;
     if (instance.phase === 'Lobby') return false;
 
-    const constructs = player.constructs.map((c, i) => Construct({
-        construct: c,
-        activeConstruct,
-        itemEquip,
-        setItemUnequip,
-        setItemEquip,
-        player,
-        sendVboxApply,
-        setInfo,
-        setActiveConstruct,
-        itemInfo,
-        setVboxHighlight,
-        sendUnequip,
-        mobileVisible: navInstance === i + 1,
-    }));
+    const constructs = range(0, 3).map(i => {
+        if (tutorial && tutorial < 6) {
+            if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
+                const mobileVisible = navInstance === i + 1;
+                const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
+                return (<div key={player.constructs[i].id} class={classes}></div>);
+            }
+        }
+        return Construct({
+            iter: i,
+            construct: player.constructs[i],
+            activeConstruct,
+            itemEquip,
+            setItemUnequip,
+            setItemEquip,
+            player,
+            sendVboxApply,
+            setInfo,
+            setActiveConstruct,
+            itemInfo,
+            setVboxHighlight,
+            sendUnequip,
+            tutorial,
+            mobileVisible: navInstance === i + 1,
+        });
+    });
 
-    const classes = `construct-list`;
     return (
-        <div class={classes} onClick={() => setActiveConstruct(null)}>
+        <div class='construct-list' onClick={() => setActiveConstruct(null)}>
             {constructs}
         </div>
     );
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 266ae0b2..ce9da0c3 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -21,6 +21,7 @@ const addState = connect(
             itemUnequip,
             navInstance,
             info,
+            tutorial,
         } = state;
 
         function sendVboxDiscard() {
@@ -57,6 +58,7 @@ const addState = connect(
             itemUnequip,
             sendItemUnequip,
             navInstance,
+            tutorial,
             info,
         };
     },
@@ -113,6 +115,7 @@ function Vbox(args) {
         setVboxSelected,
 
         setItemEquip,
+        tutorial,
         itemUnequip,
         sendItemUnequip,
 
@@ -161,16 +164,7 @@ function Vbox(args) {
 
     function availableBtn(v, group, index) {
         if (!v) return <button disabled class='empty' >&nbsp;</button>;
-        const tutorial = instance.time_control === 'Practice'
-            && instance.rounds.length === 1
-            && group === 0
-            && combiner.length === 0
-            && vboxSelected.length === 0
-            && vbox.bits > 10
-            && vbox.free[0].filter(c => c).length > 4
-            ? 'combo-border' : null;
-
-        const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+                const selected = vboxSelected[0] === group && vboxSelected[1] === index;
 
         // state not yet set in double click handler
         function onDblClick(e) {
@@ -203,7 +197,7 @@ function Vbox(args) {
             } return false;
         }) ? 'combo-border' : '';
 
-        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight} ${tutorial}`;
+        const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
 
         if (shapes[v]) {
             return (
@@ -251,6 +245,7 @@ function Vbox(args) {
                 <button
                     class='vbox-btn'
                     onMouseOver={e => hoverInfo(e, 'refill')}
+                    disabled={tutorial && tutorial < 7}
                     onClick={e => e.stopPropagation()}
                     onMouseDown={() => sendVboxDiscard()}>
                     refill - 2b
@@ -276,16 +271,6 @@ function Vbox(args) {
             return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
         }
 
-        const tutorial = instance.time_control === 'Practice'
-            && instance.rounds.length === 1
-            && i === 0
-            && combiner.length === 0
-            && vboxSelected.length === 0
-            && vbox.bits === 16
-            && vbox.bound.length === 5
-            && vbox.free[0].filter(c => c).length === 4
-            ? 'combo-border' : null;
-
         const combinerItems = combiner.map(j => vbox.bound[j]);
         const combinerCount = countBy(combinerItems, co => co);
 
@@ -325,7 +310,7 @@ function Vbox(args) {
 
         const highlighted = combiner.indexOf(i) > -1;
         const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
-        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight} ${tutorial}`;
+        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
         if (shapes[v]) {
             return (
                 <button
@@ -400,11 +385,12 @@ function Vbox(args) {
             <div class={inventoryClass}
                 onMouseDown={inventoryClick}
                 onClick={e => e.stopPropagation()}
-                style={vboxSelecting || itemUnequip.length ? { cursor: 'pointer' } : null}
+                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                     <button
+                        disabled={tutorial && tutorial < 8}
                         class='vbox-btn reclaim'
                         onMouseOver={e => hoverInfo(e, 'reclaim')}
                         onClick={e => e.stopPropagation()}
diff --git a/client/src/events.jsx b/client/src/events.jsx
index aaf0fdf8..6cc4cd5d 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -8,6 +8,7 @@ const actions = require('./actions');
 const { TIMES } = require('./constants');
 const animations = require('./animations.utils');
 const { infoToast, errorToast } = require('./utils');
+const { tutorialVbox } = require('./tutorial.utils');
 
 function registerEvents(store) {
     function notify(msg) {
@@ -196,7 +197,7 @@ function registerEvents(store) {
     }
 
     function setInstance(v) {
-        const { account, instance, ws } = store.getState();
+        const { account, instance, ws, tutorial } = store.getState();
         if (v) {
             setInvite(null);
             const player = v.players.find(p => p.id === account.id);
@@ -207,10 +208,14 @@ function registerEvents(store) {
                 const first = player.constructs[0];
                 store.dispatch(actions.setActiveConstruct(first));
             }
-        }
-        if (v.phase === 'Finished') {
-            setGame(null);
-            ws.sendAccountInstances();
+
+            if (v.phase === 'Finished') {
+                setGame(null);
+                ws.sendAccountInstances();
+            }
+            if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
+                tutorialVbox(player, store, tutorial);
+            }
         }
 
         return store.dispatch(actions.setInstance(v));
diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx
index 2bfec51f..e50e5bfe 100644
--- a/client/src/reducers.jsx
+++ b/client/src/reducers.jsx
@@ -59,6 +59,8 @@ module.exports = {
     teamPage:           createReducer(0, 'SET_TEAM_PAGE'),
     teamSelect:         createReducer([null, null, null], 'SET_TEAM_SELECT'),
 
+    tutorial:         createReducer(1, 'SET_TUTORIAL'),
+
     vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),
 
     ws:                 createReducer(null, 'SET_WS'),
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
new file mode 100644
index 00000000..a1fcc669
--- /dev/null
+++ b/client/src/tutorial.utils.jsx
@@ -0,0 +1,198 @@
+const preact = require('preact');
+const actions = require('./actions');
+
+function tutorialVbox(player, store, tutorial) {
+    let stage = tutorial;
+    const { vbox } = player;
+    if (stage === 1) {
+        if (vbox.bits < 17)  {
+            stage += 1;
+        } else {
+            vbox.free[0] = vbox.free[0].slice(0, 2);
+            vbox.free[1] = [];
+            vbox.free[2] = [];
+            vbox.bound.fill(null, 0, 3);
+        }
+    }
+
+    if (stage === 2) {
+        if (!(vbox.bound.slice(0, 3).every(i => i === 'Attack') && vbox.bound.length >= 3))  {
+            stage += 1;
+        } else {
+            vbox.free[0] = vbox.free[0].slice(0, 2);
+            vbox.free[1] = [];
+            vbox.free[2] = [];
+            vbox.bound.fill(null, 1, 3);
+        }
+    }
+
+    if (stage === 3) {
+        if (player.constructs[0].skills.length !== 0)  {
+            stage += 1;
+        } else {
+            vbox.free[0] = vbox.free[0].slice(0, 2);
+            vbox.free[1] = [];
+            vbox.free[2] = [];
+            vbox.bound.fill(null, 0, 2);
+        }
+    }
+
+    if (stage === 4) {
+        if (!vbox.free[2][0] || vbox.bits < 12)  {
+            stage += 1;
+        } else {
+            vbox.free[0] = [];
+            vbox.free[1] = [];
+            vbox.free[2] = vbox.free[2].slice(0, 1);
+            vbox.bound.fill(null, 0, 2);
+        }
+    }
+
+    if (stage === 5) {
+        if (player.constructs[0].specs.length !== 0)  {
+            stage += 1;
+        } else {
+            vbox.free[0] = [];
+            vbox.free[1] = [];
+            vbox.free[2] = vbox.free[2].slice(0, 1);
+            vbox.bound.fill(null, 0, 2);
+        }
+    }
+
+    if (stage === 6) {
+        if (player.constructs.every(c => c.skills.length !== 0))  {
+            stage += 1;
+        } else {
+            vbox.free[0] = [];
+            vbox.free[1] = [];
+            vbox.free[2] = [];
+        }
+    }
+
+    if (stage === 7) {
+        if (vbox.bits < 13)  {
+            stage += 1;
+        } else {
+            vbox.free[0] = [];
+            vbox.free[1] = [];
+            vbox.free[2] = [];
+        }
+    }
+    console.log(stage);
+    store.dispatch(actions.setTutorial(stage));
+}
+
+function tutorialStage(tutorial, ws, clearTutorial, instance) {
+    const exit = () => {
+        clearTutorial();
+        ws.sendInstanceState(instance.id);
+    };
+    const tutorialText = () => {
+        if (tutorial === 1) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p>This is the vbox phase tutorial.</p>
+                    <p> The game revolves around combining colours with items to create skills and specs. </p>
+                    <p> Buy two colours from the vbox by double clicking or click the colour once and then the inventory. </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 2) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> In a normal game you start with 3 Attack Skill items. </p>
+                    <p> These can be combined with colours to create powerful combinations. </p>
+                    <p> Select the Attack item along with two colours and press combine. </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 3) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> Skill items can be equipped to your constructs to give them that ability for the combat phase. </p>
+                    <p> Click the newly combined skill item in the inventory and then the construct at the bottom to equip the skill. </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 4) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> You can also buy spec items to increase the stats of your constructs. </p>
+                    <p> Buy the spec item by double clicking or click the spec once and then the inventory. </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 5) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> Equipping spec items will increase the stats of your constructs. </p> 
+                    <p> These can also be combined with colours for more specialisation. </p>
+                    <p> Click the spec item in the inventory followed by an empty inventory spec slot to equip the spec. </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 6) {
+            const constructTwo = instance.players[0].constructs[1].name;
+            const constructThree = instance.players[0].constructs[2].name;
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> You have now created a construct with an upgraded skill and base spec. </p>
+                    <p> You can unequip skills and specs back into the inventory by double clicking or clicking once and then the inventory. </p>
+                    <p> The goal is to create three powerful constructs for combat. </p>
+                    <p> Equip <b>{constructTwo}</b> and <b>{constructThree}</b> with the Attack skill. <br />
+                        Ensure each construct has a single skill to continue </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 7) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> Each round you start with a vbox full of different skills, specs and colours. </p>
+                    <p> Bits are your currency for buying skills, specs and colours from the vbox. <br />
+                        Colours cost 1b, Skills cost 2b and specs cost 3b. <br />
+                        You can refill the vbox by pressing the refill button for 2b. </p>
+                    <p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
+                </div>
+            );
+        }
+
+        if (tutorial === 8) {
+            return (
+                <div>
+                    <h2>Tutorial</h2>
+                    <p> You can now freely create different skill and spec combos. </p>
+                    <p> Reclaim is used only if needed to refund items in your inventory. <br />
+                        If you click the exit tutorial button this section will be replaced with more information on selected items. <br /></p>
+                    <p> When ready, you can go into the combat phase by hitting ready in the bottom right. </p>
+                </div>
+            );
+        }
+        return false;
+    };
+
+    const exitTutorial = <button onClick={e => e.stopPropagation()} onMouseDown={exit}> Exit Tutorial </button>;
+
+    return (
+        <div>
+            {tutorialText()}
+            {exitTutorial}
+        </div>);
+}
+
+module.exports = {
+    tutorialVbox,
+    tutorialStage,
+};

From 29c4bfe891c56c960784a23dcc18051cfa9afccc Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 27 Oct 2019 20:10:47 +1000
Subject: [PATCH 02/53] clean up abandon and reset tutorial if in progress

---
 client/src/components/game.ctrl.btns.top.jsx     | 12 +++++++-----
 client/src/components/instance.ctrl.top.btns.jsx |  7 +++++--
 client/src/components/vbox.component.jsx         |  2 +-
 client/src/events.jsx                            |  1 -
 client/src/tutorial.utils.jsx                    |  1 -
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/src/components/game.ctrl.btns.top.jsx b/client/src/components/game.ctrl.btns.top.jsx
index 4ab0d543..2e54b54b 100644
--- a/client/src/components/game.ctrl.btns.top.jsx
+++ b/client/src/components/game.ctrl.btns.top.jsx
@@ -8,6 +8,7 @@ const addState = connect(
         const {
             ws,
             game,
+            animating,
         } = state;
 
         function sendAbandon() {
@@ -16,30 +17,31 @@ const addState = connect(
 
         return {
             game,
-
             sendAbandon,
+            animating,
         };
     },
+
     function receiveDispatch(dispatch) {
         function leave() {
             dispatch(actions.setNav('play'));
             dispatch(actions.setGame(null));
-            dispatch(actions.setInstance(null));
         }
 
         return { leave };
     }
+
 );
 
 function GameCtrlTopBtns(args) {
     const {
         game,
-
         leave,
         sendAbandon,
+        animating,
     } = args;
 
-    const finished = game && game.phase === 'Finished';
+    const finished = game && game.phase === 'Finish';
     const { abandonState } = this.state;
 
     const abandonStateTrue = e => {
@@ -52,7 +54,7 @@ function GameCtrlTopBtns(args) {
     const abandonText = abandonState ? 'Confirm' : 'Abandon';
     const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
 
-    const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>{abandonText}</button>;
+    const abandonBtn = <button class={abandonClasses} disabled={finished || animating} onClick={abandonAction}>{abandonText}</button>;
     const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
 
     return (
diff --git a/client/src/components/instance.ctrl.top.btns.jsx b/client/src/components/instance.ctrl.top.btns.jsx
index 528e5d0e..3f01aea8 100644
--- a/client/src/components/instance.ctrl.top.btns.jsx
+++ b/client/src/components/instance.ctrl.top.btns.jsx
@@ -8,6 +8,7 @@ const addState = connect(
         const {
             ws,
             instance,
+            tutorial,
         } = state;
 
         function sendAbandon() {
@@ -21,10 +22,11 @@ const addState = connect(
         };
     },
     function receiveDispatch(dispatch) {
-        function leave() {
+        function leave(tutorial) {
             dispatch(actions.setNav('play'));
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
+            if (tutorial && tutorial < 7) dispatch(actions.setTutorial(1));
         }
 
         return { leave };
@@ -37,6 +39,7 @@ function InstanceTopBtns(args) {
 
         leave,
         sendAbandon,
+        tutorial,
     } = args;
 
     const finished = instance && instance.phase === 'Finished';
@@ -53,7 +56,7 @@ function InstanceTopBtns(args) {
     const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
 
     const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>{abandonText}</button>;
-    const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
+    const leaveBtn = <button class='abandon confirming' onClick={() => leave(tutorial)}>Leave</button>;
 
     return (
         <div class="instance-ctrl-btns">
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index ce9da0c3..1206f621 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -164,7 +164,7 @@ function Vbox(args) {
 
     function availableBtn(v, group, index) {
         if (!v) return <button disabled class='empty' >&nbsp;</button>;
-                const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+        const selected = vboxSelected[0] === group && vboxSelected[1] === index;
 
         // state not yet set in double click handler
         function onDblClick(e) {
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 6cc4cd5d..f088d4e7 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -210,7 +210,6 @@ function registerEvents(store) {
             }
 
             if (v.phase === 'Finished') {
-                setGame(null);
                 ws.sendAccountInstances();
             }
             if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index a1fcc669..e425c2ac 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -78,7 +78,6 @@ function tutorialVbox(player, store, tutorial) {
             vbox.free[2] = [];
         }
     }
-    console.log(stage);
     store.dispatch(actions.setTutorial(stage));
 }
 

From 52e67e49d0d5e6ea9882986bde761f35a167bdcd Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 27 Oct 2019 20:18:49 +1000
Subject: [PATCH 03/53] actually reset tutorial (if in prog)

---
 client/src/components/instance.ctrl.top.btns.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/instance.ctrl.top.btns.jsx b/client/src/components/instance.ctrl.top.btns.jsx
index 3f01aea8..efb1a75b 100644
--- a/client/src/components/instance.ctrl.top.btns.jsx
+++ b/client/src/components/instance.ctrl.top.btns.jsx
@@ -17,7 +17,7 @@ const addState = connect(
 
         return {
             instance,
-
+            tutorial,
             sendAbandon,
         };
     },

From 0dfe181d52da41c080696b2a29cce9941d01553d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 27 Oct 2019 20:22:41 +1000
Subject: [PATCH 04/53] remove tutorial stage check for reset

---
 client/src/components/instance.ctrl.top.btns.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/instance.ctrl.top.btns.jsx b/client/src/components/instance.ctrl.top.btns.jsx
index efb1a75b..108485f7 100644
--- a/client/src/components/instance.ctrl.top.btns.jsx
+++ b/client/src/components/instance.ctrl.top.btns.jsx
@@ -26,7 +26,7 @@ const addState = connect(
             dispatch(actions.setNav('play'));
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
-            if (tutorial && tutorial < 7) dispatch(actions.setTutorial(1));
+            if (tutorial) dispatch(actions.setTutorial(1));
         }
 
         return { leave };

From 200482dd79d2f36145dee25247af083f4955783b Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 27 Oct 2019 22:13:23 +1000
Subject: [PATCH 05/53] button css, only update info component when info or
 tutorial changes

---
 client/assets/styles/instance.less       |  11 +
 client/src/components/anims/wiggle.jsx   |   2 +-
 client/src/components/info.component.jsx | 379 ++++++++++++-----------
 client/src/components/play.jsx           |  70 +++--
 client/src/components/vbox.component.jsx |   1 -
 client/src/tutorial.utils.jsx            |  16 +-
 6 files changed, 255 insertions(+), 224 deletions(-)

diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 461f8eb0..0f05fc8b 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -446,6 +446,17 @@
     }
 }
 
+.tutorial {
+    button {
+        width: 100%;
+    }
+
+    button.focus {
+        animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
+    }
+
+}
+
 @keyframes faceoff {
     from {
         color: @black;
diff --git a/client/src/components/anims/wiggle.jsx b/client/src/components/anims/wiggle.jsx
index 5886a47d..8a54b096 100644
--- a/client/src/components/anims/wiggle.jsx
+++ b/client/src/components/anims/wiggle.jsx
@@ -6,7 +6,7 @@ function wiggle(id, idle) {
     const target = document.getElementById(id);
     const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
     const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
-    
+
     const originalX = parseFloat(idle.animations[0].currentValue);
     const originalY = parseFloat(idle.animations[1].currentValue);
     // console.log(x, y);
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index bf1c8cd6..f4aafd3e 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -2,211 +2,222 @@ const preact = require('preact');
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
+const { Component } = require('preact');
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
-function InfoComponent(args) {
-    const {
-        ws,
-        itemInfo,
-        player,
-        instance,
-        info,
-        tutorial,
-        clearTutorial,
-    } = args;
 
-    function Info() {
-        if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
+class InfoComponent extends Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.tutorial) return false; // We don't care about info during tutorial
+        if (newProps.info !== this.props.info) return true;
+        return false;
+    }
 
-        if (!info) {
-            return (
-                <div>
-                    <h2>VBOX phase</h2>
-                    <p>Strengthen and specialise your constructs by equipping items to them.</p>
-                    <p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
-                    <p>
-                        Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
-                        Combine <b>3 of the same item</b> to upgrade it.<br />
-                        Click an item and then click a construct to <b>equip</b> that item to it.<br />
-                    </p>
-                    <p>Click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
-                </div>
-            );
-        }
-        const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
-        if (!fullInfo) return false;
-        const isSkill = fullInfo.skill;
-        const isSpec = fullInfo.spec;
+    render(args) {
+        const {
+            ws,
+            itemInfo,
+            player,
+            instance,
+            info,
+            tutorial,
+            clearTutorial,
+        } = args;
 
-        if (isSkill) {
-            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-            const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-            const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
-            const itemSourceInfo = itemSource.length
-                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
-                : false;
-            const itemRegEx = /(Red|Blue|Green)/;
-            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
-            const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
-            const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
-            return (
-                <div class="info-skill">
-                    <h2>{fullInfo.item} - {fullInfo.cost}b</h2>
-                    <h3> SKILL </h3>
-                    {itemSourceDescription}
-                    <div> {cooldown} </div>
-                    <div>{infoDescription}</div>
-                    {speed}
-                </div>
-            );
-        }
+        function Info() {
+            if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
 
-        if (isSpec) {
-            let red = 0;
-            let blue = 0;
-            let green = 0;
-            player.constructs.forEach(construct => {
-                red += construct.colours.red;
-                blue += construct.colours.blue;
-                green += construct.colours.green;
-            });
-            const teamColours = { red, blue, green };
-
-            const colourReqs = fullInfo.values.bonuses || [];
-
-            const thresholds = colourReqs.map((bonus, i) => {
-                const colours = ['red', 'green', 'blue'];
-                const colourGoals = {
-                    red: [],
-                    green: [],
-                    blue: [],
-                };
-                const overFlow = [];
-
-                colours.forEach(c => {
-                    const colourReq = bonus.req[c];
-                    if (colourReqs === 0) return false;
-
-                    const start = i === 0
-                        ? 0
-                        : colourReqs[i - 1].req[c];
-
-                    const dots = range(start, colourReq).map(j => {
-                        const unmet = teamColours[c] < j + 1;
-
-
-                        const reqClass = unmet
-                            ? 'unmet'
-                            : '';
-
-                        if (j - start > 4) {
-                            overFlow.push(
-                                <figure key={j} alt={c.colour} class={reqClass} >
-                                    {shapes.vboxColour(c)}
-                                </figure>
-                            );
-                        } else {
-                            colourGoals[c].push(
-                                <figure key={j} alt={c.colour} class={reqClass} >
-                                    {shapes.vboxColour(c)}
-                                </figure>
-                            );
-                        }
-
-                        return true;
-                    });
-
-                    return dots;
-                });
-
-                const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
-
-                const reqClass = reqsMet
-                    ? ''
-                    : 'unmet';
-
-                const goals = colours.map((c, j) => {
-                    if (colourGoals[c].length) {
-                        return (
-                            <div key={j}>{colourGoals[c]}</div>
-                        );
-                    }
-                    return false;
-                });
-                const bonusObj = info.includes('Life')
-                    ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
-                    : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
-                const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
+            if (!info) {
                 return (
-                    <div key={i} class="spec-goal">
-                        {goals}
-                        {overFlowObj}
-                        {bonusObj}
+                    <div>
+                        <h2>VBOX phase</h2>
+                        <p>Strengthen and specialise your constructs by equipping items to them.</p>
+                        <p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
+                        <p>
+                            Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
+                            Combine <b>3 of the same item</b> to upgrade it.<br />
+                            Click an item and then click a construct to <b>equip</b> that item to it.<br />
+                        </p>
+                        <p>Click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
                     </div>
                 );
-            });
-            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-            const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-            const itemSource = itemInfo.combos.filter(c => c.item === info);
-            const itemSourceInfo = itemSource.length
-                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
-                : false;
-            const itemRegEx = /(Red|Blue|Green)/;
-            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
-            const infoText = info.replace('Plus', '+');
+            }
+            const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
+            if (!fullInfo) return false;
+            const isSkill = fullInfo.skill;
+            const isSpec = fullInfo.spec;
 
-            return (
-                <div class="info-spec">
-                    <h2>{infoText} - {fullInfo.cost}b</h2>
-                    <h3>SPEC</h3>
-                    {itemSourceDescription}
-                    <div>{infoDescription}</div>
-                    <div class="thresholds">
-                        {thresholds}
+            if (isSkill) {
+                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+                const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
+                const itemSourceInfo = itemSource.length
+                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+                    : false;
+                const itemRegEx = /(Red|Blue|Green)/;
+                const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+                const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
+                const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
+                return (
+                    <div class="info-skill">
+                        <h2>{fullInfo.item} - {fullInfo.cost}b</h2>
+                        <h3> SKILL </h3>
+                        {itemSourceDescription}
+                        <div> {cooldown} </div>
+                        <div>{infoDescription}</div>
+                        {speed}
                     </div>
+                );
+            }
+
+            if (isSpec) {
+                let red = 0;
+                let blue = 0;
+                let green = 0;
+                player.constructs.forEach(construct => {
+                    red += construct.colours.red;
+                    blue += construct.colours.blue;
+                    green += construct.colours.green;
+                });
+                const teamColours = { red, blue, green };
+
+                const colourReqs = fullInfo.values.bonuses || [];
+
+                const thresholds = colourReqs.map((bonus, i) => {
+                    const colours = ['red', 'green', 'blue'];
+                    const colourGoals = {
+                        red: [],
+                        green: [],
+                        blue: [],
+                    };
+                    const overFlow = [];
+
+                    colours.forEach(c => {
+                        const colourReq = bonus.req[c];
+                        if (colourReqs === 0) return false;
+
+                        const start = i === 0
+                            ? 0
+                            : colourReqs[i - 1].req[c];
+
+                        const dots = range(start, colourReq).map(j => {
+                            const unmet = teamColours[c] < j + 1;
+
+
+                            const reqClass = unmet
+                                ? 'unmet'
+                                : '';
+
+                            if (j - start > 4) {
+                                overFlow.push(
+                                    <figure key={j} alt={c.colour} class={reqClass} >
+                                        {shapes.vboxColour(c)}
+                                    </figure>
+                                );
+                            } else {
+                                colourGoals[c].push(
+                                    <figure key={j} alt={c.colour} class={reqClass} >
+                                        {shapes.vboxColour(c)}
+                                    </figure>
+                                );
+                            }
+
+                            return true;
+                        });
+
+                        return dots;
+                    });
+
+                    const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
+
+                    const reqClass = reqsMet
+                        ? ''
+                        : 'unmet';
+
+                    const goals = colours.map((c, j) => {
+                        if (colourGoals[c].length) {
+                            return (
+                                <div key={j}>{colourGoals[c]}</div>
+                            );
+                        }
+                        return false;
+                    });
+                    const bonusObj = info.includes('Life')
+                        ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
+                        : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
+                    const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
+                    return (
+                        <div key={i} class="spec-goal">
+                            {goals}
+                            {overFlowObj}
+                            {bonusObj}
+                        </div>
+                    );
+                });
+                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+                const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                const itemSource = itemInfo.combos.filter(c => c.item === info);
+                const itemSourceInfo = itemSource.length
+                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+                    : false;
+                const itemRegEx = /(Red|Blue|Green)/;
+                const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+                const infoText = info.replace('Plus', '+');
+
+                return (
+                    <div class="info-spec">
+                        <h2>{infoText} - {fullInfo.cost}b</h2>
+                        <h3>SPEC</h3>
+                        {itemSourceDescription}
+                        <div>{infoDescription}</div>
+                        <div class="thresholds">
+                            {thresholds}
+                        </div>
+                    </div>
+                );
+            }
+            const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
+            return (
+                <div class="info-item">
+                    <h2>{fullInfo.item} {cost}</h2>
+                    <div>{fullInfo.description}</div>
                 </div>
             );
         }
-        const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
+
+        function Combos() {
+            if (!player) return false;
+            if (!info) return false;
+            if (tutorial) return false;
+
+            const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
+            if (vboxCombos.length > 6) return false;
+
+            return (
+                <table class="combos">
+                    <tbody>
+                        {vboxCombos.map((c, i) =>
+                            <tr key={i} >
+                                <td class="highlight" >{convertItem(c.item)}</td>
+                                {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            );
+        }
+
         return (
-            <div class="info-item">
-                <h2>{fullInfo.item} {cost}</h2>
-                <div>{fullInfo.description}</div>
+            <div class='info' >
+                <Info />
+                <Combos />
             </div>
         );
     }
-
-    function Combos() {
-        if (!player) return false;
-        if (!info) return false;
-        if (tutorial) return false;
-
-        const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
-        if (vboxCombos.length > 6) return false;
-
-        return (
-            <table class="combos">
-                <tbody>
-                    {vboxCombos.map((c, i) =>
-                        <tr key={i} >
-                            <td class="highlight" >{convertItem(c.item)}</td>
-                            {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
-                        </tr>
-                    )}
-                </tbody>
-            </table>
-        );
-    }
-
-    return (
-        <div class='info' >
-            <Info />
-            <Combos />
-        </div>
-    );
 }
 
 module.exports = InfoComponent;
diff --git a/client/src/components/play.jsx b/client/src/components/play.jsx
index 40f5b657..2059f774 100644
--- a/client/src/components/play.jsx
+++ b/client/src/components/play.jsx
@@ -139,39 +139,41 @@ function Play(args) {
         </button>;
 
     const list = () => {
-        if (!instances.length) return (
-           <div class='list play'>
-                <figure>
-                    <button
-                        class="ready"
-                        onClick={() => sendInstanceQueue()}>
-                        PVP
-                    </button>
-                    <figcaption>Matchmaking</figcaption>
-                </figure>
-                {inviteBtn()}
-                <figure>
-                    <button
-                        class="ready"
-                        onClick={() => sendInstancePractice()}>
-                        Learn
-                    </button>
-                    <figcaption>Practice MNML</figcaption>
-                </figure>
-                <figure>
-                    <button
-                        class='discord-btn'
-                        onClick={() => window.open('https://discord.gg/YJJgurM') }>
-                            &nbsp;
-                    </button>
-                    <figcaption>Join the Community</figcaption>
-                </figure>
-            </div>
-        );
+        if (!instances.length) {
+            return (
+                <div class='list play'>
+                    <figure>
+                        <button
+                            class="ready"
+                            onClick={() => sendInstanceQueue()}>
+                            PVP
+                        </button>
+                        <figcaption>Matchmaking</figcaption>
+                    </figure>
+                    {inviteBtn()}
+                    <figure>
+                        <button
+                            class="ready"
+                            onClick={() => sendInstancePractice()}>
+                            Learn
+                        </button>
+                        <figcaption>Practice MNML</figcaption>
+                    </figure>
+                    <figure>
+                        <button
+                            class='discord-btn'
+                            onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                                &nbsp;
+                        </button>
+                        <figcaption>Join the Community</figcaption>
+                    </figure>
+                </div>
+            );
+        }
 
         return (
             <div class='list play rejoin'>
-               <figure>
+                <figure>
                     <button
                         class="ready"
                         onClick={() => sendInstanceState(instances[0].id)}>
@@ -181,7 +183,7 @@ function Play(args) {
                 </figure>
             </div>
         );
-    }
+    };
 
     return (
         <section class="top">
@@ -201,9 +203,9 @@ function Play(args) {
                     </button>
                 </div>
                 <div>
-                        Join our Discord server to find opponents and talk to the devs. <br />
-                        Message <b>@ntr</b> or <b>@mashy</b> for some credits to get started.<br />
-                        <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
+                    Join our Discord server to find opponents and talk to the devs. <br />
+                    Message <b>@ntr</b> or <b>@mashy</b> for some credits to get started.<br />
+                    <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
                 </div>
                 <br />
                 <div>
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 1206f621..ca0f3ad4 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -99,7 +99,6 @@ function Vbox(args) {
     const {
         combiner,
         navInstance,
-        instance,
         itemInfo,
         player,
         reclaiming,
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index e425c2ac..605c4812 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -162,7 +162,9 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                     <p> Each round you start with a vbox full of different skills, specs and colours. </p>
                     <p> Bits are your currency for buying skills, specs and colours from the vbox. <br />
                         Colours cost 1b, Skills cost 2b and specs cost 3b. <br />
-                        You can refill the vbox by pressing the refill button for 2b. </p>
+                        You can refill the vbox by pressing the refill button for 2b. <br />
+                        After each combat round you get more bits to further upgrade your team.
+                    </p>
                     <p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
                 </div>
             );
@@ -182,12 +184,18 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
         return false;
     };
 
-    const exitTutorial = <button onClick={e => e.stopPropagation()} onMouseDown={exit}> Exit Tutorial </button>;
+    const classes = tutorial === 8 ? 'focus' : '';
+    const exitTutorial = <button
+        class={classes}
+        onClick={e => e.stopPropagation()}
+        onMouseDown={exit}> Exit Tutorial </button>;
 
     return (
-        <div>
+        <div class='tutorial'>
             {tutorialText()}
-            {exitTutorial}
+            <figure>
+                {exitTutorial}
+            </figure>
         </div>);
 }
 

From c534f973a10905795d7f0aa4a0608ead349d6ba2 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sun, 27 Oct 2019 22:59:59 +1000
Subject: [PATCH 06/53] add shouldComponentUpdate to vbox components

---
 client/src/components/info.component.jsx      |   3 +-
 client/src/components/instance.constructs.jsx | 120 ++--
 client/src/components/vbox.component.jsx      | 636 +++++++++---------
 3 files changed, 394 insertions(+), 365 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index f4aafd3e..5d34368b 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -2,14 +2,13 @@ const preact = require('preact');
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
-const { Component } = require('preact');
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
 
-class InfoComponent extends Component {
+class InfoComponent extends preact.Component {
     shouldComponentUpdate(newProps) {
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.tutorial) return false; // We don't care about info during tutorial
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 5d3ec130..fb246a57 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -18,7 +18,6 @@ const addState = connect(
             account,
             itemInfo,
             itemEquip,
-            activeConstruct,
             navInstance,
             tutorial,
         } = state;
@@ -39,7 +38,6 @@ const addState = connect(
             itemInfo,
             itemEquip,
             navInstance,
-            activeConstruct,
             sendUnequip,
             tutorial,
         };
@@ -77,19 +75,21 @@ const addState = connect(
 
 function Construct(props) {
     const {
+        // Changing state variables
+        construct,
         iter,
         itemEquip,
-        construct,
+        itemInfo,
+        mobileVisible,
         player,
+        tutorial,
+        // Function Calls
         sendVboxApply,
+        sendUnequip,
         setActiveConstruct,
         setItemUnequip,
         setItemEquip,
-        itemInfo,
         setInfo,
-        sendUnequip,
-        mobileVisible,
-        tutorial,
     } = props;
 
     const { vbox } = player;
@@ -242,61 +242,73 @@ function Construct(props) {
     );
 }
 
-function InstanceConstructs(props) {
-    const {
-        activeConstruct,
-        itemEquip,
-        player,
-        instance,
-        // clearInfo,
-        setInfo,
-        setActiveConstruct,
+class InstanceConstructs extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.itemEquip !== this.props.itemEquip) return true;
+        if (newProps.instance.phase !== this.props.instance.phase) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.navInstance !== this.props.navInstance) return true;
+        // JSON or Array objects
+        if (JSON.stringify(newProps.player) !== JSON.stringify(this.props.player)) return true;
+        return false;
+    }
 
-        sendVboxApply,
-        itemInfo,
-        setVboxHighlight,
-        setItemUnequip,
-        setItemEquip,
-        sendUnequip,
-        navInstance,
-        tutorial,
-    } = props;
-
-    if (!player) return false;
-    if (instance.phase === 'Lobby') return false;
-
-    const constructs = range(0, 3).map(i => {
-        if (tutorial && tutorial < 6) {
-            if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
-                const mobileVisible = navInstance === i + 1;
-                const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
-                return (<div key={player.constructs[i].id} class={classes}></div>);
-            }
-        }
-        return Construct({
-            iter: i,
-            construct: player.constructs[i],
-            activeConstruct,
+    render(props) {
+        const {
+            // Changing state variables
             itemEquip,
-            setItemUnequip,
-            setItemEquip,
+            instance, // we only change phase
+            navInstance,
             player,
-            sendVboxApply,
+            tutorial,
+            // Static data
+            itemInfo,
+            // Function calls
             setInfo,
             setActiveConstruct,
-            itemInfo,
+            sendVboxApply,
             setVboxHighlight,
+            setItemUnequip,
+            setItemEquip,
             sendUnequip,
-            tutorial,
-            mobileVisible: navInstance === i + 1,
-        });
-    });
+        } = props;
+        console.log('grep constructs');
 
-    return (
-        <div class='construct-list' onClick={() => setActiveConstruct(null)}>
-            {constructs}
-        </div>
-    );
+        if (!player) return false;
+        if (instance.phase === 'Lobby') return false;
+
+        const constructs = range(0, 3).map(i => {
+            if (tutorial && tutorial < 6) {
+                if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
+                    const mobileVisible = navInstance === i + 1;
+                    const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
+                    return (<div key={player.constructs[i].id} class={classes}></div>);
+                }
+            }
+            return Construct({
+                iter: i,
+                construct: player.constructs[i],
+                itemEquip,
+                setItemUnequip,
+                setItemEquip,
+                player,
+                sendVboxApply,
+                setInfo,
+                setActiveConstruct,
+                itemInfo,
+                setVboxHighlight,
+                sendUnequip,
+                tutorial,
+                mobileVisible: navInstance === i + 1,
+            });
+        });
+
+        return (
+            <div class='construct-list' onClick={() => setActiveConstruct(null)}>
+                {constructs}
+            </div>
+        );
+    }
 }
 
 module.exports = addState(InstanceConstructs);
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index ca0f3ad4..f13f3c8f 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -1,8 +1,9 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 const range = require('lodash/range');
 const countBy = require('lodash/countBy');
 const without = require('lodash/without');
-const { connect } = require('preact-redux');
+
 const { removeTier } = require('../utils');
 const shapes = require('./shapes');
 const actions = require('../actions');
@@ -95,333 +96,350 @@ const addState = connect(
 
 );
 
-function Vbox(args) {
-    const {
-        combiner,
-        navInstance,
-        itemInfo,
-        player,
-        reclaiming,
-        sendVboxAccept,
-        sendVboxCombine,
-        sendVboxDiscard,
-        sendVboxReclaim,
-
-        setCombiner,
-        setInfo,
-
-        vboxSelected,
-        setVboxSelected,
-
-        setItemEquip,
-        tutorial,
-        itemUnequip,
-        sendItemUnequip,
-
-        setReclaiming,
-        info,
-    } = args;
-
-    if (!player) return false;
-    const { vbox } = player;
-    const vboxSelecting = vboxSelected.length;
-
-    function combinerChange(newCombiner) {
-        setCombiner(newCombiner);
-
-        if (newCombiner.length === 1) {
-            setItemEquip(newCombiner[0]);
-        } else {
-            setItemEquip(null);
-        }
-
-        return true;
+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.navInstance !== this.props.navInstance) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        // Don't bother if info changes during tutorial
+        if (!newProps.tutorial && newProps.info !== this.props.info) return true;
+        // JSON or Array objects
+        if (JSON.stringify(newProps.vboxSelected) !== JSON.stringify(this.props.vboxSelected)) return true;
+        if (JSON.stringify(newProps.player) !== JSON.stringify(this.props.player)) return true;
+        return false;
     }
 
-    //
-    // VBOX
-    //
-    function vboxHover(e, v) {
-        if (v) {
-            if (info !== v) setInfo(v);
-            e.stopPropagation();
-        }
-        return true;
-    }
+    render(args) {
+        const {
+            // Changing state variables
+            combiner,
+            itemUnequip,
+            player,
+            reclaiming,
+            tutorial,
+            navInstance,
+            info,
+            vboxSelected,
 
-    function clearVboxSelected() {
-        setVboxSelected([]);
-    }
+            // Static
+            itemInfo,
+            // Function Calls
+            sendItemUnequip,
+            sendVboxAccept,
+            sendVboxCombine,
+            sendVboxDiscard,
+            sendVboxReclaim,
+            setVboxSelected,
+            setItemEquip,
+            setInfo,
+            setCombiner,
+            setReclaiming,
+        } = args;
 
-    function vboxBuySelected() {
-        if (!vboxSelecting) return false;
-        document.activeElement.blur();
-        clearVboxSelected();
-        sendVboxAccept(vboxSelected[0], vboxSelected[1]);
-        return true;
-    }
+        if (!player) return false;
+        const { vbox } = player;
+        const vboxSelecting = vboxSelected.length;
 
-    function availableBtn(v, group, index) {
-        if (!v) return <button disabled class='empty' >&nbsp;</button>;
-        const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+        function combinerChange(newCombiner) {
+            setCombiner(newCombiner);
 
-        // state not yet set in double click handler
-        function onDblClick(e) {
-            clearVboxSelected();
-            sendVboxAccept(group, index);
-            e.stopPropagation();
-        }
-
-        function onClick(e) {
-            e.stopPropagation();
-            setItemEquip(null);
-            setCombiner([]);
-
-            if (selected) return clearVboxSelected();
-            return setVboxSelected([group, index]);
-        }
-
-        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}`;
-
-        if (shapes[v]) {
-            return (
-                <button
-                    class={classes}
-                    onMouseOver={e => vboxHover(e, v)}
-                    onMouseDown={onClick}
-                    onClick={e => e.stopPropagation()}
-                    onDblClick={onDblClick} >
-                    {shapes[v]()}
-                </button>
-            );
-        }
-
-        return (
-            <button
-                class={classes}
-                onMouseDown={onClick}
-                onClick={e => e.stopPropagation()}
-                onDblClick={onDblClick}
-                onMouseOver={e => vboxHover(e, v)}>
-                {v}
-            </button>
-        );
-    }
-
-
-    function vboxElement() {
-        return (
-            <div class='vbox-vbox'
-                onMouseDown={() => setReclaiming(false)}
-                onClick={e => e.stopPropagation()}
-                onMouseOver={e => hoverInfo(e, 'vbox')}>
-                <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
-                    <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
-                </div>
-                <div class="vbox-colours">
-                    {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
-                </div>
-                <div class="vbox-items">
-                    {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
-                    {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
-                </div>
-                <button
-                    class='vbox-btn'
-                    onMouseOver={e => hoverInfo(e, 'refill')}
-                    disabled={tutorial && tutorial < 7}
-                    onClick={e => e.stopPropagation()}
-                    onMouseDown={() => sendVboxDiscard()}>
-                    refill - 2b
-                </button>
-            </div>
-        );
-    }
-
-    //
-    //  INVENTORY
-    //
-    function reclaimClick(e) {
-        e.stopPropagation();
-        return setReclaiming(!reclaiming);
-    }
-
-    const inventoryClass = `vbox-section ${reclaiming ? 'reclaiming' : ''}`;
-
-    function inventoryBtn(v, i) {
-        const inventoryHighlight = vboxSelecting || itemUnequip.length;
-
-        if (!v && v !== 0) {
-            return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
-        }
-
-        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' : '';
-
-        function onClick(e) {
-            if (vboxSelecting) clearVboxSelected();
-            if (reclaiming) return sendVboxReclaim(i);
-
-            // 4 things selected
-            if (combiner.length > 2) return combinerChange([i]);
-
-            // removing
-            const combinerIndex = combiner.indexOf(i);
-            if (combinerIndex > -1) {
-                return combinerChange(without(combiner, i));
+            if (newCombiner.length === 1) {
+                setItemEquip(newCombiner[0]);
+            } else {
+                setItemEquip(null);
             }
 
-            combiner.push(i);
-
-            if (!comboHighlight) {
-                return combinerChange([i]);
-            }
-
-            return combinerChange(combiner);
-        }
-
-        const highlighted = combiner.indexOf(i) > -1;
-        const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
-        const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
-        if (shapes[v]) {
-            return (
-                <button
-                    class={classes}
-                    onMouseOver={e => vboxHover(e, v)}
-                    onClick={e => e.stopPropagation()}
-                    onMouseDown={onClick}>
-                    {shapes[v]()}
-                </button>
-            );
-        }
-
-        return (
-            <button
-                class={classes}
-                onMouseDown={onClick}
-                onClick={e => e.stopPropagation()}
-                onMouseOver={e => vboxHover(e, v)}>
-                {v}
-            </button>
-        );
-    }
-
-    function combinerBtn() {
-        let text = '';
-        let comboItem = '';
-        if (combiner.length < 3) {
-            for (let i = 0; i < 3; i++) {
-                if (combiner.length > i) {
-                    text += '■ ';
-                } else {
-                    text += '▫ ';
-                }
-            }
-        } else {
-            // 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';
-            comboItem = comboItem.replace('Plus', '+');
-            text = `Combine - ${comboItem}`;
-        }
-
-        return (
-            <button
-                class='vbox-btn'
-                disabled={combiner.length !== 3}
-                onMouseOver={e => hoverInfo(e, comboItem)}
-                onClick={e => e.stopPropagation()}
-                onMouseDown={() => sendVboxCombine()}>
-                {text}
-            </button>
-        );
-    }
-
-    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}
-                onMouseDown={inventoryClick}
-                onClick={e => e.stopPropagation()}
-                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
-                onMouseOver={e => hoverInfo(e, 'inventory')}>
-                <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
+        //
+        // VBOX
+        //
+        function vboxHover(e, v) {
+            if (v) {
+                if (info !== v) setInfo(v);
+                e.stopPropagation();
+            }
+            return true;
+        }
+
+        function clearVboxSelected() {
+            setVboxSelected([]);
+        }
+
+        function vboxBuySelected() {
+            if (!vboxSelecting) return false;
+            document.activeElement.blur();
+            clearVboxSelected();
+            sendVboxAccept(vboxSelected[0], vboxSelected[1]);
+            return true;
+        }
+
+        function availableBtn(v, group, index) {
+            if (!v) return <button disabled class='empty' >&nbsp;</button>;
+            const selected = vboxSelected[0] === group && vboxSelected[1] === index;
+
+            // state not yet set in double click handler
+            function onDblClick(e) {
+                clearVboxSelected();
+                sendVboxAccept(group, index);
+                e.stopPropagation();
+            }
+
+            function onClick(e) {
+                e.stopPropagation();
+                setItemEquip(null);
+                setCombiner([]);
+
+                if (selected) return clearVboxSelected();
+                return setVboxSelected([group, index]);
+            }
+
+            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}`;
+
+            if (shapes[v]) {
+                return (
                     <button
-                        disabled={tutorial && tutorial < 8}
-                        class='vbox-btn reclaim'
-                        onMouseOver={e => hoverInfo(e, 'reclaim')}
+                        class={classes}
+                        onMouseOver={e => vboxHover(e, v)}
+                        onMouseDown={onClick}
                         onClick={e => e.stopPropagation()}
-                        onMouseDown={reclaimClick}>
-                        reclaim
+                        onDblClick={onDblClick} >
+                        {shapes[v]()}
+                    </button>
+                );
+            }
+
+            return (
+                <button
+                    class={classes}
+                    onMouseDown={onClick}
+                    onClick={e => e.stopPropagation()}
+                    onDblClick={onDblClick}
+                    onMouseOver={e => vboxHover(e, v)}>
+                    {v}
+                </button>
+            );
+        }
+
+
+        function vboxElement() {
+            return (
+                <div class='vbox-vbox'
+                    onMouseDown={() => setReclaiming(false)}
+                    onClick={e => e.stopPropagation()}
+                    onMouseOver={e => hoverInfo(e, 'vbox')}>
+                    <div class="vbox-hdr">
+                        <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
+                        <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
+                    </div>
+                    <div class="vbox-colours">
+                        {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
+                    </div>
+                    <div class="vbox-items">
+                        {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
+                        {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
+                    </div>
+                    <button
+                        class='vbox-btn'
+                        onMouseOver={e => hoverInfo(e, 'refill')}
+                        disabled={tutorial && tutorial < 7}
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={() => sendVboxDiscard()}>
+                        refill - 2b
                     </button>
                 </div>
-                <div class='vbox-items'>
-                    {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+            );
+        }
+
+        //
+        //  INVENTORY
+        //
+        function reclaimClick(e) {
+            e.stopPropagation();
+            return setReclaiming(!reclaiming);
+        }
+
+        const inventoryClass = `vbox-section ${reclaiming ? 'reclaiming' : ''}`;
+
+        function inventoryBtn(v, i) {
+            const inventoryHighlight = vboxSelecting || itemUnequip.length;
+
+            if (!v && v !== 0) {
+                return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
+            }
+
+            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' : '';
+
+            function onClick(e) {
+                if (vboxSelecting) clearVboxSelected();
+                if (reclaiming) return sendVboxReclaim(i);
+
+                // 4 things selected
+                if (combiner.length > 2) return combinerChange([i]);
+
+                // removing
+                const combinerIndex = combiner.indexOf(i);
+                if (combinerIndex > -1) {
+                    return combinerChange(without(combiner, i));
+                }
+
+                combiner.push(i);
+
+                if (!comboHighlight) {
+                    return combinerChange([i]);
+                }
+
+                return combinerChange(combiner);
+            }
+
+            const highlighted = combiner.indexOf(i) > -1;
+            const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
+            const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
+            if (shapes[v]) {
+                return (
+                    <button
+                        class={classes}
+                        onMouseOver={e => vboxHover(e, v)}
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={onClick}>
+                        {shapes[v]()}
+                    </button>
+                );
+            }
+
+            return (
+                <button
+                    class={classes}
+                    onMouseDown={onClick}
+                    onClick={e => e.stopPropagation()}
+                    onMouseOver={e => vboxHover(e, v)}>
+                    {v}
+                </button>
+            );
+        }
+
+        function combinerBtn() {
+            let text = '';
+            let comboItem = '';
+            if (combiner.length < 3) {
+                for (let i = 0; i < 3; i++) {
+                    if (combiner.length > i) {
+                        text += '■ ';
+                    } else {
+                        text += '▫ ';
+                    }
+                }
+            } else {
+                // 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';
+                comboItem = comboItem.replace('Plus', '+');
+                text = `Combine - ${comboItem}`;
+            }
+
+            return (
+                <button
+                    class='vbox-btn'
+                    disabled={combiner.length !== 3}
+                    onMouseOver={e => hoverInfo(e, comboItem)}
+                    onClick={e => e.stopPropagation()}
+                    onMouseDown={() => sendVboxCombine()}>
+                    {text}
+                </button>
+            );
+        }
+
+        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}
+                    onMouseDown={inventoryClick}
+                    onClick={e => e.stopPropagation()}
+                    style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
+                    onMouseOver={e => hoverInfo(e, 'inventory')}>
+                    <div class="vbox-hdr">
+                        <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
+                        <button
+                            disabled={tutorial && tutorial < 8}
+                            class='vbox-btn reclaim'
+                            onMouseOver={e => hoverInfo(e, 'reclaim')}
+                            onClick={e => e.stopPropagation()}
+                            onMouseDown={reclaimClick}>
+                            reclaim
+                        </button>
+                    </div>
+                    <div class='vbox-items'>
+                        {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+                    </div>
+                    {combinerBtn()}
                 </div>
-                {combinerBtn()}
+            );
+        }
+
+        //
+        // EVERYTHING
+        //
+        function hoverInfo(e, newInfo) {
+            e.stopPropagation();
+            if (info === newInfo) return true;
+            return setInfo(newInfo);
+        }
+
+        const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
+        return (
+            <div class={classes}>
+                {vboxElement()}
+                <div class="vbox-arrow">⮞</div>
+                {inventoryElement()}
             </div>
         );
     }
-
-    //
-    // EVERYTHING
-    //
-    function hoverInfo(e, newInfo) {
-        e.stopPropagation();
-        if (info === newInfo) return true;
-        return setInfo(newInfo);
-    }
-
-    const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
-    return (
-        <div class={classes}>
-            {vboxElement()}
-            <div class="vbox-arrow">⮞</div>
-            {inventoryElement()}
-        </div>
-    );
 }
 
 module.exports = addState(Vbox);

From 69a361a23b49abacb95f5f4556021dbe431c86e1 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 00:33:52 +1000
Subject: [PATCH 07/53] remove null info, don't set info to null. click into
 combos for preview. preview base when combining

---
 client/src/components/info.component.jsx      | 50 ++++++++-----------
 client/src/components/info.container.jsx      |  8 ++-
 client/src/components/instance.component.jsx  |  3 +-
 client/src/components/instance.constructs.jsx |  7 +--
 client/src/components/vbox.component.jsx      | 28 ++++++++---
 5 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index f4aafd3e..664a1c80 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -2,14 +2,13 @@ const preact = require('preact');
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
-const { Component } = require('preact');
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
 
-class InfoComponent extends Component {
+class InfoComponent extends preact.Component {
     shouldComponentUpdate(newProps) {
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.tutorial) return false; // We don't care about info during tutorial
@@ -19,33 +18,24 @@ class InfoComponent extends Component {
 
     render(args) {
         const {
-            ws,
-            itemInfo,
-            player,
-            instance,
+            // Variables that will change
             info,
             tutorial,
-            clearTutorial,
+
+            // Static
+            player, // Only used for colour calcs which will be update if info changes
+            ws,
+            itemInfo,
+            instance, // Only used for instance id
+            // functions
+            setInfo,
+            setTutorialNull,
         } = args;
 
         function Info() {
-            if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
+            if (tutorial) return tutorialStage(tutorial, ws, setTutorialNull, instance);
+            if (!info) return false;
 
-            if (!info) {
-                return (
-                    <div>
-                        <h2>VBOX phase</h2>
-                        <p>Strengthen and specialise your constructs by equipping items to them.</p>
-                        <p>Double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
-                        <p>
-                            Combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
-                            Combine <b>3 of the same item</b> to upgrade it.<br />
-                            Click an item and then click a construct to <b>equip</b> that item to it.<br />
-                        </p>
-                        <p>Click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
-                    </div>
-                );
-            }
             const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
             if (!fullInfo) return false;
             const isSkill = fullInfo.skill;
@@ -64,7 +54,7 @@ class InfoComponent extends Component {
                 const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
                 return (
                     <div class="info-skill">
-                        <h2>{fullInfo.item} - {fullInfo.cost}b</h2>
+                        <h2>{fullInfo.item} {fullInfo.cost}b</h2>
                         <h3> SKILL </h3>
                         {itemSourceDescription}
                         <div> {cooldown} </div>
@@ -161,16 +151,20 @@ class InfoComponent extends Component {
                 const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
                 const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
                 const itemSource = itemInfo.combos.filter(c => c.item === info);
-                const itemSourceInfo = itemSource.length
+                let itemSourceInfo = itemSource.length
                     ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
                     : false;
                 const itemRegEx = /(Red|Blue|Green)/;
+                if (itemSourceInfo) {
+                    while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
+                }
                 const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
-                const infoText = info.replace('Plus', '+');
+                let infoText = info;
+                while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
 
                 return (
                     <div class="info-spec">
-                        <h2>{infoText} - {fullInfo.cost}b</h2>
+                        <h2>{infoText} {fullInfo.cost}b</h2>
                         <h3>SPEC</h3>
                         {itemSourceDescription}
                         <div>{infoDescription}</div>
@@ -202,7 +196,7 @@ class InfoComponent extends Component {
                     <tbody>
                         {vboxCombos.map((c, i) =>
                             <tr key={i} >
-                                <td class="highlight" >{convertItem(c.item)}</td>
+                                <td class="highlight" onClick={() => setInfo(c.item)} >{convertItem(c.item)}</td>
                                 {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
                             </tr>
                         )}
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index b19fff8e..aec4b282 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -29,10 +29,14 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function clearTutorial() {
+        function setTutorialNull() {
             dispatch(actions.setTutorial(null));
         }
-        return { clearTutorial };
+
+        function setInfo(info) {
+            dispatch(actions.setInfo(info));
+        }
+        return { setTutorialNull, setInfo };
     }
 
 
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index abd2e9da..76291079 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -56,7 +56,6 @@ class Instance extends Component {
     render(args) {
         const {
             instance,
-            setInfo,
             clearItems,
         } = args;
 
@@ -76,7 +75,7 @@ class Instance extends Component {
         }
 
         return (
-            <main id="instance" class='instance' onClick={instanceClick} onMouseOver={() => setInfo(null)}>
+            <main id="instance" class='instance' onClick={instanceClick}>
                 <Vbox />
                 <InfoContainer />
                 <InstanceConstructsContainer />
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 5d3ec130..c8afc6e3 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -58,10 +58,6 @@ const addState = connect(
             dispatch(actions.setActiveConstruct(value));
         }
 
-        function clearInfo() {
-            return dispatch(actions.setInfo(null));
-        }
-
         function setItemEquip(v) {
             return dispatch(actions.setItemEquip(v));
         }
@@ -70,7 +66,7 @@ const addState = connect(
             return dispatch(actions.setItemUnequip(v));
         }
 
-        return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
+        return { quit, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
     }
 
 );
@@ -248,7 +244,6 @@ function InstanceConstructs(props) {
         itemEquip,
         player,
         instance,
-        // clearInfo,
         setInfo,
         setActiveConstruct,
 
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index ca0f3ad4..82885c81 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -143,8 +143,12 @@ function Vbox(args) {
     //
     function vboxHover(e, v) {
         if (v) {
-            if (info !== v) setInfo(v);
             e.stopPropagation();
+            if (combiner.length !== 0) {
+                const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
+                if (base) return setInfo(vbox.bound[base]);
+            }
+            if (info !== v) setInfo(v);
         }
         return true;
     }
@@ -228,10 +232,12 @@ function Vbox(args) {
         return (
             <div class='vbox-vbox'
                 onMouseDown={() => setReclaiming(false)}
-                onClick={e => e.stopPropagation()}
-                onMouseOver={e => hoverInfo(e, 'vbox')}>
+                onClick={e => e.stopPropagation()}>
                 <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
+                    <h3
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
+                    </h3>
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <div class="vbox-colours">
@@ -290,7 +296,10 @@ function Vbox(args) {
             if (reclaiming) return sendVboxReclaim(i);
 
             // 4 things selected
-            if (combiner.length > 2) return combinerChange([i]);
+            if (combiner.length > 2) {
+                setInfo(vbox.bound[i]);
+                return combinerChange([i]);
+            }
 
             // removing
             const combinerIndex = combiner.indexOf(i);
@@ -301,6 +310,7 @@ function Vbox(args) {
             combiner.push(i);
 
             if (!comboHighlight) {
+                setInfo(vbox.bound[i]);
                 return combinerChange([i]);
             }
 
@@ -384,10 +394,12 @@ function Vbox(args) {
             <div class={inventoryClass}
                 onMouseDown={inventoryClick}
                 onClick={e => e.stopPropagation()}
-                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
-                onMouseOver={e => hoverInfo(e, 'inventory')}>
+                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
                 <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
+                    <h3
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
+                    </h3>
                     <button
                         disabled={tutorial && tutorial < 8}
                         class='vbox-btn reclaim'

From 4cf378f644016d8951731ebba3909bd535a09208 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 08:44:37 +1000
Subject: [PATCH 08/53] game phase targeting tutorial, clear arrows on game
 finish

---
 client/src/actions.jsx                     |  1 +
 client/src/components/game.construct.jsx   | 20 +++++++++++++-------
 client/src/components/targeting.arrows.jsx | 16 +++++++++++++---
 client/src/reducers.jsx                    |  3 ++-
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index f9fb6cd5..4b9d11ac 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -51,6 +51,7 @@ export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });
 export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.from(value) });
 
 export const setTutorial = value => ({ type: 'SET_TUTORIAL', value });
+export const setTutorialGame = value => ({ type: 'SET_TUTORIAL_GAME', value });
 
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index 186a55ef..79f2a8bc 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -24,6 +24,7 @@ const addState = connect(
             animText,
             gameSkillInfo,
             itemInfo,
+            tutorialGame,
         } = state;
 
         function selectSkillTarget(targetConstructId) {
@@ -33,10 +34,6 @@ const addState = connect(
             return false;
         }
 
-        // intercept self casting skills
-        if (activeSkill && activeSkill.skill.self_targeting) {
-            ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
-        }
         return {
             game,
             account,
@@ -47,6 +44,7 @@ const addState = connect(
             selectSkillTarget,
             gameSkillInfo,
             itemInfo,
+            tutorialGame,
         };
     },
 
@@ -55,7 +53,11 @@ const addState = connect(
             dispatch(actions.setGameEffectInfo(info));
         }
 
-        return { setGameEffectInfo };
+        function setTutorialGameClear(activeSkill, tutorialGame) {
+            if (activeSkill && tutorialGame) dispatch(actions.setTutorialGame(null));
+        }
+
+        return { setGameEffectInfo, setTutorialGameClear };
     }
 
 );
@@ -93,7 +95,8 @@ class GameConstruct extends Component {
             selectSkillTarget,
             animFocus,
             animText,
-
+            tutorialGame,
+            setTutorialGameClear,
             setGameEffectInfo,
             gameSkillInfo,
             itemInfo,
@@ -146,7 +149,10 @@ class GameConstruct extends Component {
 
         return (
             <div
-                onClick={() => selectSkillTarget(construct.id)}
+                onClick={() => {
+                    selectSkillTarget(construct.id);
+                    setTutorialGameClear(activeSkill, tutorialGame);
+                }}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 class={`game-construct ${ko} ${classes}`} >
                 <div class="left">
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index c9e0f57c..ebbb8eed 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -9,8 +9,8 @@ const shapes = require('./shapes');
 const { effectInfo, removeTier } = require('../utils');
 
 const addState = connect(
-    ({ game, account, animSkill, animating, itemInfo, gameEffectInfo }) =>
-        ({ game, account, animSkill, animating, itemInfo, gameEffectInfo })
+    ({ game, account, animSkill, animating, itemInfo, gameEffectInfo, tutorialGame }) =>
+        ({ game, account, animSkill, animating, itemInfo, gameEffectInfo, tutorialGame })
 );
 
 class TargetSvg extends Component {
@@ -28,9 +28,19 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animating, animSkill, itemInfo, gameEffectInfo } = props;
+        const { game, account, animating, animSkill, itemInfo, gameEffectInfo, tutorialGame } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
+        if (game.phase === 'Finish') return false; // Clear everything if its over (in case of abandon)
+
+        // First time joining game phase
+        if (tutorialGame) {
+            return (
+                <div class="resolving-skill">
+                    <p> Select your skills, click on targets and then hit <b>ready</b>.</p>
+                </div>
+            );
+        }
 
         // Whenever someones looking at effects throw it up here
         if (gameEffectInfo) {
diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx
index e50e5bfe..d2d06f43 100644
--- a/client/src/reducers.jsx
+++ b/client/src/reducers.jsx
@@ -59,7 +59,8 @@ module.exports = {
     teamPage:           createReducer(0, 'SET_TEAM_PAGE'),
     teamSelect:         createReducer([null, null, null], 'SET_TEAM_SELECT'),
 
-    tutorial:         createReducer(1, 'SET_TUTORIAL'),
+    tutorial:           createReducer(1, 'SET_TUTORIAL'),
+    tutorialGame:       createReducer(1, 'SET_TUTORIAL_GAME'),
 
     vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),
 

From f188362006800998c8699fa0eb93db43e35b48fc Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 09:07:06 +1000
Subject: [PATCH 09/53] game tutorial text

---
 client/src/components/targeting.arrows.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index ebbb8eed..4a7398e9 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -37,7 +37,7 @@ class TargetSvg extends Component {
         if (tutorialGame) {
             return (
                 <div class="resolving-skill">
-                    <p> Select your skills, click on targets and then hit <b>ready</b>.</p>
+                    <h2> Select your skills, click on targets and then hit <b>ready</b>.</h2>
                 </div>
             );
         }

From 3b55c98dde84daf82127c66146e365a19d77b829 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 09:20:07 +1000
Subject: [PATCH 10/53] stringify not actually needed just compare obj refs

---
 client/src/components/instance.constructs.jsx | 2 +-
 client/src/components/vbox.component.jsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index fb246a57..7c8c8fc5 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -249,7 +249,7 @@ class InstanceConstructs extends preact.Component {
         if (newProps.tutorial !== this.props.tutorial) return true;
         if (newProps.navInstance !== this.props.navInstance) return true;
         // JSON or Array objects
-        if (JSON.stringify(newProps.player) !== JSON.stringify(this.props.player)) return true;
+        if (newProps.player !== this.props.player) return true;
         return false;
     }
 
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index f13f3c8f..c7923c87 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -107,8 +107,8 @@ class Vbox extends preact.Component {
         // Don't bother if info changes during tutorial
         if (!newProps.tutorial && newProps.info !== this.props.info) return true;
         // JSON or Array objects
-        if (JSON.stringify(newProps.vboxSelected) !== JSON.stringify(this.props.vboxSelected)) return true;
-        if (JSON.stringify(newProps.player) !== JSON.stringify(this.props.player)) return true;
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        if (newProps.player !== this.props.player) return true;
         return false;
     }
 

From d97cb9dccc0883e2b4f6f1e1ec32b73090db1101 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 11:17:40 +1000
Subject: [PATCH 11/53] should comp update animations

---
 client/src/components/animations.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 84953719..42b640fa 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -39,7 +39,6 @@ const Stun = require('./anims/stun');
 const Triage = require('./anims/triage');
 const TriageTick = require('./anims/triage.tick');
 
-const actions = require('../actions');
 const { removeTier } = require('../utils');
 
 
@@ -47,10 +46,16 @@ const addState = connect(
     function receiveState(state) {
         const { animTarget } = state;
         return { animTarget };
-    },
+    }
 );
 
 class ConstructAnimation extends Component {
+    shouldComponentUpdate(nextProps) {
+        if (nextProps.animTarget !== this.props.animTarget) return true;
+        if (nextProps.construct !== this.props.construct) return true;
+        return false;
+    }
+
     render(props) {
         const {
             animTarget,
@@ -70,7 +75,7 @@ class ConstructAnimation extends Component {
 
 
         // find target animation
-        const chooseAnim = (animSkill) => {
+        const chooseAnim = () => {
             switch (animSkill) {
             // Attack base
             case 'Attack': return <Attack direction={direction}/>;
@@ -124,7 +129,7 @@ class ConstructAnimation extends Component {
             case 'Reflect': return <Refl player={player} />;
 
             default: return false;
-            };
+            }
         };
 
         const anim = chooseAnim(animSkill);

From 4ddbd4576b812084b97444009554a3894a503a02 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 11:45:17 +1000
Subject: [PATCH 12/53] refactor, all tutorial code checks for practice mode
 and first round

---
 client/src/components/info.component.jsx      |  9 ++++++--
 client/src/components/instance.constructs.jsx | 22 ++++++++-----------
 client/src/tutorial.utils.jsx                 | 20 +++++++++++++++++
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index f4aafd3e..9d54e20f 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -12,7 +12,9 @@ const shapes = require('./shapes');
 class InfoComponent extends Component {
     shouldComponentUpdate(newProps) {
         if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.tutorial) return false; // We don't care about info during tutorial
+        // We don't care about info during tutorial
+        if (newProps.tutorial && this.props.instance.time_control === 'Practice'
+            && this.props.instance.rounds.length === 1) return false;
         if (newProps.info !== this.props.info) return true;
         return false;
     }
@@ -29,7 +31,10 @@ class InfoComponent extends Component {
         } = args;
 
         function Info() {
-            if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
+            if (tutorial) {
+                const tutorialStageInfo = tutorialStage(tutorial, ws, clearTutorial, instance);
+                if (tutorialStageInfo) return tutorialStageInfo;
+            }
 
             if (!info) {
                 return (
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 5d3ec130..1462ea12 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -8,6 +8,7 @@ const { STATS } = require('../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('../actions');
 const { removeTier } = require('../utils');
+const { tutorialConstructDisplay, tutorialShouldDisableEquip } = require('../tutorial.utils.jsx');
 
 const addState = connect(
     function receiveState(state) {
@@ -79,6 +80,7 @@ function Construct(props) {
     const {
         iter,
         itemEquip,
+        instance,
         construct,
         player,
         sendVboxApply,
@@ -99,7 +101,7 @@ function Construct(props) {
         if (!sk) return false;
         return sk.skill === vbox.bound[itemEquip];
     });
-    const tutorialDisableEquip = tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0;
+    const tutorialDisableEquip = tutorialShouldDisableEquip(tutorial, iter, instance, construct);
 
     function onClick(e) {
         e.stopPropagation();
@@ -142,9 +144,9 @@ function Construct(props) {
             e.preventDefault();
             return true;
         }
-        
-        // const action = skill ? '' : 'action';
-        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill && !tutorialDisableEquip && !duplicateSkill;
+
+        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill
+            && !tutorialDisableEquip && !duplicateSkill;
         const border = () => {
             if (!skill) return '';
             const borderFn = buttons[removeTier(skill.skill)];
@@ -179,8 +181,6 @@ function Construct(props) {
             );
         }
 
-        const specInfo = itemInfo.items.find(i => i.item === s);
-
         function specClick(e) {
             e.stopPropagation();
             setItemUnequip([construct.id, s]);
@@ -266,17 +266,13 @@ function InstanceConstructs(props) {
     if (instance.phase === 'Lobby') return false;
 
     const constructs = range(0, 3).map(i => {
-        if (tutorial && tutorial < 6) {
-            if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
-                const mobileVisible = navInstance === i + 1;
-                const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
-                return (<div key={player.constructs[i].id} class={classes}></div>);
-            }
-        }
+        const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
+        if (tutorialConstruct) return (tutorialConstruct);
         return Construct({
             iter: i,
             construct: player.constructs[i],
             activeConstruct,
+            instance,
             itemEquip,
             setItemUnequip,
             setItemEquip,
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index 605c4812..f2f38201 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -1,6 +1,23 @@
 const preact = require('preact');
 const actions = require('./actions');
 
+function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
+    if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
+        if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
+            const mobileVisible = navInstance === i + 1;
+            const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
+            return (<div key={player.constructs[i].id} class={classes}></div>);
+        }
+    }
+    return false;
+}
+
+function tutorialShouldDisableEquip(tutorial, iter, instance, construct) {
+    return tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0
+        && instance.time_control === 'Practice' && instance.rounds.length === 1;
+}
+
+
 function tutorialVbox(player, store, tutorial) {
     let stage = tutorial;
     const { vbox } = player;
@@ -82,6 +99,7 @@ function tutorialVbox(player, store, tutorial) {
 }
 
 function tutorialStage(tutorial, ws, clearTutorial, instance) {
+    if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;
     const exit = () => {
         clearTutorial();
         ws.sendInstanceState(instance.id);
@@ -200,6 +218,8 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
 }
 
 module.exports = {
+    tutorialConstructDisplay,
     tutorialVbox,
     tutorialStage,
+    tutorialShouldDisableEquip
 };

From 6f5cf8bb39105b92344d725f5e2804699408a651 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 12:25:26 +1000
Subject: [PATCH 13/53] misc

---
 client/src/components/instance.constructs.jsx |   5 +-
 client/src/components/vbox.component.jsx      | 126 +++++++++---------
 2 files changed, 67 insertions(+), 64 deletions(-)

diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 84d77f21..f3367a2a 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -77,8 +77,11 @@ function Construct(props) {
         iter,
         itemEquip,
         instance,
+        mobileVisible,
         player,
         tutorial,
+        // Static Info
+        itemInfo,
         // Function Calls
         sendVboxApply,
         sendUnequip,
@@ -272,7 +275,7 @@ class InstanceConstructs extends preact.Component {
 
         const constructs = range(0, 3).map(i => {
             const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
-        	if (tutorialConstruct) return (tutorialConstruct);
+            if (tutorialConstruct) return (tutorialConstruct);
 
             return Construct({
                 iter: i,
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 1d1b9ee3..54427f92 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -160,12 +160,12 @@ class Vbox extends preact.Component {
         //
         function vboxHover(e, v) {
             if (v) {
-	            e.stopPropagation();
-	            if (combiner.length !== 0) {
-	                const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
-	                if (base) return setInfo(vbox.bound[base]);
-	            }
-	            if (info !== v) setInfo(v);
+                e.stopPropagation();
+                if (combiner.length !== 0) {
+                    const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
+                    if (base) return setInfo(vbox.bound[base]);
+                }
+                if (info !== v) setInfo(v);
             }
             return true;
         }
@@ -247,32 +247,32 @@ class Vbox extends preact.Component {
 
         function vboxElement() {
             return (
-				<div class='vbox-vbox'
-	                onMouseDown={() => setReclaiming(false)}
-	                onClick={e => e.stopPropagation()}>
-	                <div class="vbox-hdr">
-	                    <h3
-	                        onTouchStart={e => e.target.scrollIntoView(true)}
-	                        onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
-	                    </h3>
-	                    <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
-	                </div>
-	                <div class="vbox-colours">
-	                    {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
-	                </div>
-	                <div class="vbox-items">
-	                    {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
-	                    {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
-	                </div>
-	                <button
-	                    class='vbox-btn'
-	                    onMouseOver={e => hoverInfo(e, 'refill')}
-	                    disabled={tutorial && tutorial < 7}
-	                    onClick={e => e.stopPropagation()}
-	                    onMouseDown={() => sendVboxDiscard()}>
-	                    refill - 2b
-	                </button>
-	            </div>
+                <div class='vbox-vbox'
+                    onMouseDown={() => setReclaiming(false)}
+                    onClick={e => e.stopPropagation()}>
+                    <div class="vbox-hdr">
+                        <h3
+                            onTouchStart={e => e.target.scrollIntoView(true)}
+                            onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
+                        </h3>
+                        <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
+                    </div>
+                    <div class="vbox-colours">
+                        {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
+                    </div>
+                    <div class="vbox-items">
+                        {range(0, 3).map(i => availableBtn(vbox.free[1][i], 1, i))}
+                        {range(0, 3).map(i => availableBtn(vbox.free[2][i], 2, i))}
+                    </div>
+                    <button
+                        class='vbox-btn'
+                        onMouseOver={e => hoverInfo(e, 'refill')}
+                        disabled={tutorial && tutorial < 7}
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={() => sendVboxDiscard()}>
+                        refill - 2b
+                    </button>
+                </div>
             );
         }
 
@@ -313,10 +313,10 @@ class Vbox extends preact.Component {
                 if (reclaiming) return sendVboxReclaim(i);
 
                 // 4 things selected
-	            if (combiner.length > 2) {
-	                setInfo(vbox.bound[i]);
-	                return combinerChange([i]);
-	            }
+                if (combiner.length > 2) {
+                    setInfo(vbox.bound[i]);
+                    return combinerChange([i]);
+                }
                 // removing
                 const combinerIndex = combiner.indexOf(i);
                 if (combinerIndex > -1) {
@@ -325,10 +325,10 @@ class Vbox extends preact.Component {
 
                 combiner.push(i);
 
-	            if (!comboHighlight) {
-	                setInfo(vbox.bound[i]);
-	                return combinerChange([i]);
-	            }
+                if (!comboHighlight) {
+                    setInfo(vbox.bound[i]);
+                    return combinerChange([i]);
+                }
 
                 return combinerChange(combiner);
             }
@@ -407,29 +407,29 @@ class Vbox extends preact.Component {
             }
 
             return (
-	            <div class={inventoryClass}
-	                onMouseDown={inventoryClick}
-	                onClick={e => e.stopPropagation()}
-	                style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
-	                <div class="vbox-hdr">
-	                    <h3
-	                        onTouchStart={e => e.target.scrollIntoView(true)}
-	                        onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
-	                    </h3>
-	                    <button
-	                        disabled={tutorial && tutorial < 8}
-	                        class='vbox-btn reclaim'
-	                        onMouseOver={e => hoverInfo(e, 'reclaim')}
-	                        onClick={e => e.stopPropagation()}
-	                        onMouseDown={reclaimClick}>
-	                        reclaim
-	                    </button>
-	                </div>
-	                <div class='vbox-items'>
-	                    {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
-	                </div>
-	                {combinerBtn()}
-	            </div>
+                <div class={inventoryClass}
+                    onMouseDown={inventoryClick}
+                    onClick={e => e.stopPropagation()}
+                    style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
+                    <div class="vbox-hdr">
+                        <h3
+                            onTouchStart={e => e.target.scrollIntoView(true)}
+                            onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
+                        </h3>
+                        <button
+                            disabled={tutorial && tutorial < 8}
+                            class='vbox-btn reclaim'
+                            onMouseOver={e => hoverInfo(e, 'reclaim')}
+                            onClick={e => e.stopPropagation()}
+                            onMouseDown={reclaimClick}>
+                            reclaim
+                        </button>
+                    </div>
+                    <div class='vbox-items'>
+                        {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+                    </div>
+                    {combinerBtn()}
+                </div>
             );
         }
 

From 5e137af159494b031905f4bc42798972f015d026 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 12:53:36 +1000
Subject: [PATCH 14/53] default general notes for vbox

---
 client/src/components/info.component.jsx | 18 ++++++++++++++----
 client/src/components/vbox.component.jsx |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 86b193e4..cdabfca8 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -189,12 +189,22 @@ class InfoComponent extends preact.Component {
         }
 
         function Combos() {
-            if (!player) return false;
-            if (!info) return false;
-            if (tutorial) return false;
+            if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
+            const generalNotes = (
+                <div>
+                    <h2> General </h2>
+                    <p>
+                        Create combos by clicking a white item together with two colours in the inventory. <br />
+                        Reclaim can be used to sell items in the inventory. <br />
+                        Click the <b>READY</b> button to start the <b>GAME PHASE</b>.
+                    </p>
+                </div>
+            );
+            if (!player) return generalNotes;
+            if (!info) return generalNotes;
 
             const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
-            if (vboxCombos.length > 6) return false;
+            if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
 
             return (
                 <table class="combos">
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 54427f92..44d193e7 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -163,7 +163,7 @@ class Vbox extends preact.Component {
                 e.stopPropagation();
                 if (combiner.length !== 0) {
                     const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
-                    if (base) return setInfo(vbox.bound[base]);
+                    if (base || base === 0) return setInfo(vbox.bound[base]);
                 }
                 if (info !== v) setInfo(v);
             }

From 5e41d92e15af980ebe6e198c5d674a2744062f45 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 13:06:09 +1000
Subject: [PATCH 15/53] keep info as vbox selected if base item

---
 client/src/components/vbox.component.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 44d193e7..022826ff 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -161,9 +161,10 @@ 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 (combiner.length !== 0) {
                     const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
-                    if (base || base === 0) return setInfo(vbox.bound[base]);
+                    if (base || base === 0) return true;
                 }
                 if (info !== v) setInfo(v);
             }
@@ -199,6 +200,7 @@ class Vbox extends preact.Component {
                 setCombiner([]);
 
                 if (selected) return clearVboxSelected();
+                setInfo(vbox.free[group][index]);
                 return setVboxSelected([group, index]);
             }
 

From 5c808902970cb96d314bd4c444244a3da0c79b38 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 13:25:28 +1000
Subject: [PATCH 16/53] vbox info text

---
 client/src/components/info.component.jsx | 2 +-
 client/src/constants.jsx                 | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index cdabfca8..2574e50a 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -194,7 +194,7 @@ class InfoComponent extends preact.Component {
                 <div>
                     <h2> General </h2>
                     <p>
-                        Create combos by clicking a white item together with two colours in the inventory. <br />
+                        You can preview combos by clicking them when they appear in this section. <br />
                         Reclaim can be used to sell items in the inventory. <br />
                         Click the <b>READY</b> button to start the <b>GAME PHASE</b>.
                     </p>
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 97199bb5..3462373d 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -34,7 +34,7 @@ module.exports = {
         },
         bits: {
             item: 'BITS',
-            description: 'The VBOX currency.\nColours: 1b\nSkills: 2b\nSpecs: 3b\nAt the beginning of a round you receive 12 + 6 * round_number bits.',
+            description: 'The VBOX currency.\nColours - 1b\nSkills - 2b\nSpecs - 3b.\nAt the beginning of each round you receive 18 bits. This amount increases by 6 bits per round.',
         },
         ready: {
             item: 'READY',
@@ -70,7 +70,7 @@ module.exports = {
         },
         constructSpecs: {
             item: 'SPECS',
-            description: 'SPECS increase the STATS of a CONSTRUCT.\nSPECS have increased effect once they reach a THRESHOLD across your whole team.\nClick a SPEC above and select a CONSTRUCT to equip.\nDouble-click to unequip.',
+            description: 'Specialisations increase the stats of a construct. This includes the damage, healing and speed of your skills and life.\n Increased effect when your team meets the colour threshold.\n Double-click to unequip.',
         },
         powerStat: {
             item: 'POWER',

From 58678e958e4dbc86b2cbcd44c961a7300c7a2a8d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 13:30:14 +1000
Subject: [PATCH 17/53] updated phase tag from merge

---
 client/src/components/targeting.arrows.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 4a7398e9..48dcaf3c 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -31,7 +31,7 @@ class TargetSvg extends Component {
         const { game, account, animating, animSkill, itemInfo, gameEffectInfo, tutorialGame } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
-        if (game.phase === 'Finish') return false; // Clear everything if its over (in case of abandon)
+        if (game.phase === 'Finished') return false; // Clear everything if its over (in case of abandon)
 
         // First time joining game phase
         if (tutorialGame) {

From 6da01f879dd7621b634c970081786cf46ed6c8f1 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 13:50:05 +1000
Subject: [PATCH 18/53] disable offer during animation, don't set instance to
 null

---
 client/src/components/game.ctrl.btns.jsx     | 1 -
 client/src/components/game.ctrl.btns.top.jsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/game.ctrl.btns.jsx b/client/src/components/game.ctrl.btns.jsx
index 3918b5ca..557e0915 100644
--- a/client/src/components/game.ctrl.btns.jsx
+++ b/client/src/components/game.ctrl.btns.jsx
@@ -46,7 +46,6 @@ const addState = connect(
         function quit() {
             dispatch(actions.setNav('transition'));
             dispatch(actions.setGame(null));
-            dispatch(actions.setInstance(null));
         }
 
         function setChatShow(v) {
diff --git a/client/src/components/game.ctrl.btns.top.jsx b/client/src/components/game.ctrl.btns.top.jsx
index 270721c9..55c4caa0 100644
--- a/client/src/components/game.ctrl.btns.top.jsx
+++ b/client/src/components/game.ctrl.btns.top.jsx
@@ -81,7 +81,7 @@ function GameCtrlTopBtns(args) {
         ? 'Offered'
         : drawState ? 'Draw' : 'Offer';
     const drawAction = drawState ? sendDraw : drawStateTrue;
-    const drawBtn = <button class={drawClasses} disabled={finished || drawOffered} onClick={drawAction}>{drawText}</button>;
+    const drawBtn = <button class={drawClasses} disabled={finished || animating || drawOffered} onClick={drawAction}>{drawText}</button>;
 
     return (
         <div class="instance-ctrl-btns">

From 50f1c6fa1b700bedd0f0c684a3f7d61b03121f1f Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 14:23:56 +1000
Subject: [PATCH 19/53] construct name and avatar and $$$ jebaited

---
 client/src/components/construct.jsx           |  3 ++-
 client/src/components/info.component.jsx      | 22 +++++++++++++++++++
 client/src/components/instance.constructs.jsx |  8 +++----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index 334ba19e..3c2df336 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -29,12 +29,13 @@ class ConstructAvatar extends Component {
     }
 
     render() {
-        const { construct } = this.props;
+        const { construct, mouseOver } = this.props;
         return (
             <div
                 class="avatar"
                 id={construct.id}
                 onMouseDown={this.onClick.bind(this)}
+                onMouseOver={mouseOver ? mouseOver : null}
                 style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
                 <ConstructAnimation construct={construct} />
             </div>
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 2574e50a..1d78d2ed 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -40,7 +40,29 @@ class InfoComponent extends preact.Component {
                 if (tutorialStageInfo) return tutorialStageInfo;
             }
             if (!info) return false;
+            if (info.includes('constructName')) {
+                return (
+                    <div>
+                        <h2> {info.replace('constructName ', '')} </h2>
+                        <p> This is the name of your construct. <br />
+                            Names are randomly generated and are purely cosmetic. <br />
+                            You can change change your construct name in the reshape tab outside of games.
+                        </p>
+                    </div> 
+                );
+            }
 
+            if (info.includes('constructAvatar')) {
+                return (
+                    <div>
+                        <h2> {info.replace('constructAvatar ', '')} </h2>
+                        <p> This is your construct avatar. <br />
+                            Avatars are randomly generated and are purely cosmetic. <br />
+                            You can change your construct avatar in the reshape tab outside of games.
+                        </p>
+                    </div> 
+                );
+            }
             const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
             if (!fullInfo) return false;
             const isSkill = fullInfo.skill;
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index f3367a2a..1e010061 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -221,11 +221,11 @@ function Construct(props) {
     });
 
     const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
-
+    const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     return (
-        <div key={construct.id} class={classes} onClick={onClick} >
-            <ConstructAvatar construct={construct} />
-            <h2 class="name" >{construct.name}</h2>
+        <div key={construct.id} class={classes} onClick={onClick}>
+            <ConstructAvatar construct={construct} mouseOver={avatarMouseOver}/>
+            <h2 class="name" onMouseOver={e => hoverInfo(e, `constructName ${construct.name}`)}>{construct.name}</h2>
             <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
                 {skills}
             </div>

From 2f391fc85bac25087fab72c6b504efaa7a56f94c Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 14:50:25 +1000
Subject: [PATCH 20/53] reclaim text

---
 client/src/constants.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 3462373d..79723abf 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -46,7 +46,7 @@ module.exports = {
         },
         reclaim: {
             item: 'RECLAIM',
-            description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.',
+            description: 'Reclaim items refunding the listed cost of the item.\nClick to enable and then click the item to reclaim.',
         },
         refine: {
             item: 'COMBINE',

From 85591ec8573458ded55bde6744408b503dccdcdb Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 14:58:33 +1000
Subject: [PATCH 21/53] shouldCompUpdate game construct, disable ko event

---
 client/src/components/game.construct.jsx | 31 ++++++++++++++++++------
 server/src/skill.rs                      |  2 +-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index 79f2a8bc..75a1677d 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -85,21 +85,36 @@ class GameConstruct extends Component {
         this.resolvedLength = 0;
     }
 
+    shouldComponentUpdate(newProps) {
+        if (newProps.activeSkill !== this.props.activeSkill) return true;
+        if (newProps.animFocus !== this.props.animFocus) return true;
+        if (newProps.animText !== this.props.animText) return true;
+        if (newProps.animating !== this.props.animating) return true;
+        if (newProps.construct !== this.props.construct) return true;
+        if (newProps.player !== this.props.player) return true;
+        if (newProps.tutorialGame !== this.props.tutorialGame) return true;
+        if (newProps.gameSkillInfo !== this.props.gameSkillInfo) return true;
+        return false;
+    }
+
     render() {
         const {
-            i,
+            // Changing state variables
+            activeSkill,
+            animFocus,
+            animText,
             animating,
             construct,
             player,
-            activeSkill,
-            selectSkillTarget,
-            animFocus,
-            animText,
             tutorialGame,
+            gameSkillInfo,
+            // Constants
+            i,
+            itemInfo,
+            // Functions
+            selectSkillTarget,
             setTutorialGameClear,
             setGameEffectInfo,
-            gameSkillInfo,
-            itemInfo,
         } = this.props;
 
         const ko = construct.green_life.value === 0 ? 'ko' : '';
@@ -145,7 +160,7 @@ class GameConstruct extends Component {
                     > {c.effect} - {c.duration}T</div>)
                 : null;
             return (<div class="effects"> {effects} </div>);
-        }
+        };
 
         return (
             <div
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 2e98af9b..26a7525b 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -342,7 +342,7 @@ fn post_resolve(_skill: Skill, game: &mut Game, mut resolutions: Resolutions) ->
         };
 
         if target.is_ko() {
-            resolutions.push(Resolution::new(&source, &target).event(Event::Ko()).stages(EventStages::PostOnly));
+            // resolutions.push(Resolution::new(&source, &target).event(Event::Ko()).stages(EventStages::PostOnly));
             target.effects.clear();
         }
 

From 7355f0668f929b13f3a49117a2231c81db053f9a Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 15:05:30 +1000
Subject: [PATCH 22/53] targetting arrows shouldUpdate

---
 client/src/components/targeting.arrows.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 48dcaf3c..a79de304 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -27,6 +27,16 @@ class TargetSvg extends Component {
         }, 500);
     }
 
+    shouldComponentUpdate(newProps) {
+        if (newProps.game !== this.props.game) return true;
+        if (newProps.account !== this.props.account) return true;
+        if (newProps.animating !== this.props.animating) return true;
+        if (newProps.animSkill !== this.props.animSkill) return true;
+        if (newProps.gameEffectInfo !== this.props.gameEffectInfo) return true;
+        if (newProps.tutorialGame !== this.props.tutorialGame) return true;
+        return false;
+    }
+
     render(props, state) {
         const { game, account, animating, animSkill, itemInfo, gameEffectInfo, tutorialGame } = props;
         const { width, height } = state;

From 6a4eb1837d668b311f2b90ffdb3e45cde088dcc4 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 15:08:22 +1000
Subject: [PATCH 23/53] misc

---
 client/src/components/targeting.arrows.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index a79de304..7bd82010 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -38,7 +38,17 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animating, animSkill, itemInfo, gameEffectInfo, tutorialGame } = props;
+        const {
+            // Changing State Variables
+            account,
+            animating,
+            animSkill,
+            game,
+            gameEffectInfo,
+            tutorialGame,
+            // Static
+            itemInfo,
+        } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
         if (game.phase === 'Finished') return false; // Clear everything if its over (in case of abandon)

From 84acb58573aece47e68c5b0b6e0560e72d8be650 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 19:01:22 +1000
Subject: [PATCH 24/53] move construct calls into componentDidUpdate, change
 shouldCompUpdate

---
 client/src/components/construct.jsx | 40 ++++++++++++-----------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index 3c2df336..19e9fd20 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -61,42 +61,36 @@ class ConstructAvatar extends Component {
         this.resetAnimations();
     }
 
-    shouldComponentUpdate(newProps) {
-        const { animSource, animTarget, animText, construct } = newProps;
-
-        if (construct !== this.props.construct) {
-            return true;
-        }
-
-        if (animText && animText !== this.props.animText && animText.constructId === construct.id) {
+    componentDidUpdate(prevProps) {
+        const { animSource, animTarget, animText, construct } = this.props;
+        // a different text object and text construct
+        if (animText && animText !== prevProps.animText && animText.constructId === construct.id) {
             return wiggle(construct.id, this.idle);
         }
 
-        if (animSource === this.props.animSource && animTarget === this.props.animTarget) {
-            // console.warn(construct.name, 'thinks its same props')
-            return false;
-        }
-
-        // something has changed
-        // what do?
-
-        // this is the source
-        if (animSource && animSource.constructId === construct.id) {
-            // console.warn(construct.name, 'should update')
+        // different source object and source construct
+        if (animSource && animSource !== prevProps.animSource && animSource.constructId === construct.id) {
             return sourceCast(animSource.constructId, animSource.direction, this.idle);
         }
 
-
-        // this is the target
-        if (animTarget && animTarget.constructId.includes(construct.id)) {
-            // console.warn(construct.name, 'should update')
+        // different target object and target construct
+        if (animTarget && animTarget !== prevProps.animTarget && animTarget.constructId.includes(construct.id)) {
             switch (animTarget.skill) {
             case 'Banish': return banish(construct.id, this.idle);
             case 'Invert': return invert(construct.id, this.idle);
             default: return null;
             }
         }
+        return true;
+    }
 
+
+    shouldComponentUpdate(newProps) {
+        const { animSource, animTarget, animText, construct } = newProps;
+        if (animSource !== this.props.animSource) return true;
+        if (animTarget !== this.props.animTarget) return true;
+        if (animText !== this.props.animText) return true;
+        if (construct !== this.props.construct) return true;
         return false;
     }
 }

From cfc1c1ea81f495fb186d8092fb4f507e63d82e3f Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 19:08:01 +1000
Subject: [PATCH 25/53] cleanup old files

---
 client/src/components/instance.component.jsx |   6 +-
 client/src/components/instance.equip.jsx     | 144 -------------------
 client/src/components/particles.config.js    |  41 ------
 3 files changed, 5 insertions(+), 186 deletions(-)
 delete mode 100644 client/src/components/instance.equip.jsx
 delete mode 100644 client/src/components/particles.config.js

diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 76291079..d4953550 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -7,7 +7,6 @@ const Hammer = require('hammerjs');
 const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
 const InstanceConstructsContainer = require('./instance.constructs');
-// const EquipmentContainer = require('./instance.equip');
 const Faceoff = require('./faceoff');
 
 const actions = require('../actions');
@@ -53,6 +52,11 @@ const addState = connect(
 );
 
 class Instance extends Component {
+    componentShouldUpdate(newProps) {
+        if (newProps.instance !== this.props.instance) return true;
+        return false;
+    }
+
     render(args) {
         const {
             instance,
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
deleted file mode 100644
index ef4ac2e3..00000000
--- a/client/src/components/instance.equip.jsx
+++ /dev/null
@@ -1,144 +0,0 @@
-const { connect } = require('preact-redux');
-const preact = require('preact');
-const range = require('lodash/range');
-
-const actions = require('../actions');
-const shapes = require('./shapes');
-const { convertItem } = require('./../utils');
-
-const addState = connect(
-    function receiveState(state) {
-        const { account, activeConstruct, itemInfo, info, ws, instance, player, itemUnequip } = state;
-
-        function sendUnequip(constructId, item) {
-            return ws.sendVboxUnequip(instance.id, constructId, item);
-        }
-
-        return { player, itemInfo, instance, info, sendUnequip, activeConstruct, itemUnequip };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setInfo(item) {
-            dispatch(actions.setInfo(item));
-        }
-
-        function clearInfo() {
-            return dispatch(actions.setInfo(null));
-        }
-
-        function setItemEquip(v) {
-            return dispatch(actions.setItemEquip(v));
-        }
-
-        function setItemUnequip(v) {
-            return dispatch(actions.setItemUnequip(v));
-        }
-
-        return { setInfo, setItemEquip, setItemUnequip, clearInfo };
-    }
-
-);
-
-function Equipment(props) {
-    const {
-        player,
-        instance,
-
-        itemUnequip,
-        setItemEquip,
-        setItemUnequip,
-        activeConstruct,
-
-        itemInfo,
-        sendUnequip,
-
-        setInfo,
-    } = props;
-
-    if (instance.phase === 'Lobby') return false;
-
-    const { vbox } = player;
-
-    const fullInfo = itemInfo.items.find(i => i.item === itemUnequip);
-    const isSkill = fullInfo && fullInfo.skill;
-    const isSpec = fullInfo && fullInfo.spec;
-
-    function skillClick(e, i) {
-        if (itemUnequip && activeConstruct) return false;
-        // const value = vbox.bound[i];
-        setItemEquip(i);
-        return false;
-    }
-
-    function unequipClick(e) {
-        e.stopPropagation();
-        if (!itemUnequip) return false;
-        if (!activeConstruct) return false;
-        setItemUnequip([]);
-        return sendUnequip(activeConstruct.id, itemUnequip);
-    }
-
-    function hoverInfo(e, info) {
-        e.stopPropagation();
-        return setInfo(info);
-    }
-
-    const skillClass = isSkill ? 'skills highlight' : 'skills';
-    const specClass = isSpec ? 'specs highlight' : 'specs';
-
-    const skills = range(0, 9).map(i => {
-        const item = convertItem(vbox.bound[i]);
-        const skillInfo = itemInfo.items.find(i => i.item === item);
-        if (skillInfo && skillInfo.skill) {
-            return (
-                <button key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
-                    {item}
-                </button>
-            );
-        }
-        return false;
-    });
-
-    const specs = range(0, 9).map(i => {
-        const item = convertItem(vbox.bound[i]);
-        const specInfo = itemInfo.items.find(i => i.item === item);
-        if (specInfo && specInfo.spec) {
-            return (
-                <figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
-                    {shapes[item]()}
-                    <figcaption>{item ? item : '-'}</figcaption>
-                </figure>
-            );
-        }
-        return false;
-    });
-
-    if (skills.every(s => !s)) skills.push(<button disabled={true}>&nbsp;</button>);
-    if (specs.every(s => !s)) {
-        specs.push(
-            <figure>
-                {shapes.diamond('gray')}
-                <figcaption>&nbsp;</figcaption>
-            </figure>
-        );
-    }
-
-    return (
-        <div class="equip" >
-            <div class={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
-                <h3>Skills</h3>
-                <div class ="items">
-                    {skills}
-                </div>
-            </div>
-            <div class={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
-                <h3>Specs</h3>
-                <div class ="items">
-                    {specs}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-module.exports = addState(Equipment);
diff --git a/client/src/components/particles.config.js b/client/src/components/particles.config.js
deleted file mode 100644
index 651cae39..00000000
--- a/client/src/components/particles.config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const config = {
-    particles: {
-        number: { value: 300, density: { enable: true, value_area: 800 } },
-        color: { value: '#ffffff' },
-        shape: {
-            type: 'circle',
-            stroke: { width: 0, color: '#000000' },
-            polygon: { nb_sides: 5 },
-            image: { src: 'img/github.svg', width: 100, height: 100 }
-        },
-        opacity: {
-            value: 0.5,
-            random: false,
-            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
-        },
-        size: {
-            value: 3,
-            random: true,
-            anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
-        },
-        line_linked: {
-            enable: true,
-            distance: 150,
-            color: '#ffffff',
-            opacity: 0.4,
-            width: 1,
-        },
-        move: {
-            enable: true,
-            speed: 6,
-            direction: 'none',
-            random: false,
-            straight: false,
-            out_mode: 'out',
-            bounce: false,
-            attract: { enable: false, rotateX: 600, rotateY: 1200 },
-        },
-    },
-};
-
-module.exports = config;

From a6cd2a3e0a9262b115b0c1cd6cb67d2bf112db5e Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 20:58:44 +1000
Subject: [PATCH 26/53] tutorial disable check, info formatting

---
 client/src/components/vbox.component.jsx | 10 +++---
 client/src/constants.jsx                 | 41 ++++++++++++------------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 022826ff..d97e3f31 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -104,11 +104,10 @@ class Vbox extends preact.Component {
         if (newProps.reclaiming !== this.props.reclaiming) return true;
         if (newProps.navInstance !== this.props.navInstance) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
-        // Don't bother if info changes during tutorial
-        if (!newProps.tutorial && newProps.info !== this.props.info) return true;
-        // JSON or Array objects
+        if (newProps.info !== this.props.info) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
         if (newProps.player !== this.props.player) return true;
+        if (newProps.instance !== this.props.instance) return true;
         return false;
     }
 
@@ -123,6 +122,7 @@ class Vbox extends preact.Component {
             navInstance,
             info,
             vboxSelected,
+            instance,
 
             // Static
             itemInfo,
@@ -269,7 +269,7 @@ class Vbox extends preact.Component {
                     <button
                         class='vbox-btn'
                         onMouseOver={e => hoverInfo(e, 'refill')}
-                        disabled={tutorial && tutorial < 7}
+                        disabled={tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1}
                         onClick={e => e.stopPropagation()}
                         onMouseDown={() => sendVboxDiscard()}>
                         refill - 2b
@@ -419,7 +419,7 @@ class Vbox extends preact.Component {
                             onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
                         </h3>
                         <button
-                            disabled={tutorial && tutorial < 8}
+                            disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
                             class='vbox-btn reclaim'
                             onMouseOver={e => hoverInfo(e, 'reclaim')}
                             onClick={e => e.stopPropagation()}
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 79723abf..32c093ec 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -26,7 +26,8 @@ module.exports = {
     INFO: {
         vbox: {
             item: 'VBOX',
-            description: <p><b>ITEMS</b> that are available to buy.<br />The <b>VBOX</b> is refilled every round.<br />Click <b>REFILL</b> at the bottom to purchase a refill. </p>,
+            description: <p><b>ITEMS</b> that are available to buy.<br />
+                The <b>VBOX</b> is refilled every round.<br />Click <b>REFILL</b> at the bottom to purchase a refill. </p>,
         },
         inventory: {
             item: 'INVENTORY',
@@ -34,7 +35,11 @@ module.exports = {
         },
         bits: {
             item: 'BITS',
-            description: 'The VBOX currency.\nColours - 1b\nSkills - 2b\nSpecs - 3b.\nAt the beginning of each round you receive 18 bits. This amount increases by 6 bits per round.',
+            description: <p>The VBOX currency.<br />
+                Colours - 1b<br />
+                Skills - 2b<br />
+                Specs - 3b.<br />
+                At the beginning of each round you receive 18 bits increasing by 6 bits per round.</p>,
         },
         ready: {
             item: 'READY',
@@ -46,43 +51,39 @@ module.exports = {
         },
         reclaim: {
             item: 'RECLAIM',
-            description: 'Reclaim items refunding the listed cost of the item.\nClick to enable and then click the item to reclaim.',
-        },
-        refine: {
-            item: 'COMBINE',
-            description: <p>combine the selected items.<br />hover over an item to see <b>RECIPES</b>.</p>,
+            description: <p>Reclaim items refunding the listed cost of the item.<br />
+                Click to enable and then click the item to reclaim.</p>,
         },
         refill: {
             item: 'REFILL',
             description: 'Refill the VBOX with new items.',
         },
-        equipSkills: {
-            item: 'QUICK ACCESS - SKILLS',
-            description: 'Click to select \nClick target CONSTRUCT to equip',
-        },
-        equipSpecs: {
-            item: 'QUICK ACCESS - SPECS',
-            description: 'Click to select \nClick target CONSTRUCT to equip',
-        },
         constructSkills: {
             item: 'SKILLS',
-            description: 'Skills are used by Constructs in-game.\nClick a SKILL above and select a CONSTRUCT to equip.\nDouble-click to unequip.',
+            description: <p>Skills are used by constructs in the game phase.<br />
+                Base skills can be bought from the VBOX.<br />
+                Equip skills from the inventory. Double-click to unequip.</p>,
         },
         constructSpecs: {
             item: 'SPECS',
-            description: 'Specialisations increase the stats of a construct. This includes the damage, healing and speed of your skills and life.\n Increased effect when your team meets the colour threshold.\n Double-click to unequip.',
+            description: <p>Specialisations increase the stats of a construct.<br />
+                Increased effect when your team meets the colour threshold.<br />Double-click to unequip.</p>,
         },
         powerStat: {
             item: 'POWER',
-            description: 'Power determines the base damage and healing of your construct skills. Combine POWER specs to increase construct power.',
+            description: <p>Power determines the base damage and healing of your construct skills.<br />
+                Combine POWER specs to increase construct power.</p>,
         },
         lifeStat: {
             item: 'LIFE',
-            description: 'The life of your construct.\n When your construct reaches 0 green life it is knocked out and cannot cast skills.\nRed life mitigates red damage and blue life mitigates blue damage. Combine LIFE specs to increase life totals.',
+            description: <p>The life of your construct.<br />
+                When your construct reaches 0 green life it is knocked out and cannot cast skills.<br />
+                Red life mitigates red damage and blue life mitigates blue damage.<br />
+                Combine LIFE specs to increase life totals.</p>,
         },
         speedStat: {
             item: 'SPEED',
-            description: 'Speed determines the order in which skills resolve. Combine SPEED specs to increase speed.',
+            description: <p>Speed determines the order in which skills resolve.<br />Combine SPEED specs to increase speed.</p>,
         },
     },
 };

From f961f8485dede95c3756fa93dc41c46ef326c321 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 21:01:57 +1000
Subject: [PATCH 27/53] remove info from vbox

---
 client/src/components/vbox.component.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index d97e3f31..c2c1a51a 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -21,7 +21,6 @@ const addState = connect(
             itemInfo,
             itemUnequip,
             navInstance,
-            info,
             tutorial,
         } = state;
 
@@ -60,7 +59,6 @@ const addState = connect(
             sendItemUnequip,
             navInstance,
             tutorial,
-            info,
         };
     },
 
@@ -104,7 +102,6 @@ class Vbox extends preact.Component {
         if (newProps.reclaiming !== this.props.reclaiming) return true;
         if (newProps.navInstance !== this.props.navInstance) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.info !== this.props.info) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
         if (newProps.player !== this.props.player) return true;
         if (newProps.instance !== this.props.instance) return true;
@@ -120,7 +117,6 @@ class Vbox extends preact.Component {
             reclaiming,
             tutorial,
             navInstance,
-            info,
             vboxSelected,
             instance,
 
@@ -166,7 +162,7 @@ class Vbox extends preact.Component {
                     const base = combiner.find(c => !['Red', 'Blue', 'Green'].includes(vbox.bound[c]));
                     if (base || base === 0) return true;
                 }
-                if (info !== v) setInfo(v);
+                setInfo(v);
             }
             return true;
         }
@@ -440,7 +436,6 @@ class Vbox extends preact.Component {
         //
         function hoverInfo(e, newInfo) {
             e.stopPropagation();
-            if (info === newInfo) return true;
             return setInfo(newInfo);
         }
 

From 2a10de67569b46073fa5c7007a662ac6a0fd1008 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 21:09:22 +1000
Subject: [PATCH 28/53] misc

---
 client/src/components/info.component.jsx | 9 ++++-----
 client/src/constants.jsx                 | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 1d78d2ed..8d49b1ac 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -46,7 +46,7 @@ class InfoComponent extends preact.Component {
                         <h2> {info.replace('constructName ', '')} </h2>
                         <p> This is the name of your construct. <br />
                             Names are randomly generated and are purely cosmetic. <br />
-                            You can change change your construct name in the reshape tab outside of games.
+                            You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
                         </p>
                     </div> 
                 );
@@ -58,9 +58,9 @@ class InfoComponent extends preact.Component {
                         <h2> {info.replace('constructAvatar ', '')} </h2>
                         <p> This is your construct avatar. <br />
                             Avatars are randomly generated and are purely cosmetic. <br />
-                            You can change your construct avatar in the reshape tab outside of games.
+                            You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
                         </p>
-                    </div> 
+                    </div>
                 );
             }
             const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
@@ -216,8 +216,7 @@ class InfoComponent extends preact.Component {
                 <div>
                     <h2> General </h2>
                     <p>
-                        You can preview combos by clicking them when they appear in this section. <br />
-                        Reclaim can be used to sell items in the inventory. <br />
+                        You can preview combos by clicking the combined item when it appears in this section. <br />
                         Click the <b>READY</b> button to start the <b>GAME PHASE</b>.
                     </p>
                 </div>
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 32c093ec..afc53c74 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -38,7 +38,7 @@ module.exports = {
             description: <p>The VBOX currency.<br />
                 Colours - 1b<br />
                 Skills - 2b<br />
-                Specs - 3b.<br />
+                Specs - 3b<br />
                 At the beginning of each round you receive 18 bits increasing by 6 bits per round.</p>,
         },
         ready: {

From 52f6e528e44b45986ef3eff5e5f5e4e9345f66d6 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 21:52:37 +1000
Subject: [PATCH 29/53] targetting arrows update arrow svg state

---
 client/src/components/targeting.arrows.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 7bd82010..b615517b 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -27,13 +27,15 @@ class TargetSvg extends Component {
         }, 500);
     }
 
-    shouldComponentUpdate(newProps) {
+    shouldComponentUpdate(newProps, newState) {
         if (newProps.game !== this.props.game) return true;
         if (newProps.account !== this.props.account) return true;
         if (newProps.animating !== this.props.animating) return true;
         if (newProps.animSkill !== this.props.animSkill) return true;
         if (newProps.gameEffectInfo !== this.props.gameEffectInfo) return true;
         if (newProps.tutorialGame !== this.props.tutorialGame) return true;
+        if (newState.width !== this.state.width) return true;
+        if (newState.height !== this.state.height) return true;
         return false;
     }
 

From 861cc63682084f9c35f10dc6c539a82c196b9630 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 28 Oct 2019 22:36:00 +1000
Subject: [PATCH 30/53] tidy up descriptions

---
 client/src/components/info.component.jsx |  9 ++-
 server/src/item.rs                       | 86 +++++++++++++++---------
 2 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 8d49b1ac..6a1689dd 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -70,7 +70,8 @@ class InfoComponent extends preact.Component {
 
             if (isSkill) {
                 const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-                const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
                 const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
                 const itemSourceInfo = itemSource.length
                     ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
@@ -176,7 +177,8 @@ class InfoComponent extends preact.Component {
                     );
                 });
                 const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-                const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+                infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
                 const itemSource = itemInfo.combos.filter(c => c.item === info);
                 let itemSourceInfo = itemSource.length
                     ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
@@ -202,10 +204,11 @@ class InfoComponent extends preact.Component {
                 );
             }
             const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
+            const infoDescription = reactStringReplace(fullInfo.description, '\n', () => <br />);
             return (
                 <div class="info-item">
                     <h2>{fullInfo.item} {cost}</h2>
-                    <div>{fullInfo.description}</div>
+                    <div>{infoDescription}</div>
                 </div>
             );
         }
diff --git a/server/src/item.rs b/server/src/item.rs
index 763e17c2..2cae5571 100644
--- a/server/src/item.rs
+++ b/server/src/item.rs
@@ -584,9 +584,9 @@ impl Item {
     pub fn into_description(&self) -> String {
         match self {
             // colours
-            Item::Blue => format!("Combine with skills and specs to create upgraded items. \n Deterrents and destruction."),
-            Item::Green => format!("Combine with skills and specs to create upgraded items.\n Protection and trickery."),
-            Item::Red => format!("Combine with skills and specs to create upgraded items. \n Speed and chaos."),
+            Item::Blue => format!("Combine two colours with a white base item to create a new combo. \n Slow speed, magical type. Deterrents and destruction."),
+            Item::Green => format!("Combine two colours with a white base item to create a new combo.\n Normal speed, healing type. Protection and trickery."),
+            Item::Red => format!("Combine two colours with a white base item to create a new combo. \n Fast speed, physical type. Chaos and momentum."),
 
             // base skills
             Item::Attack => format!("Deal {:?}% RedPower as red damage.",
@@ -603,7 +603,8 @@ impl Item {
                 100 - self.into_skill().unwrap().effect()[0].get_multiplier()),
             // specs
             // Base
-            Item::Power => format!("Increases all power stats by {:?}%. Power determines the base damage and healing of your construct skills.",
+            Item::Power => format!("Increases all power stats by {:?}%.
+                Power determines the base damage and healing of your construct skills.",
                 self.into_spec().unwrap().values().base()),
             Item::Life => format!("Increases construct GreenLife by {:?}.
                 When your construct reaches 0 GreenLife it is knocked out and cannot cast skills.",
@@ -713,7 +714,8 @@ impl Item {
 
             Item::Banish|
             Item::BanishPlus |
-            Item::BanishPlusPlus => format!("Banish target for {:?}T. Deal blue damage and red damage equal to {:?}% target red and blue life.
+            Item::BanishPlusPlus => format!("Banish target for {:?}T.
+                Deal blue damage and red damage equal to {:?}% target red and blue life.
                 Banished constructs are immune to all skills and effects.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().multiplier()),
@@ -725,20 +727,24 @@ impl Item {
             Item::Chaos|
             Item::ChaosPlus |
             Item::ChaosPlusPlus => format!(
-                "Hits twice for red and blue damage. Damage {:?}% RedPower and BluePower. Randomly deals 0 to 30% more damage.",
+                "Hits twice for red and blue damage. Damage {:?}% RedPower and BluePower.
+                 Randomly deals 0 to 30% more damage.",
                 self.into_skill().unwrap().multiplier()),
 
             Item::Sustain|
             Item::SustainPlus |
-            Item::SustainPlusPlus => format!("Construct cannot be KO'd while active. Additionally provides immunity to disables. \
-                Lasts {:?}T",
-                self.into_skill().unwrap().effect()[0].get_duration()),
+            Item::SustainPlusPlus => format!(
+                "Construct cannot be KO'd while active and provides immunity to disables. Lasts {:?}T.
+                Recharges target RedLife based on {:?}% RedPower.",
+                self.into_skill().unwrap().effect()[0].get_duration(),
+                self.into_skill().unwrap().multiplier()),
 
             Item::Electrify|
             Item::ElectrifyPlus |
             Item::ElectrifyPlusPlus => format!(
-                "Applies electrify for {:?}T. If a construct with electrify takes damage they will apply an electrocute debuff to the caster dealing {:?}% \
-                BluePower as BlueDamage per turn for {:?}T.",
+                "Applies electrify for {:?}T.
+                If a construct with electrify takes direct damage they will apply an electrocute debuff to the caster.
+                Electrocute deals {:?}%  BluePower as BlueDamage per turn for {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().effect()[0].get_duration()),
@@ -753,7 +759,8 @@ impl Item {
             Item::Decay|
             Item::DecayPlus |
             Item::DecayPlusPlus => format!(
-                "Reduces healing taken by {:?}% for {:?}T. Deals blue damage {:?}% BluePower each turn for {:?}T.",
+                "Reduces healing taken by {:?}% for {:?}T.
+                Deals blue damage {:?}% BluePower each turn for {:?}T.",
                 100 - self.into_skill().unwrap().effect()[0].get_multiplier(),
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().effect()[1].get_skill().unwrap().multiplier(),
@@ -762,17 +769,20 @@ impl Item {
             Item::Absorb|
             Item::AbsorbPlus |
             Item::AbsorbPlusPlus => format!(
-                "Gain Absorb for {:?}T. {} Absorption lasts {:?}T.",
+                "Gain Absorb for {:?}T. When attacked with Absorb you gain Absorption.
+                Absorption increases RedPower and BluePower based on Damage taken.
+                Absorption lasts {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
-                "When attacked with Absorb you gain Absorption which increases RedPower and BluePower based on Damage taken.",
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().effect()[0].get_duration()),
 
             Item::Haste|
             Item::HastePlus |
             Item::HastePlusPlus => format!(
-                "Haste increases SpeedStat by {:?}%, Red Attack based skills will strike again dealing {:?}% SpeedStat as red damage. Lasts {:?}T",
+                "Haste increases SpeedStat by {:?}%.
+                Red Attack based skills will strike again dealing {:?}% SpeedStat as red damage.
+                Lasts {:?}T",
                 self.into_skill().unwrap().effect()[0].get_multiplier() - 100,
-                 Skill::HasteStrike.multiplier(),
+                Skill::HasteStrike.multiplier(),
                 self.into_skill().unwrap().effect()[0].get_duration()),
 
             Item::Heal|
@@ -782,7 +792,9 @@ impl Item {
             Item::Hybrid|
             Item::HybridPlus |
             Item::HybridPlusPlus => format!(
-                "Hybrid increases GreenPower by {:?}%, Blue based Attack skills will blast again dealing {:?}% GreenPower as blue damage. Lasts {:?}T.",
+                "Hybrid increases GreenPower by {:?}%. 
+                Blue based Attack skills will blast again dealing {:?}% GreenPower as blue damage.
+                Lasts {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_multiplier() - 100,
                  Skill::HybridBlast.multiplier(),
                 self.into_skill().unwrap().effect()[0].get_duration()),
@@ -790,20 +802,26 @@ impl Item {
             Item::Invert|
             Item::InvertPlus |
             Item::InvertPlusPlus => format!(
-                "Reverse healing into damage and damage into healing. Any excess red or blue damage is converted into shield recharge. Lasts {:?}T.",
+                "Reverse healing into damage and damage into healing.
+                Any excess red or blue damage is converted into shield recharge.
+                Lasts {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_duration()),
 
             Item::Counter|
             Item::CounterPlus |
-            Item::CounterPlusPlus => format!("Applies counter and block {:?}T. Block reduces incoming red damage by {:?}%.
-                Red damage taken during counter will trigger a counter attack dealing {:?}% RedPower as red damage.",
+            Item::CounterPlusPlus => format!(
+                "Applies counter and block {:?}T. Block reduces incoming red damage by {:?}%.
+                Red damage taken during counter will trigger a counter attack.
+                Counter attack deals {:?}% RedPower as red damage.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 100 - self.into_skill().unwrap().effect()[1].get_multiplier(),
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier()),
 
             Item::Purge|
             Item::PurgePlus |
-            Item::PurgePlusPlus => format!("Remove buffs from target construct. Applies purge disabling target green skills for {:?}T.",
+            Item::PurgePlusPlus => format!(
+                "Remove buffs from target construct. 
+                Applies purge disabling target green skills for {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_duration()),
 
             Item::Purify|
@@ -815,8 +833,10 @@ impl Item {
             Item::Reflect|
             Item::ReflectPlus |
             Item::ReflectPlusPlus => format!(
-                "Reflect incoming blue skills to source. Lasts {:?}T.",
-                self.into_skill().unwrap().effect()[0].get_duration()),
+                "Reflect incoming blue skills to source. Lasts {:?}T. 
+                Recharges target BlueLife based on {:?}% BluePower.",
+                self.into_skill().unwrap().effect()[0].get_duration(),
+                self.into_skill().unwrap().multiplier()),
 
             Item::Recharge|
             Item::RechargePlus |
@@ -833,8 +853,8 @@ impl Item {
             Item::Link|
             Item::LinkPlus |
             Item::LinkPlusPlus => format!(
-                "Form a link with target swapping relative life values.
-                If the target construct has more green life than caster, {:?}% of green life difference as blue damage to the target and heal to the caster.
+                "Swap {:?}% of green life difference as blue damage to the target and healing to the caster.
+                The swap only occurs if the target construct has more green life than caster.
                 Stuns caster for {:?}T in the process.",
                 self.into_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().effect()[0].get_duration()),
@@ -850,7 +870,8 @@ impl Item {
             Item::Slay|
             Item::SlayPlus |
             Item::SlayPlusPlus => format!(
-                "Deals {:?}% RedPower + {:?}% GreenPower as red damage and provides self healing based on damage dealt.",
+                "Deals {:?}% RedPower + {:?}% GreenPower as red damage.
+                Provides self healing based on damage dealt.",
                 self.into_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().multiplier()),
 
@@ -864,7 +885,8 @@ impl Item {
             Item::Restrict|
             Item::RestrictPlus |
             Item::RestrictPlusPlus => format!(
-                "Block the target from using red skills for {:?}T and deals {:?}% RedPower as red damage. Deals 35% more damage per red skill on target.",
+                "Block the target from using red skills for {:?}T and deals {:?}% RedPower as red damage.
+                Deals 35% more damage per red skill on target.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().multiplier()),
 
@@ -872,7 +894,8 @@ impl Item {
             Item::BashPlus |
             Item::BashPlusPlus => format!(
                 "Bash the target increasing the cooldowns of target skills by 1T.
-                Deals {:?}% RedPower as red damage and 45% more damage per cooldown increased. Stuns for {:?}T.",
+                Deals {:?}% RedPower as red damage and 45% more damage per cooldown increased.
+                Stuns for {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().effect()[0].get_duration()),
 
@@ -885,14 +908,17 @@ impl Item {
             Item::Siphon|
             Item::SiphonPlus |
             Item::SiphonPlusPlus => format!(
-                "Deals {:?}% BluePower + {:?}% GreenPower as blue damage each turn and heals caster based on damage dealt. Lasts {:?}T.",
+                "Deals {:?}% BluePower + {:?}% GreenPower as blue damage each turn.
+                Heals caster based on damage dealt.
+                Lasts {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().effect()[0].get_duration()),
 
             Item::Intercept|
             Item::InterceptPlus |
-            Item::InterceptPlusPlus => format!("Intercept redirects skills against the team to target, lasts {:?}T.\
+            Item::InterceptPlusPlus => format!(
+                "Intercept redirects skills against the team to target, lasts {:?}T.
                 Recharges RedLife for {:?} RedPower.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().multiplier()),

From b30c4463facfb6148079ae44170ab32af4d7a149 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 11:31:07 +1000
Subject: [PATCH 31/53] skill rebalance

---
 CHANGELOG.md         | 55 ++++++++++++++++++++++++++++++++++++++++
 server/src/effect.rs |  6 ++---
 server/src/item.rs   | 27 +++++++++++---------
 server/src/skill.rs  | 60 ++++++++++++++++++--------------------------
 4 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a6107c0..d4283869 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,61 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.6.7] - 2019-10-27
+# Added
+- Step by step tutorial
+    - Will activate during the learn game for the first round
+    - There is a button which will exit tutorial so you can continune the normal practice mode
+- Skill combo previews
+    - You can now preview what item combos will create!
+    - Click into the item in the info section table (top right) and it will be replaced with the new item
+
+# Changed
+- Vbox phase
+    - Made general performance improvements
+    - Removed the default info state (should be smoother to navigate now)
+    - When combining or selecting base items (skills/specs) the base item info won't be replaced with other vbox items
+    - Added info text for construct names and avatars
+    - Changed a number of info descriptions for clarity
+
+- Game phase
+    - Made general performance improvements
+    - Now has default tutorial text for the first round
+    - Will tell the player to select skills and then the targets
+
+# Skill Balance Updates
+- Buff 
+    - Previously increased red power and speed stat by 25%
+    - Now increases red power, blue power and speed stat by 30%
+
+- Block
+    - Previously reduced red damage taken by 50%
+    - Now reduces red damage and blue damage taken by 65%
+
+- Counter
+    - No longer applies block effect
+    - CounterAttack multiplier increased from 70/95/120 -> 120/160/230
+- Haste
+    - Cooldown reduced to 1T (was 2T)
+- Sleep
+    - Cooldown reduced to 2T (was 3T)
+    - Skill multiplier reduced from 240/300/400 -> 200/290/400
+- Hybrid
+    - Cooldown reduced to 1T (was 3T)
+- Silence
+    - Cooldown reduced to 2T (was 3T)
+- Banish
+    - Cooldown reduced to 2T (was 3T)
+- Siphon
+    - Skill multiplier increased from 20/25/30 -> 25/30/40
+- Bash
+    - Skill multiplier reduced from 65/95/140 -> 45/65/100
+- Curse
+    - Now created by combining Debuff + RB was Debuff + RG
+    - Fixed issue where curse was only increasing blue damage taken instead of red and blue
+- Invert
+    - Now created by combining Debuff + RG was debuff + RB
+
 ## [1.6.6] - 2019-10-27
 # Added
 - Offering of draws
diff --git a/server/src/effect.rs b/server/src/effect.rs
index 1e959e50..c2c77392 100644
--- a/server/src/effect.rs
+++ b/server/src/effect.rs
@@ -100,13 +100,13 @@ impl Effect {
     pub fn modifications(&self) -> Vec<Stat> {
         match self {
             Effect::Vulnerable => vec![Stat::RedDamageTaken],
-            Effect::Block => vec![Stat::RedDamageTaken],
-            Effect::Buff => vec![Stat::RedPower, Stat::Speed],
+            Effect::Block => vec![Stat::RedDamageTaken, Stat::BlueDamageTaken],
+            Effect::Buff => vec![Stat::BluePower, Stat::RedPower, Stat::Speed],
 
             Effect::Absorption => vec![Stat::RedPower, Stat::BluePower],
 
             Effect::Amplify => vec![Stat::RedPower, Stat::BluePower],
-            Effect::Curse => vec![Stat::BlueDamageTaken],
+            Effect::Curse => vec![Stat::RedDamageTaken, Stat::BlueDamageTaken],
 
             Effect::Hybrid => vec![Stat::GreenPower],
             Effect::Wither => vec![Stat::GreenDamageTaken],
diff --git a/server/src/item.rs b/server/src/item.rs
index 2cae5571..b697828a 100644
--- a/server/src/item.rs
+++ b/server/src/item.rs
@@ -591,16 +591,20 @@ impl Item {
             // base skills
             Item::Attack => format!("Deal {:?}% RedPower as red damage.",
                 self.into_skill().unwrap().multiplier()),
-            Item::Block => format!("Reduce red damage taken by {:?}%.",
-                100 - self.into_skill().unwrap().effect()[0].get_multiplier()),
+            Item::Block => format!("Reduce red damage and blue damage taken by {:?}%. Block lasts {:?}T",
+                100 - self.into_skill().unwrap().effect()[0].get_multiplier(),
+                self.into_skill().unwrap().effect()[0].get_duration()),
 
 
             Item::Stun => format!("Stun target construct for {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_duration()),
-            Item::Buff => format!("Increase target construct RedPower and SpeedStat by {:?}%.",
-                self.into_skill().unwrap().effect()[0].get_multiplier() - 100),
-            Item::Debuff => format!("Slows the target reducing SpeedStat by {:?}%.",
-                100 - self.into_skill().unwrap().effect()[0].get_multiplier()),
+            Item::Buff => format!("Increase target construct RedPower BluePower SpeedStat by {:?}%. Buff lasts {:?}T",
+                self.into_skill().unwrap().effect()[0].get_multiplier() - 100,
+                self.into_skill().unwrap().effect()[0].get_duration()),
+
+            Item::Debuff => format!("Slows the target reducing SpeedStat by {:?}%. Debuff lasts {:?}T",
+                100 - self.into_skill().unwrap().effect()[0].get_multiplier(),
+                self.into_skill().unwrap().effect()[0].get_duration()),
             // specs
             // Base
             Item::Power => format!("Increases all power stats by {:?}%.
@@ -810,11 +814,10 @@ impl Item {
             Item::Counter|
             Item::CounterPlus |
             Item::CounterPlusPlus => format!(
-                "Applies counter and block {:?}T. Block reduces incoming red damage by {:?}%.
+                "Applies counter for  {:?}T.
                 Red damage taken during counter will trigger a counter attack.
                 Counter attack deals {:?}% RedPower as red damage.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
-                100 - self.into_skill().unwrap().effect()[1].get_multiplier(),
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier()),
 
             Item::Purge|
@@ -862,7 +865,7 @@ impl Item {
             Item::Silence|
             Item::SilencePlus |
             Item::SilencePlusPlus => format!(
-                "Block the target from using blue skills for {:?}T and deals {:?}% BluePower as blue damage.
+                "Disable the target from using blue skills for {:?}T and deals {:?}% BluePower as blue damage.
                 Deals 45% more Damage per blue skill on target.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().multiplier()),
@@ -885,7 +888,7 @@ impl Item {
             Item::Restrict|
             Item::RestrictPlus |
             Item::RestrictPlusPlus => format!(
-                "Block the target from using red skills for {:?}T and deals {:?}% RedPower as red damage.
+                "Disable the target from using red skills for {:?}T and deals {:?}% RedPower as red damage.
                 Deals 35% more damage per red skill on target.",
                 self.into_skill().unwrap().effect()[0].get_duration(),
                 self.into_skill().unwrap().multiplier()),
@@ -962,10 +965,10 @@ impl Item {
             Item::AmplifyPlusPlus   => vec![Item::AmplifyPlus, Item::AmplifyPlus, Item::AmplifyPlus],
 
             Item::Purge             => vec![Item::Debuff, Item::Green, Item::Green],  // Needs flavour
-            Item::Invert            => vec![Item::Debuff, Item::Red, Item::Blue],
+            Item::Invert            => vec![Item::Debuff, Item::Red, Item::Green],
             Item::Restrict          => vec![Item::Debuff, Item::Red, Item::Red],
             Item::Silence           => vec![Item::Debuff, Item::Blue, Item::Blue],
-            Item::Curse             => vec![Item::Debuff, Item::Red, Item::Green],
+            Item::Curse             => vec![Item::Debuff, Item::Red, Item::Blue],
             Item::Decay             => vec![Item::Debuff, Item::Green,  Item::Blue],
             Item::RestrictPlus      => vec![Item::Restrict, Item::Restrict, Item::Restrict],
             Item::RestrictPlusPlus  => vec![Item::RestrictPlus, Item::RestrictPlus, Item::RestrictPlus],
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 26a7525b..3659a19d 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -765,9 +765,9 @@ impl Skill {
             Skill::HealPlus => 185, //GG
             Skill::HealPlusPlus => 270, //GG
 
-            Skill::SiphonTick=> 20, // GB
-            Skill::SiphonTickPlus => 25,
-            Skill::SiphonTickPlusPlus => 30,
+            Skill::SiphonTick=> 25, // GB
+            Skill::SiphonTickPlus => 30,
+            Skill::SiphonTickPlusPlus => 40,
 
             Skill::Slay=> 40, // RG
             Skill::SlayPlus => 60,
@@ -782,9 +782,9 @@ impl Skill {
             Skill::ElectrocuteTickPlus => 100,
             Skill::ElectrocuteTickPlusPlus => 130,
 
-            Skill::CounterAttack=> 70,
-            Skill::CounterAttackPlus => 95,
-            Skill::CounterAttackPlusPlus => 120,
+            Skill::CounterAttack=> 120,
+            Skill::CounterAttackPlus => 160,
+            Skill::CounterAttackPlusPlus => 230,
 
             Skill::Purify=> 45, //Green dmg (heal)
             Skill::PurifyPlus => 70,
@@ -803,17 +803,17 @@ impl Skill {
             Skill::SustainPlusPlus => 230,
 
             // Stun Base
-            Skill::Sleep=> 240, //Green dmg (heal)
-            Skill::SleepPlus => 300,
+            Skill::Sleep=> 200, //Green dmg (heal)
+            Skill::SleepPlus => 290,
             Skill::SleepPlusPlus => 400,
 
             Skill::Banish=> 40, //Green dmg (heal)
             Skill::BanishPlus => 75,
             Skill::BanishPlusPlus => 125,
 
-            Skill::Bash=> 65,
-            Skill::BashPlus => 95,
-            Skill::BashPlusPlus => 140,
+            Skill::Bash=> 45,
+            Skill::BashPlus => 65,
+            Skill::BashPlusPlus => 100,
 
             // Debuff Base
             Skill::DecayTick=> 33,
@@ -857,9 +857,9 @@ impl Skill {
             Skill::BanishPlus       => vec![ConstructEffect {effect: Effect::Banish, duration: 2, meta: None, tick: None}],
             Skill::BanishPlusPlus   => vec![ConstructEffect {effect: Effect::Banish, duration: 2, meta: None, tick: None}],
             Skill::Block            => vec![ConstructEffect {effect: Effect::Block,  duration: 1,
-                                                meta: Some(EffectMeta::Multiplier(50)), tick: None}],
+                                                meta: Some(EffectMeta::Multiplier(35)), tick: None}],
             Skill::Buff             => vec![ConstructEffect {effect: Effect::Buff, duration: 2,
-                                                meta: Some(EffectMeta::Multiplier(125)), tick: None }],
+                                                meta: Some(EffectMeta::Multiplier(130)), tick: None }],
 
             Skill::Electrify            => vec![ConstructEffect {effect: Effect::Electric, duration: 1,
                                                     meta: Some(EffectMeta::Skill(Skill::Electrocute)), tick: None}],
@@ -931,17 +931,11 @@ impl Skill {
             Skill::InvertPlusPlus => vec![ConstructEffect {effect: Effect::Invert, duration: 4, meta: None, tick: None}],
 
             Skill::Counter         => vec![ConstructEffect {effect: Effect::Counter, duration: 1,
-                                            meta: Some(EffectMeta::Skill(Skill::CounterAttack)), tick: None},
-                                        ConstructEffect {effect: Effect::Block, duration: 1,
-                                            meta: Some(EffectMeta::Multiplier(60)), tick: None}],
+                                            meta: Some(EffectMeta::Skill(Skill::CounterAttack)), tick: None}],
             Skill::CounterPlus     => vec![ConstructEffect {effect: Effect::Counter, duration: 1,
-                                            meta: Some(EffectMeta::Skill(Skill::CounterAttackPlus)), tick: None},
-                                        ConstructEffect {effect: Effect::Block, duration: 1,
-                                            meta: Some(EffectMeta::Multiplier(40)), tick: None}],
+                                            meta: Some(EffectMeta::Skill(Skill::CounterAttackPlus)), tick: None}],
             Skill::CounterPlusPlus => vec![ConstructEffect {effect: Effect::Counter, duration: 1,
-                                            meta: Some(EffectMeta::Skill(Skill::CounterAttackPlusPlus)), tick: None},
-                                        ConstructEffect {effect: Effect::Block, duration: 1,
-                                            meta: Some(EffectMeta::Multiplier(20)), tick: None}],
+                                            meta: Some(EffectMeta::Skill(Skill::CounterAttackPlusPlus)), tick: None}],
 
             Skill::Reflect          => vec![ConstructEffect {effect: Effect::Reflect, duration: 1, meta: None, tick: None }],
             Skill::ReflectPlus      => vec![ConstructEffect {effect: Effect::Reflect, duration: 1, meta: None, tick: None }],
@@ -1060,7 +1054,7 @@ impl Skill {
             Skill::AmplifyPlusPlus => Some(1),
             Skill::Hybrid|
             Skill::HybridPlus |
-            Skill::HybridPlusPlus => Some(3),
+            Skill::HybridPlusPlus => Some(1),
 
             Skill::Invert=> Some(2),
             Skill::InvertPlus => Some(2),
@@ -1080,7 +1074,7 @@ impl Skill {
             Skill::LinkPlus => Some(2),
             Skill::LinkPlusPlus => Some(2),
 
-            Skill::Silence=> Some(3),
+            Skill::Silence=> Some(2),
             Skill::SilencePlus => Some(2),
             Skill::SilencePlusPlus => Some(2),
 
@@ -1094,11 +1088,11 @@ impl Skill {
 
             Skill::Banish |
             Skill::BanishPlus |
-            Skill::BanishPlusPlus => Some(3),
+            Skill::BanishPlusPlus => Some(2),
 
-            Skill::Haste=> Some(2),
-            Skill::HastePlus => Some(2),
-            Skill::HastePlusPlus => Some(2),
+            Skill::Haste=> Some(1),
+            Skill::HastePlus => Some(1),
+            Skill::HastePlusPlus => Some(1),
 
             Skill::Reflect |
             Skill::ReflectPlus |
@@ -1116,9 +1110,9 @@ impl Skill {
             Skill::SlayPlus => None,
             Skill::SlayPlusPlus => None,
 
-            Skill::Sleep=> Some(3),
-            Skill::SleepPlus => Some(3),
-            Skill::SleepPlusPlus => Some(3),
+            Skill::Sleep=> Some(2),
+            Skill::SleepPlus => Some(2),
+            Skill::SleepPlusPlus => Some(2),
 
             Skill::Sustain |
             Skill::SustainPlus |
@@ -1445,10 +1439,6 @@ fn counter(source: &mut Construct, target: &mut Construct, mut results: Resoluti
     results.push(Resolution::new(source, target)
         .event(target.add_effect(skill, skill.effect()[0])));
 
-    results.push(Resolution::new(source, target)
-        .event(target.add_effect(skill, skill.effect()[1]))
-        .stages(EventStages::PostOnly));
-
     return results;
 }
 

From 2617183b33141e7b51d0cf282ad7ed9634a5832e Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 11:36:56 +1000
Subject: [PATCH 32/53] fix curse animation (wouldn't go off if already cast
 once)

---
 client/src/components/anims/curse.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx
index 0747b1c8..f6305e4a 100644
--- a/client/src/components/anims/curse.jsx
+++ b/client/src/components/anims/curse.jsx
@@ -21,9 +21,9 @@ class Curse extends Component {
     render() {
         return (
             <svg
-                id='curse'
                 class="skill-animation"
                 version="1.1"
+                id="curse"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 198 200">
                 <defs>
@@ -64,7 +64,7 @@ class Curse extends Component {
             targets: ['#curse circle'],
             r: 0,
             easing: 'easeInOutSine',
-            delay: TIMES.TARGET_DURATION_MS / 2,
+            delay: TIMES.TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
             direction: 'reverse',
         }));

From a254c1d0a71a1cd86c9aa727e02750ee4e47f675 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 11:49:41 +1000
Subject: [PATCH 33/53] client side descriptions, add counterattack anim

---
 client/src/utils.jsx | 17 +++++++++--------
 server/src/skill.rs  |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 88719c34..42761a0a 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -143,6 +143,7 @@ function randomPoints(numPoints, radius, dimensions) {
 
 const removeTier = skill => {
     if (!skill) return skill;
+    if (skill.includes('CounterAttack')) return 'CounterAttack';
     if (skill.includes('SiphonTick')) return 'SiphonTick';
     if (skill.includes('TriageTick')) return 'TriageTick';
     if (skill.includes('DecayTick')) return 'DecayTick';
@@ -242,17 +243,17 @@ function effectInfo(i) {
     console.log(i);
 
     function multiplier(s) { // Update later to use server info in future
-        if (s === 'CounterAttack') return 70;
-        if (s === 'CounterAttack+') return 95;
-        if (s === 'CounterAttack++') return 120;
+        if (s === 'CounterAttack') return 120;
+        if (s === 'CounterAttack+') return 160;
+        if (s === 'CounterAttack++') return 230;
 
         if (s === 'DecayTick') return 33;
         if (s === 'DecayTick+') return 45;
         if (s === 'DecayTick++') return 70;
 
-        if (s === 'SiphonTick') return 20;
-        if (s === 'SiphonTick+') return 25;
-        if (s === 'SiphonTick++') return 30;
+        if (s === 'SiphonTick') return 25;
+        if (s === 'SiphonTick+') return 30;
+        if (s === 'SiphonTick++') return 40;
 
         if (s === 'TriageTick') return 75;
         if (s === 'TriageTick+') return 110;
@@ -267,8 +268,8 @@ function effectInfo(i) {
     switch (i.effect) {
     case 'Amplify': return `Increases construct RedPower and BluePower by  ${i.meta[1] - 100}%`;
     case 'Banish': return 'Banished construct cannot cast or take damage';
-    case 'Block': return `Reduces construct red damage taken by ${100 - i.meta[1]}%`;
-    case 'Buff': return `Increases construct RedPower and SpeedStat by ${i.meta[1] - 100}%`;
+    case 'Block': return `Reduces construct red damage and blue damage taken by ${100 - i.meta[1]}%`;
+    case 'Buff': return `Increases construct RedPower BluePower SpeedStat by ${i.meta[1] - 100}%`;
     case 'Sustain': return 'Construct cannot be KO while active. Additionally provides immunity to disables';
     case 'Curse': return `Construct will take ${i.meta[1] - 100}% increased red and blue damage`;
     case 'Haste': return `Construct has  ${i.meta[1] - 100}% increased SpeedStat. Red attack skills will trigger a HasteStrike dealing 30% SpeedStat as red damage.`;
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 3659a19d..6cbb383e 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -1446,7 +1446,7 @@ fn counter_attack(source: &mut Construct, target: &mut Construct, mut results: R
     let amount = source.red_power().pct(skill.multiplier());
     target.deal_red_damage(skill, amount)
         .into_iter()
-        .for_each(|e| results.push(Resolution::new(source, target).event(e).stages(EventStages::StartPost)));
+        .for_each(|e| results.push(Resolution::new(source, target).event(e)));
 
     return results;
 }

From 663faa2b2484752a65df4ba8aa375193cd94d75b Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 12:14:20 +1000
Subject: [PATCH 34/53] replace single quotes with double quotes (was causing
 curse to bug out)

---
 client/src/components/anims/blast.jsx       | 2 +-
 client/src/components/anims/buff.jsx        | 2 +-
 client/src/components/anims/chaos.jsx       | 2 +-
 client/src/components/anims/counter.jsx     | 4 ++--
 client/src/components/anims/debuff.jsx      | 2 +-
 client/src/components/anims/decay.jsx       | 2 +-
 client/src/components/anims/electrify.jsx   | 2 +-
 client/src/components/anims/electrocute.jsx | 2 +-
 client/src/components/anims/haste.jsx       | 2 +-
 client/src/components/anims/heal.jsx        | 4 ++--
 client/src/components/anims/hex.jsx         | 2 +-
 client/src/components/anims/hybrid.jsx      | 4 ++--
 client/src/components/anims/intercept.jsx   | 2 +-
 client/src/components/anims/link.jsx        | 2 +-
 client/src/components/anims/purge.jsx       | 2 +-
 client/src/components/anims/purify.jsx      | 2 +-
 client/src/components/anims/recharge.jsx    | 2 +-
 client/src/components/anims/red.block.jsx   | 2 +-
 client/src/components/anims/red.circles.jsx | 2 +-
 client/src/components/anims/reflect.jsx     | 2 +-
 client/src/components/anims/restrict.jsx    | 2 +-
 client/src/components/anims/ruin.jsx        | 2 +-
 client/src/components/anims/silence.jsx     | 2 +-
 client/src/components/anims/sleep.jsx       | 2 +-
 client/src/components/anims/strike.jsx      | 2 +-
 client/src/components/anims/stun.jsx        | 2 +-
 client/src/components/anims/sustain.jsx     | 2 +-
 client/src/components/anims/triage.jsx      | 4 ++--
 client/src/components/anims/triage.tick.jsx | 4 ++--
 29 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx
index 21d985fa..c11bdc95 100644
--- a/client/src/components/anims/blast.jsx
+++ b/client/src/components/anims/blast.jsx
@@ -36,7 +36,7 @@ class Blast extends Component {
     render() {
         return (
             <svg
-                id='blast'
+                id="blast"
                 class="skill-animation"
                 version="1.1"
                 transform-box='fill-box'
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
index c73081d0..1dc54cf9 100644
--- a/client/src/components/anims/buff.jsx
+++ b/client/src/components/anims/buff.jsx
@@ -21,7 +21,7 @@ class Buff extends Component {
     render() {
         return (
             <svg
-                id='buff'
+                id="buff"
                 class="skill-animation white"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 447ea3f0..d009c116 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -52,7 +52,7 @@ class Chaos extends Component {
                             <feMergeNode in="SourceGraphic" />
                         </feMerge>
                     </filter>
-                    <filter id='chaosRedFilter'>
+                    <filter id="chaosRedFilter">
                         <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
                         <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                     </filter>
diff --git a/client/src/components/anims/counter.jsx b/client/src/components/anims/counter.jsx
index 0ae9d709..e19d3518 100644
--- a/client/src/components/anims/counter.jsx
+++ b/client/src/components/anims/counter.jsx
@@ -21,13 +21,13 @@ class Counter extends Component {
     render({ team }) {
         return (
             <svg
-                class='skill-animation red'
+                class="skill-animation red"
                 version="1.1"
                 id="counter"
                 xmlns="http://www.w3.org/2000/svg"
                 style={{ transform: team ? 'rotate3d(1, 0, 0, 180deg)' : '' }}
                 viewBox="0 0 256 256">
-                <filter id='counterFilter'>
+                <filter id="counterFilter">
                     <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index 0f68d33d..14bbab7a 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -21,7 +21,7 @@ class Debuff extends Component {
     render() {
         return (
             <svg
-                id='debuff'
+                id="debuff"
                 class="skill-animation white"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx
index ebd67e7d..5b1c8b4a 100644
--- a/client/src/components/anims/decay.jsx
+++ b/client/src/components/anims/decay.jsx
@@ -22,7 +22,7 @@ class Decay extends Component {
     render() {
         return (
             <svg
-                id='decay'
+                id="decay"
                 class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/electrify.jsx b/client/src/components/anims/electrify.jsx
index a0226894..06ed0e20 100644
--- a/client/src/components/anims/electrify.jsx
+++ b/client/src/components/anims/electrify.jsx
@@ -23,7 +23,7 @@ class Electrify extends Component {
     render() {
         return (
             <svg
-                class='skill-animation blue'
+                class="skill-animation blue"
                 version="1.1"
                 id="electrify"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/electrocute.jsx b/client/src/components/anims/electrocute.jsx
index 0d8fdc79..581a3db6 100644
--- a/client/src/components/anims/electrocute.jsx
+++ b/client/src/components/anims/electrocute.jsx
@@ -23,7 +23,7 @@ class Electrocute extends Component {
     render() {
         return (
             <svg
-                class='skill-animation blue'
+                class="skill-animation blue"
                 version="1.1"
                 id="electrify"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx
index b93a7b68..fac90bb0 100644
--- a/client/src/components/anims/haste.jsx
+++ b/client/src/components/anims/haste.jsx
@@ -21,7 +21,7 @@ class Haste extends Component {
     render() {
         return (
             <svg
-                id='haste'
+                id="haste"
                 class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx
index c0459ffd..6e84c81b 100644
--- a/client/src/components/anims/heal.jsx
+++ b/client/src/components/anims/heal.jsx
@@ -37,8 +37,8 @@ class Heal extends Component {
     render() {
         return (
             <svg
-                class='skill-animation'
-                id='heal'
+                class="skill-animation"
+                id="heal"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index c279225d..fb31b373 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -23,7 +23,7 @@ class Hex extends Component {
     render() {
         return (
             <svg
-                class='skill-animation blue'
+                class="skill-animation blue"
                 version="1.1"
                 id="hex"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx
index 7f2a2a58..89884a32 100644
--- a/client/src/components/anims/hybrid.jsx
+++ b/client/src/components/anims/hybrid.jsx
@@ -21,8 +21,8 @@ class Hybrid extends Component {
     render() {
         return (
             <svg
-                class='skill-animation'
-                id='hybrid'
+                class="skill-animation"
+                id="hybrid"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx
index 1edb45a1..5049febf 100644
--- a/client/src/components/anims/intercept.jsx
+++ b/client/src/components/anims/intercept.jsx
@@ -25,7 +25,7 @@ class Intercept extends Component {
     render() {
         return (
             <svg
-                class='skill-animation'
+                class="skill-animation"
                 version="1.1"
                 id="intercept"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/link.jsx b/client/src/components/anims/link.jsx
index e20d5bbf..66ecdaf4 100644
--- a/client/src/components/anims/link.jsx
+++ b/client/src/components/anims/link.jsx
@@ -22,7 +22,7 @@ class Link extends Component {
     render() {
         return (
             <svg
-                class='skill-animation blue'
+                class="skill-animation blue"
                 version="1.1"
                 id="link"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/purge.jsx b/client/src/components/anims/purge.jsx
index 34bd6c68..25cc6bdd 100644
--- a/client/src/components/anims/purge.jsx
+++ b/client/src/components/anims/purge.jsx
@@ -21,7 +21,7 @@ class Purge extends Component {
     render() {
         return (
             <svg
-                class='skill-animation green'
+                class="skill-animation green"
                 version="1.1"
                 id="purge"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx
index adc83efd..1e605b79 100644
--- a/client/src/components/anims/purify.jsx
+++ b/client/src/components/anims/purify.jsx
@@ -44,7 +44,7 @@ class Purify extends Component {
     render() {
         return (
             <svg
-                class='skill-animation green'
+                class="skill-animation green"
                 version="1.1"
                 id="purify"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/recharge.jsx b/client/src/components/anims/recharge.jsx
index 7f224604..164dacd4 100644
--- a/client/src/components/anims/recharge.jsx
+++ b/client/src/components/anims/recharge.jsx
@@ -21,7 +21,7 @@ class Recharge extends Component {
     render() {
         return (
             <svg
-                class='skill-animation red'
+                class="skill-animation red"
                 version="1.1"
                 id="recharge"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx
index 4adb850d..515bcb27 100644
--- a/client/src/components/anims/red.block.jsx
+++ b/client/src/components/anims/red.block.jsx
@@ -21,7 +21,7 @@ class Block extends Component {
     render() {
         return (
             <svg
-                class='skill-animation red'
+                class="skill-animation red"
                 version="1.1"
                 id="block"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/red.circles.jsx b/client/src/components/anims/red.circles.jsx
index 4b6134e1..a919dac4 100644
--- a/client/src/components/anims/red.circles.jsx
+++ b/client/src/components/anims/red.circles.jsx
@@ -21,7 +21,7 @@ class Intercept extends Component {
     render({ player }) {
         return (
             <svg
-                class='skill-animation red'
+                class="skill-animation red"
                 version="1.1"
                 id="intercept"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx
index ac18ab0e..dc0dc2f9 100644
--- a/client/src/components/anims/reflect.jsx
+++ b/client/src/components/anims/reflect.jsx
@@ -24,7 +24,7 @@ class Refl extends Component {
 
         return (
             <svg
-                class='skill-animation'
+                class="skill-animation"
                 version="1.1"
                 id="reflect"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/restrict.jsx b/client/src/components/anims/restrict.jsx
index ac663cb8..875d6a5a 100644
--- a/client/src/components/anims/restrict.jsx
+++ b/client/src/components/anims/restrict.jsx
@@ -21,7 +21,7 @@ class Restrict extends Component {
     render() {
         return (
             <svg
-                class='skill-animation red'
+                class="skill-animation red"
                 version="1.1"
                 id="restrict"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/ruin.jsx b/client/src/components/anims/ruin.jsx
index 9738d7a8..c7a4423f 100644
--- a/client/src/components/anims/ruin.jsx
+++ b/client/src/components/anims/ruin.jsx
@@ -23,7 +23,7 @@ class Ruin extends Component {
 
         return (
             <svg
-                class='skill-animation blue'
+                class="skill-animation blue"
                 version="1.1"
                 id="ruin"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/silence.jsx b/client/src/components/anims/silence.jsx
index f30d1bb9..f46dcced 100644
--- a/client/src/components/anims/silence.jsx
+++ b/client/src/components/anims/silence.jsx
@@ -21,7 +21,7 @@ class Silence extends Component {
     render() {
         return (
             <svg
-                class='skill-animation'
+                class="skill-animation"
                 version="1.1"
                 id="silence"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/sleep.jsx b/client/src/components/anims/sleep.jsx
index c76e1e55..307d8476 100644
--- a/client/src/components/anims/sleep.jsx
+++ b/client/src/components/anims/sleep.jsx
@@ -43,7 +43,7 @@ class Sleep extends Component {
 
         return (
             <svg
-                class='skill-animation green'
+                class="skill-animation green"
                 version="1.1"
                 id="sleep"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx
index c5023837..d972c37b 100644
--- a/client/src/components/anims/strike.jsx
+++ b/client/src/components/anims/strike.jsx
@@ -28,7 +28,7 @@ class Strike extends Component {
 
         return (
             <svg
-                class='strike-anim'
+                class="strike-anim"
                 version="1.1"
                 id="strike"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx
index 5f53c5a1..11b911d9 100644
--- a/client/src/components/anims/stun.jsx
+++ b/client/src/components/anims/stun.jsx
@@ -26,7 +26,7 @@ class Stun extends Component {
 
         return (
             <svg
-                class='skill-animation white'
+                class="skill-animation white"
                 version="1.1"
                 id="stun"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/sustain.jsx b/client/src/components/anims/sustain.jsx
index a206e250..d93febc3 100644
--- a/client/src/components/anims/sustain.jsx
+++ b/client/src/components/anims/sustain.jsx
@@ -21,7 +21,7 @@ class Sustain extends Component {
     render({ team }) {
         return (
             <svg
-                class='skill-animation green'
+                class="skill-animation green"
                 version="1.1"
                 id="sustain"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/anims/triage.jsx b/client/src/components/anims/triage.jsx
index 73d11d92..7eb7678e 100644
--- a/client/src/components/anims/triage.jsx
+++ b/client/src/components/anims/triage.jsx
@@ -37,8 +37,8 @@ class Triage extends Component {
     render() {
         return (
             <svg
-                class='skill-animation'
-                id='triage'
+                class="skill-animation"
+                id="triage"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
diff --git a/client/src/components/anims/triage.tick.jsx b/client/src/components/anims/triage.tick.jsx
index afeb6034..ecda83f1 100644
--- a/client/src/components/anims/triage.tick.jsx
+++ b/client/src/components/anims/triage.tick.jsx
@@ -37,8 +37,8 @@ class TriageTick extends Component {
     render() {
         return (
             <svg
-                class='skill-animation'
-                id='triageTick'
+                class="skill-animation"
+                id="triageTick"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">

From d665eec8a74d2d800f7f62ff86caccde7de7ae86 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 12:28:36 +1000
Subject: [PATCH 35/53] changelog

---
 CHANGELOG.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4283869..59f027bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,10 +21,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Game phase
     - Made general performance improvements
-    - Now has default tutorial text for the first round
-    - Will tell the player to select skills and then the targets
+    - Now has default tutorial text for the first round (tells the player to select skills and then the targets)
 
-# Skill Balance Updates
 - Buff 
     - Previously increased red power and speed stat by 25%
     - Now increases red power, blue power and speed stat by 30%
@@ -36,6 +34,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Counter
     - No longer applies block effect
     - CounterAttack multiplier increased from 70/95/120 -> 120/160/230
+    - Will now animate an attack animation on counter attack
+
 - Haste
     - Cooldown reduced to 1T (was 2T)
 - Sleep
@@ -54,6 +54,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Curse
     - Now created by combining Debuff + RB was Debuff + RG
     - Fixed issue where curse was only increasing blue damage taken instead of red and blue
+    - Fixed an issue where the animation would not display if it occured already
 - Invert
     - Now created by combining Debuff + RG was debuff + RB
 

From 75f4c6236a8ac7f1f0f577217b6baefbad607519 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 13:05:19 +1000
Subject: [PATCH 36/53] separate out demo tab

---
 CHANGELOG.md                            |  8 +++++
 client/src/components/anims/counter.jsx |  2 +-
 client/src/components/demo.jsx          | 18 +++++-----
 client/src/components/welcome.jsx       | 47 ++++++++++++++-----------
 4 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59f027bf..e86d66ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,23 +38,31 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Haste
     - Cooldown reduced to 1T (was 2T)
+
 - Sleep
     - Cooldown reduced to 2T (was 3T)
     - Skill multiplier reduced from 240/300/400 -> 200/290/400
+
 - Hybrid
     - Cooldown reduced to 1T (was 3T)
+
 - Silence
     - Cooldown reduced to 2T (was 3T)
+
 - Banish
     - Cooldown reduced to 2T (was 3T)
+
 - Siphon
     - Skill multiplier increased from 20/25/30 -> 25/30/40
+
 - Bash
     - Skill multiplier reduced from 65/95/140 -> 45/65/100
+
 - Curse
     - Now created by combining Debuff + RB was Debuff + RG
     - Fixed issue where curse was only increasing blue damage taken instead of red and blue
     - Fixed an issue where the animation would not display if it occured already
+
 - Invert
     - Now created by combining Debuff + RG was debuff + RB
 
diff --git a/client/src/components/anims/counter.jsx b/client/src/components/anims/counter.jsx
index e19d3518..ec7a0399 100644
--- a/client/src/components/anims/counter.jsx
+++ b/client/src/components/anims/counter.jsx
@@ -60,7 +60,7 @@ class Counter extends Component {
         this.animations.push(anime({
             targets: ['#counter'],
             rotateX: 180,
-            delay: TIMES.TARGET_DELAY_MS * 2,
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 3,
             duration: TIMES.TARGET_DURATION_MS / 2,
             easing: 'easeOutSine',
         }));
diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx
index 57c814ee..6735998e 100644
--- a/client/src/components/demo.jsx
+++ b/client/src/components/demo.jsx
@@ -1,11 +1,11 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 
-const actions = require('../actions');
+// const actions = require('../actions');
 const shapes = require('./shapes');
 
 const { ConstructAvatar } = require('./construct');
-const { ConstructAnimation } = require('./animations');
+// const { ConstructAnimation } = require('./animations');
 
 const addState = connect(
     function receiveState(state) {
@@ -20,15 +20,15 @@ const addState = connect(
             itemInfo,
             demo,
         };
-    },
+    }
 
-    function receiveDispatch(dispatch) {
+/*    function receiveDispatch(dispatch) {
         function setAnimTarget(anim) {
             dispatch(actions.setAnimTarget(anim));
         }
 
         return { setAnimTarget };
-    }
+    } */
 );
 
 
@@ -38,7 +38,7 @@ function Demo(args) {
         itemInfo,
         account,
 
-        setAnimTarget,
+        // setAnimTarget,
     } = args;
 
     if (!demo || !itemInfo.items.length || account) return false;
@@ -90,7 +90,7 @@ function Demo(args) {
                             VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
                         </h2>
                         <p>
-                            Combine the colour base items with an array of skills and specialisations to build powerful variants.
+                            Combine the colour base items with skills and specialisations to build an array of powerful variants.
                         </p>
                     </div>
                     <div>&nbsp;</div>
@@ -179,10 +179,10 @@ function Demo(args) {
     };
 
     return (
-        <section class='demo news bottom'>
+        <section class='demo news top'>
+            {gameDemo()}
             {vboxDemo()}
             {vboxConstructs()}
-            {gameDemo()}
         </section>
     );
 }
diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx
index 558e5719..2a1bfa67 100644
--- a/client/src/components/welcome.jsx
+++ b/client/src/components/welcome.jsx
@@ -10,7 +10,6 @@ const Demo = require('./demo');
 function Welcome() {
     const page = this.state.page || 'register';
 
-    const navRegister = () => this.setState({ page: 'register' });
     const pageEl = () => {
         if (page === 'login') return <Login />;
         if (page === 'register') return <Register />;
@@ -18,6 +17,26 @@ function Welcome() {
         return false;
     };
 
+    const news = (
+        <div class="news">
+            <p> Welcome to mnml.</p>
+
+            <p> MNML is a turn-based 1v1 strategy game in an abstract setting. </p>
+            <p>
+                Build a unique team of 3 constructs from a range of skills and specialisations.<br />
+                Outplay your opponent in multiple rounds by adapting to an always shifting meta. <br />
+                Simple rules, complex interactions and unique mechanics.<br />
+            </p>
+            <p> Free to play, no pay to win. Register to start playing.<br /></p>
+
+            <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
+        </div>
+    );
+
+    const main = (['login', 'register', 'help'].includes(page)) 
+        ? <section>{news}{pageEl()}</section>
+        : <Demo />;
+
     return (
         <main class="menu welcome">
             <header>
@@ -39,6 +58,12 @@ function Welcome() {
                         onClick={() => this.setState({ page: 'register' })}>
                         Register
                     </button>
+                    <button
+                        class={`login-btn ${page === 'info' ? 'highlight' : ''}`}
+                        disabled={page === 'info'}
+                        onClick={() => this.setState({ page: 'info' })}>
+                        Info
+                    </button>
                     <button
                         class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
                         disabled={page === 'help'}
@@ -48,26 +73,8 @@ function Welcome() {
                 </div>
             </header>
             <div class="top">
-                <section>
-                    <div class="news">
-                        <p>
-                            Welcome to mnml.
-                        </p>
-                        <p> MNML is a turn-based 1v1 strategy game in an abstract setting. </p>
-                        <p>
-                            Build a unique team of 3 constructs from a range of skills and specialisations.<br />
-                            Outplay your opponent in multiple rounds by adapting to an always shifting meta. <br />
-                            Simple rules, complex interactions and unique mechanics.<br />
-                        </p>
-                        <p>
-                            Free to play, no pay to win. Register to start playing.<br />
-                        </p>
-                        <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
-                    </div>
-                    {pageEl()}
-                </section>
+                {main}
             </div>
-            <Demo />
         </main>
     );
 }

From 0c3cd46ce2c4084cecb96383be9b95d5c6b35c17 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 13:33:24 +1000
Subject: [PATCH 37/53] speed up the demo

---
 client/src/events.jsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/events.jsx b/client/src/events.jsx
index f088d4e7..5c10e2e3 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -247,13 +247,13 @@ function registerEvents(store) {
             if (account) return false;
             store.dispatch(actions.setDemo(initial));
             store.dispatch(actions.setAnimTarget(null));
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0] }))), 2000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1] }))), 4000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1, 2] }))), 6000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['Strike', '', ''] }))), 8000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0], items: ['Strike', '', ''], equipping: true }))), 10000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 12000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { items: ['', '', ''], equipped: true, equipping: false }))), 12000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0] }))), 500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1] }))), 1000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1, 2] }))), 1500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['Strike', '', ''] }))), 2500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0], items: ['Strike', '', ''], equipping: true }))), 3500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 4250);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { items: ['', '', ''], equipped: true, equipping: false }))), 4250);
 
             setTimeout(() => {
                 const { itemInfo } = store.getState();
@@ -263,7 +263,7 @@ function registerEvents(store) {
                     player: false,
                     direction: 0,
                 }));
-            }, 14000);
+            }, 1000);
 
             setTimeout(() => {
                 const { itemInfo } = store.getState();
@@ -273,9 +273,9 @@ function registerEvents(store) {
                     player: true,
                     direction: 0,
                 }));
-            }, 16000);
+            }, 3000);
 
-            setTimeout(startDemo, 20000);
+            setTimeout(startDemo, 6000);
         };
 
         startDemo();

From 188ae0de6a5220ba39751eba9034dc245b2f21a3 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 16:11:00 +1000
Subject: [PATCH 38/53] vbox demo generate random skill combos, disable part of
 broken curse anim

---
 client/src/components/demo.jsx |  6 +++---
 client/src/events.jsx          | 33 ++++++++++++++++++---------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx
index 6735998e..45dcf71d 100644
--- a/client/src/components/demo.jsx
+++ b/client/src/components/demo.jsx
@@ -43,7 +43,7 @@ function Demo(args) {
 
     if (!demo || !itemInfo.items.length || account) return false;
 
-    const { combiner, items, equipping, equipped, players } = demo;
+    const { combiner, items, equipping, equipped, players, combo } = demo;
 
     const vboxDemo = () => {
         function inventoryBtn(i, j) {
@@ -90,7 +90,7 @@ function Demo(args) {
                             VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
                         </h2>
                         <p>
-                            Combine the colour base items with skills and specialisations to build an array of powerful variants.
+                            Combine colours with base skills and specialisations to build an array of powerful variants.
                         </p>
                     </div>
                     <div>&nbsp;</div>
@@ -122,7 +122,7 @@ function Demo(args) {
                 <ConstructAvatar construct={c} />
                 <div class="skills">
                     {equipped
-                        ? <button>Strike</button>
+                        ? <button>{combo}</button>
                         : <button disabled={!equipping} class={btnClass}>SKILL</button>
                     }
                     <button disabled={!equipping} class={btnClass}>SKILL</button>
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 5c10e2e3..a957b380 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -234,39 +234,42 @@ function registerEvents(store) {
 
     function setDemo(d) {
 
-        const initial = {
+        const vboxDemo = {
             players: d,
             combiner: [],
-            items: ['Red', 'Red', 'Attack'],
             equipped: false,
             equipping: false,
         };
 
         const startDemo = () => {
-            const { account } = store.getState();
+            const { account, itemInfo } = store.getState();
             if (account) return false;
-            store.dispatch(actions.setDemo(initial));
+            if (!itemInfo || itemInfo.items.length === 0) return setTimeout(startDemo, 500);
             store.dispatch(actions.setAnimTarget(null));
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0] }))), 500);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1] }))), 1000);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1, 2] }))), 1500);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['Strike', '', ''] }))), 2500);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0], items: ['Strike', '', ''], equipping: true }))), 3500);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 4250);
-            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { items: ['', '', ''], equipped: true, equipping: false }))), 4250);
+            const bases = ['Attack', 'Stun', 'Buff', 'Debuff', 'Block'];
+            const combo = sample(itemInfo.combos.filter(i => bases.some(b => i.components.includes(b))));
+            vboxDemo.combo = combo.item;
+            vboxDemo.items = combo.components;
+            store.dispatch(actions.setDemo(vboxDemo));
+
+
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, vboxDemo, { combiner: [0] }))), 500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, vboxDemo, { combiner: [0, 1] }))), 1000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, vboxDemo, { combiner: [0, 1, 2] }))), 1500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, vboxDemo, { combiner: [], items: [vboxDemo.combo, '', ''] }))), 2500);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, vboxDemo, { combiner: [0], items: [vboxDemo.combo, '', ''], equipping: true }))), 3000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, vboxDemo, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 4000);
 
             setTimeout(() => {
-                const { itemInfo } = store.getState();
                 return store.dispatch(actions.setAnimTarget({
                     skill: sample(itemInfo.items.filter(i => i.skill)).item,
                     constructId: d[1].constructs[0].id,
                     player: false,
                     direction: 0,
                 }));
-            }, 1000);
+            }, 500);
 
             setTimeout(() => {
-                const { itemInfo } = store.getState();
                 return store.dispatch(actions.setAnimTarget({
                     skill: sample(itemInfo.items.filter(i => i.skill)).item,
                     constructId: d[1].constructs[1].id,
@@ -275,7 +278,7 @@ function registerEvents(store) {
                 }));
             }, 3000);
 
-            setTimeout(startDemo, 6000);
+            return setTimeout(startDemo, 5000);
         };
 
         startDemo();

From 8ce7edd8415d20a80a1bdb6b65e3e4706b8a215d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 17:32:22 +1000
Subject: [PATCH 39/53] actually fix curse (anime doesn't seem to reset
 'reverse')

---
 client/src/components/anims/curse.jsx | 35 +++++++++++++++++++--------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx
index f6305e4a..d186a4d3 100644
--- a/client/src/components/anims/curse.jsx
+++ b/client/src/components/anims/curse.jsx
@@ -36,15 +36,15 @@ class Curse extends Component {
                     </filter>
                 </defs>
                 <g filter="url(#curseFilter)" class="blue" >
-                    <circle cx="100" cy="100" r="30" />
-                    <circle cx="100" cy="100" r="60" />
-                    <circle cx="100" cy="100" r="90" />
+                    <circle id="curseFilterOne" cx="100" cy="100" r="0" />
+                    <circle id="curseFilterTwo" cx="100" cy="100" r="0" />
+                    <circle id="curseFilterThree" cx="100" cy="100" r="0" />
                 </g>
 
                 <g class="white" style={{ strokeWidth: '2px' }}>
-                    <circle cx="100" cy="100" r="30" />
-                    <circle cx="100" cy="100" r="60" />
-                    <circle cx="100" cy="100" r="90" />
+                    <circle id="curseCircleOne" cx="100" cy="100" r="0" />
+                    <circle id="curseCircleTwo" cx="100" cy="100" r="0" />
+                    <circle id="curseCircleThree" cx="100" cy="100" r="0" />
                 </g>
             </svg>
         );
@@ -61,12 +61,27 @@ class Curse extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#curse circle'],
-            r: 0,
+            targets: ['#curseCircleOne', '#curseFilterOne'],
+            r: 30,
             easing: 'easeInOutSine',
-            delay: TIMES.TIMES.TARGET_DELAY_MS,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#curseCircleTwo', '#curseFilterTwo'],
+            r: 60,
+            easing: 'easeInOutSine',
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#curseCircleThree', '#curseFilterThree'],
+            r: 90,
+            easing: 'easeInOutSine',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
-            direction: 'reverse',
         }));
     }
 

From 83a87a64e3dbac1561c5031cdd88093e454b05c1 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 17:49:32 +1000
Subject: [PATCH 40/53] add inventory info hover if you have 1 or less items in
 inventory

---
 CHANGELOG.md                             | 3 +++
 client/src/components/vbox.component.jsx | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e86d66ca..b638b666 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Step by step tutorial
     - Will activate during the learn game for the first round
     - There is a button which will exit tutorial so you can continune the normal practice mode
+
 - Skill combo previews
     - You can now preview what item combos will create!
     - Click into the item in the info section table (top right) and it will be replaced with the new item
@@ -23,6 +24,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
     - Made general performance improvements
     - Now has default tutorial text for the first round (tells the player to select skills and then the targets)
 
+- Moved the login page demo to a new info tab, increased the speed of demo and it now creates random combos
+
 - Buff 
     - Previously increased red power and speed stat by 25%
     - Now increases red power, blue power and speed stat by 30%
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index c2c1a51a..81155b66 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -404,9 +404,12 @@ class Vbox extends preact.Component {
                 return true;
             }
 
+            const inventoryHover = vbox.bound.length > 1 ? false : e => hoverInfo(e, 'inventory');
+
             return (
                 <div class={inventoryClass}
                     onMouseDown={inventoryClick}
+                    onMouseOver={inventoryHover}
                     onClick={e => e.stopPropagation()}
                     style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
                     <div class="vbox-hdr">

From 39be7b952f48943002edb478027766cf32365c73 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 29 Oct 2019 18:36:15 +1000
Subject: [PATCH 41/53] don't sort vbox after combine

---
 server/src/vbox.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/vbox.rs b/server/src/vbox.rs
index c8df2087..162f48de 100644
--- a/server/src/vbox.rs
+++ b/server/src/vbox.rs
@@ -169,7 +169,7 @@ impl Vbox {
         let combo = combos.iter().find(|c| c.components == input).ok_or(err_msg("not a combo"))?;
 
         self.bound.push(combo.item);
-        self.bound.sort_unstable();
+        // self.bound.sort_unstable();
 
         Ok(self)
     }

From 0009e1fb5bfea7e9b2a5065749f6e873b2d4d08d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 30 Oct 2019 13:17:06 +1000
Subject: [PATCH 42/53] tutorial text, vbox hover inventory

---
 client/src/components/vbox.component.jsx |  2 +-
 client/src/tutorial.utils.jsx            | 48 ++++++++++++++----------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 81155b66..1727850d 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -404,7 +404,7 @@ class Vbox extends preact.Component {
                 return true;
             }
 
-            const inventoryHover = vbox.bound.length > 1 ? false : e => hoverInfo(e, 'inventory');
+            const inventoryHover = vbox.bound.length > 1 || vboxSelected[0] ? false : e => hoverInfo(e, 'inventory');
 
             return (
                 <div class={inventoryClass}
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index f2f38201..a8c45b94 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -109,9 +109,10 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
             return (
                 <div>
                     <h2>Tutorial</h2>
-                    <p>This is the vbox phase tutorial.</p>
-                    <p> The game revolves around combining colours with items to create skills and specs. </p>
-                    <p> Buy two colours from the vbox by double clicking or click the colour once and then the inventory. </p>
+                    <p> Welcome to the vbox phase tutorial.</p>
+                    <p> Colours are used to create powerful combinations. </p>
+                    <p> Buy two colours from the vbox by double clicking. <br />
+                        You can also click the colour once and then click the inventory. </p>
                 </div>
             );
         }
@@ -120,19 +121,24 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
             return (
                 <div>
                     <h2>Tutorial</h2>
-                    <p> In a normal game you start with 3 Attack Skill items. </p>
-                    <p> These can be combined with colours to create powerful combinations. </p>
-                    <p> Select the Attack item along with two colours and press combine. </p>
+                    <p> In a normal game you start with three base <b>Attack</b> skill items. </p>
+                    <p> The <b>Attack</b> item can be combined with <b>colours</b> to create a new skill. </p>
+                    <p> Select the Attack item along with two colours. <br />
+                        When all three items are selected you can then press combine.
+                    </p>
                 </div>
             );
         }
 
         if (tutorial === 3) {
+            const constructOne = instance.players[0].constructs[0].name;
             return (
                 <div>
                     <h2>Tutorial</h2>
-                    <p> Skill items can be equipped to your constructs to give them that ability for the combat phase. </p>
-                    <p> Click the newly combined skill item in the inventory and then the construct at the bottom to equip the skill. </p>
+                    <p> The first construct on your team is <b>{constructOne}</b>. </p>
+                    <p> Skill items can be equipped to your constructs to be used in the combat phase. </p>
+                    <p> Click the newly combined skill item in the top right of the inventory. <br />
+                        Once selected click the construct <b>SKILL</b> slot to equip the skill. </p>
                 </div>
             );
         }
@@ -141,8 +147,10 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
             return (
                 <div>
                     <h2>Tutorial</h2>
-                    <p> You can also buy spec items to increase the stats of your constructs. </p>
-                    <p> Buy the spec item by double clicking or click the spec once and then the inventory. </p>
+                    <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 />
+                        You can also click the specialisation once and then click the inventory. </p>
                 </div>
             );
         }
@@ -151,9 +159,10 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
             return (
                 <div>
                     <h2>Tutorial</h2>
-                    <p> Equipping spec items will increase the stats of your constructs. </p> 
-                    <p> These can also be combined with colours for more specialisation. </p>
-                    <p> Click the spec item in the inventory followed by an empty inventory spec slot to equip the spec. </p>
+                    <p> Equipping specialisation items will increase the stats of your constructs.</p>
+                    <p> These can also be combined with colours for further specialisation. </p>
+                    <p> Click the specialisation item in the top right of the inventory.<br />
+                        Once selected click the construct <b>SPEC</b> slot to equip the specialisation. </p>
                 </div>
             );
         }
@@ -165,10 +174,9 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                 <div>
                     <h2>Tutorial</h2>
                     <p> You have now created a construct with an upgraded skill and base spec. </p>
-                    <p> You can unequip skills and specs back into the inventory by double clicking or clicking once and then the inventory. </p>
                     <p> The goal is to create three powerful constructs for combat. </p>
-                    <p> Equip <b>{constructTwo}</b> and <b>{constructThree}</b> with the Attack skill. <br />
-                        Ensure each construct has a single skill to continue </p>
+                    <p> Equip your other constructs <b>{constructTwo}</b> and <b>{constructThree}</b> with the Attack skill. <br />
+                        Ensure each construct has a single skill to continue. </p>
                 </div>
             );
         }
@@ -192,10 +200,10 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
             return (
                 <div>
                     <h2>Tutorial</h2>
-                    <p> You can now freely create different skill and spec combos. </p>
-                    <p> Reclaim is used only if needed to refund items in your inventory. <br />
-                        If you click the exit tutorial button this section will be replaced with more information on selected items. <br /></p>
-                    <p> When ready, you can go into the combat phase by hitting ready in the bottom right. </p>
+                    <p>You've completed the tutorial! Try to create more skill and spec combinations. </p>
+                    <p>You can unequip skills and specs back into the inventory by double clicking. <br />
+                        Reclaim can be used to refund the cost of items in your inventory. </p>
+                    <p>Click the <b>EXIT TUTORIAL</b> button to replace this section with more information.</p>
                 </div>
             );
         }

From 2c77d035bd6afe52244572be78dad01f02be31e0 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 30 Oct 2019 14:14:57 +1000
Subject: [PATCH 43/53] moar haste / hybrid buffs

---
 CHANGELOG.md        |  2 ++
 server/src/skill.rs | 21 ++++++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b638b666..d8a3d7a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Haste
     - Cooldown reduced to 1T (was 2T)
+    - Duration increased from 2/3/4T -> 3/4/5T
 
 - Sleep
     - Cooldown reduced to 2T (was 3T)
@@ -48,6 +49,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Hybrid
     - Cooldown reduced to 1T (was 3T)
+    - Duration increased from 2/3/4T -> 3/4/5T
 
 - Silence
     - Cooldown reduced to 2T (was 3T)
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 6cbb383e..340b7185 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -815,6 +815,9 @@ impl Skill {
             Skill::BashPlus => 65,
             Skill::BashPlusPlus => 100,
 
+            Skill::Link=> 75,
+            Skill::LinkPlus => 100,
+            Skill::LinkPlusPlus => 150,
             // Debuff Base
             Skill::DecayTick=> 33,
             Skill::DecayTickPlus => 45,
@@ -828,13 +831,13 @@ impl Skill {
 
             // Buff base
             Skill::HybridBlast => 25,
+            
             Skill::HasteStrike => 30,
-            Skill::Link=> 75,
-            Skill::LinkPlus => 100,
-            Skill::LinkPlusPlus => 150,
+            
             Skill::Intercept=> 80,
             Skill::InterceptPlus => 110,
             Skill::InterceptPlusPlus => 150,
+            
             Skill::TriageTick=> 75,
             Skill::TriageTickPlus => 110,
             Skill::TriageTickPlusPlus => 140,
@@ -901,11 +904,11 @@ impl Skill {
                                         ConstructEffect {effect: Effect::Decay, duration: 4,
                                             meta: Some(EffectMeta::Skill(Skill::DecayTickPlusPlus)), tick: None}],
 
-            Skill::Haste         => vec![ConstructEffect {effect: Effect::Haste, duration: 2,
+            Skill::Haste         => vec![ConstructEffect {effect: Effect::Haste, duration: 3,
                                             meta: Some(EffectMeta::Multiplier(150)), tick: None }],
-            Skill::HastePlus     => vec![ConstructEffect {effect: Effect::Haste, duration: 3,
+            Skill::HastePlus     => vec![ConstructEffect {effect: Effect::Haste, duration: 4,
                                             meta: Some(EffectMeta::Multiplier(175)), tick: None }],
-            Skill::HastePlusPlus => vec![ConstructEffect {effect: Effect::Haste, duration: 4,
+            Skill::HastePlusPlus => vec![ConstructEffect {effect: Effect::Haste, duration: 5,
                                             meta: Some(EffectMeta::Multiplier(225)), tick: None }],
 
             Skill::Absorb   => vec![ConstructEffect {effect: Effect::Absorb, duration: 2,
@@ -919,11 +922,11 @@ impl Skill {
             Skill::AbsorptionPlus     => vec![ConstructEffect {effect: Effect::Absorption, duration: 5, meta: None, tick: None}],
             Skill::AbsorptionPlusPlus => vec![ConstructEffect {effect: Effect::Absorption, duration: 7, meta: None, tick: None}],
 
-            Skill::Hybrid         => vec![ConstructEffect {effect: Effect::Hybrid, duration: 2,
+            Skill::Hybrid         => vec![ConstructEffect {effect: Effect::Hybrid, duration: 3,
                                             meta: Some(EffectMeta::Multiplier(150)), tick: None }],
-            Skill::HybridPlus     => vec![ConstructEffect {effect: Effect::Hybrid, duration: 3,
+            Skill::HybridPlus     => vec![ConstructEffect {effect: Effect::Hybrid, duration: 4,
                                             meta: Some(EffectMeta::Multiplier(175)), tick: None }],
-            Skill::HybridPlusPlus => vec![ConstructEffect {effect: Effect::Hybrid, duration: 4,
+            Skill::HybridPlusPlus => vec![ConstructEffect {effect: Effect::Hybrid, duration: 5,
                                             meta: Some(EffectMeta::Multiplier(225)), tick: None }],
 
             Skill::Invert         => vec![ConstructEffect {effect: Effect::Invert, duration: 2, meta: None, tick: None}],

From 31bfffab26c280526b5b901a953b42241dedc662 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 30 Oct 2019 15:34:58 +1000
Subject: [PATCH 44/53] remove inventory hover text again, buff hybridblast /
 hastestrike dmg

---
 CHANGELOG.md                             | 2 ++
 client/src/components/vbox.component.jsx | 3 ---
 server/src/skill.rs                      | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8a3d7a5..afef43f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Haste
     - Cooldown reduced to 1T (was 2T)
     - Duration increased from 2/3/4T -> 3/4/5T
+    - HasteStrike damage multiplier changed from 30% -> 60%
 
 - Sleep
     - Cooldown reduced to 2T (was 3T)
@@ -50,6 +51,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Hybrid
     - Cooldown reduced to 1T (was 3T)
     - Duration increased from 2/3/4T -> 3/4/5T
+    - HybridBlast damage multiplier changed from 25% -> 50%
 
 - Silence
     - Cooldown reduced to 2T (was 3T)
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 1727850d..c2c1a51a 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -404,12 +404,9 @@ class Vbox extends preact.Component {
                 return true;
             }
 
-            const inventoryHover = vbox.bound.length > 1 || vboxSelected[0] ? false : e => hoverInfo(e, 'inventory');
-
             return (
                 <div class={inventoryClass}
                     onMouseDown={inventoryClick}
-                    onMouseOver={inventoryHover}
                     onClick={e => e.stopPropagation()}
                     style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
                     <div class="vbox-hdr">
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 340b7185..0b37d3e2 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -830,9 +830,9 @@ impl Skill {
             Skill::RestrictPlusPlus => 100,
 
             // Buff base
-            Skill::HybridBlast => 25,
+            Skill::HybridBlast => 50,
             
-            Skill::HasteStrike => 30,
+            Skill::HasteStrike => 60,
             
             Skill::Intercept=> 80,
             Skill::InterceptPlus => 110,

From ea6936940aeb8d10a5ab662734d54b34b5047e0a Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 30 Oct 2019 15:45:59 +1000
Subject: [PATCH 45/53] 50% slay self heal increase dmg, minor blast nerf

---
 CHANGELOG.md        | 21 ++++++++++++++-------
 server/src/item.rs  |  4 ++--
 server/src/skill.rs | 14 +++++++-------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index afef43f6..df885c50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,14 +26,17 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Moved the login page demo to a new info tab, increased the speed of demo and it now creates random combos
 
-- Buff 
-    - Previously increased red power and speed stat by 25%
-    - Now increases red power, blue power and speed stat by 30%
+- Blast
+    - Damage multiplier reduced 110/145/210 -> 105/140/200
 
 - Block
     - Previously reduced red damage taken by 50%
     - Now reduces red damage and blue damage taken by 65%
 
+- Buff 
+    - Previously increased red power and speed stat by 25%
+    - Now increases red power, blue power and speed stat by 30%
+
 - Counter
     - No longer applies block effect
     - CounterAttack multiplier increased from 70/95/120 -> 120/160/230
@@ -44,10 +47,6 @@ This project adheres to [Semantic Versioning](http://semver.org/).
     - Duration increased from 2/3/4T -> 3/4/5T
     - HasteStrike damage multiplier changed from 30% -> 60%
 
-- Sleep
-    - Cooldown reduced to 2T (was 3T)
-    - Skill multiplier reduced from 240/300/400 -> 200/290/400
-
 - Hybrid
     - Cooldown reduced to 1T (was 3T)
     - Duration increased from 2/3/4T -> 3/4/5T
@@ -56,6 +55,14 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Silence
     - Cooldown reduced to 2T (was 3T)
 
+- Slay
+    - Self healing is now 50% of damage dealt to green life (was 100%)
+    - Damage multiplier increased from (40/60/90)% -> (45/65/100%)%
+
+- Sleep
+    - Cooldown reduced to 2T (was 3T)
+    - Skill multiplier reduced from 240/300/400 -> 200/290/400
+
 - Banish
     - Cooldown reduced to 2T (was 3T)
 
diff --git a/server/src/item.rs b/server/src/item.rs
index b697828a..52b3bb8b 100644
--- a/server/src/item.rs
+++ b/server/src/item.rs
@@ -874,7 +874,7 @@ impl Item {
             Item::SlayPlus |
             Item::SlayPlusPlus => format!(
                 "Deals {:?}% RedPower + {:?}% GreenPower as red damage.
-                Provides self healing based on damage dealt.",
+                Construct heals self for 50% of damage dealt to target construct GreenLife.",
                 self.into_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().multiplier()),
 
@@ -912,7 +912,7 @@ impl Item {
             Item::SiphonPlus |
             Item::SiphonPlusPlus => format!(
                 "Deals {:?}% BluePower + {:?}% GreenPower as blue damage each turn.
-                Heals caster based on damage dealt.
+                Construct heals self for 100% of damage dealt to target construct GreenLife.
                 Lasts {:?}T.",
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 0b37d3e2..9c02408f 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -753,9 +753,9 @@ impl Skill {
             // Attack Base
             Skill::Attack => 80, // Base
 
-            Skill::Blast=> 110, // BB
-            Skill::BlastPlus => 145, // BB
-            Skill::BlastPlusPlus => 210, // BB
+            Skill::Blast=> 105, // BB
+            Skill::BlastPlus => 140, // BB
+            Skill::BlastPlusPlus => 200, // BB
 
             Skill::Chaos=> 40, // BR
             Skill::ChaosPlus => 65, // BR
@@ -769,9 +769,9 @@ impl Skill {
             Skill::SiphonTickPlus => 30,
             Skill::SiphonTickPlusPlus => 40,
 
-            Skill::Slay=> 40, // RG
-            Skill::SlayPlus => 60,
-            Skill::SlayPlusPlus => 90,
+            Skill::Slay=> 45, // RG
+            Skill::SlayPlus => 65,
+            Skill::SlayPlusPlus => 100,
 
             Skill::Strike=> 90, //RR
             Skill::StrikePlus => 140,
@@ -1482,7 +1482,7 @@ fn slay(source: &mut Construct, target: &mut Construct, mut results: Resolutions
         match e {
             Event::Damage { amount, mitigation: _, colour: _, skill: _ } => {
                 results.push(Resolution::new(source, target).event(e));
-                let heal = source.deal_green_damage(skill, amount);
+                let heal = source.deal_green_damage(skill, amount.pct(50));
                 for h in heal {
                     results.push(Resolution::new(source, source).event(h).stages(EventStages::PostOnly));
                 };

From e4f091b2b8184e14c2fe6ad8aa4f20dbcd648705 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 30 Oct 2019 18:02:50 +1000
Subject: [PATCH 46/53] more description improvements

---
 CHANGELOG.md                             | 36 +++++++++++++-----------
 client/src/components/info.component.jsx |  5 +++-
 client/src/components/shapes.jsx         |  4 ++-
 client/src/constants.jsx                 | 17 ++++-------
 client/src/tutorial.utils.jsx            |  2 +-
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df885c50..8960d207 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Moved the login page demo to a new info tab, increased the speed of demo and it now creates random combos
 
+- Banish
+    - Cooldown reduced to 2T (was 3T)
+
+- Bash
+    - Skill multiplier reduced from 65/95/140 -> 45/65/100
+
 - Blast
     - Damage multiplier reduced 110/145/210 -> 105/140/200
 
@@ -42,6 +48,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
     - CounterAttack multiplier increased from 70/95/120 -> 120/160/230
     - Will now animate an attack animation on counter attack
 
+- Curse
+    - Now created by combining Debuff + RB was Debuff + RG
+    - Fixed issue where curse was only increasing blue damage taken instead of red and blue
+    - Fixed an issue where the animation would not display if it occured already
+
 - Haste
     - Cooldown reduced to 1T (was 2T)
     - Duration increased from 2/3/4T -> 3/4/5T
@@ -52,33 +63,24 @@ This project adheres to [Semantic Versioning](http://semver.org/).
     - Duration increased from 2/3/4T -> 3/4/5T
     - HybridBlast damage multiplier changed from 25% -> 50%
 
+- Invert
+    - Now created by combining Debuff + RG was debuff + RB
+
 - Silence
     - Cooldown reduced to 2T (was 3T)
 
+- Siphon
+    - Skill multiplier increased from 20/25/30 -> 25/30/40
+    - Reworded part of description "Construct heals self for 100% of damage dealt to target construct GreenLife."
+
 - Slay
     - Self healing is now 50% of damage dealt to green life (was 100%)
-    - Damage multiplier increased from (40/60/90)% -> (45/65/100%)%
+    - Damage multiplier increased from (40/60/90)% -> (45/65/100)%
 
 - Sleep
     - Cooldown reduced to 2T (was 3T)
     - Skill multiplier reduced from 240/300/400 -> 200/290/400
 
-- Banish
-    - Cooldown reduced to 2T (was 3T)
-
-- Siphon
-    - Skill multiplier increased from 20/25/30 -> 25/30/40
-
-- Bash
-    - Skill multiplier reduced from 65/95/140 -> 45/65/100
-
-- Curse
-    - Now created by combining Debuff + RB was Debuff + RG
-    - Fixed issue where curse was only increasing blue damage taken instead of red and blue
-    - Fixed an issue where the animation would not display if it occured already
-
-- Invert
-    - Now created by combining Debuff + RG was debuff + RB
 
 ## [1.6.6] - 2019-10-27
 # Added
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 6a1689dd..8bb4b5db 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -204,7 +204,10 @@ class InfoComponent extends preact.Component {
                 );
             }
             const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
-            const infoDescription = reactStringReplace(fullInfo.description, '\n', () => <br />);
+            
+            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|POWER|SPEED|LIFE)/;
+            let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+            infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
             return (
                 <div class="info-item">
                     <h2>{fullInfo.item} {cost}</h2>
diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx
index a8a20ed8..454e51fe 100644
--- a/client/src/components/shapes.jsx
+++ b/client/src/components/shapes.jsx
@@ -35,7 +35,9 @@ module.exports = {
     BluePower: () => circle(['blue']),
     SpeedStat: () => triangle(['white']),
 
-
+    POWER: () => circle(['white']),
+    LIFE: () => square(['white']),
+    SPEED: () => triangle(['white']),
     // specs
     // Base
 
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index afc53c74..bf370e14 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -60,30 +60,23 @@ module.exports = {
         },
         constructSkills: {
             item: 'SKILLS',
-            description: <p>Skills are used by constructs in the game phase.<br />
-                Base skills can be bought from the VBOX.<br />
-                Equip skills from the inventory. Double-click to unequip.</p>,
+            description: 'Skills are used by constructs in the game phase.\nBase skills can be bought from the VBOX.\nEquip skills from the inventory. Double-click to unequip.',
         },
         constructSpecs: {
             item: 'SPECS',
-            description: <p>Specialisations increase the stats of a construct.<br />
-                Increased effect when your team meets the colour threshold.<br />Double-click to unequip.</p>,
+            description: 'Specialisations increase the stats of a construct.\nIncreased effect when your team meets the colour threshold.\nDouble-click to unequip.',
         },
         powerStat: {
             item: 'POWER',
-            description: <p>Power determines the base damage and healing of your construct skills.<br />
-                Combine POWER specs to increase construct power.</p>,
+            description: 'Power determines the damage and healing of your construct skills.\nRed power RedPower is used by red skills.\nGreen power GreenPower is used by green skills.\nBlue power BluePower is used by blue skills.\nCombine coloured POWER specs to increase specific construct power.',
         },
         lifeStat: {
             item: 'LIFE',
-            description: <p>The life of your construct.<br />
-                When your construct reaches 0 green life it is knocked out and cannot cast skills.<br />
-                Red life mitigates red damage and blue life mitigates blue damage.<br />
-                Combine LIFE specs to increase life totals.</p>,
+            description: 'The life of your construct.\nWhen your construct reaches 0 GreenLife it is knocked out.\nRed life RedLife mitigates red damage.\nBlue life BlueLife mitigates blue damage.\nCombine coloured LIFE specs to increase specific construct life.',
         },
         speedStat: {
             item: 'SPEED',
-            description: <p>Speed determines the order in which skills resolve.<br />Combine SPEED specs to increase speed.</p>,
+            description: 'Speed determines the order in which skills resolve.\nCombine SPEED specs to increase speed.',
         },
     },
 };
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index a8c45b94..7f6bb854 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -124,7 +124,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                     <p> In a normal game you start with three base <b>Attack</b> skill items. </p>
                     <p> The <b>Attack</b> item can be combined with <b>colours</b> to create a new skill. </p>
                     <p> Select the Attack item along with two colours. <br />
-                        When all three items are selected you can then press combine.
+                        Once selected press <b>COMBINE</b> to create a new combo.
                     </p>
                 </div>
             );

From d52efc6c0199224cb1c59f3eed135fd4654ce368 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 31 Oct 2019 10:49:43 +1000
Subject: [PATCH 47/53] refactor info.comp

---
 client/src/components/info.component.jsx  | 168 +++++-----------------
 client/src/components/info.thresholds.jsx |  96 +++++++++++++
 client/src/utils.jsx                      |   2 -
 3 files changed, 132 insertions(+), 134 deletions(-)
 create mode 100644 client/src/components/info.thresholds.jsx

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 8bb4b5db..87c96eeb 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -1,9 +1,9 @@
 const preact = require('preact');
-const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
+const specThresholds = require('./info.thresholds');
 const { INFO } = require('./../constants');
-const { convertItem, removeTier } = require('../utils');
+const { convertItem, removeTier, formatInfo } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
@@ -68,150 +68,54 @@ class InfoComponent extends preact.Component {
             const isSkill = fullInfo.skill;
             const isSpec = fullInfo.spec;
 
-            if (isSkill) {
+            const itemDescription = () => {
                 const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-                let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-                infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
-                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
-                const itemSourceInfo = itemSource.length
-                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
-                    : false;
-                const itemRegEx = /(Red|Blue|Green)/;
-                const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
-                const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
-                const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
-                return (
-                    <div class="info-skill">
-                        <h2>{fullInfo.item} {fullInfo.cost}b</h2>
-                        <h3> SKILL </h3>
-                        {itemSourceDescription}
-                        <div> {cooldown} </div>
-                        <div>{infoDescription}</div>
-                        {speed}
-                    </div>
-                );
-            }
+                const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]());
+                return <div>{reactStringReplace(infoDescription, '\n', () => <br />)}</div>;
+            };
 
-            if (isSpec) {
-                let red = 0;
-                let blue = 0;
-                let green = 0;
-                player.constructs.forEach(construct => {
-                    red += construct.colours.red;
-                    blue += construct.colours.blue;
-                    green += construct.colours.green;
-                });
-                const teamColours = { red, blue, green };
-
-                const colourReqs = fullInfo.values.bonuses || [];
-
-                const thresholds = colourReqs.map((bonus, i) => {
-                    const colours = ['red', 'green', 'blue'];
-                    const colourGoals = {
-                        red: [],
-                        green: [],
-                        blue: [],
-                    };
-                    const overFlow = [];
-
-                    colours.forEach(c => {
-                        const colourReq = bonus.req[c];
-                        if (colourReqs === 0) return false;
-
-                        const start = i === 0
-                            ? 0
-                            : colourReqs[i - 1].req[c];
-
-                        const dots = range(start, colourReq).map(j => {
-                            const unmet = teamColours[c] < j + 1;
-
-
-                            const reqClass = unmet
-                                ? 'unmet'
-                                : '';
-
-                            if (j - start > 4) {
-                                overFlow.push(
-                                    <figure key={j} alt={c.colour} class={reqClass} >
-                                        {shapes.vboxColour(c)}
-                                    </figure>
-                                );
-                            } else {
-                                colourGoals[c].push(
-                                    <figure key={j} alt={c.colour} class={reqClass} >
-                                        {shapes.vboxColour(c)}
-                                    </figure>
-                                );
-                            }
-
-                            return true;
-                        });
-
-                        return dots;
-                    });
-
-                    const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
-
-                    const reqClass = reqsMet
-                        ? ''
-                        : 'unmet';
-
-                    const goals = colours.map((c, j) => {
-                        if (colourGoals[c].length) {
-                            return (
-                                <div key={j}>{colourGoals[c]}</div>
-                            );
-                        }
-                        return false;
-                    });
-                    const bonusObj = info.includes('Life')
-                        ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
-                        : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
-                    const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
-                    return (
-                        <div key={i} class="spec-goal">
-                            {goals}
-                            {overFlowObj}
-                            {bonusObj}
-                        </div>
-                    );
-                });
-                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
-                let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-                infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
-                const itemSource = itemInfo.combos.filter(c => c.item === info);
-                let itemSourceInfo = itemSource.length
-                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
-                    : false;
-                const itemRegEx = /(Red|Blue|Green)/;
-                if (itemSourceInfo) {
-                    while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
-                }
-                const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+            if (isSkill || isSpec) {
                 let infoText = info;
                 while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
 
+                const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
+
+                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
+                let itemSourceInfo = itemSource.length
+                    ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+                    : false;
+
+                if (itemSourceInfo) {
+                    while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
+                    const itemRegEx = /(Red|Blue|Green)/;
+                    itemSourceInfo = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+                }
+
+                const cooldown = isSkill && fullInfo.cooldown ? <div>{fullInfo.cooldown} Turn delay</div> : null;
+
+                const speed =  isSkill
+                    ? <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>
+                    : null;
+
+                const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
+
                 return (
-                    <div class="info-spec">
+                    <div class={isSkill ? 'info-skill' : 'info-spec'}>
                         <h2>{infoText} {fullInfo.cost}b</h2>
-                        <h3>SPEC</h3>
-                        {itemSourceDescription}
-                        <div>{infoDescription}</div>
-                        <div class="thresholds">
-                            {thresholds}
-                        </div>
+                        {header}
+                        {itemSourceInfo}
+                        {cooldown}
+                        {itemDescription()}
+                        {speed}
+                        {thresholds}
                     </div>
                 );
             }
             const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
-            
-            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|POWER|SPEED|LIFE)/;
-            let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-            infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
             return (
                 <div class="info-item">
                     <h2>{fullInfo.item} {cost}</h2>
-                    <div>{infoDescription}</div>
+                    {itemDescription()}
                 </div>
             );
         }
diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/info.thresholds.jsx
new file mode 100644
index 00000000..7136a855
--- /dev/null
+++ b/client/src/components/info.thresholds.jsx
@@ -0,0 +1,96 @@
+const preact = require('preact');
+const range = require('lodash/range');
+const shapes = require('./shapes');
+
+function specThresholds(player, fullInfo, info) {
+    let red = 0;
+    let blue = 0;
+    let green = 0;
+    player.constructs.forEach(construct => {
+        red += construct.colours.red;
+        blue += construct.colours.blue;
+        green += construct.colours.green;
+    });
+    const teamColours = { red, blue, green };
+
+    const colourReqs = fullInfo.values.bonuses || [];
+
+    const thresholds = colourReqs.map((bonus, i) => {
+        const colours = ['red', 'green', 'blue'];
+        const colourGoals = {
+            red: [],
+            green: [],
+            blue: [],
+        };
+        const overFlow = [];
+
+        colours.forEach(c => {
+            const colourReq = bonus.req[c];
+            if (colourReqs === 0) return false;
+
+            const start = i === 0
+                ? 0
+                : colourReqs[i - 1].req[c];
+
+            const dots = range(start, colourReq).map(j => {
+                const unmet = teamColours[c] < j + 1;
+
+
+                const reqClass = unmet
+                    ? 'unmet'
+                    : '';
+
+                if (j - start > 4) {
+                    overFlow.push(
+                        <figure key={j} alt={c.colour} class={reqClass} >
+                            {shapes.vboxColour(c)}
+                        </figure>
+                    );
+                } else {
+                    colourGoals[c].push(
+                        <figure key={j} alt={c.colour} class={reqClass} >
+                            {shapes.vboxColour(c)}
+                        </figure>
+                    );
+                }
+
+                return true;
+            });
+
+            return dots;
+        });
+
+        const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
+
+        const reqClass = reqsMet
+            ? ''
+            : 'unmet';
+
+        const goals = colours.map((c, j) => {
+            if (colourGoals[c].length) {
+                return (
+                    <div key={j}>{colourGoals[c]}</div>
+                );
+            }
+            return false;
+        });
+        const bonusObj = info.includes('Life')
+            ? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
+            : <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
+        const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
+        return (
+            <div key={i} class="spec-goal">
+                {goals}
+                {overFlowObj}
+                {bonusObj}
+            </div>
+        );
+    });
+    return (
+        <div class="thresholds">
+            {thresholds}
+        </div>
+    );
+}
+
+module.exports = specThresholds;
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 42761a0a..ec49e659 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -240,8 +240,6 @@ function convertItem(v) {
 }
 
 function effectInfo(i) {
-    console.log(i);
-
     function multiplier(s) { // Update later to use server info in future
         if (s === 'CounterAttack') return 120;
         if (s === 'CounterAttack+') return 160;

From b554464802b1c554002f767f7183d79beaf9a88d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 31 Oct 2019 11:50:27 +1000
Subject: [PATCH 48/53] should comp updates

---
 client/src/components/faceoff.jsx            | 156 +++++++++----------
 client/src/components/info.component.jsx     |   8 +-
 client/src/components/instance.component.jsx |   8 +-
 client/src/components/main.jsx               |  62 ++++----
 client/src/components/mnml.jsx               |  22 ++-
 5 files changed, 138 insertions(+), 118 deletions(-)

diff --git a/client/src/components/faceoff.jsx b/client/src/components/faceoff.jsx
index 251f10e6..ea3858cd 100644
--- a/client/src/components/faceoff.jsx
+++ b/client/src/components/faceoff.jsx
@@ -1,34 +1,25 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const actions = require('../actions');
-
 const { ConstructAvatar } = require('./construct');
-const Controls = require('./controls');
 
 const addState = connect(
     function receiveState(state) {
         const {
-            ws,
             instance,
             account,
         } = state;
 
-        function sendInstanceReady() {
-            return ws.sendInstanceReady(instance.id);
-        }
-
         return {
             instance,
             account,
-            sendInstanceReady,
         };
-    },
+    }
 );
 
 function FaceoffConstruct(args) {
     const {
-        construct
+        construct,
     } = args;
 
     return (
@@ -39,75 +30,82 @@ function FaceoffConstruct(args) {
                 <ConstructAvatar construct={construct} />
             </div>
         </div>
-    )
-}
-
-function Faceoff(props) {
-    const {
-        instance,
-        account,
-        sendInstanceReady,
-    } = props;
-
-    if (!instance) return <div>...</div>;
-
-    const otherTeam = instance.players.find(t => t.id !== account.id);
-    const playerTeam = instance.players.find(t => t.id === account.id);
-
-    function PlayerTeam(team) {
-        const constructs = team.constructs.map((c, i) =>
-            <FaceoffConstruct key={c.id} construct={c}/>);
-
-        const winner = instance.winner === team.id;
-        const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
-        return (
-            <div class={classes}>
-                {constructs}
-            </div>
-        );
-    }
-
-
-    function OpponentTeam(team) {
-        const constructs = team.constructs.map((c, i) =>
-            <FaceoffConstruct key={c.id} construct={c}/>);
-
-        const winner = instance.winner === team.id;
-        const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
-
-        return (
-            <div class={classes}>
-                {constructs}
-            </div>
-        );
-    }
-    function faceoffText() {
-        if (!instance.winner) {
-            return (
-                <div class="faceoff-text">
-                    <div class="opponent-text"> {otherTeam.name} </div>
-                    <div class="vs"> vs </div>
-                    <div class="player-text"> {playerTeam.name} </div>
-                </div>
-            );
-        }
-        const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
-        return (
-            <div class="faceoff-text winner">
-                <div> {winner.name} </div>
-                <div> wins </div>
-            </div>
-        )
-
-    }
-
-    return (
-        <main class="faceoff">
-            {OpponentTeam(otherTeam)}
-            {faceoffText()}
-            {PlayerTeam(playerTeam)}
-        </main>
     );
 }
 
+class Faceoff extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.account !== this.props.account) return true;
+        return false;
+    }
+
+    render(props) {
+        const {
+            instance,
+            account,
+        } = props;
+
+        if (!instance) return <div>...</div>;
+
+        const otherTeam = instance.players.find(t => t.id !== account.id);
+        const playerTeam = instance.players.find(t => t.id === account.id);
+
+        function PlayerTeam(team) {
+            const constructs = team.constructs.map((c, i) =>
+                <FaceoffConstruct key={c.id} construct={c}/>);
+
+            const winner = instance.winner === team.id;
+            const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
+            return (
+                <div class={classes}>
+                    {constructs}
+                </div>
+            );
+        }
+
+
+        function OpponentTeam(team) {
+            const constructs = team.constructs.map((c, i) =>
+                <FaceoffConstruct key={c.id} construct={c}/>);
+
+            const winner = instance.winner === team.id;
+            const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
+
+            return (
+                <div class={classes}>
+                    {constructs}
+                </div>
+            );
+        }
+        function faceoffText() {
+            if (!instance.winner) {
+                return (
+                    <div class="faceoff-text">
+                        <div class="opponent-text"> {otherTeam.name} </div>
+                        <div class="vs"> vs </div>
+                        <div class="player-text"> {playerTeam.name} </div>
+                    </div>
+                );
+            }
+            const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
+            return (
+                <div class="faceoff-text winner">
+                    <div> {winner.name} </div>
+                    <div> wins </div>
+                </div>
+            )
+
+        }
+
+        return (
+            <main class="faceoff">
+                {OpponentTeam(otherTeam)}
+                {faceoffText()}
+                {PlayerTeam(playerTeam)}
+            </main>
+        );
+    }
+}
+
 module.exports = addState(Faceoff);
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 87c96eeb..1c7010fc 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -3,7 +3,7 @@ const reactStringReplace = require('react-string-replace');
 
 const specThresholds = require('./info.thresholds');
 const { INFO } = require('./../constants');
-const { convertItem, removeTier, formatInfo } = require('../utils');
+const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
@@ -75,8 +75,8 @@ class InfoComponent extends preact.Component {
             };
 
             if (isSkill || isSpec) {
-                let infoText = info;
-                while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
+                let infoName = info;
+                while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+');
 
                 const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
 
@@ -101,7 +101,7 @@ class InfoComponent extends preact.Component {
 
                 return (
                     <div class={isSkill ? 'info-skill' : 'info-spec'}>
-                        <h2>{infoText} {fullInfo.cost}b</h2>
+                        <h2>{infoName} {fullInfo.cost}b</h2>
                         {header}
                         {itemSourceInfo}
                         {cooldown}
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index d4953550..b5e98674 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -13,11 +13,13 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { instance,
+        const {
+            instance,
             nav,
             navInstance,
         } = state;
-        return { instance,
+        return {
+            instance,
             nav,
             navInstance,
         };
@@ -52,7 +54,7 @@ const addState = connect(
 );
 
 class Instance extends Component {
-    componentShouldUpdate(newProps) {
+    shouldComponentUpdate(newProps) {
         if (newProps.instance !== this.props.instance) return true;
         return false;
     }
diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx
index ab923182..b03e0069 100644
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@@ -16,35 +16,45 @@ const addState = connect(
     }
 );
 
-function Main(props) {
-    const {
-        game,
-        instance,
-        account,
-        nav,
-    } = props;
-
-    if (!account) {
-        return <Welcome />;
+class Main extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.game !== this.props.game) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.account !== this.props.account) return true;
+        if (newProps.nav !== this.props.nav) return true;
+        return false;
     }
 
-    if (game) {
-        return <Game />;
+    render(props) {
+        const {
+            game,
+            instance,
+            account,
+            nav,
+        } = props;
+
+        if (!account) {
+            return <Welcome />;
+        }
+
+        if (game) {
+            return <Game />;
+        }
+
+        if (instance) {
+            return <Instance />;
+        }
+
+        if (nav === 'transition') return false;
+
+        return (
+            <main class="menu">
+                <Header />
+                <Top />
+                <Bottom />
+            </main>
+        );
     }
-
-    if (instance) {
-        return <Instance />;
-    }
-
-    if (nav === 'transition') return false;
-
-    return (
-        <main class="menu">
-            <Header />
-            <Top />
-            <Bottom />
-        </main>
-    );
 }
 
 module.exports = addState(Main);
diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx
index 5c4ae51b..60dad587 100644
--- a/client/src/components/mnml.jsx
+++ b/client/src/components/mnml.jsx
@@ -10,11 +10,21 @@ const addState = connect(
     state => ({ showNav: state.showNav })
 );
 
-const Mnml = ({ showNav }) =>
-    <div id="mnml" class={showNav ? 'nav-visible' : ''}>
-        <Main />
-        <Controls />
-        <Footer />
-    </div>;
+class Mnml extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.showNav !== this.props.showNav) return true;
+        return false;
+    }
+
+    render(args) {
+        return (
+            <div id="mnml" class={args.showNav ? 'nav-visible' : ''}>
+                <Main />
+                <Controls />
+                <Footer />
+            </div>
+        );
+    }
+}
 
 module.exports = addState(Mnml);

From 1be37161ef3e2ff98ad52453d9f4af29cad20f9a Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 31 Oct 2019 15:34:05 +1000
Subject: [PATCH 49/53] info description fix

---
 client/src/components/info.component.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 1c7010fc..0666010a 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -69,7 +69,7 @@ class InfoComponent extends preact.Component {
             const isSpec = fullInfo.spec;
 
             const itemDescription = () => {
-                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
+                const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|LIFE|SPEED|POWER)/;
                 const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]());
                 return <div>{reactStringReplace(infoDescription, '\n', () => <br />)}</div>;
             };

From 0ce19240f70527bff55eb57fa96e485900f89587 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 31 Oct 2019 15:41:20 +1000
Subject: [PATCH 50/53] increase buff duration 2T->3T

---
 CHANGELOG.md        | 1 +
 server/src/skill.rs | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8960d207..904fc8d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Buff 
     - Previously increased red power and speed stat by 25%
     - Now increases red power, blue power and speed stat by 30%
+    - Increased duration from 2T -> 3T
 
 - Counter
     - No longer applies block effect
diff --git a/server/src/skill.rs b/server/src/skill.rs
index 9c02408f..1f655e6d 100644
--- a/server/src/skill.rs
+++ b/server/src/skill.rs
@@ -861,7 +861,7 @@ impl Skill {
             Skill::BanishPlusPlus   => vec![ConstructEffect {effect: Effect::Banish, duration: 2, meta: None, tick: None}],
             Skill::Block            => vec![ConstructEffect {effect: Effect::Block,  duration: 1,
                                                 meta: Some(EffectMeta::Multiplier(35)), tick: None}],
-            Skill::Buff             => vec![ConstructEffect {effect: Effect::Buff, duration: 2,
+            Skill::Buff             => vec![ConstructEffect {effect: Effect::Buff, duration: 3,
                                                 meta: Some(EffectMeta::Multiplier(130)), tick: None }],
 
             Skill::Electrify            => vec![ConstructEffect {effect: Effect::Electric, duration: 1,

From 38177f84e9670f50929b1136c0f2f8f882c3f481 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 31 Oct 2019 16:59:26 +1100
Subject: [PATCH 51/53] disable tutorial via localstorage"

---
 client/src/tutorial.utils.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index 7f6bb854..3732d11a 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -2,6 +2,7 @@ const preact = require('preact');
 const actions = require('./actions');
 
 function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
+    if (localStorage.getItem('tutorial-complete')) return false;
     if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
         if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
             const mobileVisible = navInstance === i + 1;
@@ -13,12 +14,14 @@ function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
 }
 
 function tutorialShouldDisableEquip(tutorial, iter, instance, construct) {
+    if (localStorage.getItem('tutorial-complete')) return false;
     return tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0
         && instance.time_control === 'Practice' && instance.rounds.length === 1;
 }
 
 
 function tutorialVbox(player, store, tutorial) {
+    if (localStorage.getItem('tutorial-complete')) return false;
     let stage = tutorial;
     const { vbox } = player;
     if (stage === 1) {
@@ -99,11 +102,15 @@ function tutorialVbox(player, store, tutorial) {
 }
 
 function tutorialStage(tutorial, ws, clearTutorial, instance) {
+    if (localStorage.getItem('tutorial-complete')) return false;
     if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;
+
     const exit = () => {
         clearTutorial();
+        localStorage.setItem('tutorial-complete', true);
         ws.sendInstanceState(instance.id);
     };
+
     const tutorialText = () => {
         if (tutorial === 1) {
             return (

From 88194975ac848a8f9bdf0d735c6f77a4d37d6758 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 31 Oct 2019 16:07:45 +1000
Subject: [PATCH 52/53] setTutorial false

---
 client/src/events.jsx         | 5 ++++-
 client/src/tutorial.utils.jsx | 4 ----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/events.jsx b/client/src/events.jsx
index a957b380..22be4613 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -212,7 +212,10 @@ function registerEvents(store) {
             if (v.phase === 'Finished') {
                 ws.sendAccountInstances();
             }
-            if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
+            if (localStorage.getItem('tutorial-complete')){
+                store.dispatch(actions.setTutorial(null));
+
+            } else if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
                 tutorialVbox(player, store, tutorial);
             }
         }
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index 3732d11a..1cdf0dfb 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -2,7 +2,6 @@ const preact = require('preact');
 const actions = require('./actions');
 
 function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
-    if (localStorage.getItem('tutorial-complete')) return false;
     if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
         if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
             const mobileVisible = navInstance === i + 1;
@@ -14,14 +13,12 @@ function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
 }
 
 function tutorialShouldDisableEquip(tutorial, iter, instance, construct) {
-    if (localStorage.getItem('tutorial-complete')) return false;
     return tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0
         && instance.time_control === 'Practice' && instance.rounds.length === 1;
 }
 
 
 function tutorialVbox(player, store, tutorial) {
-    if (localStorage.getItem('tutorial-complete')) return false;
     let stage = tutorial;
     const { vbox } = player;
     if (stage === 1) {
@@ -102,7 +99,6 @@ function tutorialVbox(player, store, tutorial) {
 }
 
 function tutorialStage(tutorial, ws, clearTutorial, instance) {
-    if (localStorage.getItem('tutorial-complete')) return false;
     if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;
 
     const exit = () => {

From 5f2e73e3739c6ed0715742a4db7d3c4d28d8d40a Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 31 Oct 2019 16:08:29 +1000
Subject: [PATCH 53/53] formatting

---
 client/src/events.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/events.jsx b/client/src/events.jsx
index 22be4613..0cc1e4a0 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -212,9 +212,8 @@ function registerEvents(store) {
             if (v.phase === 'Finished') {
                 ws.sendAccountInstances();
             }
-            if (localStorage.getItem('tutorial-complete')){
+            if (localStorage.getItem('tutorial-complete')) {
                 store.dispatch(actions.setTutorial(null));
-
             } else if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
                 tutorialVbox(player, store, tutorial);
             }