disable stash during tutorial first stage, misc text improvements

client/src/components/vbox.stash.jsx

@@ -9,7 +9,7 @@ const buttons = require('./buttons');
 const { removeTier } = require('../utils');
 
 const addState = connect(
-    ({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));
+    ({ itemUnequip, vboxHighlight, vboxSelected, tutorial }) => ({ itemUnequip, vboxHighlight, vboxSelected, tutorial }));
 
 class stashElement extends preact.Component {
     shouldComponentUpdate(newProps) {
@@ -23,6 +23,7 @@ class stashElement extends preact.Component {
         if (newProps.itemUnequip !== this.props.itemUnequip) return true;
         if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
         return false;
     }
 
@@ -39,6 +40,7 @@ class stashElement extends preact.Component {
             itemUnequip,
             vboxHighlight,
             vboxSelected,
+            tutorial,
         } = props;
 
         const { storeSelect, stashSelect } = vboxSelected;
@@ -95,7 +97,7 @@ class stashElement extends preact.Component {
                 : `${border} ${notValidCombo ? 'fade' : ''}`;
 
             const invObject = shapes[v] ? shapes[v]() : v;
-
+            const tutorialDisable = tutorial === 1;
             return (
                 <label
                     key={i}
@@ -108,7 +110,9 @@ class stashElement extends preact.Component {
                         class={classes}
                         onMouseOver={e => vboxHover(e, v)}
                         onClick={e => e.stopPropagation()}
-                        onMouseDown={e => onClick('click', e)}>
+                        onMouseDown={e => onClick('click', e)}
+                        disabled={tutorialDisable}
+                    >
                         {invObject}
                     </button>
                 </label>

client/src/tutorial.utils.jsx

@@ -116,9 +116,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
             return (
                 <div class='info-item'>
                     <h1>Welcome to MNML</h1>
-                    <p> This is the <b>VBOX Phase</b> tutorial.</p>
+                    <p> This is the <b>VBOX Phase</b> where you customise your team. </p>
-                    <p> In the <b>VBOX Phase</b> you customise your constructs' skills and specialisations. </p>
-                    <p> Colours are used to create powerful combinations with base items. </p>
                     <p> Buy the two colours from the store to continue. </p>
                 </div>
             );
@@ -128,8 +126,9 @@ function tutorialStage(tutorial, clearTutorial, instance) {
             return (
                 <div class='info-item'>
                     <h2>Combining Items</h2>
-                    <p> You start the game with the base <b>Attack</b> skill item. </p>
+                    <p> You start the game with the <b>Attack</b> base skill item. </p>
-                    <p> Highlight the <b>Attack</b> and the two <b> colours</b> then click <b> combine</b> </p>
+                    <p> Create powerful combinations by combining colours with base items. </p>
+                    <p> Select all three items to <b> combine</b>. </p>
                 </div>
             );
         }
@@ -141,8 +140,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
                     <h2>Equipping Items</h2>
                     <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 your new skill from the stash. <br />
+                    <p> Select your new skill from the stash and then click the flashing <b>SKILL</b> slot or the construct image to equip. </p>
-                        Once selected click the flashing <b>SKILL</b> slot or the construct img to equip the skill. </p>
                 </div>
             );
         }
@@ -162,11 +160,10 @@ function tutorialStage(tutorial, clearTutorial, instance) {
             return (
                 <div class='info-item'>
                     <h2>Specialisations</h2>
-                    <p> Equipping specialisation items will increase the stats of your constructs.</p>
+                    <p> Specialisation items increase the stats of your constructs. <br/ >
-                    <p> These can also be combined with colours for further specialisation. </p>
+                    They can be combined further with colours to optimise your team strategy.</p>
-                    <p> Click the specialisation item in the stash.<br />
+                    <p> Slect the item in the stash, once selected click the flashing <b>SPEC</b> slot to equip. </p>
-                        Once selected click the flashing <b>SPEC</b> slot to equip the specialisation. </p>
+                    <p> <b>PRO TIP:</b> While selecting an item in the shop, click on your construct to buy and equip in one step. </p>
-                    <p> <b>PRO TIP:</b> while selecting an item in the shop, click on your construct to buy and equip in one step. </p>
                 </div>
             );
         }
@@ -178,8 +175,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
                 <div class='info-item'>
                     <h2>Skills</h2>
                     <p> You have now created a construct with an upgraded skill and base spec. </p>
-                    <p> The goal is to create three powerful constructs for combat. </p>
+                    <p> Equip your other constructs <b>{constructTwo}</b> and <b>{constructThree}</b> with skills. <br />
-                    <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>
                     <p> <b>PRO TIP:</b> Select a skill or spec on a construct and click another construct to swap it. </p>
                 </div>