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
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/info.component.jsx
+8 -3
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;
client/src/components/info.container.jsx
+11
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);
client/src/components/instance.constructs.jsx
+44 -20
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>
);
client/src/components/vbox.component.jsx
+9 -23
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()}