add sorting

.prettierrc.cjs

@@ -9,4 +9,5 @@ module.exports = {
     svelteSortOrder: 'options-markup-scripts-styles',
     svelteStrictMode: false,
     svelteAllowShorthand: true,
+    bracketSameLine: true,
 };

src/routes/+page.svelte

@@ -1,23 +1,32 @@
 <article>
     <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
+    <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>
+        <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> 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>
+        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>
 
     <header>
         <Search {handler} />
@@ -26,34 +35,37 @@
     <table>
         <thead>
             <tr>
-            <th>user</th>
+                <Th {handler} orderBy="username">user</Th>
-            <th></th>
+                <Th {handler} orderBy="name">game</Th>
-            <th>game</th>
-            <th></th>
                 <th>notes</th>
-            <th>price</th>
+                <Th {handler} orderBy="price">price</Th>
             </tr>
         </thead>
         <tbody>
             {#each $rows as row}
                 <tr>
-                <td><a target="_blank"
+                    <td
-                        href={`https://boardgamegeek.com/collection/user/${row.username}?trade=1&subtype=boardgame&ff=1`}>{row.username}</a> 
+                        ><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>
+                            <i>email</i></a>
-                <td> <a
+                    </td><td>
+                        <div class="game-cell">
+                            <a
+                                class="game-desc"
                                 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>
+                        </div>
                     </td>
                     <td>{row.notes}</td>
                     <td>{row.price ?? ''}</td>
@@ -63,19 +75,18 @@
     </table>
 </article>
 
-
 <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 handler = new DataHandler(data.games, { rowsPerPage: 500 });
-    const rows = handler.getRows()
+    const rows = handler.getRows();
 </script>
 
 <style>
@@ -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>