From e553dbeb7a86a29083d237129b43c507c36d732c Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Sun, 23 Oct 2022 13:16:55 +1100
Subject: [PATCH] Confirm when leaving the deck editor with unsaved changes

---
 .../src/Pages/DeckEditPage.ts                 | 19 ++++++++++++++
 .../src/Pages/PreGamePage.ts                  | 19 +-------------
 TableturfBattleClient/src/app.ts              | 25 +++++++++++++++++++
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/TableturfBattleClient/src/Pages/DeckEditPage.ts b/TableturfBattleClient/src/Pages/DeckEditPage.ts
index 7510523..1362a7e 100644
--- a/TableturfBattleClient/src/Pages/DeckEditPage.ts
+++ b/TableturfBattleClient/src/Pages/DeckEditPage.ts
@@ -11,6 +11,7 @@ const cardListSortBox = document.getElementById('cardListSortBox') as HTMLSelect
 const cardButtons: CardButton[] = [ ];
 const deckEditCardButtons: (CardButton | HTMLLabelElement)[] = [ ];
 
+let deckModified = false;
 let selectedDeckCardIndex: number | null = null;
 
 function editDeck() {
@@ -98,12 +99,14 @@ deckSaveButton.addEventListener('click', () => {
 	selectedDeck.cards = deckEditCardButtons.map(o => (o as CardButton).card?.number ?? 0);
 	saveDecks();
 	selectDeck();
+	stopEditingDeck();
 	showSection('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');
 });
 
@@ -142,6 +145,10 @@ function initCardDatabase(cards: Card[]) {
 				deckEditUpdateSize();
 
 				cardList.parentElement!.classList.remove('selecting');
+				if (!deckModified) {
+					deckModified = true;
+					window.addEventListener('beforeunload', onBeforeUnload_deckEditor);
+				}
 			}
 		});
 		cardList.appendChild(button.element);
@@ -177,3 +184,15 @@ cardListSortBox.addEventListener('change', () => {
 			cardList.appendChild(button.element);
 	}
 });
+
+function stopEditingDeck() {
+	if (deckModified) {
+		deckModified = false;
+		window.removeEventListener('beforeunload', onBeforeUnload_deckEditor);
+	}
+}
+
+function onBeforeUnload_deckEditor(e: BeforeUnloadEvent) {
+	e.preventDefault();
+	return 'You have unsaved changes to your deck that will be lost. Are you sure you want to continue?';
+}
diff --git a/TableturfBattleClient/src/Pages/PreGamePage.ts b/TableturfBattleClient/src/Pages/PreGamePage.ts
index e0d2850..cb11bdd 100644
--- a/TableturfBattleClient/src/Pages/PreGamePage.ts
+++ b/TableturfBattleClient/src/Pages/PreGamePage.ts
@@ -165,25 +165,8 @@ preGameDeckEditorButton.addEventListener('click', e => {
 const playerName = localStorage.getItem('name');
 (document.getElementById('nameBox') as HTMLInputElement).value = playerName || '';
 
-function processUrl() {
-	if (location.pathname.endsWith('/deckeditor') || location.hash == '#deckeditor')
-		showDeckList();
-	else {
-		const m = /^(.*)\/game\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/.exec(location.toString());
-		if (m)
-			presetGameID(m[2]);
-		else if (location.hash) {
-			canPushState = false;
-			presetGameID(location.hash);
-		} else {
-			clearPreGameForm(false);
-			showSection('preGame');
-		}
-	}
-}
-
 let settingUrl = false;
-window.addEventListener('popstate', () => {
+window.addEventListener('popstate', e => {
 	if (!settingUrl)
 		processUrl();
 });
diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts
index 6290322..c065d8d 100644
--- a/TableturfBattleClient/src/app.ts
+++ b/TableturfBattleClient/src/app.ts
@@ -238,6 +238,31 @@ function setupWebSocket(gameID: string, myPlayerIndex: number | null) {
 	return myPlayerIndex;
 }
 
+function processUrl() {
+	if (deckModified) {
+		if (!confirm('You have unsaved changes to your deck. Are you sure you want to leave?')) {
+			setUrl('deckeditor');
+			return false;
+		}
+	}
+	stopEditingDeck();
+	if (location.pathname.endsWith('/deckeditor') || location.hash == '#deckeditor')
+		showDeckList();
+	else {
+		const m = /^(.*)\/game\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/.exec(location.toString());
+		if (m)
+			presetGameID(m[2]);
+		else if (location.hash) {
+			canPushState = false;
+			presetGameID(location.hash);
+		} else {
+			clearPreGameForm(false);
+			showSection('preGame');
+		}
+	}
+	return true;
+}
+
 function isInternetExplorer() {
 	return !!(window.document as any).documentMode;  // This is a non-standard property implemented only by Internet Explorer.
 }