Add controls help page

TableturfBattleClient/index.html

@@ -51,7 +51,8 @@
 				</div>
 				<p>
 					<a id="preGameDeckEditorButton" href="deckeditor">Edit decks</a> |
-					<a id="preGameReplayButton" href="replay">Replay</a>
+					<a id="preGameReplayButton" href="replay">Replay</a> |
+					<a id="preGameHelpButton" href="help">Help</a>
 				</p>
 				<div id="preGameLoadingSection" class="loadingContainer" hidden>
 					<div class="lds-ripple"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
@@ -350,6 +351,47 @@
 				<button type="submit">OK</button>
 			</form>
 		</dialog>
+		<dialog id="helpDialog">
+			<h2>Controls</h2>
+			<section id="helpControls">
+				<article>
+					<h3>Keyboard</h3>
+					<table>
+						<tr><th>Move card:</th><td>Arrow keys</td></tr>
+						<tr><th>Rotate clockwise:</th><td>R</td></tr>
+						<tr><th>Rotate anticlockwise:</th><td>Shift+R</td></tr>
+						<tr><th>Confirm:</th><td>Enter</td></tr>
+						<tr><th>Deselect card:</th><td>Backspace</td></tr>
+						<tr><th>Pass:</th><td>P</td></tr>
+						<tr><th>Special attack:</th><td>S</td></tr>
+						<tr><th>Show deck:</th><td>D</td></tr>
+					</table>
+				</article>
+				<article>
+					<h3>Mouse</h3>
+					<table>
+						<tr><th>Move card:</th><td>Pointer</td></tr>
+						<tr><th>Rotate clockwise:</th><td>Right click or wheel down</td></tr>
+						<tr><th>Rotate anticlockwise:</th><td>Wheel up</td></tr>
+						<tr><th>Confirm:</th><td>Left click</td></tr>
+					</table>
+				</article>
+				<article>
+					<h3>Touch</h3>
+					<table>
+						<tr><th>Move card:</th><td>Drag anywhere on the board</td></tr>
+						<tr><th>Rotate clockwise:</th><td>Tap &curarr;</td></tr>
+						<tr><th>Rotate anticlockwise:</th><td>Tap &cularr;</td></tr>
+						<tr><th>Confirm:</th><td>Tap anywhere on the board</td></tr>
+					</table>
+				</article>
+			</section>
+			<footer>
+				<form method="dialog">
+					<button type="submit">OK</button>
+				</form>
+			</footer>
+		</dialog>
 		<script src="build/tsbuild.js"></script>
 	</body>
 </html>

TableturfBattleClient/src/Pages/PreGamePage.ts

@@ -8,6 +8,8 @@ const preGameDeckEditorButton = document.getElementById('preGameDeckEditorButton
 const preGameLoadingSection = document.getElementById('preGameLoadingSection')!;
 const preGameLoadingLabel = document.getElementById('preGameLoadingLabel')!;
 const preGameReplayButton = document.getElementById('preGameReplayButton') as HTMLLinkElement;
+const preGameHelpButton = document.getElementById('preGameHelpButton') as HTMLLinkElement;
+const helpDialog = document.getElementById('helpDialog') as HTMLDialogElement;
 
 let shownMaxPlayersWarning = false;
 
@@ -162,6 +164,12 @@ preGameDeckEditorButton.addEventListener('click', e => {
 	setUrl('deckeditor');
 });
 
+preGameHelpButton.addEventListener('click', e => {
+	e.preventDefault();
+	helpDialog.showModal();
+	setUrl('help');
+});
+
 preGameReplayButton.addEventListener('click', e => {
 	e.preventDefault();
 

TableturfBattleClient/src/app.ts

@@ -355,17 +355,21 @@ function processUrl() {
 		onInitialise(showDeckList);
 	else {
 		showPage('preGame');
-		const m = /[/#](?:(game)|replay)\/([A-Za-z0-9+/=\-_]+)$/.exec(location.toString());
-		if (m) {
-			if (m[1])
-				presetGameID(m[2]);
-			else
-				onInitialise(() => loadReplay(m[2]));
-		} else if (location.hash) {
-			canPushState = false;
-			presetGameID(location.hash);
-		} else {
-			clearPreGameForm(false);
+		if (location.pathname.endsWith('/help') || location.hash == '#help')
+			helpDialog.showModal();
+		else {
+			const m = /[/#](?:(game)|replay)\/([A-Za-z0-9+/=\-_]+)$/.exec(location.toString());
+			if (m) {
+				if (m[1])
+					presetGameID(m[2]);
+				else
+					onInitialise(() => loadReplay(m[2]));
+			} else if (location.hash) {
+				canPushState = false;
+				presetGameID(location.hash);
+			} else {
+				clearPreGameForm(false);
+			}
 		}
 	}
 	return true;

TableturfBattleClient/tableturf.css

@@ -1097,6 +1097,17 @@ dialog::backdrop {
 	justify-content: center;
 }
 
+/* Help */
+
+#helpControls {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: center;
+}
+#helpControls table { border-spacing: 1ch 0; }
+#helpControls th { text-align: right; }
+#helpControls td { text-align: left; }
+
 /* Small display layout */
 @media (max-width: 89rem) or (max-height: 42rem) {
 	#gamePage, #deckCardListView, #deckCardListEdit {