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 {
background-image: url("./../mnni.svg");
filter: url("#noiseFilter");
}
.avatar {

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

@ -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()}

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

@ -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'>