From fa7f875bbd77ec91a72f65a13ce661a033e50b34 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 21 Oct 2018 22:35:20 +1100
Subject: [PATCH] frontend stuff

---
 client/src/components/battle.cryp.card.jsx |  40 ++++++
 client/src/components/cryp.list.jsx        |   2 +-
 client/src/components/game.jsx             | 147 +++++++++++++++------
 client/src/components/item.list.jsx        |   2 +-
 4 files changed, 150 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/battle.cryp.card.jsx

diff --git a/client/src/components/battle.cryp.card.jsx b/client/src/components/battle.cryp.card.jsx
new file mode 100644
index 00000000..99074934
--- /dev/null
+++ b/client/src/components/battle.cryp.card.jsx
@@ -0,0 +1,40 @@
+const preact = require('preact');
+
+function CrypCard(cryp) {
+    return (
+        <div key={cryp.id}
+            className="tile is-vertical box"
+            style={activeItem ? { cursor: 'pointer' } : {}}
+            onClick={() => sendItemUse(cryp.id)} >
+            <div className="tile 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-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+
+                <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
+                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
+
+            </div>
+            <button
+                className="button is-dark"
+                type="submit"
+                disabled={cryp.hp.value === 0}
+                onClick={() => sendGamePve(cryp.id)}>
+                Start PVE
+            </button>
+        </div>
+    );
+}
+
+module.exports = CrypCard;
diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx
index cb718c45..404ee80b 100755
--- a/client/src/components/cryp.list.jsx
+++ b/client/src/components/cryp.list.jsx
@@ -8,7 +8,7 @@ function CrypList({ cryps, activeItem, sendGamePve, sendItemUse }) {
     const crypPanels = cryps.sort(nameSort).map(cryp => (
 
         <div key={cryp.id}
-            className="tile is-vertical box"
+            className="tile is-vertical"
             style={activeItem ? { cursor: 'pointer' } : {}}
             onClick={() => sendItemUse(cryp.id)} >
             <div className="tile is-child">
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx
index 495fd940..9e02b17d 100644
--- a/client/src/components/game.jsx
+++ b/client/src/components/game.jsx
@@ -1,5 +1,96 @@
 const preact = require('preact');
 
+function PlayerCrypCard(cryp) {
+    return (
+        <div key={cryp.id}
+            className="tile is-vertical">
+            <div className="tile 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-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+
+                <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
+                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
+
+            </div>
+            <button
+                className="button is-dark is-fullwidth"
+                type="submit"
+                // onClick={() => sendGameSkill(c.id, otherTeams[0].id, 'Attack')}
+                >
+                Attack
+            </button>
+        </div>
+    );
+}
+
+function PlayerTeam(team) {
+    const cryps = team.cryps.map(PlayerCrypCard);
+
+    return (
+        <div className="tile">
+            {cryps}
+        </div>
+    )
+}
+
+function OpponentCrypCard(cryp) {
+    return (
+        <div key={cryp.id}
+            className="tile is-vertical">
+            <div className="tile 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-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+
+                <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
+                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
+
+            </div>
+        </div>
+    );
+}
+
+function OpponentTeam(team) {
+    const cryps = team.cryps.map(OpponentCrypCard);
+
+    return (
+        <div className="tile">
+            {cryps}
+        </div>
+    )
+}
+
+function GameState(game) {
+    return (
+        <div className="tile" style={{ "min-height": "100%" }}>
+            <div className="title is-1">{game.phase}</div>
+        </div>
+    )
+}
+
 function GamePanel({ game, sendGameSkill, sendGameTarget, account }) {
     if (!game) return <div>...</div>;
 
@@ -7,52 +98,30 @@ function GamePanel({ game, sendGameSkill, sendGameTarget, account }) {
 
     const playerTeam = game.teams.find(t => t.id === account.id);
 
-    const targetBtn = playerTeam.incoming.map(i => (
-        <button
-            key={i.id}
-            className="button is-dark is-fullwidth"
-            type="submit"
-            onClick={() => sendGameTarget(playerTeam.cryps[0].id, i.id)}>
-            take the hit
-        </button>
-    ));
-
-    const playerCryps = playerTeam.cryps.map(c => (
-        <div key={c.id} >
-            <div>{c.name}</div>
-            <button
-                className="button is-dark is-fullwidth"
-                type="submit"
-                onClick={() => sendGameSkill(c.id, otherTeams[0].id, 'Attack')}>
-                Attack
-            </button>
-        </div>
-    ));
+    const gameState = GameState(game);
 
+    // const targetBtn = playerTeam.incoming.map(i => (
+    //     <button
+    //         key={i.id}
+    //         className="button is-dark is-fullwidth"
+    //         type="submit"
+    //         onClick={() => sendGameTarget(playerTeam.cryps[0].id, i.id)}>
+    //         take the hit
+    //     </button>
+    // ));
 
     return (
-        <div>
-            <h1>{game.phase}</h1>
-            <div>
-                <h1>them</h1>
-                <div>{JSON.stringify(otherTeams)}</div>
+        <div className="tile is-ancestor">
+            <div className="tile is-parent is-vertical">
+                <div className="tile is-parent">{otherTeams.map(OpponentTeam)}</div>
+                {gameState}
+                <div className="tile is-parent footer" >{PlayerTeam(playerTeam)}</div>
             </div>
-            <div>
-                <h1>us</h1>
-                {playerCryps}
-                {targetBtn}
+            <div className="tile is-parent is-4">
+                <div className="tile" >log</div>
             </div>
         </div>
     )
-    // return (
-    //     <div className="">
-    //         <div>{JSON.stringify(game.a)}</div>
-    //         <div>{JSON.stringify(game.b)}</div>
-    //         <div>
-    //             {game.log.map((l, i) => (<p key={i} >{l}</p>))}
-    //         </div>
-    //     </div>
-    // );
 }
 
 module.exports = GamePanel;
diff --git a/client/src/components/item.list.jsx b/client/src/components/item.list.jsx
index d0cd6199..b003b5b8 100644
--- a/client/src/components/item.list.jsx
+++ b/client/src/components/item.list.jsx
@@ -5,7 +5,7 @@ function ItemList({ items, setActiveItem }) {
     if (!items) return <div>...</div>;
     const itemPanels = items.map(item => (
 
-        <div key={item.id} className="tile is-parent is-vertical box">
+        <div key={item.id} className="tile is-parent is-vertical">
             <div className="tile is-vertical is-child">
                 <div className="columns" >
                     <div className="column is-8">