From a0ff62377c1c7e5d4be53b0988272dca2d38afd6 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Sun, 13 Aug 2023 03:25:16 +0200
Subject: [PATCH] Removal of LocalStorage from Dropdowns, Dynamic Dropdown
 population

---
 src/routes/graphs/GameGroupSelection.svelte | 155 ++++++++++----------
 src/routes/graphs/GameSelection.svelte      |  70 ++++-----
 2 files changed, 111 insertions(+), 114 deletions(-)

diff --git a/src/routes/graphs/GameGroupSelection.svelte b/src/routes/graphs/GameGroupSelection.svelte
index 3fe7231..aeb2426 100644
--- a/src/routes/graphs/GameGroupSelection.svelte
+++ b/src/routes/graphs/GameGroupSelection.svelte
@@ -1,99 +1,106 @@
 <script lang="ts">
-  import DropDown from '$lib/components/DropDown.svelte';
+	import DropDown from '$lib/components/DropDown.svelte';
 	import DropDownElement from '$lib/components/DropDownElement.svelte';
 	import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
-  import SelectedGameStore from '$lib/stores/GameFilter';
+	import SelectedGameStore from '$lib/stores/GameFilter';
+	import ChellarisDataStore from '$lib/stores/ChellarisData';
+	import type { ChellarisGame, ChellarisGameGroup, ChellarisInfo } from '$lib/types/chellaris';
 
-  let selectedGame: string = "";
+	let selectedGame: string = '';
 	let selectedGameGroups: Array<string> = [];
-  let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
-  let store: string | null;
+	let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
 
-  SelectedGameStore.subscribe((selection) => {
-    selectedGame = selection;
-    if (selectedGameGroupsMap.size != 0) {
-      const tmp = selectedGameGroupsMap.get(selectedGame);
-      if (typeof tmp !== "undefined") {
-        selectedGameGroups = [...tmp.values()];
-      }
+	let gameGroups: Map<string, ChellarisGameGroup> = new Map();
+	let chellarisData: ChellarisInfo = {
+		games: new Map(),
+		ethics: [],
+		portraits: []
+	};
+	let store: string | null;
+
+	// Chellaris Data Code
+  const updateGameGroups = () => {
+    let tmpData;
+    if (selectedGame == "") {
+      tmpData = chellarisData.games.get(chellarisData.games.keys().next().value);
     }
-  })
-
-	if (typeof localStorage !== 'undefined') {
-		store = localStorage.getItem('gameGroupSelection');
-
-		if (typeof store == 'string') {
-			let selectedGameGroupsMap = new Map<string, Array<string>>(JSON.parse(store));
-      const tmp = selectedGameGroupsMap.get(selectedGame);
-      if (typeof tmp !== "undefined") {
-        selectedGameGroups = [...tmp.values()];
-      }
-			SelectedGameGroupsStore.set(selectedGameGroupsMap);
+    else {
+      tmpData = chellarisData.games.get(selectedGame);
+    }
+    
+		if (typeof tmpData !== 'undefined') {
+      console.log(tmpData.groups);
+			gameGroups = tmpData.groups;
 		}
-	}
+  }
+  
+	ChellarisDataStore.subscribe((data) => {
+		chellarisData = data;
 
-	SelectedGameGroupsStore.subscribe((selection) => {
-    selectedGameGroupsMap = selection;
-    const tmp = selection.get(selectedGame);
-    if (typeof tmp !== "undefined") {
-      selectedGameGroups = [...tmp.values()];
-    }
+    updateGameGroups();
+		// TODO Update selection if Groups Differ? Does this value ever even update without a full page reload?
+	});
 
-    if (typeof localStorage !== 'undefined') {
-			localStorage.setItem('gameGroupSelection', JSON.stringify(Array.from(selection.entries())));
+	// Group Selection Code
+	const updateSelectedGroups = () => {
+		const tmp = selectedGameGroupsMap.get(selectedGame);
+		if (typeof tmp !== 'undefined') {
+			selectedGameGroups = [...tmp.values()];
+		} else {
+			selectedGameGroups = [...gameGroups.keys()];
+      selectedGameGroupsMap.set(selectedGame, selectedGameGroups);
+      SelectedGameGroupsStore.set(selectedGameGroupsMap);
+		}
+	};
+
+	SelectedGameStore.subscribe((selection) => {
+		selectedGame = selection;
+    
+    updateGameGroups();
+
+		if (selectedGameGroupsMap.size != 0) {
+			updateSelectedGroups();
 		}
 	});
 
+	SelectedGameGroupsStore.subscribe((selection) => {
+		selectedGameGroupsMap = selection;
+		updateSelectedGroups();
+
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('gameGroupSelection', JSON.stringify(Array.from(selection.entries())));
+		}
+	});
 
 	const updateGameGroupSelection = () => {
 		SelectedGameGroupsStore.update((selection) => selection.set(selectedGame, selectedGameGroups));
 	};
 
-  const dropdownId = crypto.randomUUID();
+	const dropdownId = crypto.randomUUID();
 </script>
 
-<DropDown dropdownId={dropdownId} dropdownTitle="Group Selection">
-	<DropDownElement dropdownId={dropdownId}>
-		<input
-			id="checkboxGameGroupA"
-      data-dropdown={dropdownId}
-			type="checkbox"
-			bind:group={selectedGameGroups}
-			on:change={updateGameGroupSelection}
-			value="A"
-		/>
-		<label for="checkboxGameGroupA" data-dropdown={dropdownId}>Group A</label>
-	</DropDownElement>
-	<DropDownElement dropdownId={dropdownId}>
-		<input
-			id="checkboxGameGroupB"
-      data-dropdown={dropdownId}
-			type="checkbox"
-			bind:group={selectedGameGroups}
-			on:change={updateGameGroupSelection}
-			value="B"
-		/>
-		<label for="checkboxGameGroupB" data-dropdown={dropdownId}>Group B</label>
-	</DropDownElement>
-	<DropDownElement dropdownId={dropdownId}>
-		<input
-			id="checkboxGameGroupNA"
-      data-dropdown={dropdownId}
-			type="checkbox"
-			bind:group={selectedGameGroups}
-			on:change={updateGameGroupSelection}
-			value="N/A"
-		/>
-		<label for="checkboxGameGroupNA" data-dropdown={dropdownId}>Ungrouped</label>
-	</DropDownElement>
+<DropDown {dropdownId} dropdownTitle="Group Selection">
+	{#each gameGroups as group}
+		<DropDownElement {dropdownId}>
+			<input
+				id={'checkbox' + group[0]}
+				data-dropdown={dropdownId}
+				type="checkbox"
+				bind:group={selectedGameGroups}
+				on:change={updateGameGroupSelection}
+				value={group[0]}
+			/>
+			<label for={'checkbox' + group[0]} data-dropdown={dropdownId}>{group[1].name}</label>
+		</DropDownElement>
+	{/each}
 </DropDown>
 
 <style>
-  :checked + label {
-    color: var(--color-active-2);
-  }
+	:checked + label {
+		color: var(--color-active-2);
+	}
 
-  :hover {
-    color: var(--color-active-1) !important;
-  }
+	:hover {
+		color: var(--color-active-1) !important;
+	}
 </style>
diff --git a/src/routes/graphs/GameSelection.svelte b/src/routes/graphs/GameSelection.svelte
index e1b8b23..1ba0952 100644
--- a/src/routes/graphs/GameSelection.svelte
+++ b/src/routes/graphs/GameSelection.svelte
@@ -1,24 +1,23 @@
 <script lang="ts">
-  import DropDown from '$lib/components/DropDown.svelte';
+	import DropDown from '$lib/components/DropDown.svelte';
 	import DropDownElement from '$lib/components/DropDownElement.svelte';
 	import SelectedGameStore from '$lib/stores/GameFilter';
+	import ChellarisDataStore from '$lib/stores/ChellarisData';
+	import type { ChellarisGame } from '$lib/types/chellaris';
 
-	let selectedGame: string = "";
-  let store: string | null;
+	let selectedGame = '';
+	let gameList: Map<string, ChellarisGame> = new Map();
 
-	if (typeof localStorage !== 'undefined') {
-		store = localStorage.getItem('gameSelection');
-
-		if (typeof store == 'string') {
-			selectedGame = JSON.parse(store);
-			SelectedGameStore.set(selectedGame);
-		}
-	}
+  // Chellaris Data Code
+	ChellarisDataStore.subscribe((data) => {
+    gameList = data.games;
+	});
 
+	// Game Selection Code
 	SelectedGameStore.subscribe((selection) => {
 		selectedGame = selection;
 
-    if (typeof localStorage !== 'undefined') {
+		if (typeof localStorage !== 'undefined') {
 			localStorage.setItem('gameSelection', JSON.stringify(selectedGame));
 		}
 	});
@@ -27,37 +26,28 @@
 		SelectedGameStore.update(() => selectedGame);
 	};
 
-  const dropdownId = crypto.randomUUID();
+	// Dropdown UUID to make the Click Event work properly
+	const dropdownId = crypto.randomUUID();
 </script>
 
-<DropDown dropdownId={dropdownId} dropdownTitle="Game Selection">
-	<DropDownElement dropdownId={dropdownId}>
-		<input
-			id="checkboxGameGroupA"
-      data-dropdown={dropdownId}
-			type="radio"
-			bind:group={selectedGame}
-			on:change={updateGameSelection}
-			value="16"
-		/>
-		<label for="checkboxGameGroupA" data-dropdown={dropdownId}>Game 16</label>
-	</DropDownElement>
-	<DropDownElement dropdownId={dropdownId}>
-		<input
-			id="checkboxGameGroupB"
-      data-dropdown={dropdownId}
-			type="radio"
-			bind:group={selectedGame}
-			on:change={updateGameSelection}
-			value="17"
-		/>
-		<label for="checkboxGameGroupB" data-dropdown={dropdownId}>Game 17</label>
-	</DropDownElement>
+<DropDown {dropdownId} dropdownTitle="Game Selection">
+	{#each gameList as game}
+		<DropDownElement {dropdownId}>
+			<input
+				id={'checkbox' + game[0]}
+				data-dropdown={dropdownId}
+				type="radio"
+				bind:group={selectedGame}
+				on:change={updateGameSelection}
+				value={game[0]}
+			/>
+			<label for={'checkbox' + game[0]} data-dropdown={dropdownId}>{game[1].name}</label>
+		</DropDownElement>
+	{/each}
 </DropDown>
 
-
 <style>
-  label:hover {
-    color: var(--color-active-1);
-  }
+	label:hover {
+		color: var(--color-active-1);
+	}
 </style>