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,75 +30,82 @@ function FaceoffConstruct(args) {
                 <ConstructAvatar construct={construct} />
             </div>
         </div>
-    )
-}
-
-function Faceoff(props) {
-    const {
-        instance,
-        account,
-        sendInstanceReady,
-    } = props;
-
-    if (!instance) return <div>...</div>;
-
-    const otherTeam = instance.players.find(t => t.id !== account.id);
-    const playerTeam = instance.players.find(t => t.id === account.id);
-
-    function PlayerTeam(team) {
-        const constructs = team.constructs.map((c, i) =>
-            <FaceoffConstruct key={c.id} construct={c}/>);
-
-        const winner = instance.winner === team.id;
-        const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
-        return (
-            <div class={classes}>
-                {constructs}
-            </div>
-        );
-    }
-
-
-    function OpponentTeam(team) {
-        const constructs = team.constructs.map((c, i) =>
-            <FaceoffConstruct key={c.id} construct={c}/>);
-
-        const winner = instance.winner === team.id;
-        const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
-
-        return (
-            <div class={classes}>
-                {constructs}
-            </div>
-        );
-    }
-    function faceoffText() {
-        if (!instance.winner) {
-            return (
-                <div class="faceoff-text">
-                    <div class="opponent-text"> {otherTeam.name} </div>
-                    <div class="vs"> vs </div>
-                    <div class="player-text"> {playerTeam.name} </div>
-                </div>
-            );
-        }
-        const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
-        return (
-            <div class="faceoff-text winner">
-                <div> {winner.name} </div>
-                <div> wins </div>
-            </div>
-        )
-
-    }
-
-    return (
-        <main class="faceoff">
-            {OpponentTeam(otherTeam)}
-            {faceoffText()}
-            {PlayerTeam(playerTeam)}
-        </main>
     );
 }
 
+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,
+        } = props;
+
+        if (!instance) return <div>...</div>;
+
+        const otherTeam = instance.players.find(t => t.id !== account.id);
+        const playerTeam = instance.players.find(t => t.id === account.id);
+
+        function PlayerTeam(team) {
+            const constructs = team.constructs.map((c, i) =>
+                <FaceoffConstruct key={c.id} construct={c}/>);
+
+            const winner = instance.winner === team.id;
+            const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
+            return (
+                <div class={classes}>
+                    {constructs}
+                </div>
+            );
+        }
+
+
+        function OpponentTeam(team) {
+            const constructs = team.constructs.map((c, i) =>
+                <FaceoffConstruct key={c.id} construct={c}/>);
+
+            const winner = instance.winner === team.id;
+            const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`;
+
+            return (
+                <div class={classes}>
+                    {constructs}
+                </div>
+            );
+        }
+        function faceoffText() {
+            if (!instance.winner) {
+                return (
+                    <div class="faceoff-text">
+                        <div class="opponent-text"> {otherTeam.name} </div>
+                        <div class="vs"> vs </div>
+                        <div class="player-text"> {playerTeam.name} </div>
+                    </div>
+                );
+            }
+            const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
+            return (
+                <div class="faceoff-text winner">
+                    <div> {winner.name} </div>
+                    <div> wins </div>
+                </div>
+            )
+
+        }
+
+        return (
+            <main class="faceoff">
+                {OpponentTeam(otherTeam)}
+                {faceoffText()}
+                {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,35 +16,45 @@ const addState = connect(
     }
 );
 
-function Main(props) {
+class Main extends preact.Component {
-    const {
+    shouldComponentUpdate(newProps) {
-        game,
+        if (newProps.game !== this.props.game) return true;
-        instance,
+        if (newProps.instance !== this.props.instance) return true;
-        account,
+        if (newProps.account !== this.props.account) return true;
-        nav,
+        if (newProps.nav !== this.props.nav) return true;
-    } = props;
+        return false;
-
-    if (!account) {
-        return <Welcome />;
     }
 
-    if (game) {
+    render(props) {
-        return <Game />;
+        const {
+            game,
+            instance,
+            account,
+            nav,
+        } = props;
+
+        if (!account) {
+            return <Welcome />;
+        }
+
+        if (game) {
+            return <Game />;
+        }
+
+        if (instance) {
+            return <Instance />;
+        }
+
+        if (nav === 'transition') return false;
+
+        return (
+            <main class="menu">
+                <Header />
+                <Top />
+                <Bottom />
+            </main>
+        );
     }
-
-    if (instance) {
-        return <Instance />;
-    }
-
-    if (nav === 'transition') return false;
-
-    return (
-        <main class="menu">
-            <Header />
-            <Top />
-            <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) {
-        <Main />
+        if (newProps.showNav !== this.props.showNav) return true;
-        <Controls />
+        return false;
-        <Footer />
+    }
-    </div>;
+
+    render(args) {
+        return (
+            <div id="mnml" class={args.showNav ? 'nav-visible' : ''}>
+                <Main />
+                <Controls />
+                <Footer />
+            </div>
+        );
+    }
+}
 
 module.exports = addState(Mnml);