41 lines
1.5 KiB
JavaScript
41 lines
1.5 KiB
JavaScript
const preact = require('preact');
|
|
|
|
function CrypCard(cryp) {
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
module.exports = CrypCard;
|