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

Rename 'sections' to 'pages'

Browse Source
This commit is contained in:
Andrio Celos 2022-10-24 11:13:47 +11:00
parent e553dbeb7a
commit 3ad1877a4c
8 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
TableturfBattleClient/index.html
View File

@ -22,8 +22,8 @@
<meta name="theme-color" content="#e7b427" data-react-helmet="true"/>
</head>
<body>
<div id="noJSSection">This application requires JavaScript.</div>
<div id="preGameSection" hidden>
<div id="noJSPage">This application requires JavaScript.</div>
<div id="preGamePage" hidden>
<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/logo.png"></p>
<h1>Tableturf Battle</h1>
<form id="preGameForm">
@ -57,7 +57,7 @@
<p><a href="https://github.com/AndrioCelos/TableturfBattleApp">GitHub</a></p>
</footer>
</div>
<div id="lobbySection" hidden>
<div id="lobbyPage" hidden>
<section id="lobbyPlayerListSection">
<p>Other players can join using a link to this page.<br/>
<button type="button" id="shareLinkButton">Share link</button><button type="button" id="showQrCodeButton">Show QR code</button></p>
@ -91,7 +91,7 @@
</form>
</dialog>
</div>
<div id="gameSection" hidden>
<div id="gamePage" hidden>
<div class="playerBar" data-index="1">
<div class="result"></div>
<div class="name">Player 2</div>
@ -201,11 +201,8 @@
<div class="playContainer" data-index="0"></div>
<div class="playContainer" data-index="2"></div>
</div>
<div id="errorModal" hidden>
<div id="errorModalBox">A communication error has occurred.</div>
</div>
<div id="deckListSection" hidden>
<section id="deckEditorDeckListSection">
<div id="deckListPage" hidden>
<section id="deckEditordeckListPage">
<a id="deckListBackButton" href=".">Back</a>
<h3>Deck list</h3>
<div id="deckList" class="deckList">
@ -249,8 +246,8 @@
</form>
</dialog>
</div>
<div id="deckEditSection" hidden>
<section id="deckEditorDeckEditSection">
<div id="deckEditPage" hidden>
<section id="deckEditordeckEditPage">
<h3 id="deckName2">Deck</h3>
<div>
<button type="button" id="deckTestButton">Test</button>
@ -276,6 +273,9 @@
</section>
<div id="deckEditorCardListBackdrop"></div>
</div>
<div id="errorModal" hidden>
<div id="errorModalBox">A communication error has occurred.</div>
</div>
<script src="build/tsbuild.js"></script>
</body>
</html>

6
TableturfBattleClient/src/Pages/DeckEditPage.ts
View File

@ -36,7 +36,7 @@ function editDeck() {
}
deckEditUpdateSize();
showSection('deckEdit');
showPage('deckEdit');
}
function createDeckEditCardButton(index: number, card: number) {
@ -100,14 +100,14 @@ deckSaveButton.addEventListener('click', () => {
saveDecks();
selectDeck();
stopEditingDeck();
showSection('deckList');
showPage('deckList');
});
deckCancelButton.addEventListener('click', () => {
if (selectedDeck == null) return;
if (!confirm('Are you sure you want to stop editing this deck without saving?')) return;
stopEditingDeck();
showSection('deckList');
showPage('deckList');
});
function deckEditUpdateSize() {

4
TableturfBattleClient/src/Pages/DeckListPage.ts
View File

@ -25,7 +25,7 @@ const deckImportErrorBox = document.getElementById('deckImportErrorBox')!;
const deckImportOkButton = document.getElementById('deckImportOkButton') as HTMLButtonElement;
function showDeckList() {
showSection('deckList');
showPage('deckList');
deselectDeck();
for (const el of deckList.getElementsByTagName('input')) {
(el as HTMLInputElement).checked = false;
@ -34,7 +34,7 @@ function showDeckList() {
deckListBackButton.addEventListener('click', e => {
e.preventDefault();
showSection('preGame');
showPage('preGame');
if (canPushState) {
try {

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

@ -1,4 +1,4 @@
const gamePage = document.getElementById('gameSection')!;
const gamePage = document.getElementById('gamePage')!;
const board = new Board(document.getElementById('gameBoard') as HTMLTableElement);
const turnNumberLabel = new TurnNumberLabel(document.getElementById('turnNumberContainer')!, document.getElementById('turnNumberLabel')!);
const handButtons: CardButton[] = [ ];
@ -392,7 +392,7 @@ rotateRightButton.addEventListener('click', () => {
});
document.addEventListener('keydown', e => {
if (!sections.get('game')!.hidden) {
if (!pages.get('game')!.hidden) {
switch (e.key) {
case 'p':
if (!passButton.disabled) {
@ -417,6 +417,6 @@ document.addEventListener('keydown', e => {
document.getElementById('resultLeaveButton')!.addEventListener('click', e => {
e.preventDefault();
clearPreGameForm(true);
showSection('preGame');
showPage('preGame');
newGameButton.focus();
});

2
TableturfBattleClient/src/Pages/LobbyPage.ts
View File

@ -138,7 +138,7 @@ submitDeckButton.addEventListener('click', () => {
req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/chooseDeck`);
req.addEventListener('load', e => {
if (req.status == 204) {
showSection('lobby');
showPage('lobby');
}
});
let data = new URLSearchParams();

2
TableturfBattleClient/src/Pages/PreGamePage.ts
View File

@ -153,7 +153,7 @@ function presetGameID(url: string) {
if (playerName)
tryJoinGame(playerName, url, true);
else
showSection('preGame');
showPage('preGame');
}
preGameDeckEditorButton.addEventListener('click', e => {

28
TableturfBattleClient/src/app.ts
View File

@ -5,16 +5,16 @@ let selectedDeck: Deck | null = null;
function delay(ms: number) { return new Promise(resolve => setTimeout(() => resolve(null), ms)); }
// Sections
const sections = new Map<string, HTMLDivElement>();
// Pages
const pages = new Map<string, HTMLDivElement>();
for (var id of [ 'noJS', 'preGame', 'lobby', 'game', 'deckList', 'deckEdit' ]) {
let el = document.getElementById(`${id}Section`) as HTMLDivElement;
if (!el) throw new EvalError(`Element not found: ${id}Section`);
sections.set(id, el);
let el = document.getElementById(`${id}Page`) as HTMLDivElement;
if (!el) throw new EvalError(`Element not found: ${id}Page`);
pages.set(id, el);
}
function showSection(key: string) {
for (const [key2, el] of sections) {
function showPage(key: string) {
for (const [key2, el] of pages) {
el.hidden = key2 != key;
}
}
@ -37,12 +37,12 @@ function onGameStateChange(game: any, playerData: any) {
gamePage.classList.remove('gameEnded');
switch (game.state) {
case GameState.WaitingForPlayers:
showSection('lobby');
showPage('lobby');
lobbySelectedStageSection.hidden = true;
lobbyStageSection.hidden = !playerData || game.players[playerData.playerIndex]?.isReady;
break;
case GameState.Preparing:
showSection('lobby');
showPage('lobby');
if (selectedStageButton)
lobbySelectedStageSection.removeChild(selectedStageButton.element);
selectedStageButton = new StageButton(stageDatabase.stages?.find(s => s.name == game.stage)!);
@ -62,7 +62,7 @@ function onGameStateChange(game: any, playerData: any) {
updateHand(playerData.hand);
board.autoHighlight = false;
redrawModal.hidden = true;
showSection('game');
showPage('game');
gameButtonsContainer.hidden = currentGame.me == null || game.state == GameState.Ended;
@ -89,6 +89,10 @@ function onGameStateChange(game: any, playerData: any) {
}
}
function showError() {
document.getElementById('errorModal')!.hidden = false;
}
function communicationError() {
document.getElementById('errorModal')!.hidden = false;
}
@ -188,7 +192,7 @@ function setupWebSocket(gameID: string, myPlayerIndex: number | null) {
} else if (payload.event == 'turn' || payload.event == 'gameEnd') {
clearReady();
board.autoHighlight = false;
showSection('game');
showPage('game');
(async () => {
let anySpecialAttacks = false;
@ -257,7 +261,7 @@ function processUrl() {
presetGameID(location.hash);
} else {
clearPreGameForm(false);
showSection('preGame');
showPage('preGame');
}
}
return true;

40
TableturfBattleClient/tableturf.css
View File

@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, h6 {
/* Home page */
#preGameSection {
#preGamePage {
text-align: center;
}
@ -62,7 +62,7 @@ footer {
/* Lobby page */
#lobbySection:not([hidden]) {
#lobbyPage:not([hidden]) {
display: grid;
grid-template-columns: 27em 1fr;
}
@ -379,7 +379,7 @@ dialog::backdrop {
/* Game page */
#gameSection:not([hidden]) {
#gamePage:not([hidden]) {
display: grid;
grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1] 10em [play-column-2] 10em;
grid-template-rows: [player-row-1] auto [player-row-3] auto [hand-row] 1fr [player-row-2] auto [player-row-0] auto;
@ -413,7 +413,7 @@ dialog::backdrop {
border-left: 8px solid var(--colour);
padding-left: 10px;
}
#gameSection:not([data-players="2"]) .playerBar:is([data-index="1"], [data-index="2"]) {
#gamePage:not([data-players="2"]) .playerBar:is([data-index="1"], [data-index="2"]) {
text-align: right;
border-right: 8px solid var(--colour);
padding-right: 10px;
@ -556,7 +556,7 @@ dialog::backdrop {
justify-content: space-around;
text-align: center;
}
#gameSection:not(.gameEnded) .playerStats {
#gamePage:not(.gameEnded) .playerStats {
display: none;
}
@ -767,7 +767,7 @@ dialog::backdrop {
/* Deck editor */
:is(#deckListSection, #deckEditSection):not([hidden]) {
:is(#deckListPage, #deckEditPage):not([hidden]) {
height: 100vh;
display: grid;
grid-template-columns: auto auto;
@ -819,7 +819,7 @@ dialog::backdrop {
overflow-y: scroll;
}
#deckEditorDeckViewSection:not([hidden]), #deckEditorDeckEditSection {
#deckEditorDeckViewSection:not([hidden]), #deckEditordeckEditPage {
display: grid;
grid-template-columns: minmax(min-content, auto) min-content;
grid-template-rows: auto auto auto 1fr;
@ -835,7 +835,7 @@ dialog::backdrop {
grid-row: 1;
}
:is(#deckEditorDeckViewSection, #deckEditorDeckEditSection) > h3 + div {
:is(#deckEditorDeckViewSection, #deckEditordeckEditPage) > h3 + div {
grid-row: 2;
grid-column: 1;
}
@ -871,7 +871,7 @@ dialog::backdrop {
/* Small display layout */
@media (max-width: 89rem) or (max-height: 42rem) {
#gameSection, #deckCardListView, #deckCardListEdit {
#gamePage, #deckCardListView, #deckCardListEdit {
font-size: small;
}
#cardList {
@ -880,18 +880,18 @@ dialog::backdrop {
grid-column: 1 / -1;
}
#gameSection:not([hidden]) {
#gamePage:not([hidden]) {
grid-template-columns: 11em 11em [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 10em;
}
.playContainer { position: relative; }
#gameSection:not([data-players="2"]) .playContainer[data-index="0"] {
#gamePage:not([data-players="2"]) .playContainer[data-index="0"] {
left: -3em;
}
#gameSection:not([data-players="2"]) .playContainer[data-index="2"] {
#gamePage:not([data-players="2"]) .playContainer[data-index="2"] {
top: -3em;
}
#gameSection:not([data-players="2"]) .playContainer[data-index="3"] {
#gamePage:not([data-players="2"]) .playContainer[data-index="3"] {
left: -3em;
top: 3em;
}
@ -917,7 +917,7 @@ dialog::backdrop {
/* Lobby - Mobile layout */
#lobbySection:not([hidden]) {
#lobbyPage:not([hidden]) {
grid-template-rows: auto 1fr;
grid-template-columns: initial;
height: 100vh;
@ -939,7 +939,7 @@ dialog::backdrop {
/* Game - Mobile layout */
#gameSection:not([hidden]) {
#gamePage:not([hidden]) {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto auto auto;
@ -1007,7 +1007,7 @@ dialog::backdrop {
}
.playContainer[data-index="0"] { grid-row: 2 / span 2; justify-content: start; margin: 0 0 2em 1em; }
.playContainer[data-index="1"] { grid-row: 1 / span 2; justify-content: end; margin: 2em 1em 0 0; }
#gameSection[data-players="2"] .playContainer[data-index="0"],
#gamePage[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; }
@ -1022,11 +1022,11 @@ dialog::backdrop {
/* Deck editor - Mobile layout */
:is(#deckListSection, #deckEditSection):not([hidden]) {
:is(#deckListPage, #deckEditPage):not([hidden]) {
display: block;
}
:is(#deckListSection, #deckEditSection) section {
:is(#deckListPage, #deckEditPage) section {
position: absolute;
background: black;
left: 0;
@ -1056,7 +1056,7 @@ dialog::backdrop {
grid-column: 2;
}
:is(#deckEditorDeckViewSection, #deckEditorDeckEditSection) > h3 + div {
:is(#deckEditorDeckViewSection, #deckEditordeckEditPage) > h3 + div {
grid-row: 1;
grid-column: -2;
}
@ -1083,7 +1083,7 @@ dialog::backdrop {
display: block;
}
#deckEditSection #deckEditorCardListSection {
#deckEditPage #deckEditorCardListSection {
z-index: 1;
top: 4em;
height: calc(100vh - 4em);