tutorial disable check, info formatting

client/src/components/vbox.component.jsx

@@ -104,11 +104,10 @@ class Vbox extends preact.Component {
         if (newProps.reclaiming !== this.props.reclaiming) return true;
         if (newProps.navInstance !== this.props.navInstance) return true;
         if (newProps.tutorial !== this.props.tutorial) return true;
-        // Don't bother if info changes during tutorial
+        if (newProps.info !== this.props.info) return true;
-        if (!newProps.tutorial && newProps.info !== this.props.info) return true;
-        // JSON or Array objects
         if (newProps.vboxSelected !== this.props.vboxSelected) return true;
         if (newProps.player !== this.props.player) return true;
+        if (newProps.instance !== this.props.instance) return true;
         return false;
     }
 
@@ -123,6 +122,7 @@ class Vbox extends preact.Component {
             navInstance,
             info,
             vboxSelected,
+            instance,
 
             // Static
             itemInfo,
@@ -269,7 +269,7 @@ class Vbox extends preact.Component {
                     <button
                         class='vbox-btn'
                         onMouseOver={e => hoverInfo(e, 'refill')}
-                        disabled={tutorial && tutorial < 7}
+                        disabled={tutorial && tutorial < 7 && instance.time_control === 'Practice' && instance.rounds.length === 1}
                         onClick={e => e.stopPropagation()}
                         onMouseDown={() => sendVboxDiscard()}>
                         refill - 2b
@@ -419,7 +419,7 @@ class Vbox extends preact.Component {
                             onMouseOver={e => hoverInfo(e, 'inventory')}> INVENTORY
                         </h3>
                         <button
-                            disabled={tutorial && tutorial < 8}
+                            disabled={tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1}
                             class='vbox-btn reclaim'
                             onMouseOver={e => hoverInfo(e, 'reclaim')}
                             onClick={e => e.stopPropagation()}

client/src/constants.jsx

@@ -26,7 +26,8 @@ module.exports = {
     INFO: {
         vbox: {
             item: 'VBOX',
-            description: <p><b>ITEMS</b> that are available to buy.<br />The <b>VBOX</b> is refilled every round.<br />Click <b>REFILL</b> at the bottom to purchase a refill. </p>,
+            description: <p><b>ITEMS</b> that are available to buy.<br />
+                The <b>VBOX</b> is refilled every round.<br />Click <b>REFILL</b> at the bottom to purchase a refill. </p>,
         },
         inventory: {
             item: 'INVENTORY',
@@ -34,7 +35,11 @@ module.exports = {
         },
         bits: {
             item: 'BITS',
-            description: 'The VBOX currency.\nColours - 1b\nSkills - 2b\nSpecs - 3b.\nAt the beginning of each round you receive 18 bits. This amount increases by 6 bits per round.',
+            description: <p>The VBOX currency.<br />
+                Colours - 1b<br />
+                Skills - 2b<br />
+                Specs - 3b.<br />
+                At the beginning of each round you receive 18 bits increasing by 6 bits per round.</p>,
         },
         ready: {
             item: 'READY',
@@ -46,43 +51,39 @@ module.exports = {
         },
         reclaim: {
             item: 'RECLAIM',
-            description: 'Reclaim items refunding the listed cost of the item.\nClick to enable and then click the item to reclaim.',
+            description: <p>Reclaim items refunding the listed cost of the item.<br />
-        },
+                Click to enable and then click the item to reclaim.</p>,
-        refine: {
-            item: 'COMBINE',
-            description: <p>combine the selected items.<br />hover over an item to see <b>RECIPES</b>.</p>,
         },
         refill: {
             item: 'REFILL',
             description: 'Refill the VBOX with new items.',
         },
-        equipSkills: {
-            item: 'QUICK ACCESS - SKILLS',
-            description: 'Click to select \nClick target CONSTRUCT to equip',
-        },
-        equipSpecs: {
-            item: 'QUICK ACCESS - SPECS',
-            description: 'Click to select \nClick target CONSTRUCT to equip',
-        },
         constructSkills: {
             item: 'SKILLS',
-            description: 'Skills are used by Constructs in-game.\nClick a SKILL above and select a CONSTRUCT to equip.\nDouble-click to unequip.',
+            description: <p>Skills are used by constructs in the game phase.<br />
+                Base skills can be bought from the VBOX.<br />
+                Equip skills from the inventory. Double-click to unequip.</p>,
         },
         constructSpecs: {
             item: 'SPECS',
-            description: 'Specialisations increase the stats of a construct. This includes the damage, healing and speed of your skills and life.\n Increased effect when your team meets the colour threshold.\n Double-click to unequip.',
+            description: <p>Specialisations increase the stats of a construct.<br />
+                Increased effect when your team meets the colour threshold.<br />Double-click to unequip.</p>,
         },
         powerStat: {
             item: 'POWER',
-            description: 'Power determines the base damage and healing of your construct skills. Combine POWER specs to increase construct power.',
+            description: <p>Power determines the base damage and healing of your construct skills.<br />
+                Combine POWER specs to increase construct power.</p>,
         },
         lifeStat: {
             item: 'LIFE',
-            description: 'The life of your construct.\n When your construct reaches 0 green life it is knocked out and cannot cast skills.\nRed life mitigates red damage and blue life mitigates blue damage. Combine LIFE specs to increase life totals.',
+            description: <p>The life of your construct.<br />
+                When your construct reaches 0 green life it is knocked out and cannot cast skills.<br />
+                Red life mitigates red damage and blue life mitigates blue damage.<br />
+                Combine LIFE specs to increase life totals.</p>,
         },
         speedStat: {
             item: 'SPEED',
-            description: 'Speed determines the order in which skills resolve. Combine SPEED specs to increase speed.',
+            description: <p>Speed determines the order in which skills resolve.<br />Combine SPEED specs to increase speed.</p>,
         },
     },
 };