104 lines
2.9 KiB
Svelte
104 lines
2.9 KiB
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>
|