✨ Many improvements for players

frontend/src/lib/components/buttons/brown.svelte

@@ -10,6 +10,8 @@
 	export let href: undefined | string = undefined;
 
 	export let target: undefined | string = '_self';
+
+	export let type: undefined | string = 'button';
 </script>
 
 {#if href}
@@ -26,6 +28,7 @@
 {:else}
 	<button
 		{disabled}
+		{type}
 		class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
 		on:click
 		class:flex

frontend/src/lib/play/admin/final_results.svelte

@@ -7,6 +7,7 @@
 	import { onMount } from 'svelte';
 
 	export let data;
+	export let username;
 	export let show_final_results: boolean;
 	import { fly } from 'svelte/transition';
 	import confetti from 'canvas-confetti';
@@ -58,4 +59,11 @@
 			{/if}
 		{/each}
 	</div>
+	{#if data[username]}
+		<div class="fixed bottom-0 left-0 flex justify-center w-full mb-6">
+			<div class="mx-auto p-2 border-[#B07156] border-4 rounded">
+				<p>Your score: <b>{data[username]}</b></p>
+			</div>
+		</div>
+	{/if}
 {/if}

frontend/src/lib/play/join.svelte

@@ -11,6 +11,7 @@
 	import { alertModal } from '../stores';
 	import { getLocalization } from '$lib/i18n';
 	import Cookies from 'js-cookie';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
 
 	const { t } = getLocalization();
 	export let game_pin: string;
@@ -190,13 +191,9 @@
 			<!--				use:tippy={{content: "Please enter the game pin", sticky: true, placement: 'top'}}-->
 
 			<br />
-			<button
+			<div class="mt-2">
-				class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+				<BrownButton disabled={game_pin.length < 6}>{$t('words.submit')}</BrownButton>
-				type="submit"
+			</div>
-				disabled={game_pin.length < 6}
-			>
-				{$t('words.submit')}
-			</button>
 		</form>
 	</div>
 {:else}
@@ -218,13 +215,12 @@
 					bind:value={custom_field_value}
 				/>
 			{/if}
-			<button
+
-				class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:cursor-not-allowed disabled:opacity-50 mt-2"
+			<div class="mt-2">
-				type="submit"
+				<BrownButton disabled={username.length <= 3} on:click={setUsername}
-				disabled={username.length <= 3}
+					>{$t('words.submit')}</BrownButton
-			>
+				>
-				{$t('words.submit')}
+			</div>
-			</button>
 		</form>
 	</div>
 {/if}

frontend/src/lib/play/question.svelte

@@ -12,6 +12,7 @@
 	import { kahoot_icons } from './kahoot_mode_assets/kahoot_icons';
 	import CircularTimer from '$lib/play/circular_progress.svelte';
 	import { flip } from 'svelte/animate';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
 
 	const { t } = getLocalization();
 
@@ -74,6 +75,7 @@
 	};
 
 	const select_complex_answer = (data) => {
+		selected_answer = 'a';
 		const new_array = [];
 		for (let i = 0; i < data.length; i++) {
 			new_array.push({ answer: data[i].answer });
@@ -162,7 +164,7 @@
 		{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
 			<div class="w-full relative" style="height: {get_div_height()}%">
 				<div
-					class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl"
+					class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
 				>
 					<CircularTimer
 						bind:text={timer_res}
@@ -171,7 +173,7 @@
 					/>
 				</div>
 
-				<div class="grid grid-cols-2 gap-2 w-full p-4 h-full">
+				<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
 					{#each question.answers as answer, i}
 						<button
 							class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
@@ -202,18 +204,20 @@
 						bind:values={slider_value}
 						bind:min={question.answers.min}
 						bind:max={question.answers.max}
+						id="pips-slider"
 						pips
 						float
 						all="label"
 					/>
 				</div>
 				<div class="flex justify-center">
-					<button
+					<div class="w-1/2">
-						class="w-1/2 text-3xl bg-[#B07156] my-2 disabled:opacity-60 border border-white"
+						<BrownButton
-						disabled={selected_answer !== undefined}
+							disabled={selected_answer !== undefined}
-						on:click={() => selectAnswer(slider_value[0])}
+							on:click={() => selectAnswer(slider_value[0])}
-						>{$t('words.submit')}
+							>{$t('words.submit')}
-					</button>
+						</BrownButton>
+					</div>
 				</div>
 			{/await}
 		{:else if question.type === QuizQuestionType.TEXT}
@@ -224,21 +228,23 @@
 				<input
 					type="text"
 					bind:value={text_input}
-					class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
+					disabled={selected_answer}
+					class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed"
 				/>
 			</div>
 
-			<div class="flex justify-center">
+			<div class="flex justify-center mt-2">
-				<button
+				<div class="w-1/3">
-					class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+					<BrownButton
-					type="button"
+						type="button"
-					disabled={!text_input}
+						disabled={selected_answer}
-					on:click={() => {
+						on:click={() => {
-						selectAnswer(text_input);
+							selectAnswer(text_input);
-					}}
+						}}
-				>
+					>
-					{$t('words.submit')}
+						{$t('words.submit')}
-				</button>
+					</BrownButton>
+				</div>
 			</div>
 		{:else if question.type === QuizQuestionType.ABCD}
 			{#if solution === undefined}
@@ -295,7 +301,7 @@
 							}}
 							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
 							type="button"
-							disabled={i === 0}
+							disabled={i === 0 || selected_answer}
 						>
 							<svg
 								class="w-8 h-8"
@@ -322,7 +328,7 @@
 							}}
 							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
 							type="button"
-							disabled={i === question.answers.length - 1}
+							disabled={i === question.answers.length - 1 || selected_answer}
 						>
 							<svg
 								class="w-8 h-8"
@@ -343,15 +349,15 @@
 						</button>
 					</div>
 				{/each}
-				<button
+				<div class="w-full mt-2">
-					class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full"
+					<BrownButton
-					type="button"
+						type="button"
-					on:click={() => {
+						disabled={selected_answer}
-						select_complex_answer(question.answers);
+						on:click={() => {
-					}}
+							select_complex_answer(question.answers);
-				>
+						}}>{$t('words.submit')}</BrownButton
-					{$t('words.submit')}
+					>
-				</button>
+				</div>
 			</div>
 			<!--{/if}-->
 		{/if}

frontend/src/routes/+layout.svelte

@@ -126,6 +126,11 @@
 		background-color: #4e6e58;
 		background-size: cover;
 		color: white;
+
+		:global(#pips-slider) {
+			--pip: white;
+			--pip-active: white;
+		}
 	}
 
 	@keyframes background_animation {

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

@@ -151,7 +151,7 @@
 		{#if !gameMeta.started && gameData === undefined}
 			<JoinGame {game_pin} bind:game_mode bind:username />
 		{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
-			<ShowEndScreen bind:data={scores} show_final_results={true} />
+			<ShowEndScreen bind:data={scores} show_final_results={true} bind:username />
 		{:else if gameData !== undefined && question_index === ''}
 			<ShowTitle
 				bind:title={gameData.title}