From ff5485bae9e8802b57bb9750b202f461a699f5d5 Mon Sep 17 00:00:00 2001
From: Esa Kataja <ekataja@gmail.com>
Date: Sat, 12 Oct 2024 16:21:28 +0300
Subject: [PATCH] Add Currently playing page

---
 src/components/CurrentlyPlaying.svelte | 63 ++++++++++++++++++++++++++
 src/routes/members/+page.svelte        |  3 ++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/CurrentlyPlaying.svelte

diff --git a/src/components/CurrentlyPlaying.svelte b/src/components/CurrentlyPlaying.svelte
new file mode 100644
index 0000000..164497a
--- /dev/null
+++ b/src/components/CurrentlyPlaying.svelte
@@ -0,0 +1,63 @@
+<script>
+	export let artist = 'Metallica';
+	export let songName = 'The Unforgiven';
+	export let lyrics = `New blood joins this earth
+And quickly he's subdued
+Through constant pained disgrace
+The young boy learns their rules
+With time, the child draws in
+This whipping boy done wrong
+Deprived of all his thoughts
+The young man struggles on and on, he's known
+A vow unto his own
+That never from this day
+His will they'll take away
+
+What I've felt
+What I've known
+Never shined through in what I've shown
+Never be
+Never see
+Won't see what might have been
+`;
+	let score = 1;
+</script>
+
+<div class="flex flex-col gap-20 my-20 text-center">
+	<div class="flex flex-col gap-4">
+		<h2 class="text-2xl font-semibold">Nyt soi:</h2>
+		<h3 class="text-xl">{artist} - {songName}</h3>
+	</div>
+	<div class="flex flex-col my-2 gap-4">
+		<label for="score">Pisteet</label>
+		<input
+			class="w-full"
+			type="range"
+			value={score}
+			min="1"
+			max="100"
+			name="score"
+			on:change={(e) => (score = e.target.value)}
+		/>
+
+		<div class="flex justify-between text-center">
+			<span>1</span><span>25</span><span>50</span><span>75</span><span>100</span>
+		</div>
+	</div>
+	<div class="flex flex-col gap-4">
+		<label for="comment">Kommentti</label>
+		<textarea
+			name="comment"
+			id="comment"
+			rows="10"
+			placeholder="Sanallinen arvostelu"
+			class="input-text-field"
+			style="resize: none;"
+		></textarea>
+	</div>
+
+	<button class="button-primary">Lähetä</button>
+	<div class="flex justify-center border-2 max-w-sm mx-auto p-4 rounded-md h-80 overflow-auto">
+		<pre class="font-serif text-md">{lyrics}</pre>
+	</div>
+</div>
diff --git a/src/routes/members/+page.svelte b/src/routes/members/+page.svelte
index fe893c3..5a16fc7 100644
--- a/src/routes/members/+page.svelte
+++ b/src/routes/members/+page.svelte
@@ -1,8 +1,11 @@
 <script>
 	import NewRound from '../../components/NewRound.svelte';
 	import NewEntry from '../../components/NewEntry.svelte';
+	import CurrentlyPlaying from '../../components/CurrentlyPlaying.svelte';
 </script>
 
 <NewRound />
 <hr />
 <NewEntry />
+<hr />
+<CurrentlyPlaying />