From d74ca61d576d5f69e40ba3485a42c7d31aaaafd5 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 8 Aug 2019 18:05:08 +1000
Subject: [PATCH] vbox bottom

---
 client/assets/styles/instance.less           | 39 ++++++++++++++++----
 client/assets/styles/styles.less             | 10 ++---
 client/assets/styles/styles.mobile.css       |  4 ++
 client/assets/styles/vbox.less               |  2 -
 client/src/components/instance.component.jsx |  1 +
 client/src/components/scoreboard.jsx         | 26 +++++++++----
 6 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index aebde113..9fe43af7 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -4,11 +4,16 @@
     overflow-x: hidden;
     display: grid;
     grid-template-columns: 2fr minmax(min-content, 1fr);
-    grid-template-rows: min-content 1fr;
+    grid-template-rows: 1fr min-content min-content;
 
     grid-template-areas:
-        "vbox       info"
-        "constructs info";
+        "constructs constructs"
+        "rule rule"
+        "vbox info";
+
+    hr {
+        grid-area: rule;
+    }
 }
 
 @media (max-width: 1920px) {
@@ -30,9 +35,26 @@
     align-content: center;
 }
 
-.scoreboard .ready {
-    background: black;
-    color: forestgreen;
+.scoreboard {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+
+    table {
+        flex: 1;
+    }
+
+    button {
+        margin: 2em 0 0 0;
+        flex: 1;
+        font-size: 200%;
+        border-color: @green;
+    }
+
+    .ready {
+        background: black;
+        color: forestgreen;
+    }
 }
 
 .instance .info {
@@ -154,12 +176,12 @@
 .instance-construct {
     flex: 1;
     display: grid;
-    grid-template-rows: min-content min-content min-content 1fr min-content;
+    grid-template-rows: min-content 1fr min-content min-content min-content;
     grid-template-areas:
         "name   "
+        "avatar "
         "skills "
         "specs  "
-        "avatar "
         "stats  ";
 
     /*padding: 0.5em;*/
@@ -205,6 +227,7 @@
     .specs {
         grid-area: specs;
         padding: 0 0.5em;
+        margin-bottom: 0.75em;
 
         display: grid;
         grid-template-columns: repeat(3, 1fr);
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index aa085da9..9828e1a0 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -81,11 +81,12 @@ figure {
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd"
-      "nav main"
-      "footer footer";
+      "main main"
+      "main main";
 }
 
 nav {
+    display: none;
     grid-area: nav;
     padding-left: 2em;
     margin-right: 2em;
@@ -134,8 +135,7 @@ nav button:focus, nav button:active {
 }
 
 main {
-    padding-top: 1em;
-    padding-right: 1em;
+    padding: 1em;
     grid-area: main;
 }
 
@@ -627,7 +627,7 @@ main .top button {
 }
 
 footer {
-    display: flex;
+    display: none;
     flex-flow: row wrap;
     grid-area: footer;
     margin: 0;
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index 2c2c8ac7..68e27ca9 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -21,6 +21,10 @@
         display: none;
     }
 
+    footer {
+        display: flex;
+    }
+
     #nav-btn, #instance-nav {
         display: unset;
     }
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index 81b03437..d2f9c31c 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -1,8 +1,6 @@
 @import 'colours.less';
 
 .vbox {
-    margin-bottom: 2em;
-
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 03c626ea..78b145ce 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -63,6 +63,7 @@ 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 30831f11..f9910b8e 100644
--- a/client/src/components/scoreboard.jsx
+++ b/client/src/components/scoreboard.jsx
@@ -3,14 +3,23 @@ const { connect } = require('preact-redux');
 
 const addState = connect(
     function receiveState(state) {
-        const { instance } = state;
-        return { instance };
+        const {
+            ws,
+            instance
+        } = state;
+
+        function sendInstanceReady() {
+            return ws.sendInstanceReady(instance.id);
+        }
+
+        return { instance, sendInstanceReady };
     },
 );
 
 function ScoreBoard(args) {
     const {
         instance,
+        sendInstanceReady
     } = args;
 
     const players = instance.players.map((p, i) => {
@@ -37,11 +46,14 @@ function ScoreBoard(args) {
     });
 
     return (
-        <table class="scoreboard" >
-            <tbody>
-                {players}
-            </tbody>
-        </table>
+        <div class="scoreboard">
+            <table>
+                <tbody>
+                    {players}
+                </tbody>
+            </table>
+            <button class="ready" onClick={() => sendInstanceReady}>Ready</button>
+        </div>
     );
 }