From bd3604c83c139b429ee2fa730109be0e3bd7c6dc Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Tue, 11 Oct 2022 00:43:14 +1100
Subject: [PATCH] UI adjustments

---
 TableturfBattleClient/index.html    | 34 ++++++++++++++++-------------
 TableturfBattleClient/src/app.ts    |  5 +++++
 TableturfBattleClient/tableturf.css | 28 ++++++++++++++++++------
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index cda9a6c..737900c 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -23,11 +23,10 @@
 					<p>
 						<button type="submit" id="newGameButton">Create a room</button>
 						<label for="maxPlayersBox">
-							Number of players:
 							<select id="maxPlayersBox">
-								<option value="2">2</option>
-								<option value="3">3</option>
-								<option value="4">4</option>
+								<option value="2">2 players</option>
+								<option value="3">3 players</option>
+								<option value="4">4 players</option>
 							</select>
 						</label>
 					</p>
@@ -46,17 +45,22 @@
 			</footer>
 		</div>
 		<div id="lobbySection" hidden>
-			<p>Other players can join using a link to this page. <button type="button" id="shareLinkButton">Share link</button></p>
-			<ul id="playerList"></ul>
-			<form id="stageSelectionForm">
-				<div id="stageList">
-					<label id="stageRandomLabel" for="stageRandomButton" class="stageRandom">
-						<input type="radio" id="stageRandomButton" name="stage" value="random" checked/> Random
-					</label>
-				</div>
-				<p id="stageListLoadingSection">Loading stages...</p>
-				<button type="submit">Select</button>
-			</form>
+			<section id="lobbyPlayerListSection">
+				<p>Other players can join using a link to this page. <button type="button" id="shareLinkButton">Share link</button></p>
+				<ul id="playerList"></ul>
+			</section>
+			<section id="lobbyStageSection" hidden>
+				<h3>Vote for the stage.</h3>
+				<form id="stageSelectionForm">
+					<button type="submit">Select</button>
+					<div id="stageList">
+						<label id="stageRandomLabel" for="stageRandomButton" class="stageRandom checked">
+							<input type="radio" id="stageRandomButton" name="stage" value="random" checked/> Random
+						</label>
+					</div>
+					<p id="stageListLoadingSection">Loading stages...</p>
+				</form>
+			</section>
 		</div>
 		<div id="deckSection" hidden>
 			<p>Choose your deck.</p>
diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts
index 07dfc58..00c4d23 100644
--- a/TableturfBattleClient/src/app.ts
+++ b/TableturfBattleClient/src/app.ts
@@ -33,6 +33,7 @@ function onGameStateChange(game: any, playerData: any) {
 	switch (game.state) {
 		case GameState.WaitingForPlayers:
 			showSection('lobby');
+			document.getElementById('lobbyStageSection')!.hidden = !playerData || game.players[playerData.playerIndex]?.isReady;
 			break;
 		case GameState.Preparing:
 			showSection('deck');
@@ -154,6 +155,10 @@ function setupWebSocket(gameID: string, myPlayerIndex: number | null) {
 				currentGame.players[payload.data.playerIndex].isReady = true;
 				updatePlayerListItem(payload.data.playerIndex);
 
+				if (payload.data.playerIndex == currentGame.me?.playerIndex) {
+					document.getElementById('lobbyStageSection')!.hidden = true;
+				}
+
 				if (playContainers[payload.data.playerIndex].getElementsByTagName('div').length == 0) {
 					showReady(payload.data.playerIndex);
 				}
diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index a6bea8c..2d056dd 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -31,6 +31,11 @@ body {
 	--special-accent-colour-4: hsl(135, 95%, 85%);
 }
 
+h1, h2, h3, h4, h5, h6 {
+	font-family: 'Splatoon 1', sans-serif;
+	font-weight: normal;
+}
+
 /* Start section */
 
 #preGameSection {
@@ -41,11 +46,6 @@ body {
 	height: 8em;
 }
 
-h1 {
-	font-family: 'Splatoon 1', sans-serif;
-	font-weight: normal;
-}
-
 footer {
 	font-family: sans-serif;
 }
@@ -55,6 +55,19 @@ footer {
 	left: -9999px;
 }
 
+/* Lobby page */
+
+#lobbySection:not([hidden]) {
+	display: grid;
+	grid-template-columns: 27em 1fr;
+}
+
+#lobbyStageSection {
+	overflow-y: scroll;
+	height: calc(100vh - 16px);
+	box-sizing: border-box;
+}
+
 /* Stages */
 
 #stageList {
@@ -92,8 +105,9 @@ footer {
 }
 
 .stageGrid td {
-  width: 0.3em;
-	height: 0.3em;
+  width: 0.5em;
+	height: 0.5em;
+	box-sizing: border-box;
 }
 
 .stageGrid td.Empty { border: 1px solid grey; }