From 81164cd897cfd83ef294b07e96983f7a351a0a84 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Thu, 1 Feb 2024 14:37:15 -0500
Subject: [PATCH] add sorting

---
 .prettierrc.cjs         |   1 +
 src/routes/+page.svelte | 145 +++++++++++++++++++++++-----------------
 2 files changed, 85 insertions(+), 61 deletions(-)

diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 688495e..6e646df 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -9,4 +9,5 @@ module.exports = {
     svelteSortOrder: 'options-markup-scripts-styles',
     svelteStrictMode: false,
     svelteAllowShorthand: true,
+    bracketSameLine: true,
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d28ffdc..a4bf553 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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>