add back shouldComponentUpdates =\

2019-11-26 13:27:50 +10:00 · 2019-11-26 13:27:50 +10:00 · 5153ed07b0
commit 5153ed07b0
parent 8312b44b2b
6 changed files with 430 additions and 399 deletions
--- a/client/src/components/vbox.combiner.jsx
+++ b/client/src/components/vbox.combiner.jsx
@ -1,12 +1,25 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');

-function Combiner(args) {
+const addState = connect(({ vboxCombiner }) => ({ vboxCombiner }));
+
+class Combiner extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.vbox !== this.props.vbox) return true;
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
+        if (newProps.sendVboxCombine !== this.props.sendVboxCombine) return true;
+        if (newProps.vboxCombiner !== this.props.vboxCombiner) return true;
+        return false;
+    }
+
+    render(args) {
        const {
            vbox,
-        vboxCombiner,
            vboxSelected,
            vboxBuySelected,
            sendVboxCombine,
+            vboxCombiner,
        } = args;

        const { stashSelect, storeSelect } = vboxSelected;
@ -39,6 +52,7 @@ function Combiner(args) {
        }

        return false;
+    }
 }

-module.exports = Combiner;
+module.exports = addState(Combiner);
--- a/client/src/components/vbox.combos.jsx
+++ b/client/src/components/vbox.combos.jsx
@ -1,8 +1,24 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');

 const { convertItem } = require('../utils');

-function Combos(props) {
+const addState = connect(
+    ({ info, instance, itemInfo, tutorial, vboxInfo }) => ({
+        info, instance, itemInfo, tutorial, vboxInfo,
+    }));
+
+class Combos extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.info !== this.props.info) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.itemInfo !== this.props.itemInfo) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
+        return false;
+    }
+
+    render(props) {
        const {
            info,
            instance,
@ -10,7 +26,6 @@ function Combos(props) {
            tutorial,
            vboxInfo,
        } = props;
-
        if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;

        const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
@ -46,6 +61,7 @@ function Combos(props) {
                </div>
            </div>
        );
+    }
 }

-module.exports = Combos;
+module.exports = addState(Combos);
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@ -4,8 +4,8 @@ const { connect } = require('preact-redux');
 const actions = require('../actions');

 const InfoContainer = require('./vbox.info');
-const { StashHdr, StashElement } = require('./vbox.stash');
-const { StoreHdr, StoreElement } = require('./vbox.store');
+const StashElement = require('./vbox.stash');
+const StoreElement = require('./vbox.store');
 const Combiner = require('./vbox.combiner');
 const Combos = require('./vbox.combos');

@ -96,13 +96,11 @@ const addState = connect(

 class Vbox extends preact.Component {
    shouldComponentUpdate(newProps) {
-        // Single variable props
        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        if (newProps.player !== this.props.player) return true;
        if (newProps.tutorial !== this.props.tutorial) return true;
        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
-        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
-        if (newProps.player !== this.props.player) return true;
-        if (newProps.instance !== this.props.instance) return true;
        return false;
    }

@ -110,13 +108,9 @@ class Vbox extends preact.Component {
        const {
            // Changing state variables
            itemUnequip,
-            info,
            instance,
            player,
            tutorial,
-            vboxCombiner,
-            vboxHighlight,
-            vboxInfo,
            vboxSelected,
            // Static
            itemInfo,
@ -148,72 +142,94 @@ class Vbox extends preact.Component {
            return true;
        }

+        function storeHdr() {
+            return (
+                <div class="store-hdr">
+                    <h2
+                        onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => vboxHover(e, 'store')}> STORE
+                    </h2>
+                    <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
+                        {vbox.bits}b
+                    </h1>
+                    <button
+                        class='vbox-btn'
+                        onMouseOver={e => vboxHover(e, 'refill')}
+                        disabled={vbox.bits < 2
+                            || (tutorial && tutorial < 7
+                            && instance.time_control === 'Practice' && instance.rounds.length === 1)
+                        }
+                        onClick={e => e.stopPropagation()}
+                        onMouseDown={() => sendVboxDiscard()}>
+                        refill <br />
+                        2b
+                    </button>
+                </div>
+            );
+        }
+
+        function stashHdr() {
+            const refund = storeSelect.length === 0 && stashSelect.length === 1
+                ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
+                : 0;
+            const tutorialDisabled = tutorial && tutorial < 8
+                && instance.time_control === 'Practice' && instance.rounds.length === 1;
+            const refundBtn = (
+                <button
+                    disabled={tutorialDisabled || !refund}
+                    class='vbox-btn'
+                    onClick={e => e.stopPropagation()}
+                    onMouseDown={e => {
+                        e.stopPropagation();
+                        sendVboxReclaim(vboxSelected.stashSelect[0]);
+                    }}>
+                    refund <br />
+                    {refund}b
+                </button>
+            );
+
+            return (
+                <div class='stash-hdr'>
+                    <h2 onTouchStart={e => e.target.scrollIntoView(true)}
+                        onMouseOver={e => vboxHover(e, 'stash')}> STASH
+                    </h2>
+                    {refundBtn}
+                </div>
+            );
+        }
+
        // EVERYTHING
        return (
            <div class='vbox'>
-                <StoreHdr
-                    instance={instance}
-                    tutorial={tutorial}
-                    sendVboxDiscard={sendVboxDiscard}
-                    vbox={vbox}
-                    vboxHover={vboxHover}
-                />
+                {storeHdr()}
+                {stashHdr()}
                <StoreElement
-                    clearVboxSelected = {clearVboxSelected}
-                    setInfo = {setInfo}
-                    setVboxSelected = {setVboxSelected}
-                    stashSelect = {stashSelect}
-                    storeSelect = {storeSelect}
-                    vbox = {vbox}
-                    vboxHighlight = {vboxHighlight}
-                    vboxHover = {vboxHover}
-                />
-                <StashHdr
-                    instance={instance}
-                    itemInfo={itemInfo}
-                    sendVboxReclaim={sendVboxReclaim}
-                    tutorial={tutorial}
+                    clearVboxSelected={clearVboxSelected}
+                    setVboxSelected={setVboxSelected}
                    vbox={vbox}
-                    vboxHover={vboxHover}
                    vboxSelected={vboxSelected}
+                    vboxHover = {vboxHover}
                />
                <StashElement
-                    itemUnequip = {itemUnequip}
-                    stashSelect = {stashSelect}
-                    storeSelect = {storeSelect}
-                    sendItemUnequip = {sendItemUnequip}
-                    setInfo = {setInfo}
-                    setVboxSelected = {setVboxSelected}
-                    vbox = {vbox}
-                    vboxBuySelected = {vboxBuySelected}
-                    vboxHighlight = {vboxHighlight}
-                    vboxHover = {vboxHover}
+                    sendItemUnequip={sendItemUnequip}
+                    setInfo={setInfo}
+                    setVboxSelected={setVboxSelected}
+                    vbox={vbox}
+                    vboxBuySelected={vboxBuySelected}
+                    vboxHover={vboxHover}
                />
                <div class='info-combiner'>
                    <InfoContainer
                        clearTutorial={clearTutorial}
-                        info={info}
-                        instance={instance}
-                        itemInfo={itemInfo}
-                        player={player}
-                        tutorial={tutorial}
-                        vboxInfo={vboxInfo}
                    />
                    <Combiner
                        vbox={vbox}
-                        vboxCombiner={vboxCombiner}
                        vboxSelected={vboxSelected}
                        vboxBuySelected={vboxBuySelected}
                        sendVboxCombine={sendVboxCombine}
                    />
                </div>
-                <Combos
-                    info={info}
-                    instance={instance}
-                    itemInfo={itemInfo}
-                    tutorial={tutorial}
-                    vboxInfo={vboxInfo}
-                />
+                <Combos />
            </div>
        );
    }
--- a/client/src/components/vbox.info.jsx
+++ b/client/src/components/vbox.info.jsx
@ -1,16 +1,34 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
+
 const { tutorialStage } = require('../tutorial.utils');
 const { genItemInfo } = require('./vbox.utils');

-function Info(props) {
+const addState = connect(
+    ({ info, player, tutorial, vboxInfo, itemInfo, instance }) => ({
+        info, player, tutorial, vboxInfo, itemInfo, instance,
+    }));
+
+
+class Info extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.clearTutorial !== this.props.clearTutorial) return true;
+        if (newProps.info !== this.props.info) return true;
+        if (newProps.player !== this.props.player) return true;
+        if (newProps.tutorial !== this.props.tutorial) return true;
+        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
+        if (newProps.itemInfo !== this.props.itemInfo) return true;
+        if (newProps.instance !== this.props.instance) return true;
+        return false;
+    }
+
+    render(props) {
        const {
-        // Variables that will change
+            clearTutorial,
            info,
            player,
            tutorial,
            vboxInfo,
-        // Static
-        clearTutorial,
            itemInfo,
            instance,
        } = props;
@ -50,6 +68,7 @@ function Info(props) {
        }

        return genItemInfo(info, itemInfo, player, info);
+    }
 }

-module.exports = Info;
+module.exports = addState(Info);
--- a/client/src/components/vbox.stash.jsx
+++ b/client/src/components/vbox.stash.jsx
@ -1,4 +1,6 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
+
 const range = require('lodash/range');
 const without = require('lodash/without');

@ -6,60 +8,40 @@ const shapes = require('./shapes');
 const buttons = require('./buttons');
 const { removeTier } = require('../utils');

-function stashHdr(props) {
-    const {
-        instance,
-        itemInfo,
-        sendVboxReclaim,
-        tutorial,
-        vbox,
-        vboxHover,
-        vboxSelected,
-    } = props;
-    const { storeSelect, stashSelect } = vboxSelected;
-    const refund = storeSelect.length === 0 && stashSelect.length === 1
-        ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
-        : 0;
-    const tutorialDisabled = tutorial && tutorial < 8
-        && instance.time_control === 'Practice' && instance.rounds.length === 1;
-    const refundBtn = (
-        <button
-            disabled={tutorialDisabled || !refund}
-            class='vbox-btn'
-            onClick={e => e.stopPropagation()}
-            onMouseDown={e => {
-                e.stopPropagation();
-                sendVboxReclaim(vboxSelected.stashSelect[0]);
-            }}>
-            refund <br />
-            {refund}b
-        </button>
-    );
+const addState = connect(
+    ({ itemUnequip, vboxHighlight, vboxSelected }) => ({ itemUnequip, vboxHighlight, vboxSelected }));

-    return (
-        <div class='stash-hdr'>
-            <h2 onTouchStart={e => e.target.scrollIntoView(true)}
-                onMouseOver={e => vboxHover(e, 'stash')}> STASH
-            </h2>
-            {refundBtn}
-        </div>
-    );
-}
+class stashElement extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.sendItemUnequip !== this.props.sendItemUnequip) return true;
+        if (newProps.setInfo !== this.props.setInfo) return true;
+        if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
+        if (newProps.vbox !== this.props.vbox) return true;
+        if (newProps.vboxBuySelected !== this.props.vboxBuySelected) return true;
+        if (newProps.vboxHover !== this.props.vboxHover) return true;

-function stashElement(props) {
+        if (newProps.itemUnequip !== this.props.itemUnequip) return true;
+        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        return false;
+    }
+
+    render(props) {
        const {
-        itemUnequip,
            sendItemUnequip,
            setInfo,
            setVboxSelected,
-        stashSelect,
-        storeSelect,
            vbox,
            vboxBuySelected,
-        vboxHighlight,
            vboxHover,
+
+            itemUnequip,
+            vboxHighlight,
+            vboxSelected,
        } = props;

+        const { storeSelect, stashSelect } = vboxSelected;
+
        const vboxSelecting = storeSelect.length === 1 && stashSelect.length === 0;

        function stashClick(e) {
@ -143,6 +125,7 @@ function stashElement(props) {
                {range(0, 6).map(i => stashBtn(vbox.bound[i], i))}
            </div>
        );
+    }
 }

-module.exports = { stashHdr, stashElement };
+module.exports = addState(stashElement);
--- a/client/src/components/vbox.store.jsx
+++ b/client/src/components/vbox.store.jsx
@ -1,54 +1,36 @@
 const preact = require('preact');
+const { connect } = require('preact-redux');
 const range = require('lodash/range');

 const shapes = require('./shapes');

-function storeHdr(props) {
-    const {
-        instance,
-        tutorial,
-        sendVboxDiscard,
-        vbox,
-        vboxHover,
-    } = props;
+const addState = connect(({ vboxHighlight }) => ({ vboxHighlight }));

-    return (
-        <div class="store-hdr">
-            <h2
-                onTouchStart={e => e.target.scrollIntoView(true)}
-                onMouseOver={e => vboxHover(e, 'store')}> STORE
-            </h2>
-            <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
-                {vbox.bits}b
-            </h1>
-            <button
-                class='vbox-btn'
-                onMouseOver={e => vboxHover(e, 'refill')}
-                disabled={vbox.bits < 2
-                    || (tutorial && tutorial < 7
-                    && instance.time_control === 'Practice' && instance.rounds.length === 1)
+class storeElement extends preact.Component {
+    shouldComponentUpdate(newProps) {
+        if (newProps.clearVboxSelected !== this.props.clearVboxSelected) return true;
+        if (newProps.setVboxSelected !== this.props.setVboxSelected) return true;
+        if (newProps.vbox !== this.props.vbox) return true;
+        if (newProps.vboxHighlight !== this.props.vboxHighlight) return true;
+        if (newProps.vboxHover !== this.props.vboxHover) return true;
+        if (newProps.vboxSelected !== this.props.vboxSelected) return true;
+        return false;
    }
-                onClick={e => e.stopPropagation()}
-                onMouseDown={() => sendVboxDiscard()}>
-                refill <br />
-                2b
-            </button>
-        </div>
-    );
-}

-
-function storeElement(props) {
+    render(props) {
        const {
+            // passed
            clearVboxSelected,
            setVboxSelected,
-        storeSelect,
-        stashSelect,
            vbox,
-        vboxHighlight,
            vboxHover,
+            vboxSelected,
+            // state
+            vboxHighlight,
        } = props;

+        const { storeSelect, stashSelect } = vboxSelected;
+
        function availableBtn(v, group, index) {
            if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
            const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
@ -107,6 +89,7 @@ function storeElement(props) {
                </div>
            </div>
        );
+    }
 }

-module.exports = { storeHdr, storeElement };
+module.exports = addState(storeElement);