From d52efc6c0199224cb1c59f3eed135fd4654ce368 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 31 Oct 2019 10:49:43 +1000 Subject: [PATCH] refactor info.comp --- client/src/components/info.component.jsx | 168 +++++----------------- client/src/components/info.thresholds.jsx | 96 +++++++++++++ client/src/utils.jsx | 2 - 3 files changed, 132 insertions(+), 134 deletions(-) create mode 100644 client/src/components/info.thresholds.jsx diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 8bb4b5db..87c96eeb 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -1,9 +1,9 @@ const preact = require('preact'); -const range = require('lodash/range'); const reactStringReplace = require('react-string-replace'); +const specThresholds = require('./info.thresholds'); const { INFO } = require('./../constants'); -const { convertItem, removeTier } = require('../utils'); +const { convertItem, removeTier, formatInfo } = require('../utils'); const { tutorialStage } = require('../tutorial.utils'); const shapes = require('./shapes'); @@ -68,150 +68,54 @@ class InfoComponent extends preact.Component { const isSkill = fullInfo.skill; const isSpec = fullInfo.spec; - if (isSkill) { + const itemDescription = () => { const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; - let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); - infoDescription = reactStringReplace(infoDescription, '\n', () =>
); - 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} -
- ); - } + const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]()); + return
{reactStringReplace(infoDescription, '\n', () =>
)}
; + }; - 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)/; - let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); - infoDescription = reactStringReplace(infoDescription, '\n', () =>
); - const itemSource = itemInfo.combos.filter(c => c.item === info); - let itemSourceInfo = itemSource.length - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; - const itemRegEx = /(Red|Blue|Green)/; - if (itemSourceInfo) { - while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+'); - } - const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + if (isSkill || isSpec) { let infoText = info; while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+'); + const header = isSkill ?

SKILL

:

SPEC

; + + const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info)); + let itemSourceInfo = itemSource.length + ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` + : false; + + if (itemSourceInfo) { + while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+'); + const itemRegEx = /(Red|Blue|Green)/; + itemSourceInfo = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + } + + const cooldown = isSkill && fullInfo.cooldown ?
{fullInfo.cooldown} Turn delay
: null; + + const speed = isSkill + ?
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
+ : null; + + const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null; + return ( -
+

{infoText} {fullInfo.cost}b

-

SPEC

- {itemSourceDescription} -
{infoDescription}
-
- {thresholds} -
+ {header} + {itemSourceInfo} + {cooldown} + {itemDescription()} + {speed} + {thresholds}
); } const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false; - - const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|POWER|SPEED|LIFE)/; - let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); - infoDescription = reactStringReplace(infoDescription, '\n', () =>
); return (

{fullInfo.item} {cost}

-
{infoDescription}
+ {itemDescription()}
); } diff --git a/client/src/components/info.thresholds.jsx b/client/src/components/info.thresholds.jsx new file mode 100644 index 00000000..7136a855 --- /dev/null +++ b/client/src/components/info.thresholds.jsx @@ -0,0 +1,96 @@ +const preact = require('preact'); +const range = require('lodash/range'); +const shapes = require('./shapes'); + +function specThresholds(player, fullInfo, info) { + 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} +
+ ); + }); + return ( +
+ {thresholds} +
+ ); +} + +module.exports = specThresholds; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 42761a0a..ec49e659 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -240,8 +240,6 @@ function convertItem(v) { } function effectInfo(i) { - console.log(i); - function multiplier(s) { // Update later to use server info in future if (s === 'CounterAttack') return 120; if (s === 'CounterAttack+') return 160;