show the neighbourhood

Taskfile.yaml

@@ -9,9 +9,11 @@ tasks:
     export-db:
         cmds:
             - sqlite3 /home/bggsell/games.db '.mode json' '.once /home/bggsell/db/games.json' 'select * from game'
+            - sqlite3 /home/bggsell/games.db '.mode json' '.once /home/bggsell/db/sellers.json' 'select * from bgg_user'
     export-db:dev:
         cmds:
             - sqlite3 games.db '.mode json' '.once static/dev/games.json' 'select * from game'
+            - sqlite3 games.db '.mode json' '.once static/dev/sellers.json' 'select * from bgg_user'
 
     deploy:
         deps: [build]

src/routes/+layout.svelte

@@ -7,7 +7,37 @@
 
 <script>
     import 'beercss/dist/cdn/beer.min.css';
-    //import beercss from "./dist/cdn/beer.min.js";
+    import { setContext } from 'svelte';
+    import { dev, browser } from '$app/environment';
+    import { readable } from 'svelte/store';
+
+    const prefix = dev ? '/dev/' : '/db/';
+
+    const games = readable([], async (set) => {
+        if (!browser) return () => {};
+
+        fetch(prefix + 'games.json')
+            .then((doc) => doc.json())
+            .then(set);
+
+        return () => {};
+    });
+    setContext('games', games);
+
+    const sellers = readable({}, async (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]),
+            ),
+        );
+        return () => {};
+    });
+    setContext('sellers', sellers);
 </script>
 
 <style>

src/routes/+page.js

@@ -1,9 +0,0 @@
-import { dev, browser } from '$app/environment';
-
-export async function load({ fetch }) {
-    const url = dev ? '/dev/games.json' : '/games.json';
-
-    return {
-        games: browser ? fetch(url).then((doc) => doc.json()) : [],
-    };
-}

src/routes/+page.svelte

@@ -8,7 +8,7 @@
 </header>
 
 <article>
-    {#await data.games}
+    {#await $games}
         <div class="medium-height middle-align center-align">
             <div class="center-align">
                 <progress class="circle"></progress>
@@ -17,17 +17,17 @@
             </div>
         </div>
     {:then games}
-        <GameList {games} />
+        <GameList {games} sellers={$sellers} />
     {/await}
 </article>
 
 <script>
-    // TODO hide games I'm not interested in
-    // TODO add cart
-    // TODO prettify via beercss
+    import { getContext } from 'svelte';
     import GameList from './GameList.svelte';
 
-    export let data;
+    const games = getContext('games');
+    const sellers = getContext('sellers');
+    $: console.log($sellers);
 
     function pretty_date(date) {
         if (!date) return '';

src/routes/GameList.svelte

@@ -17,15 +17,20 @@
                     </strong>
                 </div>
                 <div class="s3">
-                    <a
-                        target="_blank"
-                        href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
-                        >{game.username}</a>
-                    &nbsp;
-                    <a
-                        target="_blank"
-                        href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
-                        <i>email</i></a>
+                    <div>
+                        <a
+                            target="_blank"
+                            href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
+                            >{game.username}</a>
+                        &nbsp;
+                        <a
+                            target="_blank"
+                            href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
+                            <i>email</i></a>
+                    </div>
+                    <div class="neighbourhood">
+                        {sellers[game.username]?.neighbourhood ?? ''}
+                    </div>
                 </div>
                 <div class="s1 right-align">
                     {game.price ? '$' + game.price : ''}
@@ -44,6 +49,7 @@
 
 <script>
     export let games;
+    export let sellers = {};
 
     // add filter
     // add sort (user, game, price)
@@ -78,4 +84,7 @@
     .updated-at::before {
         content: 'last update: ';
     }
+    .neighbourhood {
+        font-size: smaller;
+    }
 </style>

static/dev/sellers.json

@@ -0,0 +1,2 @@
+[{"username":"yenzie","neighbourhood":"Bells Corners"},
+{"username":"jmarkmoss","neighbourhood":null}]