add listing stats

package.json

@@ -17,8 +17,7 @@
     "devDependencies": {
         "@changesets/cli": "^2.27.1",
         "@playwright/test": "^1.28.1",
-        "@sveltejs/adapter-auto": "^3.0.0",
-        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/kit": "^2.5.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@types/eslint": "8.56.0",
         "eslint": "^8.56.0",
@@ -34,7 +33,6 @@
     },
     "type": "module",
     "dependencies": {
-        "@sveltejs/adapter-node": "^4.0.1",
         "@sveltejs/adapter-static": "^3.0.1",
         "@vincjo/datatables": "^1.14.4",
         "@yanick/updeep-remeda": "^2.2.0",

src/lib/components/BggUser.svelte

@@ -0,0 +1,13 @@
+<a target="_blank" {href}>{username}</a>
+
+<script>
+    export let username;
+    $: href = `https://boardgamegeek.com/collection/user/${username}?trade=1&subtype=boardgame&ff=1`;
+</script>
+
+<style>
+    a {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+</style>

src/routes/+layout.svelte

@@ -15,7 +15,7 @@
 
     const prefix = dev ? '/dev/' : '/db/';
 
-    const games = readable([], async (set) => {
+    const games = readable([], (set) => {
         if (!browser) return () => {};
 
         fetch(prefix + 'games.json')
@@ -26,17 +26,18 @@
     });
     setContext('games', games);
 
-    const sellers = readable({}, async (set) => {
+    const sellers = readable({}, (set) => {
         if (!browser) return () => {};
 
-        const sellers_list = await fetch(prefix + 'sellers.json').then((doc) =>
-            doc.json(),
-        );
-        set(
-            Object.fromEntries(
-                sellers_list.map((seller) => [seller.username, seller]),
-            ),
-        );
+        const sellers_list = fetch(prefix + 'sellers.json')
+            .then((doc) => doc.json())
+            .then((sellers_list) =>
+                set(
+                    Object.fromEntries(
+                        sellers_list.map((seller) => [seller.username, seller]),
+                    ),
+                ),
+            );
         return () => {};
     });
     setContext('sellers', sellers);

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <header>
     <nav>
         <h5 class="max left-align">Ottawa board games for sale and trade</h5>
-        <a class="button circle transparent" href="/about">
+        <a class="button circle transparent" href="/about/">
             <i>question_mark</i>
         </a>
     </nav>
@@ -27,7 +27,6 @@
 
     const games = getContext('games');
     const sellers = getContext('sellers');
-    $: console.log($sellers);
 
     function pretty_date(date) {
         if (!date) return '';

src/routes/stats/+page.svelte

@@ -0,0 +1,56 @@
+<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>