diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index f4aafd3e..9d54e20f 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -12,7 +12,9 @@ const shapes = require('./shapes'); class InfoComponent extends Component { shouldComponentUpdate(newProps) { if (newProps.tutorial !== this.props.tutorial) return true; - if (newProps.tutorial) return false; // We don't care about info during tutorial + // We don't care about info during tutorial + if (newProps.tutorial && this.props.instance.time_control === 'Practice' + && this.props.instance.rounds.length === 1) return false; if (newProps.info !== this.props.info) return true; return false; } @@ -29,7 +31,10 @@ class InfoComponent extends Component { } = args; function Info() { - if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance); + if (tutorial) { + const tutorialStageInfo = tutorialStage(tutorial, ws, clearTutorial, instance); + if (tutorialStageInfo) return tutorialStageInfo; + } if (!info) { return ( diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 5d3ec130..1462ea12 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -8,6 +8,7 @@ const { STATS } = require('../utils'); const { ConstructAvatar } = require('./construct'); const actions = require('../actions'); const { removeTier } = require('../utils'); +const { tutorialConstructDisplay, tutorialShouldDisableEquip } = require('../tutorial.utils.jsx'); const addState = connect( function receiveState(state) { @@ -79,6 +80,7 @@ function Construct(props) { const { iter, itemEquip, + instance, construct, player, sendVboxApply, @@ -99,7 +101,7 @@ function Construct(props) { if (!sk) return false; return sk.skill === vbox.bound[itemEquip]; }); - const tutorialDisableEquip = tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0; + const tutorialDisableEquip = tutorialShouldDisableEquip(tutorial, iter, instance, construct); function onClick(e) { e.stopPropagation(); @@ -142,9 +144,9 @@ function Construct(props) { e.preventDefault(); return true; } - - // const action = skill ? '' : 'action'; - const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill && !tutorialDisableEquip && !duplicateSkill; + + const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill + && !tutorialDisableEquip && !duplicateSkill; const border = () => { if (!skill) return ''; const borderFn = buttons[removeTier(skill.skill)]; @@ -179,8 +181,6 @@ function Construct(props) { ); } - const specInfo = itemInfo.items.find(i => i.item === s); - function specClick(e) { e.stopPropagation(); setItemUnequip([construct.id, s]); @@ -266,17 +266,13 @@ function InstanceConstructs(props) { if (instance.phase === 'Lobby') return false; 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 (
); - } - } + const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i); + if (tutorialConstruct) return (tutorialConstruct); return Construct({ iter: i, construct: player.constructs[i], activeConstruct, + instance, itemEquip, setItemUnequip, setItemEquip, diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx index 605c4812..f2f38201 100644 --- a/client/src/tutorial.utils.jsx +++ b/client/src/tutorial.utils.jsx @@ -1,6 +1,23 @@ const preact = require('preact'); const actions = require('./actions'); +function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) { + if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) { + if (tutorial <= 2 || (tutorial > 2 && i > 0)) { + const mobileVisible = navInstance === i + 1; + const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`; + return (
); + } + } + 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; @@ -82,6 +99,7 @@ function tutorialVbox(player, store, tutorial) { } function tutorialStage(tutorial, ws, clearTutorial, instance) { + if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false; const exit = () => { clearTutorial(); ws.sendInstanceState(instance.id); @@ -200,6 +218,8 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { } module.exports = { + tutorialConstructDisplay, tutorialVbox, tutorialStage, + tutorialShouldDisableEquip };