game controls

client/src/components/controls.jsx

@@ -0,0 +1,33 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            game
+        } = state;
+
+        function sendGameReady() {
+            document.activeElement.blur()
+            return ws.sendGameReady(game.id);
+        }
+
+        return { game, sendGameReady };
+    },
+);
+
+function Controls(args) {
+    const {
+        game,
+        sendGameReady
+    } = args;
+
+    return (
+        <div class="controls">
+            <button class="ready" onClick={() => sendGameReady()}>Ready</button>
+        </div>
+    );
+}
+
+module.exports = addState(Controls);

client/src/components/faceoff.jsx

@@ -8,14 +8,19 @@ const { ConstructAvatar } = require('./construct');
 const addState = connect(
     function receiveState(state) {
         const {
+            ws,
             instance,
             account,
         } = state;
 
+        function sendInstanceReady() {
+            return ws.sendInstanceReady(instance.id);
+        }
 
         return {
             instance,
             account,
+            sendInstanceReady,
         };
     },
 );
@@ -37,6 +42,7 @@ function Faceoff(props) {
     const {
         instance,
         account,
+        sendInstanceReady,
     } = props;
 
     if (!instance) return <div>...</div>;
@@ -75,6 +81,7 @@ function Faceoff(props) {
             {OpponentTeam(otherTeam)}
             {PlayerTeam(playerTeam)}
             <h1 class={`player-name ${playerTeam.ready ? 'ready' : ''}`}>{playerTeam.name}</h1>
+            <button class="ready" onClick={() => sendInstanceReady()} >Ready</button>
         </main>
     );
 }

client/src/components/game.jsx

@@ -5,6 +5,7 @@ const actions = require('../actions');
 
 const GameConstruct = require('./game.construct');
 const Targeting = require('./targeting.arrows');
+const Controls = require('./controls');
 
 const addState = connect(
     function receiveState(state) {
@@ -100,6 +101,7 @@ function Game(props) {
             {otherTeams.map(OpponentTeam)}
             <Targeting />
             {PlayerTeam(playerTeam, setActiveSkill)}
+            <Controls />
         </main>
     );
 }

client/src/components/instance.component.jsx

@@ -63,7 +63,6 @@ function Instance(args) {
         <main class={instanceClasses} onClick={instanceClick} onMouseOver={() => setInfo(null)} >
             <Vbox />
             <InfoContainer />
-            <hr />
             <InstanceConstructsContainer />
         </main>
     );

client/src/components/scoreboard.jsx

@@ -47,12 +47,12 @@ function ScoreBoard(args) {
 
     return (
         <div class="scoreboard">
+            <button class="ready" onClick={() => sendInstanceReady()}>Ready</button>
             <table>
                 <tbody>
                     {players}
                 </tbody>
             </table>
-            <button class="ready" onClick={() => sendInstanceReady}>Ready</button>
         </div>
     );
 }