Enhance lobby UI

TableturfBattleClient/src/Pages/LobbyPage.ts

@@ -43,14 +43,15 @@ function clearReady() {
 }
 
 function updatePlayerListItem(playerIndex: number) {
-	const player = currentGame != null ? currentGame.players[playerIndex] : null;
 	const listItem = playerListItems[playerIndex];
-	if (player != null) {
+	if (!currentGame?.players || playerIndex >= currentGame.players.length) {
+		listItem.className = 'empty';
+		listItem.innerText = 'Waiting...';
+	} else {
+		const player = currentGame.players[playerIndex];
 		listItem.innerText = player.name;
-		if (player.isReady)
+		listItem.className = player.isReady ? 'filled ready' : 'filled';
-			listItem.innerText += ' (Ready)';
+	}
-	} else
-		listItem.innerText = "Waiting...";
 }
 
 function updateDeckCount() {

TableturfBattleClient/src/app.ts

@@ -109,9 +109,9 @@ function setupWebSocket(gameID: string, myPlayerIndex: number | null) {
 				playerListItems.splice(0);
 				for (let i = 0; i < currentGame.maxPlayers; i++) {
 					var el = document.createElement('li');
-					el.innerText = i < currentGame.players.length ? currentGame.players[i].name : 'Waiting...';
 					playerListItems.push(el);
 					playerList.appendChild(el);
+					updatePlayerListItem(i);
 				}
 
 				for (let i = 0; i < playerBars.length; i++) {

TableturfBattleClient/tableturf.css

@@ -64,6 +64,8 @@ footer {
 
 #lobbyPlayerListSection {
 	overflow-y: auto;
+	height: calc(100vh - 16px);
+	box-sizing: border-box;
 }
 
 #lobbyStageSection, #lobbyDeckSection {
@@ -72,6 +74,40 @@ footer {
 	box-sizing: border-box;
 }
 
+#playerList {
+  padding-left: 0;
+  list-style: none;
+}
+
+#playerList li {
+  width: calc(100% - 3em);
+  margin: 0.5em 1em;
+  background: #111;
+  border-radius: 0.5em;
+  padding: 0.5em;
+	text-shadow: 1px 1px black;
+}
+
+#playerList .filled {
+	background: var(--special-colour-1);
+	position: relative;
+	animation: 0.33s linear playerListFlyIn;
+}
+
+#playerList .ready::after {
+  content: '\2714';
+	position: absolute;
+	bottom: 0;
+	right: 0.5em;
+	font-weight: bold;
+	font-size: x-large;
+}
+
+@keyframes playerListFlyIn {
+	from { left: -100%; }
+	to { left: 0; }
+}
+
 /* Stages */
 
 #stageList {