game controls

client/assets/styles/game.less

@@ -4,10 +4,20 @@
     overflow: hidden;
     display: grid;
     grid-template-rows: 1fr 0.5fr 1.5fr;
+    grid-template-columns: 1fr 0.15fr;
     grid-template-areas:
-        "opponent"
+        "opponent controls"
-        "target"
+        "target   controls"
-        "player";
+        "player   controls";
+
+    .controls {
+        margin: 1em 1em 0 0;
+        grid-area: controls;
+
+        button {
+            width: 100%;
+        }
+    }
 }
 
 .game .team {
@@ -413,7 +423,17 @@
 
 @media (max-width: 1000px) {
     .game {
+        grid-template-areas:
+            "opponent"
+            "target  "
+            "player  ";
+
         grid-template-rows: 1fr 0.2fr 1.5fr;
+        grid-template-columns: 1fr;
+
+        .controls {
+            display: none;
+        }
     }
 
     .game .stats div {

client/assets/styles/instance.less

@@ -4,12 +4,11 @@
     overflow-x: hidden;
     display: grid;
     grid-template-columns: 2fr minmax(min-content, 1fr);
-    grid-template-rows: 1fr min-content min-content;
+    grid-template-rows: min-content 1fr;
 
     grid-template-areas:
-        "constructs constructs"
+        "vbox info"
-        "rule rule"
+        "constructs constructs";
-        "vbox info";
 
     hr {
         grid-area: rule;
@@ -38,22 +37,18 @@
 .scoreboard {
     display: flex;
     flex-flow: column;
-    height: 100%;
+    align-items: center;
 
     table {
         flex: 1;
     }
 
     button {
-        margin: 2em 0 0 0;
         flex: 1;
-        font-size: 200%;
+        margin-bottom: 1em;
-        border-color: @green;
+        width: 75%;
-    }
+        font-size: 150%;
-
+        line-height: 3em;
-    .ready {
-        background: black;
-        color: forestgreen;
     }
 }
 
@@ -176,12 +171,12 @@
 .instance-construct {
     flex: 1;
     display: grid;
-    grid-template-rows: min-content 1fr min-content min-content min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
         "name   "
-        "avatar "
         "skills "
         "specs  "
+        "avatar "
         "stats  ";
 
     /*padding: 0.5em;*/
@@ -404,24 +399,28 @@
 
 
 .faceoff {
+    text-align: center;
     overflow: hidden;
     display: grid;
-    grid-template-rows: min-content 1fr 1fr min-content ;
+    grid-template-rows: min-content 1fr 1.5fr min-content min-content;
     grid-template-areas:
         "oppname"
         "opponent"
         "player"
-        "playername";
+        "playername"
+        "ready";
 
-    .ready {
-        background: black;
-        color: @green;
-    }
 
     h1 {
         text-align: center;
     }
 
+    button {
+        grid-area: ready;
+        justify-self: center;
+        margin-top: 1em;
+    }
+
     .opponent-name {
         margin-bottom: 1em;
         grid-area: oppname;

client/assets/styles/styles.less

@@ -81,12 +81,11 @@ figure {
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd"
-      "main main"
+      "nav main"
-      "main main";
+      "nav main";
 }
 
 nav {
-    display: none;
     grid-area: nav;
     padding-left: 2em;
     margin-right: 2em;
@@ -595,16 +594,27 @@ main .top button {
 }
 
 .ready {
-    background: forestgreen;
+    color: forestgreen;
-    color: black;
+    transition-property: color background;
-
-    transition-property: color, background;
     transition-duration: 0.5s;
     transition-timing-function: ease;
 }
 
-.ready:hover, .ready:active, .ready:focus {
+button.ready {
-    color: black;
+    width: 75%;
+    font-size: 150%;
+    line-height: 3em;
+
+    &:hover {
+        color: forestgreen;
+        border-color: forestgreen;
+    }
+
+    &:active, &:focus {
+        background: forestgreen;
+        color: black;
+        border-color: forestgreen;
+    }
 }
 
 .timer-container {

client/assets/styles/vbox.less

@@ -1,6 +1,8 @@
 @import 'colours.less';
 
 .vbox {
+    margin-bottom: 2em;
+
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;

client/index.js

@@ -3,7 +3,7 @@ require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/instance.mobile.css');
-require('./assets/styles/game.css');
+require('./assets/styles/game.less');
 
 // kick it off
 require('./src/app');

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>
     );
 }