Full Empire Editing Functionality

src/lib/types/chellaris.ts

@@ -101,7 +101,7 @@ export const createBlankEmpire = (
     machine: false,
     portrait_id: 0,
     portrait_group_id: 0,
-    ethics: [],
+    ethics: {},
     discord_user: undefined,
     name: ""
   };

src/lib/types/stellaris.ts

@@ -68,14 +68,11 @@ export type Ethic = {
   id: number,
   display: string,
   gestalt: boolean,
-  fanatic?: boolean,
 }
 
 export type EmpireEthic = {
   ethic_id: number,
-  display: string,
+  fanatic: boolean,
-  gestalt: boolean,
-  fanatic?: boolean,
 }
 
 export type Phenotype = {

src/routes/admin/+page.svelte

@@ -39,7 +39,6 @@
 	let empireList: { [key: number]: ChellarisEmpire } = {};
 	let empireData: ChellarisEmpire;
 	let addingNewEmpire = false;
-	$: console.log("adding:", addingNewEmpire);
 	let loadingEmpireData = true;
 
 	const updateGameData = () => {
@@ -54,17 +53,19 @@
 					groupList = data.groups;
 					empireList = {};
 					Object.values(data.empires).forEach((empire: ChellarisEmpire) => {
-						if ($AdminSelectedGroupStore[$AdminSelectedGameStore] === undefined) {
+						if (typeof $AdminSelectedGroupStore[$AdminSelectedGameStore] === 'undefined') {
 							$AdminSelectedGroupStore[$AdminSelectedGameStore] = {};
 						}
-						if ($AdminSelectedGroupStore[$AdminSelectedGameStore][empire.group]) {
+						if (typeof $AdminSelectedGroupStore[$AdminSelectedGameStore][empire.group] !== 'undefined') {
 							empireList[empire.id] = empire;
 						}
 					});
 
 					delay(200).then(() => (loadingGameData = false));
 					delay(200).then(() => (loaded = true));
+					if (typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] !== 'undefined') {
 						loadEmpireData();
+					}
 				});
 			});
 		}
@@ -94,7 +95,10 @@
 		}
 	}
 
-	AdminSelectedGameStore.subscribe(() => {
+	AdminSelectedGameStore.subscribe((game) => {
+		if (typeof game === 'undefined') {
+			game = Object.values(gameList)[0].id;
+		}
 		updateGameData();
 		loadingGameData = true;
 	});
@@ -217,7 +221,9 @@
 	const setActiveEmpire = (empireId: number) => {
 		loadingEmpireData = true;
 		$AdminSelectedEmpireStore[$AdminSelectedGameStore] = empireId;
+		if (typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] !== 'undefined') {
 			loadEmpireData();
+		}
 	};
 
 	const addEmpire = () => {
@@ -228,13 +234,13 @@
 		list2.push(list2.length); */
 	};
 
-	const finishAddNewEmpire = (event: { detail: { new_id: number; }; }) => {
+	const finishAddNewEmpire = (event: { detail: { new_id: number } }) => {
 		$AdminSelectedEmpireStore[$AdminSelectedGameStore] = event.detail.new_id;
 		updateGameData();
 	};
 
 	const deleteEmpire = (empire: ChellarisEmpire) => {
-		fetch(apiBaseUrl + '/v3/empire?game_id=' + empire.game + '&group_id=' + empire.group + '&empire_id=' + empire.id, {
+		fetch(apiBaseUrl + '/v3/empire?game_id=' + empire.game + '&empire_id=' + empire.id, {
 			method: 'DELETE',
 			headers: {
 				'Content-Type': 'application/json',
@@ -358,7 +364,7 @@
 							>
 								<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 || "N/A"}
+									{empire.discord_user || 'N/A'}
 								</div>
 								<button class="delete-box" on:click={() => deleteEmpire(empire)}>
 									<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -375,7 +381,7 @@
 							<div class="list-card loading">
 								<div class="card-content active">{empireData.name}</div>
 								<div class="card-content active">
-									{empireData.discord_user || "N/A"}
+									{empireData.discord_user || 'N/A'}
 								</div>
 							</div>
 						{:else}
@@ -388,10 +394,21 @@
 			</div>
 		</List>
 		<List area="details" listTitle="Empire Details">
-			{#if loadingEmpireData || loadingGameData}
+			{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
+			 <div>
+				Select Empire
+			 </div>
+			{:else if loadingEmpireData || loadingGameData}
 				<LoadingSpinnerLocal />
 			{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
-				<EmpireDetails bind:empire={empireData} groups={groupList} {auth} bind:newEmpire={addingNewEmpire} on:updated={updateGameData} on:created={finishAddNewEmpire}/>
+				<EmpireDetails
+					bind:empire={empireData}
+					groups={groupList}
+					{auth}
+					bind:newEmpire={addingNewEmpire}
+					on:updated={updateGameData}
+					on:created={finishAddNewEmpire}
+				/>
 			{/if}
 		</List>
 	{:else}

src/routes/admin/+page.ts

@@ -15,6 +15,10 @@ export async function load ({ fetch }) {
     if (typeof store === 'string') {
       AdminSelectedGameStore.set(JSON.parse(store));
     }
+    else {
+      AdminSelectedGameStore.set(Object.values(gameList)[0].id);
+      localStorage.setItem('adminGameSelection', JSON.stringify(Object.values(gameList)[0].id));
+    }
 
     // Group Selection
     store = localStorage.getItem('adminGroupSelection');

src/routes/admin/EmpireDetails.svelte

@@ -4,6 +4,7 @@
 	import { MACHINE_GROUP_ID, apiBaseUrl } from '$lib/components/consts';
 	import { LeanChellarisDataStore } from '$lib/stores/ChellarisData';
 	import type { ChellarisEmpire, ChellarisGameGroup } from '$lib/types/chellaris';
+	import type { EmpireEthic } from '$lib/types/stellaris';
 	import { createEventDispatcher } from 'svelte';
 
 	export let empire: ChellarisEmpire;
@@ -12,15 +13,47 @@
 	export let auth: string;
 
 	let newEmpirePrepared = false;
+	let newEmpireError: [boolean, string] = [false, ''];
+
+	let oldEmpireData = { ...empire };
+	let ethicsBuffer: { [key: number]: EmpireEthic } = {...empire.ethics};
 
 	const dispatch = createEventDispatcher();
 
-	$: {
+	let ethicsIdArray: [boolean, boolean][] = [];
-		console.log($LeanChellarisDataStore);
+	Object.values($LeanChellarisDataStore.ethics).map((ethic) => (ethicsIdArray[ethic.id] = [false, false]));
-		console.log(empire);
+	Object.values(empire ? ethicsBuffer : []).map((ethic) => (ethicsIdArray[ethic.ethic_id] = [true, false]));
-	}
+	Object.values(empire ? ethicsBuffer : [])
+		.filter((ethic) => ethic.fanatic)
+		.map((entry) => (ethicsIdArray[entry.ethic_id][1] = true));
 
-	let oldEmpireData = { ...empire };
+	const updateRegularEthicsSelection = () => {
+		ethicsIdArray.forEach((selected, idx) => {
+			if (selected[0]) {
+				ethicsBuffer[idx] = {
+					ethic_id: idx,
+					fanatic: selected[1]
+				};
+			} else {
+				ethicsIdArray[idx][1] = false;
+				delete ethicsBuffer[idx];
+			}
+		});
+	};
+
+	const updateFanaticEthicsSelection = () => {
+		ethicsIdArray.forEach((selected, idx) => {
+			if (selected[0] || selected[1]) {
+				ethicsBuffer[idx] = {
+					ethic_id: idx,
+					fanatic: selected[1]
+				};
+				ethicsIdArray[idx][0] = true;
+			} else {
+				delete ethicsBuffer[idx];
+			}
+		});
+	};
 
 	const updateEmpire = () => {
 		// Generate Diff:
@@ -42,10 +75,8 @@
 			diffEmpire.gestalt = empire.gestalt;
 		}
 
-		if (JSON.stringify(oldEmpireData.ethics) != JSON.stringify(empire.ethics)) {
+		if (JSON.stringify(oldEmpireData.ethics) != JSON.stringify(ethicsBuffer)) {
-			console.log('A', oldEmpireData.ethics);
+			diffEmpire.ethics = Object.values(ethicsBuffer);
-			console.log('B', empire.ethics);
-			diffEmpire.ethics = empire.ethics;
 		}
 
 		if (oldEmpireData.portrait_id != empire.portrait_id) {
@@ -77,60 +108,51 @@
 	};
 
 	const createEmpire = () => {
-		// Generate Diff:
+		let validData = true;
-		/* let diffEmpire: any = {};
+		let errorMessages = [];
 
-		if (oldEmpireData.name != empire.name) {
+		if (empire.name == '') {
-			diffEmpire.empire_name = empire.name;
+			// Mark Name Input Window Red
+			validData = false;
+			errorMessages.push('Empire Name is invalid!');
 		}
 
-		if (oldEmpireData.discord_user != empire.discord_user) {
+		if (Object.values(ethicsBuffer).length == 0) {
-			diffEmpire.discord_user = empire.discord_user;
+			// Mark Ethics Input Window Red
+			validData = false;
+			errorMessages.push('No Ethics Selected!');
 		}
 
-		if (oldEmpireData.group != empire.group) {
+		if (validData) {
-			diffEmpire.group_id = empire.group;
+			let newEmpireData: any = {};
-		}
+			newEmpireData.group_id = empire.group;
-
+			newEmpireData.game_id = empire.game;
-		if (oldEmpireData.gestalt != empire.gestalt) {
+			newEmpireData.empire_name = empire.name;
-			diffEmpire.gestalt = empire.gestalt;
+			newEmpireData.discord_user = empire.discord_user;
-		}
+			newEmpireData.gestalt = empire.gestalt;
-
+			newEmpireData.portrait_id = empire.portrait_id;
-		if (JSON.stringify(oldEmpireData.ethics) != JSON.stringify(empire.ethics)) {
+			newEmpireData.portrait_group_id = empire.portrait_group_id;
-			console.log('A', oldEmpireData.ethics);
+			newEmpireData.ethics = Object.values(ethicsBuffer);
-			console.log('B', empire.ethics);
-			diffEmpire.ethics = empire.ethics;
-		}
-
-		if (oldEmpireData.portrait_id != empire.portrait_id) {
-			diffEmpire.portrait_id = empire.portrait_id;
-		}
-
-		if (oldEmpireData.portrait_group_id != empire.portrait_group_id) {
-			diffEmpire.portrait_group_id = empire.portrait_group_id;
-		}
-
-		if (Object.values(diffEmpire).length != 0) {
-			diffEmpire.empire_id = empire.id;
-			diffEmpire.game_id = empire.game;
 			fetch(apiBaseUrl + '/v3/empire', {
-				method: 'PUT',
+				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',
 					'x-api-key': auth
 				},
-				body: JSON.stringify(diffEmpire)
+				body: JSON.stringify(newEmpireData)
 			}).then((response) => {
 				response.json().then((result) => {
 					empire = result;
 					oldEmpireData = { ...empire };
-					dispatch('updated');
-				});
-			});
-		} */
 					dispatch('created', {
-			new_id: 32
+						new_id: empire.id
 					});
+				});
+			});
+		} else {
+			newEmpireError[0] = true;
+			newEmpireError[1] = errorMessages.join(' | ');
+		}
 	};
 
 	// Dropdown UUID to make the Click Event work properly
@@ -155,6 +177,7 @@
 
 		if (!newEmpire) {
 			newEmpirePrepared = false;
+			newEmpireError = [false, ''];
 		}
 	}
 </script>
@@ -216,25 +239,42 @@
 	<label for="text-discord">Discord User:</label>
 	<input id="text-discord" type="text" bind:value={empire.discord_user} />
 
-	<DropDown dropdownTitle={'Ethics*: ' + Object.values(empire.ethics).map((selection) => $LeanChellarisDataStore.ethics[selection.ethic_id].display).join(", ")} dropdownId={ethicsDropdownId}>
+	<DropDown
-		{#each Object.values($LeanChellarisDataStore.ethics) as ethic}
+		dropdownTitle={'Ethics*: ' +
+			Object.values(ethicsBuffer)
+				.map((selection) => (selection.fanatic ? 'Fanatic ' : '') + $LeanChellarisDataStore.ethics[selection.ethic_id].display)
+				.join(', ')}
+		dropdownId={ethicsDropdownId}
+	>
+		{#each Object.values($LeanChellarisDataStore.ethics) as ethic, index}
 			{#if ethic}
 				<DropDownElement dropdownId={ethicsDropdownId}>
-					<input id={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId} type="radio" bind:group={empire.ethics} value={ethic.id} />
+					<input
+						id={'fanatic' + ethic.id}
+						data-dropdown={ethicsDropdownId}
+						type="checkbox"
+						bind:checked={ethicsIdArray[index][1]}
+						on:change={updateFanaticEthicsSelection}
+						value={ethic.id}
+					/>
+					<label for={'fanatic' + ethic.id} data-dropdown={ethicsDropdownId}>Fanatic</label>
+					<input
+						id={'checkbox' + ethic.id}
+						data-dropdown={ethicsDropdownId}
+						type="checkbox"
+						bind:checked={ethicsIdArray[index][0]}
+						on:change={updateRegularEthicsSelection}
+						value={ethic.id}
+					/>
 					<label for={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId}>{ethic.display}</label>
 				</DropDownElement>
 			{/if}
 		{/each}
 	</DropDown>
-	<div>
-		{#if empire.ethics}
-			Ethics*:
-			{#each Object.values(empire.ethics) as ethic}
-				{ethic.fanatic ? ' Fanatic' : ''} {$LeanChellarisDataStore.ethics[ethic.ethic_id].display},
-			{/each}
-		{/if}
-	</div>
 	<button on:click={createEmpire}>Save</button>
+	{#if newEmpireError[0]}
+		<div>{newEmpireError[1]}</div>
+	{/if}
 {:else if !newEmpire}
 	<div>
 		{#if empire}
@@ -299,24 +339,38 @@
 			<br />
 			<label for="text-discord">Discord User:</label>
 			<input id="text-discord" type="text" bind:value={empire.discord_user} />
-			<DropDown dropdownTitle={'Ethics*: ' + Object.values(empire.ethics).map((selection) => (selection.fanatic ? "Fanatic " : "") + $LeanChellarisDataStore.ethics[selection.ethic_id].display).join(", ")} dropdownId={ethicsDropdownId}>
+			<DropDown
-				{#each Object.values($LeanChellarisDataStore.ethics) as ethic}
+				dropdownTitle={'Ethics*: ' +
+					Object.values(ethicsBuffer)
+						.map((selection) => (selection.fanatic ? 'Fanatic ' : '') + $LeanChellarisDataStore.ethics[selection.ethic_id].display)
+						.join(', ')}
+				dropdownId={ethicsDropdownId}
+			>
+				{#each Object.values($LeanChellarisDataStore.ethics) as ethic, index}
 					{#if ethic}
 						<DropDownElement dropdownId={ethicsDropdownId}>
-							<input id={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId} type="radio" bind:group={empire.ethics} value={ethic.id} />
+							<input
+								id={'fanatic' + ethic.id}
+								data-dropdown={ethicsDropdownId}
+								type="checkbox"
+								bind:checked={ethicsIdArray[index][1]}
+								on:change={updateFanaticEthicsSelection}
+								value={ethic.id}
+							/>
+							<label for={'fanatic' + ethic.id} data-dropdown={ethicsDropdownId}>Fanatic</label>
+							<input
+								id={'checkbox' + ethic.id}
+								data-dropdown={ethicsDropdownId}
+								type="checkbox"
+								bind:checked={ethicsIdArray[index][0]}
+								on:change={updateRegularEthicsSelection}
+								value={ethic.id}
+							/>
 							<label for={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId}>{ethic.display}</label>
 						</DropDownElement>
 					{/if}
 				{/each}
 			</DropDown>
-			<div>
-				{#if empire.ethics}
-					Ethics:
-					{#each Object.values(empire.ethics) as ethic}
-						{ethic.fanatic ? ' Fanatic' : ''} {$LeanChellarisDataStore.ethics[ethic.ethic_id].display},
-					{/each}
-				{/if}
-			</div>
 		{:else}
 			No Empire Selected
 		{/if}

src/routes/graphs/excel-style/+page.svelte

@@ -118,7 +118,7 @@
 						const tmpEthicPageData = newPageData.ethicsData[ethic.ethic_id];
 
 						if (typeof tmpEthicPageData !== 'undefined') {
-							tmpEthicPageData.display = ethic.display;
+							tmpEthicPageData.display = $ChellarisDataStore.ethics[ethic.ethic_id].display;
 							if (!ethic.fanatic) {
 								tmpEthicPageData.regular = tmpEthicPageData.regular + 1;
 							} else {
@@ -135,8 +135,8 @@
 								fanatic: number;
 							} = {
 								id: ethic.ethic_id,
-								gestalt: ethic.gestalt,
+								gestalt: $ChellarisDataStore.ethics[ethic.ethic_id].gestalt,
-								display: ethic.display,
+								display: $ChellarisDataStore.ethics[ethic.ethic_id].display,
 								regular: 0,
 								fanatic: 0
 							};