From c0d50286004e65affa5a3694f641f1b0e0adaa7d Mon Sep 17 00:00:00 2001
From: Patrick Cleavelin <patrick@spacegirl.nl>
Date: Mon, 27 Feb 2023 23:32:29 -0600
Subject: [PATCH] feat: select and add intros

---
 src/app.html            | 24 +++++++++++++++++++++++-
 src/routes/+page.svelte | 35 +++++++++++++++++++++++++----------
 src/store.ts            |  7 +++----
 3 files changed, 51 insertions(+), 15 deletions(-)
diff --git a/src/app.html b/src/app.html
index 55bc7a2..76ede76 100644
--- a/src/app.html
+++ b/src/app.html
@@ -11,9 +11,31 @@
             background-color: #313052;
         }
 
-        h1, h2, h3, h4, h5, p, li {
+        h1, h2, h3, h4, h5, p, label, li {
             color: lightgrey;
         }
+
+        div#list {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        #list-item {
+            border-style: solid;
+            border-radius: 4px;
+            border-color: #1f1f36;
+            background-color: #1f1f36;
+            padding: 0.5em 0.5em 0.5em;
+            margin: 0 0 16px 0px;
+        }
+
+        #list-item > input[type="checkbox"] {
+            display: none;
+        }
+        #list-item:has(input[type="checkbox"]:checked) {
+            background-color: #40406e;
+        }
     </style>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fdc7362..4bece9a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,11 @@
 <script>
     import { member, intros } from '../store.ts';
 
+    let selectedIntros = [];
+
+    const addIntros = () => {
+        $member.intros = $member.intros.concat(selectedIntros)
+    }
 </script>
 
 <h1>MemeJoin - A bot for user intros</h1>
@@ -8,19 +13,29 @@
 {#if !!$member}
     <p>{$member.username}</p>
 
+    {#if $member.intros.length > 0}
     <h3>Current Set Intros</h3>
-    {#each $member.intros as intro}
-        <li>{intro.name} ({intro.filename})</li>
-    {/each}
+    <div id="list">
+        {#each $member.intros as intro}
+            <label id="list-item">{$intros[intro].name} ({$intros[intro].filename})</label>
+        {/each}
+    </div>
+    {:else}
+        <h3 style='color:yellow'>You don't have any intros, try adding one</h3>
+    {/if}
 
     <h3>Add Intros</h3>
-    <select multiple bind:value={$intros}>
-        {#each $intros as intro}
-            <option value={intro.filename}>
-                {intro.name}
-            </option>
-        {/each}
-    </select>
+    <div id="list">
+    {#each $intros as intro, i}
+        {#if (!$member.intros.includes(i))}
+        <label id="list-item">
+            <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
+            {intro.name}
+        </label>
+        {/if}
+    {/each}
+    <button on:click={addIntros}>Add</button>
+    </div>
 {:else}
     <p style="color:red;">You need to login first</p>
     <button on:click={member._fakeLogin}>Login</button>
diff --git a/src/store.ts b/src/store.ts
index 398766c..d6e25fc 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -18,13 +18,12 @@ function createMemberStore(): MemberStore {
 
     return {
         subscribe: subscribe,
+        set: set,
+        addIntro: (intro: IntroIndex) => { update((n) => n.intros.push(intro)); return intro },
         _fakeLogin: () => set(
             {
                 username: "TestUser",
-                intros: [
-                    { name: "TestSound", filename: "testsound.mp3", length: 30 },
-                    { name: "Huh?", filename: "tim allen.mp3", length: 2 },
-                ]
+                intros: [0,1]
             }
         ),
     }
