patrick
/
memejoin-svelte
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mock ui with mock data

master
Patrick Cleavelin 2023-02-27 22:27:56 -06:00
parent 5e7e696ce5
commit e2f169b2c4
3 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app.html
View File

@ -6,6 +6,15 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<style>
body {
background-color: #313052;
}
h1, h2, h3, h4, h5, p, li {
color: lightgrey;
}
</style>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>

30
src/routes/+page.svelte
View File

@ -1,2 +1,28 @@
<h1>Welcome to SvelteKit</h1> <script>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> 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}

44
src/store.ts Normal file
View File

@ -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 () => {}
})