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

feat: select and add intros

master
Patrick Cleavelin 2023-02-27 23:32:29 -06:00
parent e2f169b2c4
commit c0d5028600
3 changed files with 51 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app.html
View File

@ -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>

27
src/routes/+page.svelte
View File

@ -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>
<div id="list">
{#each $member.intros as intro}
<li>{intro.name} ({intro.filename})</li>
<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}>
<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}
</option>
</label>
{/if}
{/each}
</select>
<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>

7
src/store.ts
View File

@ -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]
}
),
}