84 lines
2.7 KiB
JavaScript
84 lines
2.7 KiB
JavaScript
const preact = require('preact');
|
|
const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
|
|
|
|
function Info(args) {
|
|
const {
|
|
info,
|
|
sendUnequip,
|
|
} = args;
|
|
if (!info.length) return (<div className="instance-info"> </div>);
|
|
|
|
const [type, value] = info;
|
|
if (type === 'item') {
|
|
return (
|
|
<div className="instance-info">
|
|
{info.value} - what does it do?
|
|
</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>
|
|
);
|
|
}
|
|
if (type === 'spec') {
|
|
return (
|
|
<div className="instance-info">
|
|
<div>
|
|
<div> {value.spec} </div>
|
|
<div> {SPECS[value.spec].description} </div>
|
|
</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} - {value[s.stat].max}</div>
|
|
));
|
|
const cryp = value;
|
|
const skills = cryp.skills.map((s, i) => <button key={i} className="instance-btn"
|
|
onClick={() => sendUnequip(cryp.id, s.skill)} >{s.skill}</button>);
|
|
|
|
const specs = cryp.specs.map((s, i) => <button key={i} className="instance-btn"
|
|
onClick={() => sendUnequip(cryp.id, s) }>{s}</button>);
|
|
|
|
return (
|
|
<div className="instance-info">
|
|
<h5>{cryp.name}</h5>
|
|
<div className="info-stats">
|
|
{stats}
|
|
</div>
|
|
<div className="info-skills">
|
|
{skills}
|
|
</div>
|
|
<div className="info-specs">
|
|
{specs}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = Info;
|