mock ui with mock data

2023-02-27 22:27:56 -06:00 · 2023-02-27 22:27:56 -06:00 · e2f169b2c4
parent 5e7e696ce5
commit e2f169b2c4
3 changed files with 81 additions and 2 deletions
--- a/src/app.html
+++ b/src/app.html
@ -6,6 +6,15 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
+    <style>
+        body {
+            background-color: #313052;
+        }
+
+        h1, h2, h3, h4, h5, p, li {
+            color: lightgrey;
+        }
+    </style>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,2 +1,28 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+    import { member, intros } from '../store.ts';
+
+</script>
+
+<h1>MemeJoin - A bot for user intros</h1>
+
+{#if !!$member}
+    <p>{$member.username}</p>
+
+    <h3>Current Set Intros</h3>
+    {#each $member.intros as intro}
+        <li>{intro.name} ({intro.filename})</li>
+    {/each}
+
+    <h3>Add Intros</h3>
+    <select multiple bind:value={$intros}>
+        {#each $intros as intro}
+            <option value={intro.filename}>
+                {intro.name}
+            </option>
+        {/each}
+    </select>
+{:else}
+    <p style="color:red;">You need to login first</p>
+    <button on:click={member._fakeLogin}>Login</button>
+{/if}
+
--- a/src/store.ts
+++ b/src/store.ts
@ -0,0 +1,44 @@
+import { readable, writable } from 'svelte/store';
+
+type IntroIndex = number;
+
+interface MemberStore {
+   username: string
+   intros: IntroIndex[]
+}
+
+interface Intro {
+    name: string
+    filename: string
+    length: number
+}
+
+function createMemberStore(): MemberStore {
+    const { subscribe, set, update } = writable(null)
+
+    return {
+        subscribe: subscribe,
+        _fakeLogin: () => set(
+            {
+                username: "TestUser",
+                intros: [
+                    { name: "TestSound", filename: "testsound.mp3", length: 30 },
+                    { name: "Huh?", filename: "tim allen.mp3", length: 2 },
+                ]
+            }
+        ),
+    }
+}
+
+export const member: MemberStore = createMemberStore()
+export const intros: IntroStore = readable([], (set) => {
+        // TODO: actually grab intros from the API
+        set([
+            { name: "TestSound", filename: "testsound.mp3", length: 30 },
+            { name: "Huh?", filename: "tim allen.mp3", length: 2 },
+            { name: "This sound hasn't been selected yet", filename: "totally_real.mp3", length: 9 },
+        ])
+
+        return () => {}
+    })
+