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"> <i>BGG mail</i></a>. 
    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>user</th>
            <th></th>
            <th>game</th>
            <th></th>
            <th>notes</th>
            <th>price</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> <a
                    target="_blank"
                    href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
                        {row.name}</a>
                </td>
                <td>
                 <a
                    target="_blank"
                    href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
                     <img src={row.thumbnail} height="60"/></a>
                </td>
                <td>{row.notes}</td>
                <td>{row.price??''}</td>
            </tr>
        {/each}
    </tbody>
</table>
</article>


<script> 
    // TODO sort
    // TODO hide games I'm not interested in
    // TODO add cart
    // TODO prettify via beercss
    import { DataHandler, Search } from '@vincjo/datatables'

    export let data;

    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);
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
</style>