vbox bottom

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,10 +35,27 @@
     align-content: center;
 }
 
-.scoreboard .ready {
+.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 {
     /*font-size: 75%;*/
@@ -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);

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;

client/assets/styles/styles.mobile.css

@@ -21,6 +21,10 @@
         display: none;
     }
 
+    footer {
+        display: flex;
+    }
+
     #nav-btn, #instance-nav {
         display: unset;
     }

client/assets/styles/vbox.less

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

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

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" >
+        <div class="scoreboard">
+            <table>
                 <tbody>
                     {players}
                 </tbody>
             </table>
+            <button class="ready" onClick={() => sendInstanceReady}>Ready</button>
+        </div>
     );
 }