Introduce a grid layout to the game page

frontend/prebuild/src/app/app.component.scss

@@ -1,5 +1,5 @@
 :host {
   position: absolute;
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
 }

frontend/prebuild/src/app/game/game.component.html

@@ -1,33 +1,25 @@
-<div id="gameroot" class="container-fluid">
-<div class="offset-md-2 col-md-7">
-  <div class="panel panel-primary">
-    <div class="panel-heading">
-      <h1>Liberty Bikes Game</h1>
-    </div>
-    <div class="panel-body">
-      <div class="col-md-8 d-inline-block">
-        <canvas id="gameCanvas" width="600" height="600" style="border:1px solid #000000; background:url('assets/images/game_floor.jpg')"></canvas>
-        <br>
-        <br>
-      </div>
-      <div class="col-md-3 d-inline-block align-top">
-	    <button id="gameIdDisplay" class='d-none btn-primary btn-lg' disabled>
-          Round ID <span id="gameIDHolder" style="font-family:'Monaco',monospace;border:1px solid #dae1e9;letter-spacing:2px;padding:3px 8px;border-radius:4px;background-color:#f4f7fa;color:#007bff"></span>
-	    </button>
-	    <br>
-	    <br>
-	    <ul id="playerList" class='list-group'>
-	    </ul>
-      </div>
-    </div>
-    <div class="panel-footer">
-      <button type="button" class="btn btn-success" (click)="startGame()">Start Game</button>
-      <button type="button" class="btn btn-warning" (click)="requeue()">Requeue</button>
-    </div>
+<div id="titlebar" class="navbar">
+  <h1>Liberty Bikes</h1>
+  <button id="gameIdDisplay" class='d-none btn btn-primary btn-lg' disabled>
+    Round ID
+    <span id="gameIDHolder" style="font-family:'Monaco',monospace;border:1px solid #dae1e9;letter-spacing:2px;padding:3px 8px;border-radius:4px;background-color:#f4f7fa;color:#007bff"></span>
+  </button>
+</div>
+<div id="game-container">
+  <div id="game-board">
+    <canvas width="600" height="600" id="gameCanvas"></canvas>
   </div>
 </div>
-<div id="output">
+<div id="players">
+  <ul id="playerList" class="list-group">
+  </ul>
 </div>
+
+<div id="leaderboard">
+
+</div>
+
+<div id="footer" class="navbar">
+  <button type="button" class="btn btn-success" (click)="startGame()">Start Game</button>
+  <button type="button" class="btn btn-info" (click)="requeue()">Requeue</button>
 </div>
-<script type="text/javascript" src="websocket.js"></script>
-<script type="text/javascript" src="whiteboard.js"></script>

frontend/prebuild/src/app/game/game.component.scss

@@ -1,7 +1,93 @@
-#gameroot {
-  background-image: url('/assets/images/game_grid.jpg');
+$titlebar: 75px;
+$navbar-border: 1px solid #ccc;
+
+body {
+  margin: 0;
+  padding: 0;
 }
 
-#gameroot div {
+:host {
+  display: grid;
+  grid-template-rows: $titlebar 1fr 1fr $titlebar;
+  grid-template-columns: 1fr minmax(550px, 3fr);
+  height: 100vh;
+
   background-color: white;
 }
+
+.navbar {
+  background-color: #eee;
+
+  height: $titlebar;
+
+  display: flex;
+  align-items: center;
+
+  padding: 0px 5px;
+}
+
+#titlebar {
+  grid-area: 1 / 2 / span 1 / -1;
+
+  border-bottom: $navbar-border;
+}
+
+.navbar h1 {
+  flex: 1;
+  margin-left: 10px;
+}
+
+.navbar .btn {
+  font-size: 1.5em;
+  margin: 5px;
+  height: 75%;
+}
+
+#game-container {
+  grid-area: 1 / 1 / span 4 / span 1;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  /* grid-template: calc(100vmin - #{$titlebar}) / 100vmin; */
+  grid-template: 100vmin / 100vmin;
+}
+
+#game-board {
+  background-color: black;
+  color: white;
+}
+
+#players {
+  grid-area: 2 / 2;
+}
+
+#leaderboard {
+  grid-area: 3 / 2;
+}
+
+#playerList {
+  padding: 0;
+  font-size: 2em;
+}
+
+.list-group-item {
+  font-size: 2em;
+}
+
+#gameCanvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  background: url('../../assets/images/game_floor.jpg');
+}
+
+#footer {
+  grid-area: 4 / 2;
+
+  border-top: $navbar-border;
+}
+
+#footer .btn {
+  width: calc(50% - 10px);
+}

frontend/prebuild/src/app/game/game.component.ts

@@ -163,7 +163,7 @@ export class GameComponent implements OnInit {
     for (const player of json.playerlist) {
       list += `
 <li class="list-group-item">
-  <span style="color: ${player.color}; font-size: 5;">${player.name}</span>: ${this.getStatus(player.status)}
+  <span style="color: ${player.color};">${player.name}</span>: ${this.getStatus(player.status)}
 </li>
 `;
     }

frontend/prebuild/src/styles.scss

@@ -12,11 +12,14 @@ h2, h3 {
   font-weight: lighter;
 }
 html {
-  height: 100%;
+  height: 100vh;
 }
 body {
   background-color: #eee;
-  min-height: 100%;
+  height: 100vh;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 body, input[text], button {
   color: #888;