51 lines
1.8 KiB
JavaScript
Executable File
51 lines
1.8 KiB
JavaScript
Executable File
const preact = require('preact');
|
|
|
|
const { stringSort } = require('./../utils');
|
|
const nameSort = stringSort('name');
|
|
|
|
function CrypList({ cryps, activeItem, sendGamePve, sendItemUse }) {
|
|
if (!cryps) return <div>not ready</div>;
|
|
const crypPanels = cryps.sort(nameSort).map(cryp => (
|
|
|
|
<div key={cryp.id}
|
|
className="tile is-vertical box"
|
|
style={activeItem ? { cursor: 'pointer' } : {}}
|
|
onClick={() => sendItemUse(cryp.id)} >
|
|
<div className="tile is-child">
|
|
<div className="columns" >
|
|
<div className="column is-10">
|
|
<p className="title">{cryp.name}</p>
|
|
<p className="subtitle">Level {cryp.lvl}</p>
|
|
</div>
|
|
<div className="column">
|
|
<figure className="image">
|
|
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
|
|
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
|
|
|
|
<div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
|
|
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
|
|
|
|
</div>
|
|
<button
|
|
className="button is-dark"
|
|
type="submit"
|
|
disabled={cryp.hp.value === 0}
|
|
onClick={() => sendGamePve(cryp.id)}>
|
|
Start PVE
|
|
</button>
|
|
</div>
|
|
));
|
|
return (
|
|
<div className="tile is-parent is-vertical" >
|
|
{crypPanels}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = CrypList;
|