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; background-color: #313052;
} }
h1, h2, h3, h4, h5, p, li { h1, h2, h3, h4, h5, p, label, li {
color: lightgrey; 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> </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>

35
src/routes/+page.svelte
View File

@ -1,6 +1,11 @@
<script> <script>
import { member, intros } from '../store.ts'; import { member, intros } from '../store.ts';
let selectedIntros = [];
const addIntros = () => {
$member.intros = $member.intros.concat(selectedIntros)
}
</script> </script>
<h1>MemeJoin - A bot for user intros</h1> <h1>MemeJoin - A bot for user intros</h1>
@ -8,19 +13,29 @@
{#if !!$member} {#if !!$member}
<p>{$member.username}</p> <p>{$member.username}</p>
{#if $member.intros.length > 0}
<h3>Current Set Intros</h3> <h3>Current Set Intros</h3>
{#each $member.intros as intro} <div id="list">
<li>{intro.name} ({intro.filename})</li> {#each $member.intros as intro}
{/each} <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> <h3>Add Intros</h3>
<select multiple bind:value={$intros}> <div id="list">
{#each $intros as intro} {#each $intros as intro, i}
<option value={intro.filename}> {#if (!$member.intros.includes(i))}
{intro.name} <label id="list-item">
</option> <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
{/each} {intro.name}
</select> </label>
{/if}
{/each}
<button on:click={addIntros}>Add</button>
</div>
{:else} {:else}
<p style="color:red;">You need to login first</p> <p style="color:red;">You need to login first</p>
<button on:click={member._fakeLogin}>Login</button> <button on:click={member._fakeLogin}>Login</button>

7
src/store.ts
View File

@ -18,13 +18,12 @@ function createMemberStore(): MemberStore {
return { return {
subscribe: subscribe, subscribe: subscribe,
set: set,
addIntro: (intro: IntroIndex) => { update((n) => n.intros.push(intro)); return intro },
_fakeLogin: () => set( _fakeLogin: () => set(
{ {
username: "TestUser", username: "TestUser",
intros: [ intros: [0,1]
{ name: "TestSound", filename: "testsound.mp3", length: 30 },
{ name: "Huh?", filename: "tim allen.mp3", length: 2 },
]
} }
), ),
} }