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

disable stash during tutorial first stage, misc text improvements

Browse Source
This commit is contained in:
Mashy 2020-01-13 11:35:52 +10:00
parent d3b6a296f0
commit b45778955f
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/vbox.stash.jsx
View File

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

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

@ -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> 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> This is the <b>VBOX Phase</b> where you customise your team. </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> Highlight the <b>Attack</b> and the two <b> colours</b> then click <b> combine</b> </p>
<p> You start the game with the <b>Attack</b> base skill item. </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 />
Once selected click the flashing <b>SKILL</b> slot or the construct img to equip the skill. </p>
<p> Select your new skill from the stash and then click the flashing <b>SKILL</b> slot or the construct image to equip. </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> 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>
<p> Specialisation items increase the stats of your constructs. <br/ >
They can be combined further with colours to optimise your team strategy.</p>
<p> Slect the item in the stash, once selected click the flashing <b>SPEC</b> slot to equip. </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 the Attack skill. <br />
<p> Equip your other constructs <b>{constructTwo}</b> and <b>{constructThree}</b> with skills. <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>