write game abilities to db

client/src/components/cryp.list.container.js

@@ -5,8 +5,8 @@ const CrypList = require('./cryp.list');
 const addState = connect(
     function receiveState(state) {
         const { ws, cryps, activeItem } = state;
-        function sendCombatPve(crypId) {
-            return ws.sendCombatPve(crypId);
+        function sendGamePve(crypId) {
+            return ws.sendGamePve(crypId);
         }
 
         function sendItemUse(targetId) {
@@ -16,7 +16,7 @@ const addState = connect(
             return false;
         }
 
-        return { cryps, sendCombatPve, activeItem, sendItemUse };
+        return { cryps, sendGamePve, activeItem, sendItemUse };
     }
 );
 

client/src/components/cryp.list.jsx

@@ -3,7 +3,7 @@ const preact = require('preact');
 const { stringSort } = require('./../utils');
 const nameSort = stringSort('name');
 
-function CrypList({ cryps, activeItem, sendCombatPve, sendItemUse }) {
+function CrypList({ cryps, activeItem, sendGamePve, sendItemUse }) {
     if (!cryps) return <div>not ready</div>;
     const crypPanels = cryps.sort(nameSort).map(cryp => (
 
@@ -35,7 +35,7 @@ function CrypList({ cryps, activeItem, sendCombatPve, sendItemUse }) {
                 className="button is-dark"
                 type="submit"
                 disabled={cryp.hp.value === 0}
-                onClick={() => sendCombatPve(cryp.id)}>
+                onClick={() => sendGamePve(cryp.id)}>
                 Start PVE
             </button>
         </div>

client/src/components/game.container.js

@@ -4,12 +4,12 @@ const Game = require('./game');
 
 const addState = connect(
     function receiveState(state) {
-        const { game, account } = state;
-        // function sendCombatPve(crypId) {
-        //     return ws.sendCombatPve(crypId);
-        // }
+        const { ws, game, account } = state;
+        function sendGameAbility(crypId, targetTeamId, ability) {
+            return ws.sendGameAbility(game.id, crypId, targetTeamId, ability);
+        }
 
-        return { game };
+        return { game, account, sendGameAbility };
     }
 );
 

client/src/components/game.jsx

@@ -2,16 +2,34 @@ const preact = require('preact');
 
 function GamePanel({ game, sendGameAbility, account }) {
     if (!game) return <div>...</div>;
-    return (
-        <div>
-            <div>{JSON.stringify(game)}</div>
+
+    const otherTeams = game.teams.filter(t => t.id !== account.id);
+
+    const playerTeam = game.teams.find(t => t.id === account.id);
+    const playerCryps = playerTeam.cryps.map(c => (
+        <div key={c.id} >
+            <div>{c.name}</div>
             <button
                 className="button is-dark is-fullwidth"
                 type="submit"
-                onClick={() => sendCrypSpawn(name)}>
-                Spawn 👾
+                onClick={() => sendGameAbility(c.id, otherTeams[0].id, 'Attack')}>
+                Attack
             </button>
         </div>
+    ));
+
+
+    return (
+        <div>
+            <div>
+                <h1>them</h1>
+                <div>{JSON.stringify(otherTeams)}</div>
+            </div>
+            <div>
+                <h1>us</h1>
+                {playerCryps}
+            </div>
+        </div>
     )
     // return (
     //     <div className="">