refactor, all tutorial code checks for practice mode and first round

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 (

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
-        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill && !tutorialDisableEquip && !duplicateSkill;
+            && !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) {
+        const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
-            if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
+        if (tutorialConstruct) return (tutorialConstruct);
-                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,
+            instance,
             itemEquip,
             setItemUnequip,
             setItemEquip,

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 (<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;
@@ -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
 };