refactor info.comp
This commit is contained in:
Mashy
parent
e4f091b2b8
commit
d52efc6c01
@ -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', () => <br />);
|
||||
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>
|
||||
);
|
||||
}
|
||||
const infoDescription = reactStringReplace(fullInfo.description, regEx, m => shapes[m]());
|
||||
return <div>{reactStringReplace(infoDescription, '\n', () => <br />)}</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 => {
|
||||
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]());
|
||||
if (isSkill || isSpec) {
|
||||
let infoText = info;
|
||||
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 (
|
||||
<div class="info-spec">
|
||||
<div class={isSkill ? 'info-skill' : 'info-spec'}>
|
||||
<h2>{infoText} {fullInfo.cost}b</h2>
|
||||
<h3>SPEC</h3>
|
||||
{itemSourceDescription}
|
||||
<div>{infoDescription}</div>
|
||||
<div class="thresholds">
|
||||
{thresholds}
|
||||
</div>
|
||||
{header}
|
||||
{itemSourceInfo}
|
||||
{cooldown}
|
||||
{itemDescription()}
|
||||
{speed}
|
||||
{thresholds}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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 (
|
||||
<div class="info-item">
|
||||
<h2>{fullInfo.item} {cost}</h2>
|
||||
<div>{infoDescription}</div>
|
||||
{itemDescription()}
|
||||
</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) {
|
||||
console.log(i);
|
||||
|
||||
function multiplier(s) { // Update later to use server info in future
|
||||
if (s === 'CounterAttack') return 120;
|
||||
if (s === 'CounterAttack+') return 160;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user