bgg-ottawa-sell-club/src/routes/GameList.svelte

<div class="options">
    <label class="switch icon">
        <input type="checkbox" bind:checked={show_hidden} />
        <span> show hidden </span>
    </label>
    <div class="field label prefix border">
        <i>search</i>
        <input type="text" bind:value={search_text} />
        <label>Search</label>
    </div>
</div>

<div class="games">
    {#each games.filter((game) => {
        if (search_text.length < 3) return true;
        const target = search_text.toLowerCase();
        return game.name.toLowerCase().includes(target) || game.username
                .toLowerCase()
                .includes(target);
    }) as game}
        {#if show_hidden || !game.is_hidden}
            <Game
                on:toggle_visibility={() => toggle_visibility(game.id)}
                on:toggle_cart={() => toggle_cart(game.id)}
                {...game}
                seller={sellers[game.username]} />
            <div class="medium-divider"></div>
        {/if}
    {/each}
</div>

<script>
    import { getContext, createEventDispatcher } from 'svelte';
    import Game from './Game.svelte';

    export let games = [];
    export let sellers = {};

    let show_hidden = false;

    let search_text = '';

    const dispatch = createEventDispatcher();
    const toggle_visibility = (id) => dispatch('toggle_game_visibility', id);
    const toggle_cart = (id) => dispatch('toggle_cart', id);

    // add filter
    // add sort (user, game, price)
</script>

<style>
    .games {
        margin-top: 3em;
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .grid {
        margin-right: 2em;
        font-size: var(--font-size-10);
    }
    .notes {
        margin-top: 1em;
        margin-left: 1em;
    }
    .updated-at {
        font-size: smaller;
        text-align: left;
    }
    .updated-at::before {
        content: 'last update: ';
    }
    .neighbourhood {
        font-size: smaller;
    }
    .hidden {
        opacity: 60%;
    }
    .switch span {
        font-size: var(--font-size-10);
        padding-left: 1em;
    }
    .options {
        display: flex;
        flex-direction: row-reverse;
    }
    .options > div {
        margin-right: 1em;
    }
</style>