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="">

client/src/socket.jsx

@@ -24,7 +24,7 @@ function createSocket(store) {
 
         // Connection opened
         ws.addEventListener('open', function wsOpen(event) {
-            //send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+            send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
         });
 
         // Listen for messages
@@ -79,7 +79,7 @@ function createSocket(store) {
         console.log('got a new cryp', cryp);
     }
 
-    function combatPve(response) {
+    function gamePve(response) {
         const [structName, game] = response;
         console.log('got a new game', game);
     }
@@ -109,10 +109,15 @@ function createSocket(store) {
         send({ method: 'cryp_spawn', params: { name } });
     }
 
-    function sendCombatPve(id) {
-        send({ method: 'combat_pve', params: { id } });
+    function sendGamePve(id) {
+        send({ method: 'game_pve', params: { id } });
     }
 
+    function sendGameAbility(gameId, crypId, targetTeamId, ability) {
+        send({ method: 'game_ability', params: { game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, ability } });
+    }
+
+
     function sendItemUse(item, target) {
         console.log(item, target);
         send({ method: 'item_use', params: { item, target } });
@@ -127,7 +132,7 @@ function createSocket(store) {
     // this object wraps the reply types to a function
     const handlers = {
         cryp_spawn: crypSpawn,
-        combat_pve: combatPve,
+        game_pve: gamePve,
         game_state: gameState,
         account_login: accountLogin,
         account_create: accountLogin,
@@ -153,7 +158,8 @@ function createSocket(store) {
     return {
         sendAccountLogin,
         sendAccountRegister,
-        sendCombatPve,
+        sendGamePve,
+        sendGameAbility,
         sendCrypSpawn,
         sendItemUse,
         connect,