110 lines
3.1 KiB
JavaScript
110 lines
3.1 KiB
JavaScript
const preact = require('preact');
|
|
// const key = require('keymaster');
|
|
const range = require('lodash/range');
|
|
|
|
const VboxContainer = require('./vbox.container');
|
|
const InfoContainer = require('./info.container');
|
|
const molecule = require('./molecule');
|
|
const saw = require('./saw.component');
|
|
|
|
function Cryp(cryp, sendVboxApply, setInfo) {
|
|
const skills = range(0, 4).map(i => {
|
|
const s = cryp.skills[i]
|
|
? cryp.skills[i].skill
|
|
: (<span> </span>);
|
|
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo(s, cryp)}>{s}</button>;
|
|
});
|
|
|
|
// needed for ondrop to fire
|
|
function onDragOver(e) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
function onDrop(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
const item = parseInt(e.dataTransfer.getData('text'), 10);
|
|
return sendVboxApply(cryp.id, item);
|
|
}
|
|
|
|
const stats = [
|
|
{ stat: 'hp', colour: '#1FF01F' },
|
|
{ stat: 'green_damage', colour: '#1FF01F' },
|
|
{ stat: 'red_shield', colour: '#a52a2a' },
|
|
{ stat: 'red_damage', colour: '#a52a2a' },
|
|
{ stat: 'blue_shield', colour: '#3498db' },
|
|
{ stat: 'blue_damage', colour: '#3498db' },
|
|
{ stat: 'speed', colour: '#FFD123' },
|
|
].map((s, i) => (
|
|
<figure key={i} alt={s.stat}>
|
|
{saw(s.colour)}
|
|
<figcaption>{cryp[s.stat].value}</figcaption>
|
|
</figure>
|
|
));
|
|
|
|
return (
|
|
<div
|
|
key={cryp.id}
|
|
className="cryp-box"
|
|
onDragOver={onDragOver}
|
|
onDrop={onDrop}
|
|
>
|
|
<div className="cryp-box-top">
|
|
<figure className="img" onClick={() => setInfo(null, cryp)}>
|
|
{molecule}
|
|
<figcaption>{cryp.name}</figcaption>
|
|
</figure>
|
|
<div className="skills">
|
|
{skills}
|
|
</div>
|
|
</div>
|
|
<div className="stats">
|
|
{stats}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InstanceComponent(args) {
|
|
const {
|
|
// account,
|
|
instance,
|
|
quit,
|
|
sendInstanceReady,
|
|
sendVboxApply,
|
|
setInfo,
|
|
} = args;
|
|
|
|
if (!instance) return <div>...</div>;
|
|
|
|
const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
|
|
|
|
return (
|
|
<main className="instance" >
|
|
<div className="instance-hdr">
|
|
<button
|
|
className="instance-btn instance-ui-btn menu-btn left"
|
|
onClick={quit}>
|
|
Menu
|
|
</button>
|
|
<div className="spacer">
|
|
<div> </div>
|
|
</div>
|
|
<button
|
|
className="instance-btn instance-ui-btn ready-btn"
|
|
onClick={() => sendInstanceReady()}>
|
|
Ready
|
|
</button>
|
|
</div>
|
|
<VboxContainer />
|
|
<div className="cryp-list">
|
|
{cryps}
|
|
</div>
|
|
<InfoContainer />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = InstanceComponent;
|