spawn button

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;