2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

Merge branch 'main' of https://repos.hackathon.bz.it/2025-summer/team-1

Browse source
This commit is contained in:
Mat12143 2025-08-02 13:00:17 +02:00
commit c3d30a1cc8
2 changed files with 31 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/lib/components/SuggestionInput.svelte
View file

@ -1,20 +1,33 @@
<script lang="ts">
import { LoaderCircle } from "@lucide/svelte"
const COOLDOWN_SECS = 30
let { roomId } = $props()
let input = $state("")
let disabled: boolean = $state(false)
let loading: boolean = $state(false)
let cooldowned: boolean = $state(false)
$effect(() => {
console.log("cooldowned is now", cooldowned)
})
async function sendSong() {
disabled = true
loading = true
await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
input = ""
disabled = false
loading = false
cooldowned = true
setTimeout(() => {
cooldowned = false
console.log("unset cooldown")
}, COOLDOWN_SECS * 1000)
}
</script>
<div
class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${disabled ? "disabled" : ""}`}
class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${loading ? "disabled" : ""}`}
>
<input
type="text"
@ -26,16 +39,20 @@
sendSong()
}
}}
{disabled}
disabled={loading}
/>
{#if disabled}
{#if loading}
<span class="animate-spin">
<LoaderCircle />
</span>
{/if}
<button class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border border-0 font-semibold shadow-xl duration-100 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={sendSong}
>Add</button
<button
disabled={cooldowned}
class="i-lucide-check h-[40px] w-1/4 rounded font-semibold shadow-xl duration-100 active:scale-90 {!cooldowned
? 'cursor-pointer bg-light-pine-blue hover:scale-105 dark:bg-dark-pine-blue '
: 'bg-light-pine-muted dark:bg-light-pine-muted'}"
onclick={sendSong}>Add</button
>
<span class="i-lucide-chevrons-left"></span>
</div>

11
frontend/src/lib/components/SuggestionList.svelte
View file

@ -7,9 +7,8 @@
let picked_suggestions: string[] = $state([])
async function vote(idx: number, amount: number, songId: string) {
async function vote(amount: number, songId: string) {
if (picked_suggestions.includes(songId)) return console.log("rejecting vote")
suggestions[idx].upvote += amount
await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
picked_suggestions.push(songId)
console.log("accepted vote")
@ -26,7 +25,7 @@
<p>No suggestions yet! Try to add a new one using the Add button</p>
{/if}
{#each suggestions as sug, idx}
{#each suggestions as sug}
<div
class="flex h-[80px] w-full flex-row gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay p-2 shadow-md duration-100 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
>
@ -48,7 +47,8 @@
class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-green duration-100 hover:scale-150 dark:text-dark-pine-green" : "text-light-pine-muted dark:text-dark-pine-muted"}
disabled={!!picked_suggestions.includes(sug.uuid)}
onclick={async () => {
await vote(idx, 1, sug.uuid)
sug.upvode += 1
await vote(1, sug.uuid)
}}><ThumbsUp /></button
>
<p class="font-semibold text-light-pine-text dark:text-dark-pine-text">{sug.upvote}</p>
@ -56,7 +56,8 @@
class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-red duration-100 hover:scale-150 dark:text-dark-pine-red" : "text-light-pine-muted dark:text-dark-pine-muted"}
disabled={!!picked_suggestions.includes(sug.uuid)}
onclick={async () => {
await vote(idx, -1, sug.uuid)
sug.upvode += 1
await vote(-1, sug.uuid)
}}><ThumbsDown /></button
>
</div>