From 4b5aa621401e37cd79ccf3659c2309bf9b8cf249 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 8 Aug 2019 20:20:11 +1000
Subject: [PATCH] game controls

---
 client/assets/styles/{game.css => game.less} | 26 +++++++++++--
 client/assets/styles/instance.less           | 41 ++++++++++----------
 client/assets/styles/styles.less             | 28 ++++++++-----
 client/assets/styles/vbox.less               |  2 +
 client/index.js                              |  2 +-
 client/src/components/controls.jsx           | 33 ++++++++++++++++
 client/src/components/faceoff.jsx            |  7 ++++
 client/src/components/game.jsx               |  2 +
 client/src/components/instance.component.jsx |  1 -
 client/src/components/scoreboard.jsx         |  2 +-
 10 files changed, 108 insertions(+), 36 deletions(-)
 rename client/assets/styles/{game.css => game.less} (94%)
 create mode 100644 client/src/components/controls.jsx

diff --git a/client/assets/styles/game.css b/client/assets/styles/game.less
similarity index 94%
rename from client/assets/styles/game.css
rename to client/assets/styles/game.less
index e7585321..6b46cefa 100644
--- a/client/assets/styles/game.css
+++ b/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"
-        "target"
-        "player";
+        "opponent controls"
+        "target   controls"
+        "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 {
diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 9fe43af7..49bc3604 100644
--- a/client/assets/styles/instance.less
+++ b/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"
-        "rule rule"
-        "vbox info";
+        "vbox info"
+        "constructs constructs";
 
     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%;
-        border-color: @green;
-    }
-
-    .ready {
-        background: black;
-        color: forestgreen;
+        margin-bottom: 1em;
+        width: 75%;
+        font-size: 150%;
+        line-height: 3em;
     }
 }
 
@@ -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;
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 9828e1a0..0ae0e032 100644
--- a/client/assets/styles/styles.less
+++ b/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"
-      "main main";
+      "nav 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: black;
-
-    transition-property: color, background;
+    color: forestgreen;
+    transition-property: color background;
     transition-duration: 0.5s;
     transition-timing-function: ease;
 }
 
-.ready:hover, .ready:active, .ready:focus {
-    color: black;
+button.ready {
+    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 {
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index d2f9c31c..81b03437 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -1,6 +1,8 @@
 @import 'colours.less';
 
 .vbox {
+    margin-bottom: 2em;
+
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;
diff --git a/client/index.js b/client/index.js
index a5a631f2..adbb294e 100644
--- a/client/index.js
+++ b/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');
diff --git a/client/src/components/controls.jsx b/client/src/components/controls.jsx
new file mode 100644
index 00000000..fb182e47
--- /dev/null
+++ b/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);
diff --git a/client/src/components/faceoff.jsx b/client/src/components/faceoff.jsx
index e7545c2e..2da6db6a 100644
--- a/client/src/components/faceoff.jsx
+++ b/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>
     );
 }
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx
index eddde654..65dbecd3 100644
--- a/client/src/components/game.jsx
+++ b/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>
     );
 }
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 78b145ce..03c626ea 100644
--- a/client/src/components/instance.component.jsx
+++ b/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>
     );
diff --git a/client/src/components/scoreboard.jsx b/client/src/components/scoreboard.jsx
index f9910b8e..010b8f47 100644
--- a/client/src/components/scoreboard.jsx
+++ b/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>
     );
 }