chellaris-sign-up-site/src/routes/graphs/GameGroupSelection.svelte

<script lang="ts">
	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 ChellarisDataStore from '$lib/stores/ChellarisData';
	import type { ChellarisGame, ChellarisGameGroup, ChellarisInfo } from '$lib/types/chellaris';

	let selectedGame: number;
	let selectedGameGroups: Array<number> = [];
	let selectedGameGroupsMap: Map<number, Array<number>> = new Map();

	let gameGroups: Map<number, ChellarisGameGroup> = new Map();
	let chellarisData: ChellarisInfo = {
		games: new Map(),
		ethics: [],
		portraits: []
	};

	// Chellaris Data Code
  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') {
			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?
	});

	// 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();
</script>

<DropDown {dropdownId} dropdownTitle={(selectedGameGroups.length > 1 ? "Groups " : "Group ") + selectedGameGroups.map((selection) => gameGroups.get(selection)?.name).join(", ")}>
	{#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);
	}

	:hover {
		color: var(--color-active-1) !important;
	}
</style>