spawn button

client/src/components/cryp.list.jsx

@@ -3,8 +3,24 @@ 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>
+            <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"
@@ -15,6 +31,10 @@ function CrypPanel({ cryps, sendCombatPve }) {
     ));
     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>
     );