should comp updates

client/src/components/faceoff.jsx

@@ -1,34 +1,25 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const actions = require('../actions');
-
 const { ConstructAvatar } = require('./construct');
-const Controls = require('./controls');
 
 const addState = connect(
     function receiveState(state) {
         const {
-            ws,
             instance,
             account,
         } = state;
 
-        function sendInstanceReady() {
-            return ws.sendInstanceReady(instance.id);
-        }
-
         return {
             instance,
             account,
-            sendInstanceReady,
         };
-    },
+    }
 );
 
 function FaceoffConstruct(args) {
     const {
-        construct
+        construct,
     } = args;
 
     return (
@@ -39,14 +30,20 @@ function FaceoffConstruct(args) {
                 <ConstructAvatar construct={construct} />
             </div>
         </div>
-    )
+    );
 }
 
-function Faceoff(props) {
+class Faceoff extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.account !== this.props.account) return true;
+        return false;
+    }
+
+    render(props) {
         const {
             instance,
             account,
-        sendInstanceReady,
         } = props;
 
         if (!instance) return <div>...</div>;
@@ -59,7 +56,7 @@ function Faceoff(props) {
                 <FaceoffConstruct key={c.id} construct={c}/>);
 
             const winner = instance.winner === team.id;
-        const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
+            const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
             return (
                 <div class={classes}>
                     {constructs}
@@ -73,7 +70,7 @@ function Faceoff(props) {
                 <FaceoffConstruct key={c.id} construct={c}/>);
 
             const winner = instance.winner === team.id;
-        const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
+            const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
 
             return (
                 <div class={classes}>
@@ -108,6 +105,7 @@ function Faceoff(props) {
                 {PlayerTeam(playerTeam)}
             </main>
         );
+    }
 }
 
 module.exports = addState(Faceoff);

client/src/components/info.component.jsx

@@ -3,7 +3,7 @@ const reactStringReplace = require('react-string-replace');
 
 const specThresholds = require('./info.thresholds');
 const { INFO } = require('./../constants');
-const { convertItem, removeTier, formatInfo } = require('../utils');
+const { convertItem, removeTier } = require('../utils');
 const { tutorialStage } = require('../tutorial.utils');
 const shapes = require('./shapes');
 
@@ -75,8 +75,8 @@ class InfoComponent extends preact.Component {
             };
 
             if (isSkill || isSpec) {
-                let infoText = info;
+                let infoName = info;
-                while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
+                while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+');
 
                 const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
 
@@ -101,7 +101,7 @@ class InfoComponent extends preact.Component {
 
                 return (
                     <div class={isSkill ? 'info-skill' : 'info-spec'}>
-                        <h2>{infoText} {fullInfo.cost}b</h2>
+                        <h2>{infoName} {fullInfo.cost}b</h2>
                         {header}
                         {itemSourceInfo}
                         {cooldown}

client/src/components/instance.component.jsx

@@ -13,11 +13,13 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { instance,
+        const {
+            instance,
             nav,
             navInstance,
         } = state;
-        return { instance,
+        return {
+            instance,
             nav,
             navInstance,
         };
@@ -52,7 +54,7 @@ const addState = connect(
 );
 
 class Instance extends Component {
-    componentShouldUpdate(newProps) {
+    shouldComponentUpdate(newProps) {
         if (newProps.instance !== this.props.instance) return true;
         return false;
     }

client/src/components/main.jsx

@@ -16,7 +16,16 @@ const addState = connect(
     }
 );
 
-function Main(props) {
+class Main extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.game !== this.props.game) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.account !== this.props.account) return true;
+        if (newProps.nav !== this.props.nav) return true;
+        return false;
+    }
+
+    render(props) {
         const {
             game,
             instance,
@@ -45,6 +54,7 @@ function Main(props) {
                 <Bottom />
             </main>
         );
+    }
 }
 
 module.exports = addState(Main);

client/src/components/mnml.jsx

@@ -10,11 +10,21 @@ const addState = connect(
     state => ({ showNav: state.showNav })
 );
 
-const Mnml = ({ showNav }) =>
+class Mnml extends preact.Component {
-    <div id="mnml" class={showNav ? 'nav-visible' : ''}>
+    shouldComponentUpdate(newProps) {
+        if (newProps.showNav !== this.props.showNav) return true;
+        return false;
+    }
+
+    render(args) {
+        return (
+            <div id="mnml" class={args.showNav ? 'nav-visible' : ''}>
                 <Main />
                 <Controls />
                 <Footer />
-    </div>;
+            </div>
+        );
+    }
+}
 
 module.exports = addState(Mnml);