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

tutorial init

Browse Source
This commit is contained in:
Mashy 2019-10-27 19:05:55 +10:00
parent 6f5d7338d0
commit bb94e43ca1
8 changed files with 284 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/actions.jsx
View File

@ -50,6 +50,8 @@ export const setTeam = value => ({ type: 'SET_TEAM', value: Array.from(value) })
export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });
export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.from(value) });
export const setTutorial = value => ({ type: 'SET_TUTORIAL', value });
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });

11
client/src/components/info.component.jsx
View File

@ -4,19 +4,23 @@ const reactStringReplace = require('react-string-replace');
const { INFO } = require('./../constants');
const { convertItem, removeTier } = require('../utils');
const { tutorialStage } = require('../tutorial.utils');
const shapes = require('./shapes');
function InfoComponent(args) {
const {
ws,
itemInfo,
player,
instance,
info,
tutorial,
clearTutorial,
} = args;
// args.info = 'Life';
// const { info } = args;
function Info() {
if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance);
if (!info) {
return (
<div>
@ -178,6 +182,7 @@ function InfoComponent(args) {
function Combos() {
if (!player) return false;
if (!info) return false;
if (tutorial) return false;
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
if (vboxCombos.length > 6) return false;

11
client/src/components/info.container.jsx
View File

@ -13,6 +13,7 @@ const addState = connect(
instance,
player,
account,
tutorial,
} = state;
return {
@ -23,8 +24,18 @@ const addState = connect(
instance,
player,
account,
tutorial,
};
},
function receiveDispatch(dispatch) {
function clearTutorial() {
dispatch(actions.setTutorial(null));
}
return { clearTutorial };
}
);
module.exports = addState(Info);

64
client/src/components/instance.constructs.jsx
View File

@ -20,6 +20,7 @@ const addState = connect(
itemEquip,
activeConstruct,
navInstance,
tutorial,
} = state;
function sendVboxApply(constructId, i) {
@ -40,6 +41,7 @@ const addState = connect(
navInstance,
activeConstruct,
sendUnequip,
tutorial,
};
},
@ -75,6 +77,7 @@ const addState = connect(
function Construct(props) {
const {
iter,
itemEquip,
construct,
player,
@ -86,11 +89,22 @@ function Construct(props) {
setInfo,
sendUnequip,
mobileVisible,
tutorial,
} = props;
const { vbox } = player;
const duplicateSkill = construct.skills.length !== 0 && construct.skills.every(sk => {
if (!itemEquip && itemEquip !== 0) return false;
if (!sk) return false;
return sk.skill === vbox.bound[itemEquip];
});
const tutorialDisableEquip = tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0;
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (duplicateSkill || tutorialDisableEquip) return true;
if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
setItemEquip(null);
return setActiveConstruct(construct);
@ -102,7 +116,6 @@ function Construct(props) {
return setInfo(info);
}
const { vbox } = player;
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
@ -129,9 +142,9 @@ function Construct(props) {
e.preventDefault();
return true;
}
// const action = skill ? '' : 'action';
const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill && !tutorialDisableEquip && !duplicateSkill;
const border = () => {
if (!skill) return '';
const borderFn = buttons[removeTier(skill.skill)];
@ -246,30 +259,41 @@ function InstanceConstructs(props) {
setItemEquip,
sendUnequip,
navInstance,
tutorial,
} = props;
if (!player) return false;
if (instance.phase === 'Lobby') return false;
const constructs = player.constructs.map((c, i) => Construct({
construct: c,
activeConstruct,
itemEquip,
setItemUnequip,
setItemEquip,
player,
sendVboxApply,
setInfo,
setActiveConstruct,
itemInfo,
setVboxHighlight,
sendUnequip,
mobileVisible: navInstance === i + 1,
}));
const constructs = range(0, 3).map(i => {
if (tutorial && tutorial < 6) {
if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
const mobileVisible = navInstance === i + 1;
const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
return (<div key={player.constructs[i].id} class={classes}></div>);
}
}
return Construct({
iter: i,
construct: player.constructs[i],
activeConstruct,
itemEquip,
setItemUnequip,
setItemEquip,
player,
sendVboxApply,
setInfo,
setActiveConstruct,
itemInfo,
setVboxHighlight,
sendUnequip,
tutorial,
mobileVisible: navInstance === i + 1,
});
});
const classes = `construct-list`;
return (
<div class={classes} onClick={() => setActiveConstruct(null)}>
<div class='construct-list' onClick={() => setActiveConstruct(null)}>
{constructs}
</div>
);

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

@ -21,6 +21,7 @@ const addState = connect(
itemUnequip,
navInstance,
info,
tutorial,
} = state;
function sendVboxDiscard() {
@ -57,6 +58,7 @@ const addState = connect(
itemUnequip,
sendItemUnequip,
navInstance,
tutorial,
info,
};
},
@ -113,6 +115,7 @@ function Vbox(args) {
setVboxSelected,
setItemEquip,
tutorial,
itemUnequip,
sendItemUnequip,
@ -161,16 +164,7 @@ function Vbox(args) {
function availableBtn(v, group, index) {
if (!v) return <button disabled class='empty' >&nbsp;</button>;
const tutorial = instance.time_control === 'Practice'
&& instance.rounds.length === 1
&& group === 0
&& combiner.length === 0
&& vboxSelected.length === 0
&& vbox.bits > 10
&& vbox.free[0].filter(c => c).length > 4
? 'combo-border' : null;
const selected = vboxSelected[0] === group && vboxSelected[1] === index;
const selected = vboxSelected[0] === group && vboxSelected[1] === index;
// state not yet set in double click handler
function onDblClick(e) {
@ -203,7 +197,7 @@ function Vbox(args) {
} return false;
}) ? 'combo-border' : '';
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight} ${tutorial}`;
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
if (shapes[v]) {
return (
@ -251,6 +245,7 @@ function Vbox(args) {
<button
class='vbox-btn'
onMouseOver={e => hoverInfo(e, 'refill')}
disabled={tutorial && tutorial < 7}
onClick={e => e.stopPropagation()}
onMouseDown={() => sendVboxDiscard()}>
refill - 2b
@ -276,16 +271,6 @@ function Vbox(args) {
return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
}
const tutorial = instance.time_control === 'Practice'
&& instance.rounds.length === 1
&& i === 0
&& combiner.length === 0
&& vboxSelected.length === 0
&& vbox.bits === 16
&& vbox.bound.length === 5
&& vbox.free[0].filter(c => c).length === 4
? 'combo-border' : null;
const combinerItems = combiner.map(j => vbox.bound[j]);
const combinerCount = countBy(combinerItems, co => co);
@ -325,7 +310,7 @@ function Vbox(args) {
const highlighted = combiner.indexOf(i) > -1;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight} ${tutorial}`;
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
if (shapes[v]) {
return (
<button
@ -400,11 +385,12 @@ function Vbox(args) {
<div class={inventoryClass}
onMouseDown={inventoryClick}
onClick={e => e.stopPropagation()}
style={vboxSelecting || itemUnequip.length ? { cursor: 'pointer' } : null}
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
onMouseOver={e => hoverInfo(e, 'inventory')}>
<div class="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
<button
disabled={tutorial && tutorial < 8}
class='vbox-btn reclaim'
onMouseOver={e => hoverInfo(e, 'reclaim')}
onClick={e => e.stopPropagation()}

15
client/src/events.jsx
View File

@ -8,6 +8,7 @@ const actions = require('./actions');
const { TIMES } = require('./constants');
const animations = require('./animations.utils');
const { infoToast, errorToast } = require('./utils');
const { tutorialVbox } = require('./tutorial.utils');
function registerEvents(store) {
function notify(msg) {
@ -196,7 +197,7 @@ function registerEvents(store) {
}
function setInstance(v) {
const { account, instance, ws } = store.getState();
const { account, instance, ws, tutorial } = store.getState();
if (v) {
setInvite(null);
const player = v.players.find(p => p.id === account.id);
@ -207,10 +208,14 @@ function registerEvents(store) {
const first = player.constructs[0];
store.dispatch(actions.setActiveConstruct(first));
}
}
if (v.phase === 'Finished') {
setGame(null);
ws.sendAccountInstances();
if (v.phase === 'Finished') {
setGame(null);
ws.sendAccountInstances();
}
if (v.time_control === 'Practice' && v.rounds.length === 1 && tutorial) {
tutorialVbox(player, store, tutorial);
}
}
return store.dispatch(actions.setInstance(v));

2
client/src/reducers.jsx
View File

@ -59,6 +59,8 @@ module.exports = {
teamPage: createReducer(0, 'SET_TEAM_PAGE'),
teamSelect: createReducer([null, null, null], 'SET_TEAM_SELECT'),
tutorial: createReducer(1, 'SET_TUTORIAL'),
vboxSelected: createReducer([], 'SET_VBOX_SELECTED'),
ws: createReducer(null, 'SET_WS'),

198
client/src/tutorial.utils.jsx Normal file
View File

@ -0,0 +1,198 @@
const preact = require('preact');
const actions = require('./actions');
function tutorialVbox(player, store, tutorial) {
let stage = tutorial;
const { vbox } = player;
if (stage === 1) {
if (vbox.bits < 17) {
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 < 12) {
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 < 13) {
stage += 1;
} else {
vbox.free[0] = [];
vbox.free[1] = [];
vbox.free[2] = [];
}
}
console.log(stage);
store.dispatch(actions.setTutorial(stage));
}
function tutorialStage(tutorial, ws, clearTutorial, instance) {
const exit = () => {
clearTutorial();
ws.sendInstanceState(instance.id);
};
const tutorialText = () => {
if (tutorial === 1) {
return (
<div>
<h2>Tutorial</h2>
<p>This is the vbox phase tutorial.</p>
<p> The game revolves around combining colours with items to create skills and specs. </p>
<p> Buy two colours from the vbox by double clicking or click the colour once and then the inventory. </p>
</div>
);
}
if (tutorial === 2) {
return (
<div>
<h2>Tutorial</h2>
<p> In a normal game you start with 3 Attack Skill items. </p>
<p> These can be combined with colours to create powerful combinations. </p>
<p> Select the Attack item along with two colours and press combine. </p>
</div>
);
}
if (tutorial === 3) {
return (
<div>
<h2>Tutorial</h2>
<p> Skill items can be equipped to your constructs to give them that ability for the combat phase. </p>
<p> Click the newly combined skill item in the inventory and then the construct at the bottom to equip the skill. </p>
</div>
);
}
if (tutorial === 4) {
return (
<div>
<h2>Tutorial</h2>
<p> You can also buy spec items to increase the stats of your constructs. </p>
<p> Buy the spec item by double clicking or click the spec once and then the inventory. </p>
</div>
);
}
if (tutorial === 5) {
return (
<div>
<h2>Tutorial</h2>
<p> Equipping spec items will increase the stats of your constructs. </p>
<p> These can also be combined with colours for more specialisation. </p>
<p> Click the spec item in the inventory followed by an empty inventory spec slot to equip the spec. </p>
</div>
);
}
if (tutorial === 6) {
const constructTwo = instance.players[0].constructs[1].name;
const constructThree = instance.players[0].constructs[2].name;
return (
<div>
<h2>Tutorial</h2>
<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> Equip <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>
<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. </p>
<p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
</div>
);
}
if (tutorial === 8) {
return (
<div>
<h2>Tutorial</h2>
<p> You can now freely create different skill and spec combos. </p>
<p> Reclaim is used only if needed to refund items in your inventory. <br />
If you click the exit tutorial button this section will be replaced with more information on selected items. <br /></p>
<p> When ready, you can go into the combat phase by hitting ready in the bottom right. </p>
</div>
);
}
return false;
};
const exitTutorial = <button onClick={e => e.stopPropagation()} onMouseDown={exit}> Exit Tutorial </button>;
return (
<div>
{tutorialText()}
{exitTutorial}
</div>);
}
module.exports = {
tutorialVbox,
tutorialStage,
};