✨ Improved miscellaneous things

frontend/src/lib/Spinner.svelte

@@ -3,8 +3,11 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
+<script lang="ts">
+	export let my_20 = true;
+</script>
 
-<svg class="h-8 w-8 animate-spin mx-auto my-20" viewBox="3 3 18 18">
+<svg class="h-8 w-8 animate-spin mx-auto" class:my-20={my_20} viewBox="3 3 18 18">
 	<path
 		class="fill-black"
 		d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"

frontend/src/lib/dashboard/start_game.svelte

@@ -8,13 +8,16 @@
 	import { captcha_enabled } from '$lib/config';
 	import StartGameBackground from './start_game_background.svg';
 	import { fade } from 'svelte/transition';
+	import Spinner from '$lib/Spinner.svelte';
 
 	export let quiz_id;
 	let captcha_selected = false;
-	let selected_game_mode = 'normal';
+	let selected_game_mode = 'kahoot';
+	let loading = false;
 
 	const start_game = async (id: string) => {
 		let res;
+		loading = true;
 		if (captcha_enabled && captcha_selected) {
 			res = await fetch(
 				`/api/v1/quiz/start/${id}?captcha_enabled=True&game_mode=${selected_game_mode}`,
@@ -80,19 +83,6 @@
 		</div>
 
 		<div class="grid grid-cols-2 gap-8 my-auto">
-			<div
-				class="rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2"
-				class:opacity-50={selected_game_mode !== 'normal'}
-				on:click={() => {
-					selected_game_mode = 'normal';
-				}}
-			>
-				<h2 class="text-center text-2xl">Normal</h2>
-				<p>
-					Questions, images and answers will be shown on both admins screen and on the
-					screen of the players
-				</p>
-			</div>
 			<div
 				class="rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2"
 				class:opacity-50={selected_game_mode !== 'kahoot'}
@@ -100,22 +90,39 @@
 					selected_game_mode = 'kahoot';
 				}}
 			>
-				<h2 class="text-center text-2xl">Kahoot!-Like [EARLY BETA]</h2>
+				<h2 class="text-center text-2xl">Normal</h2>
 				<p>
 					Question and answer will only be shown on admins screen, like Kahoot!. The
 					players will only have colored buttons with symbols matching these on the screen
 					of the admin.
 				</p>
 			</div>
+			<div
+				class="rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2"
+				class:opacity-50={selected_game_mode !== 'normal'}
+				on:click={() => {
+					selected_game_mode = 'normal';
+				}}
+			>
+				<h2 class="text-center text-2xl">Old-School</h2>
+				<p>
+					Questions and images will be shown on both admins screen and on the screen of
+					the players
+				</p>
+			</div>
 		</div>
 
 		<button
-			class="mt-auto mx-auto bg-green-500 p-4 rounded-lg shadow-lg"
+			class="mt-auto mx-auto bg-green-500 p-4 rounded-lg shadow-lg hover:bg-green-400 transition-all marck-script text-2xl"
 			on:click={() => {
 				start_game(quiz_id);
 			}}
 		>
-			START GAME
+			{#if loading}
+				<Spinner my_20={false} />
+			{:else}
+				Start Game
+			{/if}
 		</button>
 	</div>
 </div>

frontend/src/lib/play/question.svelte

@@ -96,7 +96,7 @@
 </script>
 
 <div class="flex flex-col justify-center w-screen h-1/6">
-	<h1 class="text-6xl text-center">
+	<h1 class="text-6xl text-center text-black dark:text-white">
 		{question.question}
 	</h1>
 	<div class="mx-auto my-2">
@@ -115,10 +115,10 @@
 {#if timer_res !== '0'}
 	{#if question.type === QuizQuestionType.ABCD}
 		{#if game_mode === 'normal'}
-			<div class="flex flex-wrap">
+			<div class="grid grid-cols-2 gap-2 w-full p-4">
 				{#each question.answers as answer}
 					<button
-						class="w-1/2 text-3xl my-2 disabled:opacity-60 border border-white"
+						class="text-3xl rounded-lg h-fit text-center disabled:opacity-60 p-3"
 						style="background-color: {answer.color ?? '#B45309'}"
 						disabled={selected_answer !== undefined}
 						on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
@@ -170,17 +170,17 @@
 	{#if solution === undefined}
 		<Spinner />
 	{:else}
-		<div class="flex flex-wrap">
+		<div class="grid grid-cols-2 gap-2 w-full p-4">
 			{#each solution.answers as answer}
 				{#if answer.right}
 					<button
-						class="w-1/2 text-3xl bg-green-600 border border-white"
+						class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
 						disabled
 						class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
 					>
 				{:else}
 					<button
-						class="w-1/2 text-3xl bg-red-500 border border-white"
+						class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
 						disabled
 						class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
 					>

frontend/src/routes/play/+page.svelte

@@ -158,7 +158,9 @@
 			/>
 		{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
 			{#key unique}
+				<div class="text-black dark:text-black">
 					<Question bind:game_mode bind:question bind:question_index bind:solution />
+				</div>
 			{/key}
 		{:else if gameMeta.started && answer_results !== undefined}
 			{#if answer_results === null}