From c950a0a866fbe3e93227b56f1e5266e3b8847bba Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 8 Oct 2018 17:26:23 +1100
Subject: [PATCH] spawn button

---
 client/src/components/cryp.list.jsx | 66 +++++++++++++++++++----------
 1 file changed, 43 insertions(+), 23 deletions(-)

diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx
index 072ea116..294fc6d0 100644
--- a/client/src/components/cryp.list.jsx
+++ b/client/src/components/cryp.list.jsx
@@ -1,23 +1,43 @@
-const preact = require('preact');
-
-function CrypPanel({ cryps, sendCombatPve }) {
-    if (!cryps) return <div>not ready</div>;
-    const crypPanels = cryps.map(cryp => (
-        <div key={cryp.id} className="tile is-parent is-vertical box">
-            <div className="title">{cryp.name}</div>
-            <button
-                className="button is-success"
-                type="submit"
-                onClick={() => sendCombatPve(cryp.id)}>
-                Start PVE
-            </button>
-        </div>
-    ));
-    return (
-        <div>
-            {crypPanels}
-        </div>
-    );
-}
-
-module.exports = CrypPanel;
+const preact = require('preact');
+
+function CrypPanel({ cryps, sendCombatPve }) {
+    if (!cryps) return <div>not ready</div>;
+    const crypPanels = cryps.map(cryp => (
+
+        <div key={cryp.id} className="tile is-parent is-vertical box">
+            <div className="tile is-vertical 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-success" value={cryp.hp.value} max={cryp.stam.value}></progress>
+            </div>
+            <button
+                className="button is-success"
+                type="submit"
+                onClick={() => sendCombatPve(cryp.id)}>
+                Start PVE
+            </button>
+        </div>
+    ));
+    return (
+        <div>
+            <a className="button is-large is-fullwidth">
+                <span>Spawn 👾</span>
+                <span className="icon is-medium"><i className="fab fa-plus"></i></span>
+            </a>
+            {crypPanels}
+        </div>
+    );
+}
+
+module.exports = CrypPanel;