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 @@
@@ -46,17 +45,22 @@
Other players can join using a link to this page.
-Other players can join using a link to this page.
+Choose your deck.
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; }