split into components

src/IntroSelector.svelte

@@ -2,6 +2,9 @@
     import { intros } from './store.ts';
     import { createEventDispatcher } from 'svelte';
 
+    export let guild = null;
+    export let channel = null;
+
     export let introList = null;
     export let exclude = null;
     export let btnLabel = 'Add';
@@ -10,7 +13,11 @@
     const dispatch = createEventDispatcher();
 
     const onConfirm = () => {
-        dispatch('confirm', selectedIntros)
+        dispatch('confirm', {
+            guild: guild,
+            channel: channel,
+            intros: selectedIntros
+        })
         selectedIntros = [];
     }
 
@@ -20,10 +27,10 @@
 <div id="list">
     {#if !!introList}
         {#if introList.length > 0}
-            {#each introList as i}
+            {#each introList as intro}
                 <label id="list-item">
-                    <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
+                    <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={intro}>
-                    {$intros[i].name} ({!!$intros[i].filename ? $intros[i].filename : $intros[i].url})
+                    {$intros[intro.index].name} ({!!$intros[intro.index].filename ? $intros[intro.index].filename : $intros[intro.index].url})
                 </label>
             {/each}
         {:else if !!emptyMsg}
@@ -32,7 +39,7 @@
         {/if}
     {:else if !!exclude}
         {#each $intros as intro, i}
-            {#if (!exclude.includes(i))}
+            {#if (!exclude.map((e) => e.index).includes(i))}
                 <label id="list-item">
                     <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
                     {intro.name} ({!!intro.filename ? intro.filename : intro.url})

src/Login.svelte

@@ -6,6 +6,8 @@
         await member._fakeLogin(username);
     }
 
+    let loginPromise = null;
+
     let enteredUsername = '';
 </script>
 

src/app.html

@@ -18,6 +18,30 @@
             color: lightgrey;
         }
 
+        div#intros {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #323259;
+            padding: 0.5em;
+        }
+
+        div#guild-settings {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            background-color: #2a2a4a;
+            margin: 1em;
+        }
+
+        div#channel-settings {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #2a2a4a;
+            margin: 0.5em;
+        }
+
         div#list {
             display: inline-flex;
             width: 85%;

src/routes/+page.svelte

@@ -4,12 +4,41 @@
     import IntroSelector from '../IntroSelector.svelte';
 
     const addIntros = (event) => {
-        console.log($member.intros)
+        let guildIndex = $member.guilds.findIndex((e) => e.name === event.detail.guild);
-        $member.intros = $member.intros.concat(event.detail);
+        console.log(guildIndex)
-        console.log($member.intros)
+
+        if (guildIndex >= 0) {
+            let channelIndex = $member.guilds[guildIndex].channels.findIndex((e) => e.name === event.detail.channel);
+            console.log(channelIndex)
+
+            if (channelIndex >= 0) {
+                $member.guilds[guildIndex].channels[channelIndex].intros =
+                    $member
+                    .guilds[guildIndex]
+                    .channels[channelIndex]
+                    .intros
+                    .concat(
+                        event.detail.intros.map((index) => {
+                            return { index: index, volume: 20 }
+                        }));
+            }
+        }
     }
     const removeIntros = (event) => {
-        $member.intros = $member.intros.filter((intro) => !event.detail.includes(intro));
+        let guildIndex = $member.guilds.findIndex((e) => e.name == event.detail.guild);
+
+        if (guildIndex >= 0) {
+            let channelIndex = $member.guilds[guildIndex].channels.findIndex((e) => e.name === event.detail.channel);
+
+            if (channelIndex >= 0) {
+                $member.guilds[guildIndex].channels[channelIndex].intros =
+                    $member
+                    .guilds[guildIndex]
+                    .channels[channelIndex]
+                    .intros
+                    .filter((intro) => !event.detail.intros.includes(intro));
+            }
+        }
     }
 </script>
 
@@ -18,15 +47,35 @@
 {#if !!$member}
     <p>{$member.username}</p>
 
-        <h3>Your Intros</h3>
+    <h3>Your Intros</h3>
-        <IntroSelector
+    <div id="intros">
-                introList={$member.intros}
+        {#each $member.guilds as guild}
-                on:confirm={removeIntros}
+            <h4>{guild.name}</h4>
-                btnLabel="Remove" 
+            <div id="guild-settings">
-                emptyMsg="You don't have any intros, try adding one"/>
+                {#each guild.channels as channel}
+                    <div id="channel-settings">
+                        <h4>{channel.name}</h4>
+                        <IntroSelector
+                                guild={guild.name}
+                                channel={channel.name}
+                                introList={channel.intros}
+                                on:confirm={removeIntros}
+                                btnLabel="Remove" 
+                                emptyMsg="You don't have any intros, try adding one"
+                                />
 
-    <h3>Add Intros</h3>
+                        <h3>Add Intros</h3>
-    <IntroSelector exclude={$member.intros} on:confirm={addIntros} />
+                        <IntroSelector 
+                                guild={guild.name}
+                                channel={channel.name}
+                                exclude={channel.intros}
+                                on:confirm={addIntros}
+                                />
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
 {:else}
     <Login />
 {/if}

src/store.ts

@@ -26,12 +26,7 @@ function createMemberStore(): MemberStore {
             if (response === "NoUserFound") {
                 return false;
             } else {
-                set(
+                set(response.Me) 
-                    {
-                        username: username,
-                        intros: response.Settings[0].intros.map((intro) => intro[0])
-                    }
-                ) 
 
                 return true;
             }