change info / combos back to functional components with passed down props

2019-11-26 12:03:31 +10:00 · 2019-11-26 12:03:31 +10:00 · 8312b44b2b
commit 8312b44b2b
parent d1649c986b
6 changed files with 203 additions and 179 deletions
--- a/client/src/components/vbox.combos.jsx
+++ b/client/src/components/vbox.combos.jsx
@ -1,29 +1,14 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');

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

-const addState = connect(({ info, itemInfo, instance, tutorial, vboxInfo }) =>
-    ({ info, itemInfo, instance, tutorial, vboxInfo }));
-
-
-class Combos extends preact.Component {
-    shouldComponentUpdate(newProps) {
-        if (newProps.info !== this.props.info) return true;
-        if (newProps.tutorial !== this.props.tutorial) return true;
-        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
-        return false;
-    }
-
-    render(props) {
+function Combos(props) {
    const {
-            // Variables that will change
        info,
+        instance,
+        itemInfo,
        tutorial,
        vboxInfo,
-            // Static
-            itemInfo,
-            instance, // Only used for tutorial check
    } = props;

    if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
@ -34,7 +19,8 @@ class Combos extends preact.Component {
    const comboTable = vboxCombos.map((c, i) => {
        const mouseOver = e => {
            e.stopPropagation();
-                this.setState({ comboItem: c.item });
+            // this.setState({ comboItem: c.item });
+            // set comboInfo state here
        };
        const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
            ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
@ -55,12 +41,11 @@ class Combos extends preact.Component {
                <h2>COMBOS</h2>
                Combine colours and items.
            </div>
-                <div class="combo-list">
+            <div class="combo-list" onClick={e => e.stopPropagation()}>
                {comboTable}
            </div>
        </div>
    );
 }
-}

-module.exports = addState(Combos);
+module.exports = 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 StashElement = require('./vbox.stash');
-const StoreElement = require('./vbox.store');
+const { StashHdr, StashElement } = require('./vbox.stash');
+const { StoreHdr, StoreElement } = require('./vbox.store');
 const Combiner = require('./vbox.combiner');
 const Combos = require('./vbox.combos');

@ -28,6 +28,10 @@ const addState = connect(
            vboxSelected,
        } = state;

+        function clearTutorial() {
+            return ws.clearTutorial(instance.id);
+        }
+
        function sendVboxDiscard() {
            return ws.sendVboxDiscard(instance.id);
        }
@ -64,6 +68,7 @@ const addState = connect(
            vboxInfo,
            vboxSelected,

+            clearTutorial,
            sendVboxAccept,
            sendVboxCombine,
            sendVboxDiscard,
@ -105,15 +110,18 @@ class Vbox extends preact.Component {
        const {
            // Changing state variables
            itemUnequip,
+            info,
+            instance,
            player,
            tutorial,
-            instance,
            vboxCombiner,
            vboxHighlight,
+            vboxInfo,
            vboxSelected,
            // Static
            itemInfo,
            // Function Calls
+            clearTutorial,
            dispatchVboxSelect,
            sendItemUnequip,
            sendVboxAccept,
@ -140,67 +148,16 @@ 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()}
-                {stashHdr()}
+                <StoreHdr
+                    instance={instance}
+                    tutorial={tutorial}
+                    sendVboxDiscard={sendVboxDiscard}
+                    vbox={vbox}
+                    vboxHover={vboxHover}
+                />
                <StoreElement
                    clearVboxSelected = {clearVboxSelected}
                    setInfo = {setInfo}
@ -211,6 +168,15 @@ class Vbox extends preact.Component {
                    vboxHighlight = {vboxHighlight}
                    vboxHover = {vboxHover}
                />
+                <StashHdr
+                    instance={instance}
+                    itemInfo={itemInfo}
+                    sendVboxReclaim={sendVboxReclaim}
+                    tutorial={tutorial}
+                    vbox={vbox}
+                    vboxHover={vboxHover}
+                    vboxSelected={vboxSelected}
+                />
                <StashElement
                    itemUnequip = {itemUnequip}
                    stashSelect = {stashSelect}
@ -224,7 +190,15 @@ class Vbox extends preact.Component {
                    vboxHover = {vboxHover}
                />
                <div class='info-combiner'>
-                    <InfoContainer />
+                    <InfoContainer
+                        clearTutorial={clearTutorial}
+                        info={info}
+                        instance={instance}
+                        itemInfo={itemInfo}
+                        player={player}
+                        tutorial={tutorial}
+                        vboxInfo={vboxInfo}
+                    />
                    <Combiner
                        vbox={vbox}
                        vboxCombiner={vboxCombiner}
@ -233,7 +207,13 @@ class Vbox extends preact.Component {
                        sendVboxCombine={sendVboxCombine}
                    />
                </div>
-                <Combos />
+                <Combos
+                    info={info}
+                    instance={instance}
+                    itemInfo={itemInfo}
+                    tutorial={tutorial}
+                    vboxInfo={vboxInfo}
+                />
            </div>
        );
    }
--- a/client/src/components/vbox.info.jsx
+++ b/client/src/components/vbox.info.jsx
@ -1,22 +1,8 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
 const { tutorialStage } = require('../tutorial.utils');
 const { genItemInfo } = require('./vbox.utils');

-const addState = connect(({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }) =>
-    ({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }));
-
-class Info extends preact.Component {
-    shouldComponentUpdate(newProps) {
-        // Single variable props
-        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;
-        return false;
-    }
-
-    render(props) {
+function Info(props) {
    const {
        // Variables that will change
        info,
@ -24,13 +10,13 @@ class Info extends preact.Component {
        tutorial,
        vboxInfo,
        // Static
-            ws,
+        clearTutorial,
        itemInfo,
        instance,
    } = props;

    if (tutorial) {
-            const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
+        const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
        if (tutorialStageInfo) return tutorialStageInfo;
    }

@ -65,6 +51,5 @@ class Info extends preact.Component {

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

-module.exports = addState(Info);
+module.exports = Info;
--- a/client/src/components/vbox.stash.jsx
+++ b/client/src/components/vbox.stash.jsx
@ -6,6 +6,46 @@ 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>
+    );
+
+    return (
+        <div class='stash-hdr'>
+            <h2 onTouchStart={e => e.target.scrollIntoView(true)}
+                onMouseOver={e => vboxHover(e, 'stash')}> STASH
+            </h2>
+            {refundBtn}
+        </div>
+    );
+}
+
 function stashElement(props) {
    const {
        itemUnequip,
@ -105,4 +145,4 @@ function stashElement(props) {
    );
 }

-module.exports = stashElement;
+module.exports = { stashHdr, stashElement };
--- a/client/src/components/vbox.store.jsx
+++ b/client/src/components/vbox.store.jsx
@ -3,6 +3,40 @@ const range = require('lodash/range');

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

+function storeHdr(props) {
+    const {
+        instance,
+        tutorial,
+        sendVboxDiscard,
+        vbox,
+        vboxHover,
+    } = props;
+
+    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 storeElement(props) {
    const {
@ -75,4 +109,4 @@ function storeElement(props) {
    );
 }

-module.exports = storeElement;
+module.exports = { storeHdr, storeElement };
--- a/client/src/tutorial.utils.jsx
+++ b/client/src/tutorial.utils.jsx
@ -97,10 +97,10 @@ function tutorialVbox(player, store, tutorial) {
    store.dispatch(actions.setTutorial(stage));
 }

-function tutorialStage(tutorial, ws, instance) {
+function tutorialStage(tutorial, clearTutorial, instance) {
    if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;

-    const exit = () => ws.clearTutorial(instance.id);
+    const exit = () => clearTutorial();

    const tutorialText = () => {
        if (tutorial === 1) {