From 2200fc6884f30ee4a096f76a4706216923e43925 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Mon, 5 Feb 2024 15:29:19 -0500
Subject: [PATCH] add a search bar

---
 src/routes/GameList.svelte | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/routes/GameList.svelte b/src/routes/GameList.svelte
index 6d0544e..178e118 100644
--- a/src/routes/GameList.svelte
+++ b/src/routes/GameList.svelte
@@ -3,10 +3,21 @@
         <input type="checkbox" bind:checked={show_hidden} />
         <span> show hidden </span>
     </label>
+    <div class="field label prefix border">
+        <i>search</i>
+        <input type="text" bind:value={search_text} />
+        <label>Search</label>
+    </div>
 </div>
 
 <div class="games">
-    {#each games as game}
+    {#each games.filter((game) => {
+        if (search_text.length < 3) return true;
+        const target = search_text.toLowerCase();
+        return game.name.toLowerCase().includes(target) || game.username
+                .toLowerCase()
+                .includes(target);
+    }) as game}
         {#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
             <div
                 transition:slide={{ delay: 250, duration: 300 }}
@@ -94,6 +105,8 @@
 
     let show_hidden = false;
 
+    let search_text = '';
+
     // add filter
     // add sort (user, game, price)
 
@@ -144,4 +157,7 @@
         display: flex;
         flex-direction: row-reverse;
     }
+    .options > div {
+        margin-right: 1em;
+    }
 </style>