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 }) { function CrypPanel({ cryp, sendCombatPve }) {
if (!cryp) return <div>not ready</div>; if (!cryp) return <div>not ready</div>;
const xptolevel = Math.pow(2,(cryp.lvl + 1));
return ( return (
<div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10"> <div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
<div className="tile is-6"> <div className="tile is-6">
@ -43,17 +43,35 @@ function CrypPanel({ cryp, sendCombatPve }) {
</div> </div>
<div className="tile is-parent is-6"> <div className="tile is-parent is-6">
<section className="tile is-child notification has-background-grey is-dark"> <section className="tile is-child notification has-background-grey is-dark">
<p className="title">Stat Area</p> <p className="title">Cryp Stats</p>
<p>{JSON.stringify(cryp.def)}</p> <p className="subtitle">Level - {cryp.lvl}</p>
<p>{JSON.stringify(cryp.dmg)}</p> <div className="columns">
<p>{JSON.stringify(cryp.hp)}</p> <div className="column">
<p>{JSON.stringify(cryp.stam)}</p> <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 <button
className="button is-success" className="button is-success"
type="submit" type="submit"
onClick={() => sendCombatPve()}> onClick={() => sendCombatPve()}>
Start PVE Start PVE
</button> </button>
</section> </section>
</div> </div>
</div> </div>