2023-08-12 19:58:23 +02:00
< script lang = "ts" >
2023-08-13 03:25:16 +02:00
import DropDown from '$lib/components/DropDown.svelte';
2023-08-12 19:58:23 +02:00
import DropDownElement from '$lib/components/DropDownElement.svelte';
import SelectedGameGroupsStore from '$lib/stores/GameGroupFilter';
2023-08-13 03:25:16 +02:00
import SelectedGameStore from '$lib/stores/GameFilter';
import ChellarisDataStore from '$lib/stores/ChellarisData';
import type { ChellarisGame , ChellarisGameGroup , ChellarisInfo } from '$lib/types/chellaris';
2023-08-12 19:58:23 +02:00
2023-08-14 20:17:59 +02:00
let selectedGame: number;
let selectedGameGroups: Array< number > = [];
let selectedGameGroupsMap: Map< number , Array < number > > = new Map();
2023-08-12 19:58:23 +02:00
2023-08-14 20:17:59 +02:00
let gameGroups: Map< number , ChellarisGameGroup > = new Map();
2023-08-13 03:25:16 +02:00
let chellarisData: ChellarisInfo = {
games: new Map(),
ethics: [],
portraits: []
};
// Chellaris Data Code
const updateGameGroups = () => {
let tmpData;
2023-08-14 20:17:59 +02:00
if (!selectedGame) {
2023-08-13 03:25:16 +02:00
tmpData = chellarisData.games.get(chellarisData.games.keys().next().value);
}
else {
tmpData = chellarisData.games.get(selectedGame);
2023-08-12 19:58:23 +02:00
}
2023-08-13 03:25:16 +02:00
if (typeof tmpData !== 'undefined') {
gameGroups = tmpData.groups;
}
}
2023-08-13 03:34:46 +02:00
2023-08-13 03:25:16 +02:00
ChellarisDataStore.subscribe((data) => {
chellarisData = data;
2023-08-12 19:58:23 +02:00
2023-08-13 03:25:16 +02:00
updateGameGroups();
// TODO Update selection if Groups Differ? Does this value ever even update without a full page reload?
});
2023-08-12 19:58:23 +02:00
2023-08-13 03:25:16 +02:00
// 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);
2023-08-12 19:58:23 +02:00
}
2023-08-13 03:25:16 +02:00
};
SelectedGameStore.subscribe((selection) => {
selectedGame = selection;
updateGameGroups();
if (selectedGameGroupsMap.size != 0) {
updateSelectedGroups();
}
});
2023-08-12 19:58:23 +02:00
SelectedGameGroupsStore.subscribe((selection) => {
2023-08-13 03:25:16 +02:00
selectedGameGroupsMap = selection;
updateSelectedGroups();
2023-08-12 19:58:23 +02:00
2023-08-13 03:25:16 +02:00
if (typeof localStorage !== 'undefined') {
2023-08-12 19:58:23 +02:00
localStorage.setItem('gameGroupSelection', JSON.stringify(Array.from(selection.entries())));
}
});
const updateGameGroupSelection = () => {
SelectedGameGroupsStore.update((selection) => selection.set(selectedGame, selectedGameGroups));
};
2023-08-13 03:25:16 +02:00
const dropdownId = crypto.randomUUID();
2023-08-12 19:58:23 +02:00
< / script >
2023-08-13 03:34:46 +02:00
< DropDown { dropdownId } dropdownTitle = {( selectedGameGroups . length > 1 ? "Groups " : "Group " ) + selectedGameGroups . map (( selection ) => gameGroups . get ( selection ) ? . name ). join ( ", " )} >
2023-08-13 03:25:16 +02:00
{ #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 }
2023-08-12 19:58:23 +02:00
< / DropDown >
< style >
2023-08-13 03:25:16 +02:00
:checked + label {
color: var(--color-active-2);
}
2023-08-12 19:58:23 +02:00
2023-08-13 03:25:16 +02:00
:hover {
color: var(--color-active-1) !important;
}
2023-08-12 19:58:23 +02:00
< / style >