mnml/client/src/components/vbox.info.thresholds.jsx

100 lines
2.7 KiB
JavaScript

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>
<div class="thresholds">
{thresholds}
</div>
</div>
);
}
module.exports = specThresholds;