109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
const preact = require('preact');
|
|
const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
|
|
const { COLOUR_ICONS } = require('../utils');
|
|
|
|
function Info(args) {
|
|
const {
|
|
info,
|
|
sendUnequip,
|
|
instance,
|
|
} = args;
|
|
if (!info.length) return (<div className="instance-info"> </div>);
|
|
let red = 0; let blue = 0; let green = 0;
|
|
instance.cryps.forEach(cryp => {
|
|
red += cryp.colours.red;
|
|
blue += cryp.colours.blue;
|
|
green += cryp.colours.green;
|
|
});
|
|
const teamColours = { red, blue, green };
|
|
const [type, value] = info;
|
|
if (type === 'item') {
|
|
let itemDetails;
|
|
if (SKILLS[value]) {
|
|
itemDetails = SKILLS[value];
|
|
} else if (SPECS[value]) {
|
|
itemDetails = SPECS[value];
|
|
} else if (COLOURS[value]) {
|
|
itemDetails = COLOURS[value];
|
|
}
|
|
return (
|
|
<div className="instance-info">
|
|
{value} - {itemDetails.description}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'skill') {
|
|
return (
|
|
<div className="instance-info">
|
|
<div>
|
|
<div> {value.skill} </div>
|
|
<div> {SKILLS[value.skill].description} </div>
|
|
<button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
|
|
unequip
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function thresholds(t, spec) {
|
|
return (
|
|
SPECS[spec].colours.map((c, i) => (
|
|
<figure key={i} alt={c.colour}>
|
|
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
|
|
<figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
|
|
</figure>
|
|
))
|
|
);
|
|
}
|
|
|
|
|
|
if (type === 'spec') {
|
|
const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
|
|
const threshold = thresholds(t, value.spec);
|
|
return (
|
|
<div className="thresholds" key={i} alt={t}>
|
|
{threshold}
|
|
</div>
|
|
);
|
|
}) : null;
|
|
return (
|
|
<div className="instance-info">
|
|
<div>
|
|
<div> {value.spec} </div>
|
|
<div> {SPECS[value.spec].description} </div>
|
|
{breaks}
|
|
</div>
|
|
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
|
|
unequip
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'cryp') {
|
|
const stats = [
|
|
{ stat: 'hp', disp: 'Hp', colour: '#1FF01F' },
|
|
{ stat: 'red_shield', disp: 'Red Shield', colour: '#a52a2a' },
|
|
{ stat: 'blue_shield', disp: 'Blue Shield', colour: '#3498db' },
|
|
{ stat: 'red_damage', disp: 'Red Damage', colour: '#a52a2a' },
|
|
{ stat: 'blue_damage', disp: 'Blue Damage', colour: '#3498db' },
|
|
{ stat: 'green_damage', disp: 'Green Damage', colour: '#1FF01F' },
|
|
{ stat: 'speed', disp: 'Speed', colour: '#FFD123' },
|
|
].map((s, i) => (
|
|
<div key={i}>{s.disp}: {value[s.stat].base} {String.fromCharCode(8594)} {value[s.stat].max}</div>
|
|
));
|
|
return (
|
|
<div className="instance-info">
|
|
<h5>{value.name}</h5>
|
|
<div className="info-stats">
|
|
{stats}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = Info;
|