93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
const preact = require('preact');
|
|
// const key = require('keymaster');
|
|
const range = require('lodash/range');
|
|
|
|
const VboxContainer = require('./vbox.container');
|
|
const molecule = require('./molecule');
|
|
const saw = require('./saw.component');
|
|
|
|
function Cryp(cryp) {
|
|
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" >{s}</button>;
|
|
});
|
|
|
|
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 className="cryp-box">
|
|
<figure className="img">
|
|
{molecule}
|
|
<figcaption>{cryp.name}</figcaption>
|
|
</figure>
|
|
<div className="skills">
|
|
{skills}
|
|
</div>
|
|
<div className="stats">
|
|
{stats}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InstanceComponent(args) {
|
|
const {
|
|
// account,
|
|
instance,
|
|
quit,
|
|
sendInstanceReady,
|
|
} = args;
|
|
|
|
if (!instance) return <div>...</div>;
|
|
|
|
const cryps = instance.cryps.map(Cryp);
|
|
|
|
return (
|
|
<section className="instance" >
|
|
<div className="row">
|
|
<div className="three columns">
|
|
<button
|
|
className="instance-btn instance-ui-btn glow-btn"
|
|
onClick={quit}>
|
|
Menu
|
|
</button>
|
|
</div>
|
|
<div className="six columns">
|
|
<div> </div>
|
|
</div>
|
|
<div className="three columns">
|
|
<button
|
|
className="instance-btn instance-ui-btn green-btn u-pull-right"
|
|
onClick={() => sendInstanceReady()}>
|
|
Ready
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<VboxContainer />
|
|
<div className="three columns">
|
|
{cryps}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
module.exports = InstanceComponent;
|