button css, only update info component when info or tutorial changes

client/assets/styles/instance.less

@@ -446,6 +446,17 @@
     }
 }
 
+.tutorial {
+    button {
+        width: 100%;
+    }
+
+    button.focus {
+        animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
+    }
+
+}
+
 @keyframes faceoff {
     from {
         color: @black;

client/src/components/info.component.jsx

@@ -2,12 +2,22 @@ const preact = require('preact');
 const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
+const { Component } = require('preact');
 const { INFO } = require('./../constants');
 const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
-function InfoComponent(args) {
+
+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
+        if (newProps.info !== this.props.info) return true;
+        return false;
+    }
+
+    render(args) {
         const {
             ws,
             itemInfo,
@@ -208,5 +218,6 @@ function InfoComponent(args) {
             </div>
         );
     }
+}
 
 module.exports = InfoComponent;

client/src/components/play.jsx

@@ -139,7 +139,8 @@ function Play(args) {
         </button>;
 
     const list = () => {
-        if (!instances.length) return (
+        if (!instances.length) {
+            return (
                 <div class='list play'>
                     <figure>
                         <button
@@ -168,6 +169,7 @@ function Play(args) {
                     </figure>
                 </div>
             );
+        }
 
         return (
             <div class='list play rejoin'>
@@ -181,7 +183,7 @@ function Play(args) {
                 </figure>
             </div>
         );
-    }
+    };
 
     return (
         <section class="top">

client/src/components/vbox.component.jsx

@@ -99,7 +99,6 @@ function Vbox(args) {
     const {
         combiner,
         navInstance,
-        instance,
         itemInfo,
         player,
         reclaiming,

client/src/tutorial.utils.jsx

@@ -162,7 +162,9 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                     <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>
+                        You can refill the vbox by pressing the refill button for 2b. <br />
+                        After each combat round you get more bits to further upgrade your team.
+                    </p>
                     <p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
                 </div>
             );
@@ -182,12 +184,18 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
         return false;
     };
 
-    const exitTutorial = <button onClick={e => e.stopPropagation()} onMouseDown={exit}> Exit Tutorial </button>;
+    const classes = tutorial === 8 ? 'focus' : '';
+    const exitTutorial = <button
+        class={classes}
+        onClick={e => e.stopPropagation()}
+        onMouseDown={exit}> Exit Tutorial </button>;
 
     return (
-        <div>
+        <div class='tutorial'>
             {tutorialText()}
+            <figure>
                 {exitTutorial}
+            </figure>
         </div>);
 }