37 lines
1 KiB
Svelte
37 lines
1 KiB
Svelte
<script lang="ts">
|
|
import DropDown from '$lib/components/DropDown.svelte';
|
|
import DropDownElement from '$lib/components/DropDownElement.svelte';
|
|
import SelectedGameStore from '$lib/stores/GameFilter';
|
|
import ChellarisDataStore from '$lib/stores/ChellarisData';
|
|
|
|
// Game Selection Code
|
|
$: {
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.setItem('gameSelection', JSON.stringify($SelectedGameStore));
|
|
}
|
|
};
|
|
|
|
// Dropdown UUID to make the Click Event work properly
|
|
const dropdownId = crypto.randomUUID();
|
|
</script>
|
|
|
|
<DropDown {dropdownId} dropdownTitle={$ChellarisDataStore.games[$SelectedGameStore]?.name}>
|
|
{#each Object.values($ChellarisDataStore.games) as game}
|
|
<DropDownElement {dropdownId}>
|
|
<input
|
|
id={'checkbox' + game.id}
|
|
data-dropdown={dropdownId}
|
|
type="radio"
|
|
bind:group={$SelectedGameStore}
|
|
value={game.id}
|
|
/>
|
|
<label for={'checkbox' + game.id} data-dropdown={dropdownId}>{game.name}</label>
|
|
</DropDownElement>
|
|
{/each}
|
|
</DropDown>
|
|
|
|
<style>
|
|
label:hover {
|
|
color: var(--color-active-1);
|
|
}
|
|
</style>
|