238 lines
8.3 KiB
JavaScript
238 lines
8.3 KiB
JavaScript
const preact = require('preact');
|
|
const actions = require('./actions');
|
|
|
|
function tutorialConstructDisplay(player, instance, tutorial, i) {
|
|
if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
|
|
if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
|
|
const classes = 'instance-construct';
|
|
return (<div key={player.constructs[i].id} class={classes}></div>);
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function tutorialShouldDisableEquip(tutorial, iter, instance, construct) {
|
|
return tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0
|
|
&& instance.time_control === 'Practice' && instance.rounds.length === 1;
|
|
}
|
|
|
|
|
|
function tutorialVbox(player, store, tutorial) {
|
|
let stage = tutorial;
|
|
const { vbox } = player;
|
|
if (stage === 1) {
|
|
if (vbox.bits < 29) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = vbox.free[0].slice(0, 2);
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = [];
|
|
vbox.bound.fill(null, 0, 3);
|
|
}
|
|
}
|
|
|
|
if (stage === 2) {
|
|
if (!(vbox.bound.slice(0, 3).every(i => i === 'Attack') && vbox.bound.length >= 3)) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = vbox.free[0].slice(0, 2);
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = [];
|
|
vbox.bound.fill(null, 1, 3);
|
|
}
|
|
}
|
|
|
|
if (stage === 3) {
|
|
if (player.constructs[0].skills.length !== 0) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = vbox.free[0].slice(0, 2);
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = [];
|
|
vbox.bound.fill(null, 0, 2);
|
|
}
|
|
}
|
|
|
|
if (stage === 4) {
|
|
if (!vbox.free[2][0] || vbox.bits < 24) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = [];
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = vbox.free[2].slice(0, 1);
|
|
vbox.bound.fill(null, 0, 2);
|
|
}
|
|
}
|
|
|
|
if (stage === 5) {
|
|
if (player.constructs[0].specs.length !== 0) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = [];
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = vbox.free[2].slice(0, 1);
|
|
vbox.bound.fill(null, 0, 2);
|
|
}
|
|
}
|
|
|
|
if (stage === 6) {
|
|
if (player.constructs.every(c => c.skills.length !== 0)) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = [];
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = [];
|
|
}
|
|
}
|
|
|
|
if (stage === 7) {
|
|
if (vbox.bits < 25) {
|
|
stage += 1;
|
|
} else {
|
|
vbox.free[0] = [];
|
|
vbox.free[1] = [];
|
|
vbox.free[2] = [];
|
|
}
|
|
}
|
|
store.dispatch(actions.setTutorial(stage));
|
|
}
|
|
|
|
function tutorialStage(tutorial, ws, clearTutorial, instance) {
|
|
if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;
|
|
|
|
const exit = () => {
|
|
clearTutorial();
|
|
localStorage.setItem('tutorial-complete', true);
|
|
ws.sendInstanceState(instance.id);
|
|
};
|
|
|
|
const tutorialText = () => {
|
|
if (tutorial === 1) {
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</h2>
|
|
<p> Welcome to the vbox phase tutorial.</p>
|
|
<p> Colours are used to create powerful combinations with base items. </p>
|
|
<p> Buy the two colours from the vbox to continue. </p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 2) {
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</h2>
|
|
<p> In a normal game you start with three base <b>Attack</b> skill items. </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. <br />
|
|
Once selected press <b>COMBINE</b> to create a new combo.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 3) {
|
|
const constructOne = instance.players[0].constructs[0].name;
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</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 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>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 4) {
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</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 vbox to continue. </p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 5) {
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</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 top right of the inventory.<br />
|
|
Once selected click the construct <b>SPEC</b> slot to equip the specialisation. </p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 6) {
|
|
const constructTwo = instance.players[0].constructs[1].name;
|
|
const constructThree = instance.players[0].constructs[2].name;
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 7) {
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</h2>
|
|
<p> Each round you start with a vbox full of different skills, specs and colours. </p>
|
|
<p> Bits are your currency for buying skills, specs and colours from the vbox. <br />
|
|
Colours cost 1b, Skills cost 2b and specs cost 3b. <br />
|
|
You can refill the vbox by pressing the refill button for 2b. <br />
|
|
After each combat round you get more bits to further upgrade your team.
|
|
</p>
|
|
<p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tutorial === 8) {
|
|
if (window.innerWidth < 1000) {
|
|
return exit();
|
|
}
|
|
|
|
return (
|
|
<div class='info-item'>
|
|
<h2>Tutorial</h2>
|
|
<p>You've completed the tutorial! Try to create more skill and spec combinations. </p>
|
|
<p>You can unequip skills and specs back into the inventory by double clicking. <br />
|
|
Reclaim can be used to refund the cost of items in your inventory. </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>;
|
|
|
|
return (
|
|
<div class='tutorial'>
|
|
{tutorialText()}
|
|
<figure>
|
|
{exitTutorial}
|
|
</figure>
|
|
</div>);
|
|
}
|
|
|
|
module.exports = {
|
|
tutorialConstructDisplay,
|
|
tutorialVbox,
|
|
tutorialStage,
|
|
tutorialShouldDisableEquip,
|
|
};
|