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

tutorial update

Browse Source
This commit is contained in:
ntr 2019-12-29 16:46:51 +10:00
parent 029a93c684
commit 012b4d0713
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/assets/styles/styles.less
View File

@ -317,6 +317,7 @@ li {
.mnni { .mnni {
background-image: url("./../mnni.svg"); background-image: url("./../mnni.svg");
filter: url("#noiseFilter");
} }
.avatar { .avatar {

1
client/src/components/vbox.combos.jsx
View File

@ -71,7 +71,6 @@ class Combos extends preact.Component {
<div class="combos"> <div class="combos">
<div class="combo-header"> <div class="combo-header">
<h2>COMBOS</h2> <h2>COMBOS</h2>
Combine colours and items.
</div> </div>
<div class="combo-list" <div class="combo-list"
onMouseOver={e => e.stopPropagation()} onMouseOver={e => e.stopPropagation()}

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

@ -115,8 +115,9 @@ function tutorialStage(tutorial, clearTutorial, instance) {
if (tutorial === 1) { if (tutorial === 1) {
return ( return (
<div class='info-item'> <div class='info-item'>
<h2>Tutorial</h2> <h1>Welcome to MNML</h1>
<p> Welcome to the vbox phase tutorial.</p> <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> Colours are used to create powerful combinations with base items. </p>
<p> Buy the two colours from the store to continue. </p> <p> Buy the two colours from the store to continue. </p>
</div> </div>
@ -126,9 +127,9 @@ function tutorialStage(tutorial, clearTutorial, instance) {
if (tutorial === 2) { if (tutorial === 2) {
return ( return (
<div class='info-item'> <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> 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> </div>
); );
} }
@ -137,11 +138,11 @@ function tutorialStage(tutorial, clearTutorial, instance) {
const constructOne = instance.players[0].constructs[0].name; const constructOne = instance.players[0].constructs[0].name;
return ( return (
<div class='info-item'> <div class='info-item'>
<h2>Tutorial</h2> <h2>Equipping Items</h2>
<p> The first construct on your team is <b>{constructOne}</b>. </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> 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> 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> </div>
); );
} }
@ -149,7 +150,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
if (tutorial === 4) { if (tutorial === 4) {
return ( return (
<div class='info-item'> <div class='info-item'>
<h2>Tutorial</h2> <h2>Specialisations</h2>
<p> You can also buy specialisation items for your constructs. <br /> <p> You can also buy specialisation items for your constructs. <br />
Specialisation items increase stats including power, speed and life. </p> Specialisation items increase stats including power, speed and life. </p>
<p> Buy the specialisation item from the store to continue. </p> <p> Buy the specialisation item from the store to continue. </p>
@ -160,11 +161,12 @@ function tutorialStage(tutorial, clearTutorial, instance) {
if (tutorial === 5) { if (tutorial === 5) {
return ( return (
<div class='info-item'> <div class='info-item'>
<h2>Tutorial</h2> <h2>Specialisations</h2>
<p> Equipping specialisation 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 further specialisation. </p> <p> These can also be combined with colours for further specialisation. </p>
<p> Click the specialisation item in the stash.<br /> <p> Click the specialisation item in the stash.<br />
Once selected click the flashing <b>SPEC</b> slot to equip the specialisation. </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>
</div> </div>
); );
} }
@ -174,11 +176,12 @@ function tutorialStage(tutorial, clearTutorial, instance) {
const constructThree = instance.players[0].constructs[2].name; const constructThree = instance.players[0].constructs[2].name;
return ( return (
<div class='info-item'> <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> 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> 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 /> <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>
<p> <b>PRO TIP:</b> Select a skill or spec on a construct and click another construct to swap it. </p>
</div> </div>
); );
} }
@ -186,7 +189,7 @@ function tutorialStage(tutorial, clearTutorial, instance) {
if (tutorial === 7) { if (tutorial === 7) {
return ( return (
<div class='info-item'> <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> 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 /> <p> Bits are your currency for buying items. <br />
You can refill the store by pressing the refill button for 2b. <br /> You can refill the store by pressing the refill button for 2b. <br />
@ -203,22 +206,22 @@ function tutorialStage(tutorial, clearTutorial, instance) {
return ( return (
<div class='info-item'> <div class='info-item'>
<h2>Tutorial</h2> <h2>GLHF</h2>
<p>That completes the VBOX Tutorial.</p> <p>That completes the VBOX Tutorial.</p>
<p>Press <b>READY</b> to progress to the <b>GAME PHASE</b> <br /> <p>Press the green <b>READY</b> button in the bottom right to progress to the <b>GAME PHASE</b> <br />
You can continue creating new items to upgrade your constructs further. </p> or continue creating new items to upgrade your constructs further. </p>
</div> </div>
); );
} }
return false; return false;
}; };
const classes = tutorial === 8 ? 'focus' : ''; const exitTutorial = tutorial === 8 ?
const text = tutorial === 8 ? 'Continue' : 'Skip Tutorial' <button
const exitTutorial = <button class='focus'
class={classes} onClick={e => e.stopPropagation()}
onClick={e => e.stopPropagation()} onMouseDown={exit}> Continue </button>
onMouseDown={exit}> {text} </button>; : null;
return ( return (
<div class='tutorial'> <div class='tutorial'>