From daf18c26b029451339739203babec20762cdd48d Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 24 Sep 2018 16:05:46 +1000
Subject: [PATCH] Some ui formatting for cryp stats and xp bar

---
 client/src/components/cryp.panel.jsx | 30 ++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)
 mode change 100755 => 100644 client/src/components/cryp.panel.jsx

diff --git a/client/src/components/cryp.panel.jsx b/client/src/components/cryp.panel.jsx
old mode 100755
new mode 100644
index 6de8e6af..35994db5
--- a/client/src/components/cryp.panel.jsx
+++ b/client/src/components/cryp.panel.jsx
@@ -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>