From c10b68949cb305431a3a516905a3a8470a33816a Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 26 Nov 2019 10:42:06 +1000 Subject: [PATCH] should comp update for info / combos --- client/assets/styles/styles.mobile.less | 8 +- client/assets/styles/vbox.less | 6 +- client/src/components/vbox.combos.jsx | 88 ++++++++++++---------- client/src/components/vbox.info.jsx | 99 ++++++++++++++----------- client/src/components/vbox.utils.jsx | 2 +- 5 files changed, 111 insertions(+), 92 deletions(-) diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index d15b1668..27c8fa8a 100644 --- a/client/assets/styles/styles.mobile.less +++ b/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%; diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 304b288a..ae5a462f 100644 --- a/client/assets/styles/vbox.less +++ b/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; diff --git a/client/src/components/vbox.combos.jsx b/client/src/components/vbox.combos.jsx index 5973f221..f3831a57 100644 --- a/client/src/components/vbox.combos.jsx +++ b/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)); - if (vboxCombos.length > 6 || vboxCombos.length === 0) return
; + render(props) { + const { + // Variables that will change + info, + tutorial, + vboxInfo, + // Static + itemInfo, + instance, // Only used for tutorial check + } = props; - 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))) - ? [
{convertItem(c.components[0])} {convertItem(c.components[1])}
, -
{convertItem(c.components[2])}
] - : c.components.map((u, j) =>
{convertItem(u)}
); - return ( -
-
- {convertItem(c.item)} + 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
; + + 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))) + ? [
{convertItem(c.components[0])} {convertItem(c.components[1])}
, +
{convertItem(c.components[2])}
] + : c.components.map((u, j) =>
{convertItem(u)}
); + return ( +
+
+ {convertItem(c.item)} +
+ {componentTable} +
+ ); + }); + return ( +
+
+

COMBOS

+ Combine colours and items. +
+
+ {comboTable}
- {componentTable}
); - }); - return ( -
-
-

COMBOS

- Combine colours and items. -
-
- {comboTable} -
-
- ); + } } module.exports = addState(Combos); diff --git a/client/src/components/vbox.info.jsx b/client/src/components/vbox.info.jsx index 80f32528..26f0a975 100644 --- a/client/src/components/vbox.info.jsx +++ b/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) { - const { - // Variables that will change - info, - player, - tutorial, - vboxInfo, - // Static - ws, - itemInfo, - instance, - } = args; - - if (tutorial) { - const tutorialStageInfo = tutorialStage(tutorial, ws, instance); - if (tutorialStageInfo) return tutorialStageInfo; +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; } - // Prioritise the vbox info - if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info); + render(props) { + const { + // Variables that will change + info, + player, + tutorial, + vboxInfo, + // Static + ws, + itemInfo, + instance, + } = props; - // check normal info state - if (!info) return false; - if (info.includes('constructName')) { - return ( -
-

{info.replace('constructName ', '')}

-

This is the name of your construct.
- Names are randomly generated and are purely cosmetic.
- You can change change your construct name in the RESHAPE tab outside of games. -

-
- ); + if (tutorial) { + const tutorialStageInfo = tutorialStage(tutorial, ws, instance); + if (tutorialStageInfo) return tutorialStageInfo; + } + + // Prioritise the vbox info + if (vboxInfo) return genItemInfo(vboxInfo, itemInfo, player, info); + + // check normal info state + if (!info) return false; + if (info.includes('constructName')) { + return ( +
+

{info.replace('constructName ', '')}

+

This is the name of your construct.
+ Names are randomly generated and are purely cosmetic.
+ You can change change your construct name in the RESHAPE tab outside of games. +

+
+ ); + } + + if (info.includes('constructAvatar')) { + return ( +
+

{info.replace('constructAvatar ', '')}

+

This is your construct avatar.
+ Avatars are randomly generated and are purely cosmetic.
+ You can change your construct avatar in the RESHAPE tab outside of games. +

+
+ ); + } + + return genItemInfo(info, itemInfo, player, info); } - - if (info.includes('constructAvatar')) { - return ( -
-

{info.replace('constructAvatar ', '')}

-

This is your construct avatar.
- Avatars are randomly generated and are purely cosmetic.
- You can change your construct avatar in the RESHAPE tab outside of games. -

-
- ); - } - - return genItemInfo(info, itemInfo, player, info); } module.exports = addState(Info); diff --git a/client/src/components/vbox.utils.jsx b/client/src/components/vbox.utils.jsx index 6d934263..59830470 100644 --- a/client/src/components/vbox.utils.jsx +++ b/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) {