feat: implement answer submission and scoring system for guessing game

This commit is contained in:
2025-09-04 15:11:03 +02:00
parent bbce3cbadf
commit 158d144721
7 changed files with 211 additions and 498 deletions

View File

@@ -125,6 +125,20 @@
<input id="volumeSlider" type="range" min="0" max="1" step="0.01" class="w-40 accent-indigo-600" />
</label>
</div>
<!-- Answer form: everyone can try to guess title & artist for a coin -->
<form id="answerForm" class="mt-4 w-full flex flex-col md:flex-row gap-2 md:items-end">
<label class="flex-1 text-sm">
<span class="text-slate-700 dark:text-slate-300">Titel</span>
<input id="guessTitle" name="title" placeholder="Songtitel" autocomplete="off" class="mt-1 w-full h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3" />
</label>
<label class="flex-1 text-sm">
<span class="text-slate-700 dark:text-slate-300">Künstler</span>
<input id="guessArtist" name="artist" placeholder="Künstler" autocomplete="off" class="mt-1 w-full h-10 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3" />
</label>
<button id="submitAnswer" type="submit" class="h-10 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium">Abschicken</button>
</form>
<div id="answerResult" class="mt-1 text-sm"></div>
</div>
</div>
<div class="mt-3 flex flex-wrap items-center gap-3">
@@ -147,7 +161,6 @@
<div class="flex items-center gap-3 text-slate-700 dark:text-slate-300">
Tokens: <span id="tokens" class="font-semibold">0</span>
<button id="earnToken" class="h-9 px-3 rounded-lg border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-sm">+1 (Titel & Künstler richtig)</button>
</div>
</div>
</div>