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

feat: added suggestions & upvoting system

Browse source
This commit is contained in:
Mat12143 2025-08-01 22:04:55 +02:00
parent 25a6b4e82c
commit 41efae6aeb
4 changed files with 48 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/lib/components/QueueSlider.svelte
View file

@ -12,7 +12,7 @@
<div class="flex w-fit flex-row gap-4">
{#each displaySongs as song, i}
{#if song.name != ""}
<div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10 mx-2 scale-100" : "z-0 opacity-70"}`}>
<div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
<img
class="h-[60vw] max-h-[250px] w-[60vw]
max-w-[250px] rounded object-cover transition-all duration-300"
@ -23,6 +23,8 @@
<h1 class="mt-2">{song.name}</h1>
{/if}
</div>
{:else}
<div class="h-[60vw] max-h-[250px] w-[60vw] max-w-[250px]"></div>
{/if}
{/each}
</div>

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

@ -1,2 +1,34 @@
<script lang="ts">
import type { Song } from "$lib/types"
let { suggestions }: { suggestions: Song[] } = $props()
let reactiveSugg = $derived(
[...suggestions].sort((a, b) => {
return b.points - a.points
})
)
</script>
<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
{#each reactiveSugg as sug}
<div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
<div class="flex w-3/4 flex-row gap-2">
<img class="w-[60px] min-w-[60px] rounded" src={sug.image} alt="Song cover" />
<h1>{sug.name}</h1>
</div>
<div class="flex w-1/4 flex-row items-center justify-center gap-2">
<button
onclick={() => {
sug.points += 1
}}>🔥</button
>
<p>{sug.points}</p>
<button
onclick={() => {
sug.points--
}}>💩</button
>
</div>
</div>
{/each}
</div>

1
frontend/src/lib/types.ts
View file

@ -3,6 +3,7 @@ import * as z from "zod"
export const SongSchema = z.object({
name: z.string(),
image: z.string(),
points: z.number().optional().default(0),
})
export type Song = z.infer<typeof SongSchema>

15
frontend/src/routes/+page.svelte
View file

@ -1,27 +1,33 @@
<script lang="ts">
import QueueSlider from "$lib/components/QueueSlider.svelte"
import SuggestionInput from "$lib/components/SuggestionInput.svelte"
import SuggestionList from "$lib/components/SuggestionList.svelte"
let songs = $state([
{
name: "Prima",
name: "Cisco PT - Cantarex",
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
points: 0,
},
{
name: "Io e i miei banchi - Paul Ham",
image: "https://i.prcdn.co/img?regionKey=RbtvKb5E1Cv4j1VWm2uGrw%3D%3D",
points: 0,
},
{
name: "Terza",
name: "Ragatthi - Bersatetthi",
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
points: 0,
},
{
name: "Quarta",
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
points: 0,
},
{
name: "Quinta",
image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
points: 0,
},
])
@ -30,7 +36,10 @@
<div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
<QueueSlider {songs} {playing} />
<div class="w-full py-6">
<div class="w-full py-6 lg:w-[30vw]">
<SuggestionInput />
</div>
<div class="w-full py-6 lg:w-[30vw]">
<SuggestionList suggestions={songs} />
</div>
</div>