Dynamically get Game and Group data via API

src/lib/types/chellaris.ts

@@ -12,4 +12,32 @@ export type ChellarisGame = {
 
 export type ChellarisGameGroup = {
   name: string,
+}
+
+export const createChellarisInfo = (): ChellarisInfo => {
+  const newChellarisInfo = {
+    games: new Map(),
+    ethics: [],
+    portraits: []
+  };
+
+  return newChellarisInfo;
+}
+
+export const createChellarisGame = (): ChellarisGame => {
+  const newChellarisGame = {
+    name: "",
+    groups: new Map(),
+    empires: [],
+  };
+
+  return newChellarisGame;
+}
+
+export const createChellarisGameGroup = (): ChellarisGameGroup => {
+  const newChellarisGameGroup = {
+    name: "",
+  };
+
+  return newChellarisGameGroup;
 }

src/routes/graphs/+layout.ts

@@ -1,66 +1,69 @@
 import type { PageLoad } from "../$types";
 import ChellarisDataStore from '$lib/stores/ChellarisData';
 import SelectedGameStore from '$lib/stores/GameFilter';
-import type { ChellarisInfo, ChellarisGame, ChellarisGameGroup } from '../../lib/types/chellaris';
+import { type ChellarisInfo, type ChellarisGame, type ChellarisGameGroup, createChellarisInfo, createChellarisGameGroup, createChellarisGame } from '../../lib/types/chellaris';
 import SelectedGameGroupsStore from "$lib/stores/GameGroupFilter";
+import GraphsTabStore from '$lib/stores/GraphsTab';
 
 export const load: PageLoad = async () => {
-  // Chellaris Data Code
-  // Game Dummy Data
-  const dummyData: ChellarisInfo = {
-    games: new Map<string, ChellarisGame>(),
-    ethics: [],
-    portraits: []
-  }
-
-  dummyData.games.set("1", {
-    name: "Game 16", 
-    groups: new Map<string, ChellarisGameGroup>(),
-    empires: [],
-  });
-
-  dummyData.games.set("2", {
-    name: "Game 17", 
-    groups: new Map<string, ChellarisGameGroup>(),
-    empires: [],
-  });
-
-  // Group Dummy Data
-  dummyData.games.get("1")?.groups.set("1", {name: "A"});
-  dummyData.games.get("1")?.groups.set("2", {name: "B"});
-  dummyData.games.get("1")?.groups.set("3", {name: "None"});
-
-  dummyData.games.get("2")?.groups.set("4", {name: "A"});
-  dummyData.games.get("2")?.groups.set("5", {name: "B"});
-  dummyData.games.get("2")?.groups.set("6", {name: "None2"});
-
-  //
-  ChellarisDataStore.set(dummyData)
-
-  // Local Storage Code
+  const apiBaseUrl = 'https://www.chellaris.net/api/v2';
+  const chellarisData = createChellarisInfo();
   let store: string | null;
 
-  if (typeof localStorage !== 'undefined') {
-    // Game Selection
-		store = localStorage.getItem('gameSelection');
+  // Chellaris Data Code
+  const games: {id: number, name: string}[] = await (await fetch(apiBaseUrl + '/games')).json();
 
-    let selectedGame = "";
-		if (typeof store == 'string') {
-			selectedGame = JSON.parse(store);
-			SelectedGameStore.set(selectedGame);
-		}
+  games.sort((a, b) => (a.name < b.name ? -1 : 1));
+  games.forEach(game => {
+    const newGame: ChellarisGame = createChellarisGame();
+    newGame.name = game.name;
+    chellarisData.games.set(game.id, newGame);
+  });
+
+  const groups: {id: number, name: string, game_id: number}[] = await (await fetch(apiBaseUrl + '/game_groups')).json();
+
+  groups.sort((a, b) => (a.name < b.name ? -1 : 1));
+  groups.forEach(group => {
+    const gameData = chellarisData.games.get(group.game_id);
+
+    if (typeof gameData !== "undefined") {
+      const newGroup = createChellarisGameGroup();
+      newGroup.name = group.name;
+      gameData.groups.set(group.id, newGroup)
+      chellarisData.games.set(group.game_id, gameData);
+    }
+  })
+
+  ChellarisDataStore.set(chellarisData);
+
+  // Local Storage Code
+
+  if (typeof localStorage !== 'undefined') {
+    // Tab Selection
+    store = localStorage.getItem('graphsTab');
+    if (typeof store == 'string') {
+      GraphsTabStore.set(store);
+    }
+    // Game Selection
+    store = localStorage.getItem('gameSelection');
+
+    let selectedGame = 0;
+    if (typeof store == 'string') {
+      selectedGame = JSON.parse(store);
+      SelectedGameStore.set(selectedGame);
+    }
 
     // Game Groups Selection
     store = localStorage.getItem('gameGroupSelection');
 
-		if (typeof store == 'string') {
-			const gameGroupSelectionMap = new Map<string, Array<string>>(JSON.parse(store));
-			const tmp = gameGroupSelectionMap.get(selectedGame);
-      let selectedGameGroups: Array<string> = [];
+    if (typeof store == 'string') {
+      const gameGroupSelectionMap = new Map<number, Array<number>>(JSON.parse(store));
+      const tmp = gameGroupSelectionMap.get(selectedGame);
+      let selectedGameGroups: Array<number> = [];
       if (typeof tmp !== 'undefined') {
         selectedGameGroups = [...tmp.values()];
       } else {
-        const tmpGameData = dummyData.games.get(selectedGame);
+        const tmpGameData = chellarisData.games.get(selectedGame);
         // If this fails an empty array is precisely what we want
         if (typeof tmpGameData !== "undefined") {
           // Default to all available groups
@@ -71,6 +74,6 @@ export const load: PageLoad = async () => {
       }
       gameGroupSelectionMap.set(selectedGame, selectedGameGroups);
       SelectedGameGroupsStore.set(gameGroupSelectionMap);
-		}
-	}
+    }
+  }
 }