Fix Group Display Names

src/routes/graphs/tab/+page.svelte

@@ -1,11 +1,42 @@
 <script lang="ts">
 	import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
 	import SelectedGameStore from '$lib/stores/GameFilter';
+	import type { ChellarisGameGroup, ChellarisInfo } from '$lib/types/chellaris';
+	import ChellarisDataStore from '$lib/stores/ChellarisData';
 
 	let selectedGameGroups: Array<string> = [];
 	let selectedGameGroupsMap: Map<string, Array<string>> = new Map();
+	let gameGroups: Map<string, ChellarisGameGroup> = new Map();
+		let chellarisData: ChellarisInfo = {
+		games: new Map(),
+		ethics: [],
+		portraits: []
+	};
 	let selectedGame: string = "";
 
+	const updateGameGroups = () => {
+    let tmpData;
+    if (selectedGame == "") {
+      tmpData = chellarisData.games.get(chellarisData.games.keys().next().value);
+    }
+    else {
+      tmpData = chellarisData.games.get(selectedGame);
+    }
+    
+		if (typeof tmpData !== 'undefined') {
+      console.log(tmpData.groups);
+			gameGroups = tmpData.groups;
+		}
+  };
+
+	ChellarisDataStore.subscribe((data) => {
+		chellarisData = data;
+
+    updateGameGroups();
+		// TODO Update selection if Groups Differ? Does this value ever even update without a full page reload?
+	});
+
+
 	SelectedGameStore.subscribe((selection) => {
 		selectedGame = selection;
 		if (selectedGameGroupsMap.size != 0) {
@@ -33,4 +64,4 @@
 
 <h1>Example Tab</h1>
 
-<p>{selectedGameGroups.length > 1 ? "Groups" : "Group"} {selectedGameGroups.join(", ")} {selectedGameGroups.length > 1 ? "are" : "is"} selected</p>
+<p>{selectedGameGroups.length > 1 ? "Groups" : "Group"} {selectedGameGroups.map((selection) => gameGroups.get(selection)?.name).join(", ")} {selectedGameGroups.length > 1 ? "are" : "is"} selected</p>