<svelte:head>
    <title>Ottawa board games, trades and sales</title>
</svelte:head>
<main class="responsive">
    <slot />
</main>

<script>
    import 'beercss/dist/cdn/beer.min.css';
    import { setContext } from 'svelte';
    import { dev, browser } from '$app/environment';
    import { readable, writable } from 'svelte/store';
    import { persisted } from 'svelte-persisted-store';
    import u from '@yanick/updeep-remeda';

    const prefix = dev ? '/dev/' : '/db/';

    const games = readable([], async (set) => {
        if (!browser) return () => {};

        fetch(prefix + 'games.json')
            .then((doc) => doc.json())
            .then(set);

        return () => {};
    });
    setContext('games', games);

    const sellers = readable({}, async (set) => {
        if (!browser) return () => {};

        const sellers_list = await fetch(prefix + 'sellers.json').then((doc) =>
            doc.json(),
        );
        set(
            Object.fromEntries(
                sellers_list.map((seller) => [seller.username, seller]),
            ),
        );
        return () => {};
    });
    setContext('sellers', sellers);

    const games_hidden = writable(
        JSON.parse(localStorage.getItem('games_hidden') || '{}'),
    );
    games_hidden.toggle = (username, bgg_id) => {
        console.log({ username, bgg_id });
        games_hidden.update(
            u.updateIn([username, bgg_id].join('!'), (v) => !v),
        );
    };
    setContext('games_hidden', games_hidden);
    games_hidden.subscribe((data) =>
        localStorage.setItem('games_hidden', JSON.stringify(data)),
    );
</script>

<style>
    :global(:root) {
        --font-size-10: 1rem;
        --font-size-11: 1.5rem;
        --font-size-12: 1.75rem;
        --font-size-13: 2rem;
        --font-size-14: 2.25rem;
    }
</style>
