From 45d8dc33b2c122c5e943c3d1f0a8af91cc0b7317 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Fri, 9 Feb 2024 13:43:54 -0500
Subject: [PATCH] create Game component

---
 Taskfile.yaml                   |  10 ++
 e2e/hide-game.test.js           |  16 +++-
 src/routes/Game.svelte          | 114 ++++++++++++++++++++++
 src/routes/GameList.svelte      |  79 ++--------------
 src/routes/GameList.svelte.orig | 162 ++++++++++++++++++++++++++++++++
 5 files changed, 303 insertions(+), 78 deletions(-)
 create mode 100644 src/routes/Game.svelte
 create mode 100644 src/routes/GameList.svelte.orig

diff --git a/Taskfile.yaml b/Taskfile.yaml
index c1d7c5b..2ba33ea 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -6,6 +6,16 @@ vars:
     GREETING: Hello, World!
 
 tasks:
+    is-clean: git is-clean
+    integrate:
+        deps: [is-clean, test]
+        cmds:
+            - echo "do something"
+    test:unit:
+        cmds:
+            - vitest run
+    test:
+        deps: [test:unit, test:e2e]
     preview:
         deps: [build]
         cmds:
diff --git a/e2e/hide-game.test.js b/e2e/hide-game.test.js
index 6facf69..fb6d581 100644
--- a/e2e/hide-game.test.js
+++ b/e2e/hide-game.test.js
@@ -2,16 +2,22 @@ import { test, expect } from '@playwright/test';
 
 test('hide game', async ({ page }) => {
     await page.goto('/');
-    const nbr_games = await page
-        .locator('.games > div')
-        .all()
-        .then((games) => games.length);
+
+    let nbr_games = 0;
+
+    await expect(async () => {
+        nbr_games = await page
+            .locator('.game')
+            .all()
+            .then((games) => games.length);
+        expect(nbr_games).toBeGreaterThan(0);
+    }).toPass();
 
     await page.getByRole('button', { name: 'visibility' }).first().click();
 
     await expect(async () => {
         const one_hidden = await page
-            .locator('.games > div')
+            .locator('.game')
             .all()
             .then((games) => games.length);
 
diff --git a/src/routes/Game.svelte b/src/routes/Game.svelte
new file mode 100644
index 0000000..67eb235
--- /dev/null
+++ b/src/routes/Game.svelte
@@ -0,0 +1,114 @@
+<div
+    transition:slide={{ delay: 250, duration: 300 }}
+    class:hidden={is_hidden}
+    class="game">
+    <div class="grid top-align">
+        <a
+            class="s12 m2"
+            target="_blank"
+            href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
+            <img alt="" loading="lazy" src={thumbnail} height="80" /></a>
+        <div class="grid s12 m10">
+            <div class="s8 left-align">
+                <strong>
+                    <a
+                        class="game-desc"
+                        target="_blank"
+                        href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
+                        {name}</a>
+                </strong>
+            </div>
+            <div class="s3">
+                <div>
+                    <a
+                        target="_blank"
+                        href={`https://boardgamegeek.com/collection/user/${username}?trade=1&subtype=boardgame&ff=1`}
+                        >{username}</a>
+                    &nbsp;
+                    <a
+                        target="_blank"
+                        href={`https://boardgamegeek.com/geekmail/compose?touser=${username}`}>
+                        <i>email</i></a>
+                </div>
+                <div class="neighbourhood">
+                    {seller?.neighbourhood ?? ''}
+                </div>
+            </div>
+            <div class="s1 right-align">
+                {price ? '$' + price : ''}
+            </div>
+            <div class="notes s8">
+                {notes}
+            </div>
+            <div class="s3 updated-at">
+                {#if updated_at}
+                    {pretty_date(updated_at)}
+                {/if}
+            </div>
+            <div class="s1">
+                <div>
+                    <button
+                        class="transparent round"
+                        title="hide game"
+                        on:click={toggle_game_visibility}
+                        >{#if is_hidden}<i>visibility_off</i>{:else}
+                            <i>visibility</i>
+                        {/if}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { slide, fade } from 'svelte/transition';
+
+    export let username = '';
+    export let name = '';
+    export let is_hidden = false;
+    export let bgg_id = '';
+    export let thumbnail = '';
+    export let seller = {};
+    export let price = null;
+    export let notes = '';
+    export let updated_at = null;
+
+    function pretty_date(date) {
+        if (!date) return '';
+
+        return date.replace(/T.*/, '');
+    }
+
+    const dispatch = createEventDispatcher();
+    const toggle_game_visibility = () => dispatch('toggle_visibility');
+</script>
+
+<style>
+    a {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+    .grid {
+        margin-right: 2em;
+        font-size: var(--font-size-10);
+    }
+    .notes {
+        margin-top: 1em;
+        margin-left: 1em;
+    }
+    .updated-at {
+        font-size: smaller;
+        text-align: left;
+    }
+    .updated-at::before {
+        content: 'last update: ';
+    }
+    .neighbourhood {
+        font-size: smaller;
+    }
+    .hidden {
+        opacity: 60%;
+    }
+</style>
diff --git a/src/routes/GameList.svelte b/src/routes/GameList.svelte
index a697bb8..372d45e 100644
--- a/src/routes/GameList.svelte
+++ b/src/routes/GameList.svelte
@@ -19,79 +19,18 @@
                 .includes(target);
     }) as game}
         {#if show_hidden || !game.is_hidden}
-            <div
-                transition:slide={{ delay: 250, duration: 300 }}
-                class:hidden={game.is_hidden}>
-                <div class="grid top-align">
-                    <a
-                        class="s12 m2"
-                        target="_blank"
-                        href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
-                        <img
-                            loading="lazy"
-                            src={game.thumbnail}
-                            height="80" /></a>
-                    <div class="grid s12 m10">
-                        <div class="s8 left-align">
-                            <strong>
-                                <a
-                                    class="game-desc"
-                                    target="_blank"
-                                    href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
-                                    {game.name}</a>
-                            </strong>
-                        </div>
-                        <div class="s3">
-                            <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 : ''}
-                        </div>
-                        <div class="notes s8">
-                            {game.notes}
-                        </div>
-                        <div class="s3 updated-at">
-                            {#if game.updated_at}
-                                {pretty_date(game.updated_at)}
-                            {/if}
-                        </div>
-                        <div class="s1">
-                            <div>
-                                <button
-                                    class="transparent round"
-                                    title="hide game"
-                                    on:click={() => toggle_visibility(game.id)}
-                                    >{#if game.is_hidden}<i>visibility_off</i
-                                        >{:else}
-                                        <i>visibility</i>
-                                    {/if}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="medium-divider"></div>
-            </div>
+            <Game
+                on:toggle_visibility={() => toggle_visibility(game.id)}
+                {...game}
+                seller={sellers[game.username]} />
+            <div class="medium-divider"></div>
         {/if}
     {/each}
 </div>
 
 <script>
     import { getContext, createEventDispatcher } from 'svelte';
-    import { slide, fade } from 'svelte/transition';
+    import Game from './Game.svelte';
 
     export let games = [];
     export let sellers = {};
@@ -105,12 +44,6 @@
 
     // add filter
     // add sort (user, game, price)
-
-    function pretty_date(date) {
-        if (!date) return '';
-
-        return date.replace(/T.*/, '');
-    }
 </script>
 
 <style>
diff --git a/src/routes/GameList.svelte.orig b/src/routes/GameList.svelte.orig
new file mode 100644
index 0000000..982330a
--- /dev/null
+++ b/src/routes/GameList.svelte.orig
@@ -0,0 +1,162 @@
+<div class="options">
+    <label class="switch icon">
+        <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.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}
+<<<<<<< HEAD
+        {#if show_hidden || !game.is_hidden}
+            <div
+                transition:slide={{ delay: 250, duration: 300 }}
+                class:hidden={game.is_hidden}>
+                <div class="grid top-align">
+                    <a
+                        class="s12 m2"
+                        target="_blank"
+                        href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
+                        <img
+                            loading="lazy"
+                            src={game.thumbnail}
+                            height="80" /></a>
+                    <div class="grid s12 m10">
+                        <div class="s8 left-align">
+                            <strong>
+                                <a
+                                    class="game-desc"
+                                    target="_blank"
+                                    href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
+                                    {game.name}</a>
+                            </strong>
+                        </div>
+                        <div class="s3">
+                            <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 : ''}
+                        </div>
+                        <div class="notes s8">
+                            {game.notes}
+                        </div>
+                        <div class="s3 updated-at">
+                            {#if game.updated_at}
+                                {pretty_date(game.updated_at)}
+                            {/if}
+                        </div>
+                        <div class="s1">
+                            <div>
+                                <button
+                                    class="transparent round"
+                                    title="hide game"
+                                    on:click={() => toggle_visibility(game.id)}
+                                    >{#if game.is_hidden}<i>visibility_off</i
+                                        >{:else}
+                                        <i>visibility</i>
+                                    {/if}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="medium-divider"></div>
+            </div>
+=======
+        {#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
+            <Game />
+            <div class="medium-divider"></div>
+>>>>>>> 09f4064 (wip)
+        {/if}
+    {/each}
+</div>
+
+<script>
+    import { getContext, createEventDispatcher } from 'svelte';
+    import { slide, fade } from 'svelte/transition';
+
+    export let games = [];
+    export let sellers = {};
+
+    let show_hidden = false;
+
+    let search_text = '';
+
+    const dispatch = createEventDispatcher();
+    const toggle_visibility = (id) => dispatch('toggle_game_visibility', id);
+
+    // add filter
+    // add sort (user, game, price)
+
+    function pretty_date(date) {
+        if (!date) return '';
+
+        return date.replace(/T.*/, '');
+    }
+</script>
+
+<style>
+    .games {
+        margin-top: 3em;
+    }
+    a {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+    .grid {
+        margin-right: 2em;
+        font-size: var(--font-size-10);
+    }
+    .notes {
+        margin-top: 1em;
+        margin-left: 1em;
+    }
+    .updated-at {
+        font-size: smaller;
+        text-align: left;
+    }
+    .updated-at::before {
+        content: 'last update: ';
+    }
+    .neighbourhood {
+        font-size: smaller;
+    }
+    .hidden {
+        opacity: 60%;
+    }
+    .switch span {
+        font-size: var(--font-size-10);
+        padding-left: 1em;
+    }
+    .options {
+        display: flex;
+        flex-direction: row-reverse;
+    }
+    .options > div {
+        margin-right: 1em;
+    }
+</style>