Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-07-06 20:14:15 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI adjustments

Browse Source
This commit is contained in:
Andrio Celos 2022-10-11 00:43:14 +11:00
parent 42074825b6
commit bd3604c83c
3 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
TableturfBattleClient/index.html
View File

@ -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>

5
TableturfBattleClient/src/app.ts
View File

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

28
TableturfBattleClient/tableturf.css
View File

@ -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; }