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

Hide rotate and deck buttons for spectators or ended games

Browse Source
This commit is contained in:
Andrio Celos 2022-10-20 13:51:25 +11:00
parent 5b8ed5ca5d
commit af5c4fa1ed
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TableturfBattleClient/src/Pages/GamePage.ts
View File

@ -5,6 +5,7 @@ const handButtons: CardButton[] = [ ];
const passButton = document.getElementById('passButton') as HTMLInputElement;
const specialButton = document.getElementById('specialButton') as HTMLInputElement;
const gameButtonsContainer = document.getElementById('gameButtonsContainer')!;
const rotateLeftButton = document.getElementById('rotateLeftButton') as HTMLButtonElement;
const rotateRightButton = document.getElementById('rotateRightButton') as HTMLButtonElement;
const gameDeckButton = document.getElementById('gameDeckButton') as HTMLButtonElement;

3
TableturfBattleClient/src/app.ts
View File

@ -64,6 +64,8 @@ function onGameStateChange(game: any, playerData: any) {
redrawModal.hidden = true;
showSection('game');
gameButtonsContainer.hidden = currentGame.me == null || game.state == GameState.Ended;
switch (game.state) {
case GameState.Redraw:
redrawModal.hidden = false;
@ -218,6 +220,7 @@ function setupWebSocket(gameID: string, myPlayerIndex: number | null) {
turnNumberLabel.setTurnNumber(payload.data.game.turnNumber);
clearPlayContainers();
if (payload.event == 'gameEnd') {
gameButtonsContainer.hidden = true;
gamePage.classList.add('gameEnded');
showResult();
} else {

26
TableturfBattleClient/tableturf.css
View File

@ -446,14 +446,16 @@ footer {
.playContainer[data-index="3"] { grid-column: play-column-1; grid-row: 1 / 4; align-self: start; }
#gameButtonsContainer {
grid-column: score-column;
grid-column: score-column;
grid-row: 1 / -1;
align-self: end;
display: flex;
flex-flow: column;
align-items: center;
flex-flow: column;
align-items: center;
z-index: 1;
}
#gameButtonsContainer:not([hidden]) {
display: flex;
}
#gameButtonsContainer button {
background: none;
@ -809,12 +811,12 @@ footer {
grid-template-rows: auto 1fr;
}
/* Small display layout */
/* Small display layout */
@media (max-width: 89rem) or (max-height: 42rem) {
#gameSection {
font-size: small;
}
#gameSection:not([hidden]) {
grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 10em;
}
@ -850,7 +852,7 @@ footer {
width: auto;
}
/* Lobby - Mobile layout */
/* Lobby - Mobile layout */
#lobbySection:not([hidden]) {
grid-template-rows: auto 1fr;
@ -892,13 +894,13 @@ footer {
height: initial;
align-self: stretch;
}
#gameBoard {
width: calc(75vw - 0.5em);
height: initial;
margin: auto;
}
#playControls:not([hidden]) {
grid-template-rows: [button-row] auto [hand-row] auto;
}
@ -911,11 +913,11 @@ footer {
#scoreSection {
grid-column: 1;
grid-row: 2;
grid-row: 2;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
#turnNumberContainer {
grid-column: 1;
grid-row: 2;
@ -946,7 +948,7 @@ footer {
#gameSection[data-players="2"] .playContainer[data-index="0"],
.playContainer[data-index="2"] { grid-row: 2 / span 2; justify-content: end; margin: 0 1em 2em 0; }
.playContainer[data-index="3"] { grid-row: 1 / span 2; justify-content: start; margin: 2em 0 0 1em; }
#gameButtonsContainer {
grid-column: 1;
grid-row: 2;