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,7 +6,16 @@ const { convertItem } = require('../utils');
 const addState = connect(({ info, itemInfo, instance, tutorial, vboxInfo }) =>
     ({ info, itemInfo, instance, tutorial, vboxInfo }));
 
-function Combos(args) {
+
+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) {
         const {
             // Variables that will change
             info,
@@ -15,7 +24,7 @@ function Combos(args) {
             // Static
             itemInfo,
             instance, // Only used for tutorial check
-    } = args;
+        } = props;
 
         if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
 
@@ -51,6 +60,7 @@ function Combos(args) {
                 </div>
             </div>
         );
+    }
 }
 
 module.exports = addState(Combos);

client/src/components/vbox.info.jsx

@@ -6,7 +6,17 @@ 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 {
+    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) {
         const {
             // Variables that will change
             info,
@@ -17,7 +27,7 @@ function Info(args) {
             ws,
             itemInfo,
             instance,
-    } = args;
+        } = props;
 
         if (tutorial) {
             const tutorialStageInfo = tutorialStage(tutorial, ws, instance);
@@ -54,6 +64,7 @@ function Info(args) {
         }
 
         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) {