pvp init

client/src/components/body.component.jsx

@@ -3,6 +3,7 @@ const preact = require('preact');
 
 const ItemListContainer = require('./item.list.container');
 const CrypSpawnContainer = require('./cryp.spawn.container');
+const GameJoinButton = require('./game.join.button');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
 
@@ -12,6 +13,7 @@ function renderBody() {
             <div className="column is-4">
                 <div className="column">
                     <CrypSpawnContainer />
+                    <GameJoinButton />
                 </div>
                 <div className="column">
                     <div className="columns">

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

@@ -9,6 +9,10 @@ const addState = connect(
             return ws.sendGamePve(crypId);
         }
 
+        function sendGamePvp(crypIds) {
+            return ws.sendGamePvp(crypIds);
+        }
+
         function sendItemUse(targetId) {
             if (activeItem) {
                 return ws.sendItemUse(activeItem, targetId);
@@ -16,7 +20,7 @@ const addState = connect(
             return false;
         }
 
-        return { cryps, sendGamePve, activeItem, sendItemUse };
+        return { cryps, sendGamePve, sendGamePvp, 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, sendGamePve, sendItemUse }) {
+function CrypList({ cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse }) {
     if (!cryps) return <div>not ready</div>;
     const crypPanels = cryps.sort(nameSort).map(cryp => (
 
@@ -38,6 +38,15 @@ function CrypList({ cryps, activeItem, sendGamePve, sendItemUse }) {
                 onClick={() => sendGamePve(cryp.id)}>
                 Start PVE
             </button>
+
+            <button
+                className="button is-dark"
+                type="submit"
+                disabled={cryp.hp.value === 0}
+                onClick={() => sendGamePvp([cryp.id])}>
+                PVP
+            </button>
+
         </div>
     ));
     return (

client/src/components/game.join.button.jsx

@@ -0,0 +1,42 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(
+    function receiveState(state) {
+        const { ws, cryps } = state;
+        function sendGameJoin(gameId) {
+            return ws.sendGameJoin(gameId, [cryps[0].id]);
+        }
+
+        return { account: state.account, sendGameJoin };
+    }
+);
+
+function GameJoinButton({ account, sendGameJoin }) {
+    let gameId = '';
+
+    if (!account) return <div>...</div>;
+
+    return (
+        <div className="columns">
+            <div className="column">
+                <input
+                    className="input"
+                    type="text"
+                    placeholder="gameId"
+                    onChange={e => (gameId = e.target.value)}
+                />
+            </div>
+            <div className="column is-4">
+                <button
+                    className="button is-dark is-fullwidth"
+                    type="submit"
+                    onClick={() => sendGameJoin(gameId)}>
+                    Join Game
+                </button>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(GameJoinButton);

client/src/components/game.jsx

@@ -126,8 +126,9 @@ function GamePanel(props) {
         <div className="tile is-ancestor">
             <div className="tile is-parent is-vertical">
                 <div className="tile is-parent">{otherTeams.map(OpponentTeam)}</div>
-                <div className="tile">
-                    <div className="title is-1">{game.phase}</div>
+                <div className="tile is-child">
+                    <div className="title">{game.phase}</div>
+                    <div className="subtitle">{game.id}</div>
                 </div>
                 <div className="tile">
                     {incoming}

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
@@ -113,8 +113,19 @@ function createSocket(store) {
         send({ method: 'game_pve', params: { id } });
     }
 
+    function sendGamePvp(crypIds) {
+        send({ method: 'game_pvp', params: { cryp_ids: crypIds } });
+    }
+
+    function sendGameJoin(gameId, crypIds) {
+        send({ method: 'game_join', params: { game_id: gameId, cryp_ids: crypIds } });
+    }
+
     function sendGameSkill(gameId, crypId, targetTeamId, skill) {
-        send({ method: 'game_skill', params: { game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, skill } });
+        send({
+            method: 'game_skill',
+            params: { game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, skill }
+        });
         store.dispatch(actions.setActiveSkill(null));
     }
 
@@ -164,6 +175,8 @@ function createSocket(store) {
         sendAccountLogin,
         sendAccountRegister,
         sendGamePve,
+        sendGamePvp,
+        sendGameJoin,
         sendGameSkill,
         sendGameTarget,
         sendCrypSpawn,