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

client/src/components/vbox.combos.jsx

@@ -1,66 +1,51 @@
 const preact = require('preact');
-const { connect } = require('preact-redux');
 
 const { convertItem } = require('../utils');
 
-const addState = connect(({ info, itemInfo, instance, tutorial, vboxInfo }) =>
+function Combos(props) {
-    ({ info, itemInfo, instance, tutorial, vboxInfo }));
+    const {
+        info,
+        instance,
+        itemInfo,
+        tutorial,
+        vboxInfo,
+    } = props;
 
+    if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
 
-class Combos extends preact.Component {
+    const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
-    shouldComponentUpdate(newProps) {
+    if (vboxCombos.length > 6 || vboxCombos.length === 0) return <div class="combos"></div>;
-        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) {
+    const comboTable = vboxCombos.map((c, i) => {
-        const {
+        const mouseOver = e => {
-            // Variables that will change
+            e.stopPropagation();
-            info,
+            // this.setState({ comboItem: c.item });
-            tutorial,
+            // set comboInfo state here
-            vboxInfo,
+        };
-            // Static
+        const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
-            itemInfo,
+            ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
-            instance, // Only used for tutorial check
+                <div key="1">{convertItem(c.components[2])}</div>]
-        } = props;
+            : c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
-
-        if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
-
-        const vboxCombos = itemInfo.combos.filter(c => c.components.includes(vboxInfo || info));
-        if (vboxCombos.length > 6 || vboxCombos.length === 0) return <div class="combos"></div>;
-
-        const comboTable = vboxCombos.map((c, i) => {
-            const mouseOver = e => {
-                e.stopPropagation();
-                this.setState({ comboItem: c.item });
-            };
-            const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
-                ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
-                    <div key="1">{convertItem(c.components[2])}</div>]
-                : c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
-            return (
-                <div key={i} onMouseOver={mouseOver} class="table-button">
-                    <div class="item">
-                        {convertItem(c.item)}
-                    </div>
-                    {componentTable}
-                </div>
-            );
-        });
         return (
-            <div class="combos">
+            <div key={i} onMouseOver={mouseOver} class="table-button">
-                <div class="combo-header">
+                <div class="item">
-                    <h2>COMBOS</h2>
+                    {convertItem(c.item)}
-                    Combine colours and items.
-                </div>
-                <div class="combo-list">
-                    {comboTable}
                 </div>
+                {componentTable}
             </div>
         );
-    }
+    });
+    return (
+        <div class="combos">
+            <div class="combo-header">
+                <h2>COMBOS</h2>
+                Combine colours and items.
+            </div>
+            <div class="combo-list" onClick={e => e.stopPropagation()}>
+                {comboTable}
+            </div>
+        </div>
+    );
 }
 
-module.exports = addState(Combos);
+module.exports = Combos;

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 { StashHdr, StashElement } = require('./vbox.stash');
-const StoreElement = require('./vbox.store');
+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()}
+                <StoreHdr
-                {stashHdr()}
+                    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>
         );
     }

client/src/components/vbox.info.jsx

@@ -1,70 +1,55 @@
 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 }) =>
+function Info(props) {
-    ({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }));
+    const {
+        // Variables that will change
+        info,
+        player,
+        tutorial,
+        vboxInfo,
+        // Static
+        clearTutorial,
+        itemInfo,
+        instance,
+    } = props;
 
-class Info extends preact.Component {
+    if (tutorial) {
-    shouldComponentUpdate(newProps) {
+        const tutorialStageInfo = tutorialStage(tutorial, clearTutorial, instance);
-        // Single variable props
+        if (tutorialStageInfo) return tutorialStageInfo;
-        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) {
+    // Prioritise the vbox info
-        const {
+    if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
-            // Variables that will change
-            info,
-            player,
-            tutorial,
-            vboxInfo,
-            // Static
-            ws,
-            itemInfo,
-            instance,
-        } = props;
 
-        if (tutorial) {
+    // check normal info state
-            const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
+    if (!info) return false;
-            if (tutorialStageInfo) return tutorialStageInfo;
+    if (info.includes('constructName')) {
-        }
+        return (
-
+            <div class='info info-item'>
-        // Prioritise the vbox info
+                <h2> {info.replace('constructName ', '')} </h2>
-        if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
+                <p> This is the name of your construct. <br />
-
+                    Names are randomly generated and are purely cosmetic. <br />
-        // check normal info state
+                    You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
-        if (!info) return false;
+                </p>
-        if (info.includes('constructName')) {
+            </div>
-            return (
+        );
-                <div class='info info-item'>
-                    <h2> {info.replace('constructName ', '')} </h2>
-                    <p> This is the name of your construct. <br />
-                        Names are randomly generated and are purely cosmetic. <br />
-                        You can change change your construct name in the <b>RESHAPE</b> tab outside of games.
-                    </p>
-                </div>
-            );
-        }
-
-        if (info.includes('constructAvatar')) {
-            return (
-                <div class='info info-item'>
-                    <h2> {info.replace('constructAvatar ', '')} </h2>
-                    <p> This is your construct avatar. <br />
-                        Avatars are randomly generated and are purely cosmetic. <br />
-                        You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
-                    </p>
-                </div>
-            );
-        }
-
-        return genItemInfo(info, itemInfo, player, info);
     }
+
+    if (info.includes('constructAvatar')) {
+        return (
+            <div class='info info-item'>
+                <h2> {info.replace('constructAvatar ', '')} </h2>
+                <p> This is your construct avatar. <br />
+                    Avatars are randomly generated and are purely cosmetic. <br />
+                    You can change your construct avatar in the <b>RESHAPE</b> tab outside of games.
+                </p>
+            </div>
+        );
+    }
+
+    return genItemInfo(info, itemInfo, player, info);
 }
 
-module.exports = addState(Info);
+module.exports = Info;

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 };

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 };

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) {