should comp update for info / combos

client/assets/styles/styles.mobile.less

@@ -259,15 +259,15 @@
             padding: 0.25em;
         }
 
-        .info {
-            display: none;
-        }
-
         .combos {
             display: none;
         }
 
         .info-combiner {
+            .info {
+                display: none;
+            }
+
             .combiner {
                 margin: 0;
                 width: 100%;

client/assets/styles/vbox.less

@@ -71,7 +71,7 @@
         button {
             line-height: 1.6;
             letter-spacing: 0.15em;
-            border-width: 1px;
+            border-width: 0.1em;
         }
     }
 
@@ -108,7 +108,7 @@
 
         &[disabled] {
             background: black;
-            border-width: 1px;
+            border-width: 0.1em;
         };
     }
 
@@ -145,8 +145,6 @@
         &.highlight {
             color: black;
             background: @silver;
-            // border: 1px solid @white; (this bangs around the vbox)
-
             // overwrite the classes on white svg elements
             svg {
                 stroke-width: 0.75em;

client/src/components/vbox.combos.jsx

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

client/src/components/vbox.info.jsx

@@ -6,54 +6,65 @@ const { genItemInfo } = require('./vbox.utils');
 const addState = connect(({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }) =>
     ({ info, player, tutorial, vboxInfo, ws, itemInfo, instance }));
 
-function Info(args) {
+class Info extends preact.Component {
-    const {
+    shouldComponentUpdate(newProps) {
-        // Variables that will change
+        // Single variable props
-        info,
+        if (newProps.info !== this.props.info) return true;
-        player,
+        if (newProps.player !== this.props.player) return true;
-        tutorial,
+        if (newProps.tutorial !== this.props.tutorial) return true;
-        vboxInfo,
+        if (newProps.vboxInfo !== this.props.vboxInfo) return true;
-        // Static
+        return false;
-        ws,
-        itemInfo,
-        instance,
-    } = args;
-
-    if (tutorial) {
-        const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
-        if (tutorialStageInfo) return tutorialStageInfo;
     }
 
-    // Prioritise the vbox info
+    render(props) {
-    if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
+        const {
+            // Variables that will change
+            info,
+            player,
+            tutorial,
+            vboxInfo,
+            // Static
+            ws,
+            itemInfo,
+            instance,
+        } = props;
 
-    // check normal info state
+        if (tutorial) {
-    if (!info) return false;
+            const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
-    if (info.includes('constructName')) {
+            if (tutorialStageInfo) return tutorialStageInfo;
-        return (
+        }
-            <div class='info info-item'>
+
-                <h2> {info.replace('constructName ', '')} </h2>
+        // Prioritise the vbox info
-                <p> This is the name of your construct. <br />
+        if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info);
-                    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.
+        // check normal info state
-                </p>
+        if (!info) return false;
-            </div>
+        if (info.includes('constructName')) {
-        );
+            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);

client/src/components/vbox.utils.jsx

@@ -66,7 +66,7 @@ function setVboxState(dispatch, vboxSelected, state) {
 
     dispatch(actions.setVboxInfo(vboxInfo()));
     dispatch(actions.setVboxCombiner(vboxCombiner));
-    return dispatch(actions.setVboxHighlight(vboxHighlight));
+    dispatch(actions.setVboxHighlight(vboxHighlight));
 }
 
 function genItemInfo(item, itemInfo, player, info) {