Confirm when leaving the deck editor with unsaved changes

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?';
+}

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();
 });

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.
 }