ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tutorial text, vbox hover inventory

Browse Source
This commit is contained in:
Mashy 2019-10-30 13:17:06 +10:00
parent 39be7b952f
commit 0009e1fb5b
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/vbox.component.jsx
View File

@ -404,7 +404,7 @@ class Vbox extends preact.Component {
return true; 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 ( return (
<div class={inventoryClass} <div class={inventoryClass}

48
client/src/tutorial.utils.jsx
View File

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