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}