Bugfixing + Most Game & Group API Routes

src/lib/stores/admin-page/GameStore.ts

@@ -1,5 +1,5 @@
 import { writable, type Writable } from "svelte/store";
 
-const AdminSelectedGameStore: Writable<number> = writable();
+const AdminSelectedGameStore: Writable<number> = writable(0);
 
 export default AdminSelectedGameStore;

src/lib/stores/admin-page/GroupStore.ts

@@ -0,0 +1,5 @@
+import { writable, type Writable } from "svelte/store";
+
+const AdminSelectedGroupStore: Writable<{ [key: number]: number }> = writable({});
+
+export default AdminSelectedGroupStore;

src/lib/types/chellaris.ts

@@ -25,6 +25,7 @@ export type ChellarisEmpire = {
   group: number,
   empire_portrait: number, // TODO replace with Enum?
   empire_portrait_group: number, // TODO replace with Enum?
+  name: string,
   discord_user?: string,
   ethics: { [key: number]: Ethic },
 }
@@ -66,9 +67,10 @@ export const createChellarisGameGroup = (): ChellarisGameGroup => {
 
 export const createChellarisEmpire = (
   { 
-    id, discord_user, group_id, gestalt, empire_portrait_id, empire_portrait_group_id
+    id, name, discord_user, group_id, gestalt, empire_portrait_id, empire_portrait_group_id
   }: {
     id: number,
+    name: string,
     discord_user?: string, 
     group_id: number,
     gestalt: boolean,
@@ -84,6 +86,7 @@ export const createChellarisEmpire = (
     empire_portrait_group: empire_portrait_group_id,
     ethics: [],
     discord_user: discord_user,
+    name: name
   };
 
   return newChellarisEmpire;

src/routes/admin/+page.svelte

@@ -4,29 +4,77 @@
 	import AuthTokenStore from '$lib/stores/AuthTokenStore';
 	import AdminSelectedEmpireStore from '$lib/stores/admin-page/EmpireStore';
 	import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
+	import AdminSelectedGroupStore from '$lib/stores/admin-page/GroupStore';
+	import type { ChellarisEmpire, ChellarisGame, ChellarisGameGroup } from '$lib/types/chellaris';
+	import EmpireDetails from './EmpireDetails.svelte';
 	import List from './List.svelte';
 
 	export let data;
 
+	// Game Variables
+
 	let newGameForm = false;
 	let addingNewGame = false;
 	let newGameName = '';
 	$: gameList = data.games;
 
+	let loadingGameData = false;
+
+	// Group Variables
+
+	let newGroupForm = false;
+	let addingNewGroup = false;
+	let newGroupName = '';
+	let groupList: {[key: number]: ChellarisGameGroup };
+	$: groupList = {};
+
+	// Empire Variables
+
+	let empireList: { [key: number]: ChellarisEmpire } = {};
+
+	const updateGameData = () => {
+		fetch(apiBaseUrl + '/v3/game?game_id=' + $AdminSelectedGameStore, {
+			headers: {
+				'Content-Type': 'application/json',
+				'x-api-key': $AuthTokenStore
+			}
+		}).then((res) => {
+			res.json().then((data) => {
+				console.log(data);
+				groupList = data.groups;
+				empireList = data.empires;
+				loadingGameData = false;
+			});
+		});
+	};
+
 	$: {
 		if (typeof localStorage !== 'undefined') {
 			localStorage.setItem('adminGameSelection', JSON.stringify($AdminSelectedGameStore));
 		}
-	};
+	}
+
+	AdminSelectedGameStore.subscribe(() => {
+		updateGameData();
+		loadingGameData = true;
+	});
+
+	$: {
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('adminGroupSelection', JSON.stringify($AdminSelectedGroupStore));
+		}
+	}
 
 	$: {
 		if (typeof localStorage !== 'undefined') {
 			localStorage.setItem('adminEmpireSelection', JSON.stringify($AdminSelectedEmpireStore));
 		}
-	};
+	}
+
+	// Game Functions
 
 	const getGameList = () => {
-		fetch(apiBaseUrl + '/v3/list_games').then((response) => response.json().then((result) => (gameList = result)));
+		fetch(apiBaseUrl + '/v3/games').then((response) => response.json().then((result) => (gameList = result)));
 	};
 
 	const setActiveGame = (game: number) => {
@@ -35,46 +83,93 @@
 
 	const addGame = () => {
 		let newGame = {
-			auth: { token: $AuthTokenStore },
 			game_name: newGameName
 		};
 
+		addingNewGame = true;
+		newGameForm = false;
+
 		fetch(apiBaseUrl + '/v3/game', {
 			method: 'POST',
 			headers: {
-				'Content-Type': 'application/json'
+				'Content-Type': 'application/json',
+				'x-api-key': $AuthTokenStore
 			},
 			body: JSON.stringify(newGame)
 		}).then((response) => {
 			getGameList();
 			addingNewGame = false;
-			response.json().then((result) => $AdminSelectedGameStore = result.id);
+			newGameName = '';
+			response.json().then((result) => ($AdminSelectedGameStore = result.id));
 		});
-		newGameName = '';
-		newGameForm = false;
-		addingNewGame = true;
 	};
 
 	const deleteGame = (game_id: number) => {
-		fetch(apiBaseUrl + "/v3/game?game_id=" + game_id, {
+		fetch(apiBaseUrl + '/v3/game?game_id=' + game_id, {
 			method: 'DELETE',
 			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({token: $AuthTokenStore}),
+				'Content-Type': 'application/json',
+				'x-api-key': $AuthTokenStore
+			}
 		}).then(() => {
 			getGameList();
 			if ($AdminSelectedGameStore == game_id) {
 				$AdminSelectedGameStore = Object.values(gameList)[0].id;
 			}
 		});
+		delete gameList[game_id];
+		gameList = gameList;
 	};
 
-	const startNewGameForm = () => {
-		newGameForm = true;
-		setActiveGame(Object.values(gameList).length);
+	// Group Functions
+
+	const setActiveGroup = (group: number) => {
+		$AdminSelectedGroupStore[$AdminSelectedGameStore] = group;
 	};
 
+	const addGroup = () => {
+		let newGroup = {
+			game_id: $AdminSelectedGameStore,
+			group_name: newGroupName
+		};
+
+		addingNewGroup = true;
+		newGroupForm = false;
+
+		fetch(apiBaseUrl + '/v3/group', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'x-api-key': $AuthTokenStore
+			},
+			body: JSON.stringify(newGroup)
+		}).then((response) => {
+			updateGameData();
+			addingNewGroup = false;
+			newGroupName = '';
+			response.json().then((result) => ($AdminSelectedGroupStore[$AdminSelectedGameStore] = result.id));
+		});
+	};
+
+	const deleteGroup = (group_id: number) => {
+		fetch(apiBaseUrl + '/v3/group?group_id=' + group_id + '&game_id=' + $AdminSelectedGameStore, {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json',
+				'x-api-key': $AuthTokenStore
+			}
+		}).then(() => {
+			updateGameData();
+			if ($AdminSelectedGroupStore[$AdminSelectedGameStore] == group_id) {
+				$AdminSelectedGroupStore[$AdminSelectedGameStore] = Object.values(groupList)[0].id;
+			}
+		});
+		delete groupList[group_id];
+		groupList = groupList;
+	};
+
+	// Empire Functions
+
 	const setActiveEmpire = (empireId: number) => {
 		$AdminSelectedEmpireStore[$AdminSelectedGameStore] = empireId;
 	};
@@ -115,15 +210,63 @@
 				</form>
 			</div>
 		{:else if addingNewGame}
-			<div class="list-card active">
-				<div class="card-content">Adding Game...</div>
+			<div class="list-card loading">
+				<div class="card-content">{newGameName}</div>
 			</div>
 		{:else}
-			<button class="list-card" on:click={startNewGameForm}>
+			<button
+				class="list-card"
+				on:click={() => {
+					newGameForm = true;
+				}}
+			>
 				<div class="card-content button">+</div>
 			</button>
 		{/if}
 	</List>
+	<List area="groups" listTitle="Groups">
+		{#if loadingGameData}
+			<div>Loading</div>
+		{:else}
+			{#each Object.values(groupList) as group}
+				<button
+					class="list-card"
+					class:active={group.id == $AdminSelectedGroupStore[$AdminSelectedGameStore] ? 'active' : ''}
+					on:click={() => setActiveGroup(group.id)}
+				>
+					<div class="card-content">{group.name}</div>
+					{#if group.name !== 'N/A'}
+						<button class="delete-box" on:click={() => deleteGroup(group.id)}>
+							<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path fill="none" d="M0 0 24 24 M24 0 0 24" />
+							</svg>
+						</button>
+					{/if}
+				</button>
+			{/each}
+			{#if newGroupForm}
+				<div class="list-card active">
+					<form on:submit={addGroup}>
+						<input bind:value={newGroupName} />
+						<input type="submit" value="Add Group" />
+					</form>
+				</div>
+			{:else if addingNewGroup}
+				<div class="list-card loading">
+					<div class="card-content">{newGroupName}</div>
+				</div>
+			{:else}
+				<button
+					class="list-card"
+					on:click={() => {
+						newGroupForm = true;
+					}}
+				>
+					<div class="card-content button">+</div>
+				</button>
+			{/if}
+		{/if}
+	</List>
 	<List area="empires" listTitle="Empires">
 		<div class="empires-table">
 			<div class="table-headers">
@@ -131,29 +274,43 @@
 				<div class="table-header">Discord User</div>
 			</div>
 			<div class="table-content">
-				{#each list2 as elem}
-					<button class="list-card" class:active={elem == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''} on:click={() => setActiveEmpire(elem)}>
-						<div class="card-content" class:active={elem == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{elem}</div>
-						<div class="card-content" class:active={elem == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{elem}</div>
+				{#if loadingGameData}
+					<button class="list-card">
+						<div class="card-content">Loading Empires</div>
 					</button>
-				{/each}
-				<button class="list-card" on:click={addEmpire}>
-					<div class="card-content button">+</div>
-				</button>
+				{:else}
+					{#each Object.values(empireList) as empire}
+						<button
+							class="list-card"
+							class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}
+							on:click={() => setActiveEmpire(empire.id)}
+						>
+							<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
+							<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
+								{empire.discord_user}
+							</div>
+						</button>
+					{/each}
+					<button class="list-card" on:click={addEmpire}>
+						<div class="card-content button">+</div>
+					</button>
+				{/if}
 			</div>
 		</div>
 	</List>
 	<List area="details" listTitle="Empire Details">
-		{$AdminSelectedEmpireStore[$AdminSelectedGameStore]}
+		<EmpireDetails id={$AdminSelectedEmpireStore[$AdminSelectedGameStore]} />
 	</List>
 </div>
 
 <style>
 	.frame {
 		display: grid;
-		grid-template-areas: 'games empires details';
+		grid-template-areas:
+			'games empires details'
+			'groups empires details';
 		grid-template-columns: 20% 40% 40%;
-		grid-template-rows: 100%;
+		grid-template-rows: 50% 50%;
 		max-height: calc(100%);
 		overflow: hidden;
 		margin: 3rem;
@@ -166,6 +323,12 @@
 		border-color: darkorange !important;
 	}
 
+	.loading {
+		cursor: default !important;
+		border-color: grey !important;
+		color: grey !important;
+	}
+
 	.list-card {
 		display: flex;
 		margin: 0.5rem;
@@ -174,6 +337,7 @@
 		background-color: var(--color-bg);
 		color: var(--color-text);
 		width: calc(100% - 1rem);
+		box-sizing: border-box;
 		text-align: left;
 	}
 
@@ -182,7 +346,7 @@
 	}
 
 	.list-card form {
-		padding: 4px 9px;
+		padding: 5px 12px;
 	}
 
 	.list-card input {
@@ -190,7 +354,7 @@
 		color: var(--color-text);
 		border: 1px solid darkcyan;
 		font-size: 1rem;
-		padding: 3px 6px;
+		padding: 3px 7px;
 	}
 
 	.list-card input:focus {
@@ -208,6 +372,7 @@
 		padding: 0.5rem 1rem;
 		box-sizing: border-box;
 		border-left: 1px solid darkcyan;
+		width: 50%;
 	}
 
 	.button {

src/routes/admin/+page.ts

@@ -2,9 +2,10 @@ import { apiBaseUrl } from "$lib/components/consts";
 import AdminSelectedEmpireStore from "$lib/stores/admin-page/EmpireStore";
 import AdminSelectedGameStore from "$lib/stores/admin-page/GameStore";
 import type { ChellarisGameInfo } from "$lib/types/chellaris";
+import AdminSelectedGroupStore from '../../lib/stores/admin-page/GroupStore';
 
 export async function load ({ fetch }) {
-  const gameList: { [key: number]: ChellarisGameInfo } = await (await fetch(apiBaseUrl + "/v3/list_games")).json();
+  const gameList: { [key: number]: ChellarisGameInfo } = await (await fetch(apiBaseUrl + "/v3/games")).json();
 
   let store: string | null;
 
@@ -15,6 +16,16 @@ export async function load ({ fetch }) {
       AdminSelectedGameStore.set(JSON.parse(store));
     }
 
+    // Group Selection
+    store = localStorage.getItem('adminGroupSelection');
+
+    if (typeof store === 'string' && store != "\"\"") {
+      AdminSelectedGroupStore.set(JSON.parse(store));
+    }
+    else if (typeof store === 'string') {
+      AdminSelectedGroupStore.set({});
+    }
+
     // Empire Selection
     store = localStorage.getItem('adminEmpireSelection');
 

src/routes/admin/EmpireDetails.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let id: number;
+</script>
+
+<div>
+  {id}
+</div>
+
+<style>
+  
+</style>

src/routes/admin/List.svelte

@@ -37,7 +37,7 @@
 		grid-area: list-content;
 		min-height: none;
 		max-height: 100%;
-		overflow: hidden;
+		overflow: auto;
     border: 1px solid var(--color-text);
 	}
 </style>

src/routes/admin/game.ts

@@ -1,75 +0,0 @@
-import { words, allowed } from './words.server';
-
-export class Game {
-	index: number;
-	guesses: string[];
-	answers: string[];
-	answer: string;
-
-	/**
-	 * Create a game object from the player's cookie, or initialise a new game
-	 */
-	constructor(serialized: string | undefined = undefined) {
-		if (serialized) {
-			const [index, guesses, answers] = serialized.split('-');
-
-			this.index = +index;
-			this.guesses = guesses ? guesses.split(' ') : [];
-			this.answers = answers ? answers.split(' ') : [];
-		} else {
-			this.index = Math.floor(Math.random() * words.length);
-			this.guesses = ['', '', '', '', '', ''];
-			this.answers = [];
-		}
-
-		this.answer = words[this.index];
-	}
-
-	/**
-	 * Update game state based on a guess of a five-letter word. Returns
-	 * true if the guess was valid, false otherwise
-	 */
-	enter(letters: string[]) {
-		const word = letters.join('');
-		const valid = allowed.has(word);
-
-		if (!valid) return false;
-
-		this.guesses[this.answers.length] = word;
-
-		const available = Array.from(this.answer);
-		const answer = Array(5).fill('_');
-
-		// first, find exact matches
-		for (let i = 0; i < 5; i += 1) {
-			if (letters[i] === available[i]) {
-				answer[i] = 'x';
-				available[i] = ' ';
-			}
-		}
-
-		// then find close matches (this has to happen
-		// in a second step, otherwise an early close
-		// match can prevent a later exact match)
-		for (let i = 0; i < 5; i += 1) {
-			if (answer[i] === '_') {
-				const index = available.indexOf(letters[i]);
-				if (index !== -1) {
-					answer[i] = 'c';
-					available[index] = ' ';
-				}
-			}
-		}
-
-		this.answers.push(answer.join(''));
-
-		return true;
-	}
-
-	/**
-	 * Serialize game state so it can be set as a cookie
-	 */
-	toString() {
-		return `${this.index}-${this.guesses.join(' ')}-${this.answers.join(' ')}`;
-	}
-}

src/routes/admin/reduced-motion.ts

@@ -1,23 +0,0 @@
-import { readable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-const reduced_motion_query = '(prefers-reduced-motion: reduce)';
-
-const get_initial_motion_preference = () => {
-	if (!browser) return false;
-	return window.matchMedia(reduced_motion_query).matches;
-};
-
-export const reduced_motion = readable(get_initial_motion_preference(), (set) => {
-	if (browser) {
-		const set_reduced_motion = (event: MediaQueryListEvent) => {
-			set(event.matches);
-		};
-		const media_query_list = window.matchMedia(reduced_motion_query);
-		media_query_list.addEventListener('change', set_reduced_motion);
-
-		return () => {
-			media_query_list.removeEventListener('change', set_reduced_motion);
-		};
-	}
-});

src/routes/graphs/+layout.ts

@@ -11,9 +11,6 @@ export const load: LayoutLoad = async ({ fetch }) => {
   let store: string | null;
   const apiBaseUrl = 'https://wip.chellaris.net/api';
 
-  // Auth Cookies
-  
-
   // Chellaris Data Code
   const chellarisData: ChellarisInfo = await (await fetch(apiBaseUrl + '/v3/full_view_data')).json();