Merge branch 'vbox-perf' into tutorial-merged

client/src/components/animations.jsx

@@ -39,7 +39,6 @@ const Stun = require('./anims/stun');
 const Triage = require('./anims/triage');
 const TriageTick = require('./anims/triage.tick');
 
-const actions = require('../actions');
 const { removeTier } = require('../utils');
 
 
@@ -47,10 +46,16 @@ const addState = connect(
     function receiveState(state) {
         const { animTarget } = state;
         return { animTarget };
-    },
+    }
 );
 
 class ConstructAnimation extends Component {
+    shouldComponentUpdate(nextProps) {
+        if (nextProps.animTarget !== this.props.animTarget) return true;
+        if (nextProps.construct !== this.props.construct) return true;
+        return false;
+    }
+
     render(props) {
         const {
             animTarget,
@@ -70,7 +75,7 @@ class ConstructAnimation extends Component {
 
 
         // find target animation
-        const chooseAnim = (animSkill) => {
+        const chooseAnim = () => {
             switch (animSkill) {
             // Attack base
             case 'Attack': return <Attack direction={direction}/>;
@@ -124,7 +129,7 @@ class ConstructAnimation extends Component {
             case 'Reflect': return <Refl player={player} />;
 
             default: return false;
-            };
+            }
         };
 
         const anim = chooseAnim(animSkill);

client/src/components/info.component.jsx

@@ -2,14 +2,13 @@ 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');
 
 
-class InfoComponent extends Component {
+class InfoComponent extends preact.Component {
     shouldComponentUpdate(newProps) {
         if (newProps.tutorial !== this.props.tutorial) return true;
         // We don't care about info during tutorial

client/src/components/instance.constructs.jsx

@@ -19,7 +19,6 @@ const addState = connect(
             account,
             itemInfo,
             itemEquip,
-            activeConstruct,
             navInstance,
             tutorial,
         } = state;
@@ -40,7 +39,6 @@ const addState = connect(
             itemInfo,
             itemEquip,
             navInstance,
-            activeConstruct,
             sendUnequip,
             tutorial,
         };
@@ -78,20 +76,20 @@ const addState = connect(
 
 function Construct(props) {
     const {
+        // Changing state variables
+        construct,
         iter,
         itemEquip,
         instance,
-        construct,
         player,
+        tutorial,
+        // Function Calls
         sendVboxApply,
+        sendUnequip,
         setActiveConstruct,
         setItemUnequip,
         setItemEquip,
-        itemInfo,
         setInfo,
-        sendUnequip,
-        mobileVisible,
-        tutorial,
     } = props;
 
     const { vbox } = player;
@@ -242,24 +240,35 @@ function Construct(props) {
     );
 }
 
-function InstanceConstructs(props) {
+class InstanceConstructs extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.itemEquip !== this.props.itemEquip) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.navInstance !== this.props.navInstance) return true;
+        // JSON or Array objects
+        if (newProps.player !== this.props.player) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        return false;
+    }
+
+    render(props) {
         const {
-        activeConstruct,
+            // Changing state variables
             itemEquip,
-        player,
             instance,
-        // clearInfo,
+            navInstance,
+            player,
+            tutorial,
+            // Static data
+            itemInfo,
+            // Function calls
             setInfo,
             setActiveConstruct,
-
             sendVboxApply,
-        itemInfo,
             setVboxHighlight,
             setItemUnequip,
             setItemEquip,
             sendUnequip,
-        navInstance,
-        tutorial,
         } = props;
 
         if (!player) return false;
@@ -268,12 +277,12 @@ function InstanceConstructs(props) {
         const constructs = range(0, 3).map(i => {
             const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
         	if (tutorialConstruct) return (tutorialConstruct);
+
             return Construct({
                 iter: i,
                 construct: player.constructs[i],
-            activeConstruct,
-            instance,
                 itemEquip,
+                instance,
                 setItemUnequip,
                 setItemEquip,
                 player,
@@ -294,5 +303,6 @@ function InstanceConstructs(props) {
             </div>
         );
     }
+}
 
 module.exports = addState(InstanceConstructs);

client/src/components/vbox.component.jsx

@@ -1,8 +1,9 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 const range = require('lodash/range');
 const countBy = require('lodash/countBy');
 const without = require('lodash/without');
-const { connect } = require('preact-redux');
+
 const { removeTier } = require('../utils');
 const shapes = require('./shapes');
 const actions = require('../actions');
@@ -95,31 +96,47 @@ const addState = connect(
 
 );
 
-function Vbox(args) {
+class Vbox extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        // Single variable props
+        if (newProps.combiner !== this.props.combiner) return true;
+        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+        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.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;
+        return false;
+    }
+
+    render(args) {
         const {
+            // Changing state variables
             combiner,
-        navInstance,
+            itemUnequip,
-        itemInfo,
             player,
             reclaiming,
+            tutorial,
+            navInstance,
+            info,
+            vboxSelected,
+
+            // Static
+            itemInfo,
+            // Function Calls
+            sendItemUnequip,
             sendVboxAccept,
             sendVboxCombine,
             sendVboxDiscard,
             sendVboxReclaim,
-
-        setCombiner,
-        setInfo,
-
-        vboxSelected,
             setVboxSelected,
-
             setItemEquip,
-        tutorial,
+            setInfo,
-        itemUnequip,
+            setCombiner,
-        sendItemUnequip,
-
             setReclaiming,
-        info,
         } = args;
 
         if (!player) return false;
@@ -423,5 +440,6 @@ function Vbox(args) {
             </div>
         );
     }
+}
 
 module.exports = addState(Vbox);