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

Rework the pre-game form and add some more validation

Browse Source
This commit is contained in:
Andrio Celos
2022-10-04 23:34:44 +11:00
parent 39accc6957
commit 6064f1f47c
2 changed files with 52 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
TableturfBattleClient/index.html
View File

@@ -11,9 +11,19 @@
<div id="preGameSection" hidden>
<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/logo.png"></p>
<h1>Tableturf Battle</h1>
<p><input type="text" id="nameBox" placeholder="Choose a name"></p>
<p><button type="button" id="newGameButton">New game</button></p>
<p><input type="text" id="gameIDBox" placeholder="Game link or UUID"> <button type="button" id="joinGameButton">Join game</button></p>
<form id="preGameForm">
<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>
<div id="preGameDefaultSection">
<p><button type="submit" id="newGameButton">Create a room</button></p>
<p><label for="gameIDBox">Enter a game link or ID to join a game:<br/>
<input type="text" id="gameIDBox" placeholder="Game link or ID"/></label>
<button type="submit" id="joinGameButton">Join game</button></p>
</div>
<div id="preGameJoinSection" hidden>
<p><button type="submit" id="joinGameButton2">Join game</button></p>
<a id="preGameBackButton" href="../..">Create or join a different room</a>
</div>
</form>
<footer>
<p>This website is not affiliated with Nintendo. All product names, logos, and brands are property of their respective owners.</p>
<p><a href="https://github.com/AndrioCelos/TableturfBattleApp">GitHub</a></p>

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

@@ -1,31 +1,32 @@
const newGameButton = document.getElementById('newGameButton')!;
const joinGameButton = document.getElementById('joinGameButton')!;
newGameButton.addEventListener('click', e => {
const name = (document.getElementById('nameBox') as HTMLInputElement).value;
window.localStorage.setItem('name', name);
(document.getElementById('preGameForm') as HTMLFormElement).addEventListener('submit', e => {
e.preventDefault();
if (e.submitter?.id == 'joinGameButton') {
const name = (document.getElementById('nameBox') as HTMLInputElement).value;
window.localStorage.setItem('name', name);
tryJoinGame(name, (document.getElementById('gameIDBox') as HTMLInputElement).value);
} else {
const name = (document.getElementById('nameBox') as HTMLInputElement).value;
window.localStorage.setItem('name', name);
let request = new XMLHttpRequest();
request.open('POST', `${config.apiBaseUrl}/games/new`);
request.addEventListener('load', e => {
if (request.status == 200) {
let response = JSON.parse(request.responseText);
if (!clientToken)
setClientToken(response.clientToken);
getGameInfo(response.gameID, 0);
}
});
let request = new XMLHttpRequest();
request.open('POST', `${config.apiBaseUrl}/games/new`);
request.addEventListener('load', e => {
if (request.status == 200) {
let response = JSON.parse(request.responseText);
if (!clientToken)
setClientToken(response.clientToken);
getGameInfo(response.gameID, 0);
}
});
let data = new URLSearchParams();
data.append('name', name);
data.append('clientToken', clientToken);
request.send(data.toString());
});
joinGameButton.addEventListener('click', e => {
const name = (document.getElementById('nameBox') as HTMLInputElement).value;
window.localStorage.setItem('name', name);
tryJoinGame(name, (document.getElementById('gameIDBox') as HTMLInputElement).value);
let data = new URLSearchParams();
data.append('name', name);
data.append('clientToken', clientToken);
request.send(data.toString());
}
});
function tryJoinGame(name: string, idOrUrl: string) {
@@ -186,12 +187,19 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) {
});
}
{
const name = window.localStorage.getItem('name');
(document.getElementById('nameBox') as HTMLInputElement).value = name || '';
if (window.location.hash != '') {
(document.getElementById('gameIDBox') as HTMLInputElement).value = window.location.hash;
if (name != null)
tryJoinGame(name, window.location.hash)
}
document.getElementById('preGameBackButton')!.addEventListener('click', e => {
e.preventDefault();
document.getElementById('preGameDefaultSection')!.hidden = false;
document.getElementById('preGameJoinSection')!.hidden = true;
window.location.hash = '';
})
const playerName = window.localStorage.getItem('name');
(document.getElementById('nameBox') as HTMLInputElement).value = playerName || '';
if (window.location.hash != '') {
document.getElementById('preGameDefaultSection')!.hidden = true;
document.getElementById('preGameJoinSection')!.hidden = false;
(document.getElementById('gameIDBox') as HTMLInputElement).value = window.location.hash;
if (playerName != null)
tryJoinGame(playerName, window.location.hash)
}