yanick
/
bgg-ottawa-sell-club
2
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

add sorting

no-ssr
Yanick Champoux 2024-02-01 14:37:15 -05:00
parent ae91cf8e65
commit 81164cd897
2 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc.cjs
View File

@ -9,4 +9,5 @@ module.exports = {
svelteSortOrder: 'options-markup-scripts-styles',
svelteStrictMode: false,
svelteAllowShorthand: true,
bracketSameLine: true,
};

145
src/routes/+page.svelte
View File

@ -1,84 +1,95 @@
<article>
<h1>Ottawa board games for sale and to trade</h1>
<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>
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>
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>
<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>
<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}
<table>
<thead>
<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>
<Th {handler} orderBy="username">user</Th>
<Th {handler} orderBy="name">game</Th>
<th>notes</th>
<Th {handler} orderBy="price">price</Th>
</tr>
{/each}
</tbody>
</table>
</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>
</tr>
{/each}
</tbody>
</table>
</article>
<script>
<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 } from '@vincjo/datatables'
import { DataHandler, Search, Th } from '@vincjo/datatables';
export let data;
const handler = new DataHandler(data.games, { rowsPerPage: 500 })
const rows = handler.getRows()
const handler = new DataHandler(data.games, { rowsPerPage: 500 });
const rows = handler.getRows();
</script>
<style>
<style>
:global(:root) {
--font-size-10: 1rem;
--font-size-11: 1.5rem;
@ -95,4 +106,16 @@
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>