57 lines
1.4 KiB
Svelte
57 lines
1.4 KiB
Svelte
<header>
|
|
<nav>
|
|
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
|
|
<a class="button circle transparent" href="/">
|
|
<i>arrow_back</i>
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<article>
|
|
<p>Currently listing {nbr_games} games from {nbr_sellers} sellers.</p>
|
|
|
|
{#each Object.keys($sellers).sort() as username (username)}
|
|
<div class="row">
|
|
<BggUser {username} />
|
|
<span class="max neighbourhood">
|
|
{#if $sellers[username].neighbourhood}
|
|
({$sellers[username].neighbourhood})
|
|
{/if}
|
|
</span>
|
|
<span class="nbr_games">
|
|
{nbr_games_for(username)}
|
|
</span>
|
|
</div>
|
|
{/each}
|
|
</article>
|
|
|
|
<script>
|
|
// TODO avatars?
|
|
// TODO BggUser component
|
|
import { getContext } from 'svelte';
|
|
|
|
import BggUser from '$lib/components/BggUser.svelte';
|
|
|
|
const games = getContext('games');
|
|
const sellers = getContext('sellers');
|
|
|
|
$: nbr_games = $games.length;
|
|
$: nbr_sellers = Object.values($sellers).length;
|
|
|
|
const nbr_games_for = (username) =>
|
|
$games.filter((game) => game.username === username).length;
|
|
</script>
|
|
|
|
<style>
|
|
.nbr_games:after {
|
|
content: ' games';
|
|
}
|
|
.nbr_games:before {
|
|
content: 'selling ';
|
|
}
|
|
div {
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
}
|
|
</style>
|