From 200482dd79d2f36145dee25247af083f4955783b Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 27 Oct 2019 22:13:23 +1000 Subject: [PATCH] button css, only update info component when info or tutorial changes --- client/assets/styles/instance.less | 11 + client/src/components/anims/wiggle.jsx | 2 +- client/src/components/info.component.jsx | 379 ++++++++++++----------- client/src/components/play.jsx | 70 +++-- client/src/components/vbox.component.jsx | 1 - client/src/tutorial.utils.jsx | 16 +- 6 files changed, 255 insertions(+), 224 deletions(-) diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 461f8eb0..0f05fc8b 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -446,6 +446,17 @@ } } +.tutorial { + button { + width: 100%; + } + + button.focus { + animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate; + } + +} + @keyframes faceoff { from { color: @black; diff --git a/client/src/components/anims/wiggle.jsx b/client/src/components/anims/wiggle.jsx index 5886a47d..8a54b096 100644 --- a/client/src/components/anims/wiggle.jsx +++ b/client/src/components/anims/wiggle.jsx @@ -6,7 +6,7 @@ function wiggle(id, idle) { const target = document.getElementById(id); const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); - + const originalX = parseFloat(idle.animations[0].currentValue); const originalY = parseFloat(idle.animations[1].currentValue); // console.log(x, y); diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index bf1c8cd6..f4aafd3e 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -2,211 +2,222 @@ const preact = require('preact'); const range = require('lodash/range'); const reactStringReplace = require('react-string-replace'); +const { Component } = require('preact'); const { INFO } = require('./../constants'); const { convertItem, removeTier } = require('../utils'); const { tutorialStage } = require('../tutorial.utils'); const shapes = require('./shapes'); -function InfoComponent(args) { - const { - ws, - itemInfo, - player, - instance, - info, - tutorial, - clearTutorial, - } = args; - function Info() { - if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance); +class InfoComponent extends Component { + shouldComponentUpdate(newProps) { + if (newProps.tutorial !== this.props.tutorial) return true; + if (newProps.tutorial) return false; // We don't care about info during tutorial + if (newProps.info !== this.props.info) return true; + return false; + } - if (!info) { - return ( -
-

VBOX phase

-

Strengthen and specialise your constructs by equipping items to them.

-

Double click to purchase items in the VBOX and move them to your INVENTORY.

-

- Combine a SKILL or SPEC with 2 COLOURS to create an item.
- Combine 3 of the same item to upgrade it.
- Click an item and then click a construct to equip that item to it.
-

-

Click the READY button for the GAME PHASE.

-
- ); - } - const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info]; - if (!fullInfo) return false; - const isSkill = fullInfo.skill; - const isSpec = fullInfo.spec; + render(args) { + const { + ws, + itemInfo, + player, + instance, + info, + tutorial, + clearTutorial, + } = args; - if (isSkill) { - const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; - const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); - const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info)); - const itemSourceInfo = itemSource.length - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; - const itemRegEx = /(Red|Blue|Green)/; - const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); - const speed =
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
; - const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null; - return ( -
-

{fullInfo.item} - {fullInfo.cost}b

-

SKILL

- {itemSourceDescription} -
{cooldown}
-
{infoDescription}
- {speed} -
- ); - } + function Info() { + if (tutorial) return tutorialStage(tutorial, ws, clearTutorial, instance); - if (isSpec) { - let red = 0; - let blue = 0; - let green = 0; - player.constructs.forEach(construct => { - red += construct.colours.red; - blue += construct.colours.blue; - green += construct.colours.green; - }); - const teamColours = { red, blue, green }; - - const colourReqs = fullInfo.values.bonuses || []; - - const thresholds = colourReqs.map((bonus, i) => { - const colours = ['red', 'green', 'blue']; - const colourGoals = { - red: [], - green: [], - blue: [], - }; - const overFlow = []; - - colours.forEach(c => { - const colourReq = bonus.req[c]; - if (colourReqs === 0) return false; - - const start = i === 0 - ? 0 - : colourReqs[i - 1].req[c]; - - const dots = range(start, colourReq).map(j => { - const unmet = teamColours[c] < j + 1; - - - const reqClass = unmet - ? 'unmet' - : ''; - - if (j - start > 4) { - overFlow.push( -
- {shapes.vboxColour(c)} -
- ); - } else { - colourGoals[c].push( -
- {shapes.vboxColour(c)} -
- ); - } - - return true; - }); - - return dots; - }); - - const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]); - - const reqClass = reqsMet - ? '' - : 'unmet'; - - const goals = colours.map((c, j) => { - if (colourGoals[c].length) { - return ( -
{colourGoals[c]}
- ); - } - return false; - }); - const bonusObj = info.includes('Life') - ?
+ {bonus.bonus}
- :
+ {bonus.bonus}%
; - const overFlowObj = overFlow.length ?
{overFlow}
: null; + if (!info) { return ( -
- {goals} - {overFlowObj} - {bonusObj} +
+

VBOX phase

+

Strengthen and specialise your constructs by equipping items to them.

+

Double click to purchase items in the VBOX and move them to your INVENTORY.

+

+ Combine a SKILL or SPEC with 2 COLOURS to create an item.
+ Combine 3 of the same item to upgrade it.
+ Click an item and then click a construct to equip that item to it.
+

+

Click the READY button for the GAME PHASE.

); - }); - const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; - const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); - const itemSource = itemInfo.combos.filter(c => c.item === info); - const itemSourceInfo = itemSource.length - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; - const itemRegEx = /(Red|Blue|Green)/; - const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); - const infoText = info.replace('Plus', '+'); + } + const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info]; + if (!fullInfo) return false; + const isSkill = fullInfo.skill; + const isSpec = fullInfo.spec; - return ( -
-

{infoText} - {fullInfo.cost}b

-

SPEC

- {itemSourceDescription} -
{infoDescription}
-
- {thresholds} + if (isSkill) { + const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; + const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); + const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info)); + const itemSourceInfo = itemSource.length + ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` + : false; + const itemRegEx = /(Red|Blue|Green)/; + const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + const speed =
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
; + const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null; + return ( +
+

{fullInfo.item} - {fullInfo.cost}b

+

SKILL

+ {itemSourceDescription} +
{cooldown}
+
{infoDescription}
+ {speed}
+ ); + } + + if (isSpec) { + let red = 0; + let blue = 0; + let green = 0; + player.constructs.forEach(construct => { + red += construct.colours.red; + blue += construct.colours.blue; + green += construct.colours.green; + }); + const teamColours = { red, blue, green }; + + const colourReqs = fullInfo.values.bonuses || []; + + const thresholds = colourReqs.map((bonus, i) => { + const colours = ['red', 'green', 'blue']; + const colourGoals = { + red: [], + green: [], + blue: [], + }; + const overFlow = []; + + colours.forEach(c => { + const colourReq = bonus.req[c]; + if (colourReqs === 0) return false; + + const start = i === 0 + ? 0 + : colourReqs[i - 1].req[c]; + + const dots = range(start, colourReq).map(j => { + const unmet = teamColours[c] < j + 1; + + + const reqClass = unmet + ? 'unmet' + : ''; + + if (j - start > 4) { + overFlow.push( +
+ {shapes.vboxColour(c)} +
+ ); + } else { + colourGoals[c].push( +
+ {shapes.vboxColour(c)} +
+ ); + } + + return true; + }); + + return dots; + }); + + const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]); + + const reqClass = reqsMet + ? '' + : 'unmet'; + + const goals = colours.map((c, j) => { + if (colourGoals[c].length) { + return ( +
{colourGoals[c]}
+ ); + } + return false; + }); + const bonusObj = info.includes('Life') + ?
+ {bonus.bonus}
+ :
+ {bonus.bonus}%
; + const overFlowObj = overFlow.length ?
{overFlow}
: null; + return ( +
+ {goals} + {overFlowObj} + {bonusObj} +
+ ); + }); + const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; + const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); + const itemSource = itemInfo.combos.filter(c => c.item === info); + const itemSourceInfo = itemSource.length + ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` + : false; + const itemRegEx = /(Red|Blue|Green)/; + const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + const infoText = info.replace('Plus', '+'); + + return ( +
+

{infoText} - {fullInfo.cost}b

+

SPEC

+ {itemSourceDescription} +
{infoDescription}
+
+ {thresholds} +
+
+ ); + } + const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false; + return ( +
+

{fullInfo.item} {cost}

+
{fullInfo.description}
); } - const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false; + + function Combos() { + if (!player) return false; + if (!info) return false; + if (tutorial) return false; + + const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info)); + if (vboxCombos.length > 6) return false; + + return ( + + + {vboxCombos.map((c, i) => + + + {c.components.map((u, j) => )} + + )} + +
{convertItem(c.item)}{convertItem(u)}
+ ); + } + return ( -
-

{fullInfo.item} {cost}

-
{fullInfo.description}
+
+ +
); } - - function Combos() { - if (!player) return false; - if (!info) return false; - if (tutorial) return false; - - const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info)); - if (vboxCombos.length > 6) return false; - - return ( - - - {vboxCombos.map((c, i) => - - - {c.components.map((u, j) => )} - - )} - -
{convertItem(c.item)}{convertItem(u)}
- ); - } - - return ( -
- - -
- ); } module.exports = InfoComponent; diff --git a/client/src/components/play.jsx b/client/src/components/play.jsx index 40f5b657..2059f774 100644 --- a/client/src/components/play.jsx +++ b/client/src/components/play.jsx @@ -139,39 +139,41 @@ function Play(args) { ; const list = () => { - if (!instances.length) return ( -
-
- -
Matchmaking
-
- {inviteBtn()} -
- -
Practice MNML
-
-
- -
Join the Community
-
-
- ); + if (!instances.length) { + return ( +
+
+ +
Matchmaking
+
+ {inviteBtn()} +
+ +
Practice MNML
+
+
+ +
Join the Community
+
+
+ ); + } return (
-
+
); - } + }; return (
@@ -201,9 +203,9 @@ function Play(args) {
- Join our Discord server to find opponents and talk to the devs.
- Message @ntr or @mashy for some credits to get started.
- Tutorial Playthrough on YouTube + Join our Discord server to find opponents and talk to the devs.
+ Message @ntr or @mashy for some credits to get started.
+ Tutorial Playthrough on YouTube

diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 1206f621..ca0f3ad4 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -99,7 +99,6 @@ function Vbox(args) { const { combiner, navInstance, - instance, itemInfo, player, reclaiming, diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx index e425c2ac..605c4812 100644 --- a/client/src/tutorial.utils.jsx +++ b/client/src/tutorial.utils.jsx @@ -162,7 +162,9 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {

Each round you start with a vbox full of different skills, specs and colours.

Bits are your currency for buying skills, specs and colours from the vbox.
Colours cost 1b, Skills cost 2b and specs cost 3b.
- You can refill the vbox by pressing the refill button for 2b.

+ You can refill the vbox by pressing the refill button for 2b.
+ After each combat round you get more bits to further upgrade your team. +

Press the REFILL button to get a new vbox and continue.

); @@ -182,12 +184,18 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { return false; }; - const exitTutorial = ; + const classes = tutorial === 8 ? 'focus' : ''; + const exitTutorial = ; return ( -
+
{tutorialText()} - {exitTutorial} +
+ {exitTutorial} +
); }