tutorial init

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 });
 

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;

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);

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({
+    const constructs = range(0, 3).map(i => {
-        construct: c,
+        if (tutorial && tutorial < 6) {
-        activeConstruct,
+            if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
-        itemEquip,
+                const mobileVisible = navInstance === i + 1;
-        setItemUnequip,
+                const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
-        setItemEquip,
+                return (<div key={player.constructs[i].id} class={classes}></div>);
-        player,
+            }
-        sendVboxApply,
+        }
-        setInfo,
+        return Construct({
-        setActiveConstruct,
+            iter: i,
-        itemInfo,
+            construct: player.constructs[i],
-        setVboxHighlight,
+            activeConstruct,
-        sendUnequip,
+            itemEquip,
-        mobileVisible: navInstance === i + 1,
+            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>
     );

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'
+                const selected = vboxSelected[0] === group && vboxSelected[1] === index;
-            && 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;
 
         // 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()}

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') {
+            if (v.phase === 'Finished') {
-            setGame(null);
+                setGame(null);
-            ws.sendAccountInstances();
+                ws.sendAccountInstances();
+            }
+            if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
+                tutorialVbox(player, store, tutorial);
+            }
         }
 
         return store.dispatch(actions.setInstance(v));

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'),

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,
+};