bgg-ottawa-sell-club/src/routes/+page.svelte

<article>
    <h1>Ottawa board games for sale and to trade</h1>

    <p>
        This is a list of games for sale or trade of people living in the Ottawa
        region, taken from their profiles on
        <a href="https://boardgamegeek.com">Board Game Geek</a>.
    </p>

    <p>
        If you want to be added to the list of sellers, you can send me a
        <a
            target="_blank"
            href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
            BGG mail</a
        >. All I need is your BGG username, and I'll be able to gather all your
        games tagged <em>For Trade</em>. If there is a price mentioned in the
        <em>Trading Notes</em>
        of the game (that is, any number prefixed with a <em>$</em>), it'll be
        assumed to be the asking price.
    </p>

    <p>
        Have questions, suggestions, anything else? Discussion of this service
        happens in the <a
            href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
            >Ottawa Guild</a
        >.
    </p>

    <header>
        <Search {handler} />
    </header>

    <table>
        <thead>
            <tr>
                <Th {handler} orderBy="username">user</Th>
                <Th {handler} orderBy="name">game</Th>
                <th>notes</th>
                <Th {handler} orderBy="price">price</Th>
                <th>last updated</th>
            </tr>
        </thead>
        <tbody>
            {#each $rows as row}
                <tr>
                    <td
                        ><a
                            target="_blank"
                            href={`https://boardgamegeek.com/collection/user/${row.username}?trade=1&subtype=boardgame&ff=1`}
                            >{row.username}</a>
                        &nbsp;
                        <a
                            target="_blank"
                            href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>
                            <i>email</i></a>
                    </td><td>
                        <div class="game-cell">
                            <a
                                class="game-desc"
                                target="_blank"
                                href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
                                {row.name}</a>
                            <a
                                target="_blank"
                                href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
                                <img src={row.thumbnail} height="60" /></a>
                        </div>
                    </td>
                    <td>{row.notes}</td>
                    <td>{row.price ?? ''}</td>
                    <td><small>{pretty_date(row.updated_at)}</small></td>
                </tr>
            {/each}
        </tbody>
    </table>
</article>

<script>
    // TODO sort
    // TODO hide games I'm not interested in
    // TODO add cart
    // TODO prettify via beercss
    // TODO use https://github.com/dasDaniel/svelte-table#readme
    import { DataHandler, Search, Th } from '@vincjo/datatables';

    export let data;

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

        return date.replace(/T.*/, '');
    }
    const handler = new DataHandler(data.games, { rowsPerPage: 500 });
    const rows = handler.getRows();
</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;
    }
    p {
        font-size: var(--font-size-10);
        max-width: 60em;
        text-align: justify;
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .game-cell {
        display: flex;
    }
    .game-cell > * {
        display: block;
    }
    .game-desc {
        flex: 1;
    }
    td {
        font-size: var(--font-size-10);
    }
</style>