From c9862539dcfdac5e54080525ae9952990ea7a860 Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Sat, 21 Oct 2023 19:03:09 +1100
Subject: [PATCH] Add colour lock (currently on by default)

---
 TableturfBattleClient/index.html              |  8 +++++
 TableturfBattleClient/src/Config.ts           | 24 ++++++++++++--
 TableturfBattleClient/src/Pages/GamePage.ts   | 15 ++++++---
 .../src/Pages/PreGamePage.ts                  | 32 +++++++++++++++++--
 TableturfBattleClient/src/app.ts              |  6 ++--
 5 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 2921470..894476e 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -58,6 +58,7 @@
 				<p>
 					<a id="preGameDeckEditorButton" href="deckeditor">Edit decks</a> |
 					<a id="preGameReplayButton" href="replay">Replay</a> |
+					<a id="preGameSettingsButton" href="settings">Settings</a> |
 					<a id="preGameHelpButton" href="help">Help</a>
 				</p>
 				<div id="preGameLoadingSection" class="loadingContainer" hidden>
@@ -655,6 +656,13 @@
 				</form>
 			</footer>
 		</dialog>
+		<dialog id="settingsDialog">
+			<div id="settingsMessage"></div>
+			<form id="settingsDialogForm" method="dialog">
+				<p><label for="optionsColourLock"><input type="checkbox" id="optionsColourLock" checked/> Colour lock</label></p>
+				<button type="submit">Close</button>
+			</form>
+		</dialog>
 		<script src="build/tsbuild.js"></script>
 	</body>
 </html>
diff --git a/TableturfBattleClient/src/Config.ts b/TableturfBattleClient/src/Config.ts
index ab0e8fd..457c7ef 100644
--- a/TableturfBattleClient/src/Config.ts
+++ b/TableturfBattleClient/src/Config.ts
@@ -1,4 +1,4 @@
-interface Config {
+interface AppConfig {
 	apiBaseUrl: string,
 	qrCodeGameUrl: string | null | undefined,
 	qrCodeCorrectionLevel: QRCode.CorrectLevel | keyof typeof QRCode.CorrectLevel | undefined,
@@ -6,5 +6,25 @@ interface Config {
 	discordTitle?: string
 }
 
-declare var config: Config;
+class Config {
+	name: string | null = null;
+	colourLock = true;
+}
+
+declare var config: AppConfig;
 declare var polyfillActive: boolean;
+
+let userConfig = new Config();
+
+{
+	const configString = localStorage.getItem('settings');
+	if (configString) {
+		const configDict = JSON.parse(configString);
+		for (const k in configDict)
+			(userConfig as any)[k] = configDict[k];
+	}
+}
+
+function saveSettings() {
+	localStorage.setItem('settings', JSON.stringify(userConfig));
+}
diff --git a/TableturfBattleClient/src/Pages/GamePage.ts b/TableturfBattleClient/src/Pages/GamePage.ts
index b0922db..470750d 100644
--- a/TableturfBattleClient/src/Pages/GamePage.ts
+++ b/TableturfBattleClient/src/Pages/GamePage.ts
@@ -140,7 +140,7 @@ function initReplay() {
 	gameButtonsContainer.hidden = false;
 	gamePage.dataset.myPlayerIndex = '0';
 	updateColours();
-	gamePage.dataset.uiBaseColourIsSpecialColour = currentGame!.game.players[0].uiBaseColourIsSpecialColour?.toString();
+	gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock || (currentGame!.game.players[0].uiBaseColourIsSpecialColour ?? true)).toString();
 	canPlay = false;
 	showPage('game');
 	clearPlayContainers();
@@ -395,7 +395,9 @@ flipButton.addEventListener('click', () => {
 		if (currentReplay.watchingPlayer >= currentGame.game.players.length)
 		currentReplay.watchingPlayer = 0;
 		gamePage.dataset.myPlayerIndex = currentReplay.watchingPlayer.toString();
-		gamePage.dataset.uiBaseColourIsSpecialColour = currentGame.game.players[currentReplay.watchingPlayer].uiBaseColourIsSpecialColour?.toString();
+		gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock
+			? currentReplay.watchingPlayer != 1
+			: currentGame.game.players[currentReplay.watchingPlayer].uiBaseColourIsSpecialColour ?? true).toString();
 		board.flip = currentReplay.watchingPlayer % 2 != 0;
 		clearShowDeck();
 		replayUpdateHand();
@@ -1334,12 +1336,15 @@ function setColour(playerIndex: number, colourIndex: number, colour: Colour) {
 	if (!currentGame || playerIndex >= currentGame.game.players.length) return;
 	if (colourIndex == 0) {
 		currentGame.game.players[playerIndex].colour = colour;
-		document.body.style.setProperty(`--primary-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
+		if (!userConfig.colourLock)
+			document.body.style.setProperty(`--primary-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
 	} else if (colourIndex == 1) {
 		currentGame.game.players[playerIndex].specialColour = colour;
-		document.body.style.setProperty(`--special-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
+		if (!userConfig.colourLock)
+			document.body.style.setProperty(`--special-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
 	} else {
 		currentGame.game.players[playerIndex].specialAccentColour = colour;
-		document.body.style.setProperty(`--special-accent-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
+		if (!userConfig.colourLock)
+			document.body.style.setProperty(`--special-accent-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
 	}
 }
diff --git a/TableturfBattleClient/src/Pages/PreGamePage.ts b/TableturfBattleClient/src/Pages/PreGamePage.ts
index ce6f2ad..6d5f681 100644
--- a/TableturfBattleClient/src/Pages/PreGamePage.ts
+++ b/TableturfBattleClient/src/Pages/PreGamePage.ts
@@ -8,8 +8,10 @@ const preGameDeckEditorButton = document.getElementById('preGameDeckEditorButton
 const preGameLoadingSection = document.getElementById('preGameLoadingSection')!;
 const preGameLoadingLabel = document.getElementById('preGameLoadingLabel')!;
 const preGameReplayButton = document.getElementById('preGameReplayButton') as HTMLLinkElement;
+const preGameSettingsButton = document.getElementById('preGameSettingsButton') as HTMLLinkElement;
 const preGameHelpButton = document.getElementById('preGameHelpButton') as HTMLLinkElement;
 const helpDialog = document.getElementById('helpDialog') as HTMLDialogElement;
+const settingsDialog = document.getElementById('settingsDialog') as HTMLDialogElement;
 
 const gameSetupDialog = document.getElementById('gameSetupDialog') as HTMLDialogElement;
 const gameSetupForm = document.getElementById('gameSetupForm') as HTMLFormElement;
@@ -17,6 +19,8 @@ const maxPlayersBox = document.getElementById('maxPlayersBox') as HTMLSelectElem
 const turnTimeLimitBox = document.getElementById('turnTimeLimitBox') as HTMLInputElement;
 const goalWinCountBox = document.getElementById('goalWinCountBox') as HTMLSelectElement;
 
+const optionsColourLock = document.getElementById('optionsColourLock') as HTMLInputElement;
+
 let shownMaxPlayersWarning = false;
 
 function setLoadingMessage(message: string | null) {
@@ -46,7 +50,7 @@ preGameForm.addEventListener('submit', e => {
 	e.preventDefault();
 
 	const name = nameBox.value;
-	window.localStorage.setItem('name', name);
+	localStorage.setItem('name', name);
 
 	if (e.submitter?.id == 'newGameButton' || (e.submitter?.id == 'preGameImplicitSubmitButton' && !gameIDBox.value)) {
 		createRoom(false);
@@ -61,7 +65,7 @@ gameSetupForm.addEventListener('submit', e => {
 	if (e.submitter?.id != 'gameSetupSubmitButton')
 		return;
 	const name = nameBox.value;
-	window.localStorage.setItem('name', name);
+	localStorage.setItem('name', name);
 	createRoom(true);
 });
 
@@ -203,6 +207,11 @@ preGameDeckEditorButton.addEventListener('click', e => {
 	setUrl('deckeditor');
 });
 
+preGameSettingsButton.addEventListener('click', e => {
+	e.preventDefault();
+	settingsDialog.showModal();
+});
+
 preGameHelpButton.addEventListener('click', e => {
 	e.preventDefault();
 	helpDialog.showModal();
@@ -235,6 +244,20 @@ preGameReplayButton.addEventListener('click', e => {
 	new ReplayLoader(m[1]).loadReplay();
 });
 
+optionsColourLock.addEventListener('change', () => {
+	userConfig.colourLock = optionsColourLock.checked;
+	saveSettings();
+	if (userConfig.colourLock) {
+		for (let i = 1; i <= 4; i++) {
+			document.body.style.removeProperty(`--primary-colour-${i}`);
+			document.body.style.removeProperty(`--special-colour-${i}`);
+			document.body.style.removeProperty(`--special-accent-colour-${i}`);
+			uiBaseColourIsSpecialColourOutOfGame = true;
+			gamePage.dataset.uiBaseColourIsSpecialColour = 'true';
+		}
+	}
+})
+
 let playerName = localStorage.getItem('name');
 (document.getElementById('nameBox') as HTMLInputElement).value = playerName || '';
 
@@ -244,6 +267,11 @@ window.addEventListener('popstate', () => {
 		processUrl();
 });
 
+// Initialise the settings dialog.
+{
+	optionsColourLock.checked = userConfig.colourLock;
+}
+
 if (!canPushState)
 	preGameDeckEditorButton.href = '#deckeditor';
 setLoadingMessage('Loading game data...');
diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts
index 4621c06..8be0984 100644
--- a/TableturfBattleClient/src/app.ts
+++ b/TableturfBattleClient/src/app.ts
@@ -70,7 +70,7 @@ function showPage(key: string) {
 }
 
 function setClientToken(token: string) {
-	window.localStorage.setItem('clientToken', token);
+	localStorage.setItem('clientToken', token);
 	clientToken = token;
 }
 
@@ -125,7 +125,9 @@ function onGameStateChange(game: any, playerData: PlayerData | null) {
 	}
 	loadPlayers(game.players);
 	gamePage.dataset.myPlayerIndex = playerData ? playerData.playerIndex.toString() : '';
-	gamePage.dataset.uiBaseColourIsSpecialColour = playerData && game.players[playerData.playerIndex].uiBaseColourIsSpecialColour ? 'true' : 'false';
+	gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock
+		? (playerData?.playerIndex ?? 0) != 1
+		: game.players[playerData?.playerIndex ?? 0].uiBaseColourIsSpecialColour ?? true).toString();
 
 	if (game.state != GameState.WaitingForPlayers)
 		lobbyLockSettings(true);