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

<div class="games">
    {#each games as game}
        <div class="grid top-align">
            <a
                class="s12 m2"
                target="_blank"
                href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
                <img loading="lazy" src={game.thumbnail} height="80" /></a>
            <div class="grid s12 m10">
                <div class="s8 left-align">
                    <strong>
                        <a
                            class="game-desc"
                            target="_blank"
                            href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
                            {game.name}</a>
                    </strong>
                </div>
                <div class="s3">
                    <div>
                        <a
                            target="_blank"
                            href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
                            >{game.username}</a>
                        &nbsp;
                        <a
                            target="_blank"
                            href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
                            <i>email</i></a>
                    </div>
                    <div class="neighbourhood">
                        {sellers[game.username]?.neighbourhood ?? ''}
                    </div>
                </div>
                <div class="s1 right-align">
                    {game.price ? '$' + game.price : ''}
                </div>
                <div class="notes s8">{game.notes}</div>
                {#if game.updated_at}
                    <div class="s4 updated-at">
                        {pretty_date(game.updated_at)}
                    </div>
                {/if}
            </div>
        </div>
        <div class="medium-divider"></div>
    {/each}
</div>

<script>
    export let games;
    export let sellers = {};

    // add filter
    // add sort (user, game, price)

    function pretty_date(date) {
        if (!date) return '';

        return date.replace(/T.*/, '');
    }
</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;
    }
</style>