refactor info.comp
This commit is contained in:
Mashy
parent
e4f091b2b8
commit
d52efc6c01
@ -1,9 +1,9 @@
|
|||||||
const preact = require('preact');
|
const preact = require('preact');
|
||||||
const range = require('lodash/range');
|
|
||||||
const reactStringReplace = require('react-string-replace');
|
const reactStringReplace = require('react-string-replace');
|
||||||
|
|
||||||
|
const specThresholds = require('./info.thresholds');
|
||||||
const { INFO } = require('./../constants');
|
const { INFO } = require('./../constants');
|
||||||
const { convertItem, removeTier } = require('../utils');
|
const { convertItem, removeTier, formatInfo } = require('../utils');
|
||||||
const { tutorialStage } = require('../tutorial.utils');
|
const { tutorialStage } = require('../tutorial.utils');
|
||||||
const shapes = require('./shapes');
|
const shapes = require('./shapes');
|
||||||
|
|
||||||
@ -68,150 +68,54 @@ class InfoComponent extends preact.Component {
|
|||||||
const isSkill = fullInfo.skill;
|
const isSkill = fullInfo.skill;
|
||||||
const isSpec = fullInfo.spec;
|
const isSpec = fullInfo.spec;
|
||||||
|
|
||||||
if (isSkill) {
|
const itemDescription = () => {
|
||||||
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
||||||
let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
|
const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]());
|
||||||
infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
|
return <div>{reactStringReplace(infoDescription, '\n', () => <br />)}</div>;
|
||||||
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 = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
|
|
||||||
const cooldown = fullInfo.cooldown ? `${fullInfo.cooldown} Turn delay` : null;
|
|
||||||
return (
|
|
||||||
<div class="info-skill">
|
|
||||||
<h2>{fullInfo.item} {fullInfo.cost}b</h2>
|
|
||||||
<h3> SKILL </h3>
|
|
||||||
{itemSourceDescription}
|
|
||||||
<div> {cooldown} </div>
|
|
||||||
<div>{infoDescription}</div>
|
|
||||||
{speed}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 => {
|
if (isSkill || isSpec) {
|
||||||
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(
|
|
||||||
<figure key={j} alt={c.colour} class={reqClass} >
|
|
||||||
{shapes.vboxColour(c)}
|
|
||||||
</figure>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
colourGoals[c].push(
|
|
||||||
<figure key={j} alt={c.colour} class={reqClass} >
|
|
||||||
{shapes.vboxColour(c)}
|
|
||||||
</figure>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<div key={j}>{colourGoals[c]}</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
const bonusObj = info.includes('Life')
|
|
||||||
? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
|
|
||||||
: <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
|
|
||||||
const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
|
|
||||||
return (
|
|
||||||
<div key={i} class="spec-goal">
|
|
||||||
{goals}
|
|
||||||
{overFlowObj}
|
|
||||||
{bonusObj}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
|
||||||
let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
|
|
||||||
infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
|
|
||||||
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]());
|
|
||||||
let infoText = info;
|
let infoText = info;
|
||||||
while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
|
while (infoText.includes('Plus')) infoText = infoText.replace('Plus', '+');
|
||||||
|
|
||||||
|
const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
|
||||||
|
|
||||||
|
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 ? <div>{fullInfo.cooldown} Turn delay</div> : null;
|
||||||
|
|
||||||
|
const speed = isSkill
|
||||||
|
? <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="info-spec">
|
<div class={isSkill ? 'info-skill' : 'info-spec'}>
|
||||||
<h2>{infoText} {fullInfo.cost}b</h2>
|
<h2>{infoText} {fullInfo.cost}b</h2>
|
||||||
<h3>SPEC</h3>
|
{header}
|
||||||
{itemSourceDescription}
|
{itemSourceInfo}
|
||||||
<div>{infoDescription}</div>
|
{cooldown}
|
||||||
<div class="thresholds">
|
{itemDescription()}
|
||||||
|
{speed}
|
||||||
{thresholds}
|
{thresholds}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
|
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', () => <br />);
|
|
||||||
return (
|
return (
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<h2>{fullInfo.item} {cost}</h2>
|
<h2>{fullInfo.item} {cost}</h2>
|
||||||
<div>{infoDescription}</div>
|
{itemDescription()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
96
client/src/components/info.thresholds.jsx
Normal file
96
client/src/components/info.thresholds.jsx
Normal file
@ -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(
|
||||||
|
<figure key={j} alt={c.colour} class={reqClass} >
|
||||||
|
{shapes.vboxColour(c)}
|
||||||
|
</figure>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
colourGoals[c].push(
|
||||||
|
<figure key={j} alt={c.colour} class={reqClass} >
|
||||||
|
{shapes.vboxColour(c)}
|
||||||
|
</figure>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div key={j}>{colourGoals[c]}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
const bonusObj = info.includes('Life')
|
||||||
|
? <div class={`${reqClass} bonus`} > + {bonus.bonus}</div>
|
||||||
|
: <div class={`${reqClass} bonus`} > + {bonus.bonus}%</div>;
|
||||||
|
const overFlowObj = overFlow.length ? <div> {overFlow} </div> : null;
|
||||||
|
return (
|
||||||
|
<div key={i} class="spec-goal">
|
||||||
|
{goals}
|
||||||
|
{overFlowObj}
|
||||||
|
{bonusObj}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<div class="thresholds">
|
||||||
|
{thresholds}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = specThresholds;
|
||||||
@ -240,8 +240,6 @@ function convertItem(v) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function effectInfo(i) {
|
function effectInfo(i) {
|
||||||
console.log(i);
|
|
||||||
|
|
||||||
function multiplier(s) { // Update later to use server info in future
|
function multiplier(s) { // Update later to use server info in future
|
||||||
if (s === 'CounterAttack') return 120;
|
if (s === 'CounterAttack') return 120;
|
||||||
if (s === 'CounterAttack+') return 160;
|
if (s === 'CounterAttack+') return 160;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user