From 6064f1f47c75cd0016da91214c9b7068a8cb26ee Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Tue, 4 Oct 2022 23:34:44 +1100
Subject: [PATCH] Rework the pre-game form and add some more validation

---
 TableturfBattleClient/index.html              | 16 ++++-
 .../src/Pages/PreGamePage.ts                  | 70 +++++++++++--------
 2 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 6b833ee..0322934 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -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>
diff --git a/TableturfBattleClient/src/Pages/PreGamePage.ts b/TableturfBattleClient/src/Pages/PreGamePage.ts
index 257b242..6ddff10 100644
--- a/TableturfBattleClient/src/Pages/PreGamePage.ts
+++ b/TableturfBattleClient/src/Pages/PreGamePage.ts
@@ -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)
 }