From 012b4d0713552b9d903eb2f0acf5c5974fe743d6 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 29 Dec 2019 16:46:51 +1000
Subject: [PATCH] tutorial update

---
 client/assets/styles/styles.less      |  1 +
 client/src/components/vbox.combos.jsx |  1 -
 client/src/tutorial.utils.jsx         | 41 ++++++++++++++-------------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 7e561607..0dbcb763 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -317,6 +317,7 @@ li {
 
 .mnni {
     background-image: url("./../mnni.svg");
+    filter: url("#noiseFilter");
 }
 
 .avatar {
diff --git a/client/src/components/vbox.combos.jsx b/client/src/components/vbox.combos.jsx
index f3c18682..4b5e7adb 100644
--- a/client/src/components/vbox.combos.jsx
+++ b/client/src/components/vbox.combos.jsx
@@ -71,7 +71,6 @@ class Combos extends preact.Component {
             <div class="combos">
                 <div class="combo-header">
                     <h2>COMBOS</h2>
-                    Combine colours and items.
                 </div>
                 <div class="combo-list"
                     onMouseOver={e => e.stopPropagation()}
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx
index 740aa867..90c0ded5 100644
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@@ -115,8 +115,9 @@ function tutorialStage(tutorial, clearTutorial, instance) {
         if (tutorial === 1) {
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
-                    <p> Welcome to the vbox phase tutorial.</p>
+                    <h1>Welcome to MNML</h1>
+                    <p> This is the <b>VBOX Phase</b> tutorial.</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>
@@ -126,9 +127,9 @@ function tutorialStage(tutorial, clearTutorial, instance) {
         if (tutorial === 2) {
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <h2>Combining Items</h2>
                     <p> You start the game with the base <b>Attack</b> skill item. </p>
-                    <p> Highlight all three items then click combine.</p>
+                    <p> Highlight the <b>Attack</b> and the two <b> colours</b> then click <b> combine</b> </p>
                 </div>
             );
         }
@@ -137,11 +138,11 @@ function tutorialStage(tutorial, clearTutorial, instance) {
             const constructOne = instance.players[0].constructs[0].name;
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <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 />
-                        Once selected click the flashing <b>SKILL</b> slot to equip the skill. </p>
+                        Once selected click the flashing <b>SKILL</b> slot or the construct img to equip the skill. </p>
                 </div>
             );
         }
@@ -149,7 +150,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
         if (tutorial === 4) {
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <h2>Specialisations</h2>
                     <p> You can also buy specialisation items for your constructs. <br />
                         Specialisation items increase stats including power, speed and life. </p>
                     <p> Buy the specialisation item from the store to continue. </p>
@@ -160,11 +161,12 @@ function tutorialStage(tutorial, clearTutorial, instance) {
         if (tutorial === 5) {
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <h2>Specialisations</h2>
                     <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 stash.<br />
                         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>
                 </div>
             );
         }
@@ -174,11 +176,12 @@ function tutorialStage(tutorial, clearTutorial, instance) {
             const constructThree = instance.players[0].constructs[2].name;
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <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 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>
             );
         }
@@ -186,7 +189,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
         if (tutorial === 7) {
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <h2>Economy</h2>
                     <p> Each round you start with 30 bits and a store full of different skills, specs and colours. </p>
                     <p> Bits are your currency for buying items. <br />
                         You can refill the store by pressing the refill button for 2b. <br />
@@ -203,22 +206,22 @@ function tutorialStage(tutorial, clearTutorial, instance) {
 
             return (
                 <div class='info-item'>
-                    <h2>Tutorial</h2>
+                    <h2>GLHF</h2>
                     <p>That completes the VBOX Tutorial.</p>
-                    <p>Press <b>READY</b> to progress to the <b>GAME PHASE</b> <br />
-                        You can continue creating new items to upgrade your constructs further. </p>
+                    <p>Press the green <b>READY</b> button in the bottom right to progress to the <b>GAME PHASE</b> <br />
+                        or continue creating new items to upgrade your constructs further. </p>
                 </div>
             );
         }
         return false;
     };
 
-    const classes = tutorial === 8 ? 'focus' : '';
-    const text = tutorial === 8 ? 'Continue' : 'Skip Tutorial'
-    const exitTutorial = <button
-        class={classes}
-        onClick={e => e.stopPropagation()}
-        onMouseDown={exit}> {text} </button>;
+    const exitTutorial = tutorial === 8 ?
+        <button
+            class='focus'
+            onClick={e => e.stopPropagation()}
+            onMouseDown={exit}> Continue </button>
+        : null;
 
     return (
         <div class='tutorial'>