ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some ui formatting for cryp stats and xp bar

Browse Source
This commit is contained in:
Mashy 2018-09-24 16:05:46 +10:00
parent 25058e185c
commit daf18c26b0
1 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/cryp.panel.jsx Executable file → Normal file
View File

@ -2,7 +2,7 @@ const preact = require('preact');
function CrypPanel({ cryp, sendCombatPve }) {
if (!cryp) return <div>not ready</div>;
const xptolevel = Math.pow(2,(cryp.lvl + 1));
return (
<div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
<div className="tile is-6">
@ -43,17 +43,35 @@ function CrypPanel({ cryp, sendCombatPve }) {
</div>
<div className="tile is-parent is-6">
<section className="tile is-child notification has-background-grey is-dark">
<p className="title">Stat Area</p>
<p>{JSON.stringify(cryp.def)}</p>
<p>{JSON.stringify(cryp.dmg)}</p>
<p>{JSON.stringify(cryp.hp)}</p>
<p>{JSON.stringify(cryp.stam)}</p>
<p className="title">Cryp Stats</p>
<p className="subtitle">Level - {cryp.lvl}</p>
<div className="columns">
<div className="column">
<ul> Hit Points <i className="fas fa-plus" /> {cryp.hp} </ul>
<ul> Attack Damage <i className="fas fa-bomb" /> {cryp.dmg.value} </ul>
</div>
<div className="column">
<ul> Stamina <i className="fas fa-walking" /> {cryp.stam.value} </ul>
<ul> Defense <i className="fas fa-shield-alt" /> {cryp.def.value} </ul>
</div>
</div>
<br />
Progress to next level
<div className="columns">
<div className="column is-10">
<progress className="progress is-success" value={cryp.xp} max={xptolevel}></progress>
</div>
<div className="column has-text-left has-text-weight-bold">
{cryp.xp} / {xptolevel} XP
</div>
</div>
<button
className="button is-success"
type="submit"
onClick={() => sendCombatPve()}>
Start PVE
</button>
</section>
</div>
</div>