From 2bbeefa26a76cd5961d216a48e4083c9fd996ccb Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Tue, 6 Feb 2024 13:05:52 -0500
Subject: [PATCH] add listing stats

---
 package.json                      |  4 +--
 src/lib/components/BggUser.svelte | 13 +++++++
 src/routes/+layout.svelte         | 21 ++++++------
 src/routes/+page.svelte           |  3 +-
 src/routes/stats/+page.svelte     | 56 +++++++++++++++++++++++++++++++
 5 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/BggUser.svelte
 create mode 100644 src/routes/stats/+page.svelte

diff --git a/package.json b/package.json
index 2387378..e29b348 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/components/BggUser.svelte b/src/lib/components/BggUser.svelte
new file mode 100644
index 0000000..655171f
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3dad5c6..9d64f03 100644
--- a/src/routes/+layout.svelte
+++ b/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);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8919ede..153cfce 100644
--- a/src/routes/+page.svelte
+++ b/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 '';
diff --git a/src/routes/stats/+page.svelte b/src/routes/stats/+page.svelte
new file mode 100644
index 0000000..d7f5499
--- /dev/null
+++ b/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>