✨ Made old-school mode no longer be old-school

frontend/src/lib/admin.svelte

@@ -99,12 +99,11 @@
 	}
 </script>
 
-{#if game_mode === 'kahoot'}
+<div
-	<div
 	class="fixed top-0 w-full h-10 z-20 grid grid-cols-2"
 	style="background: {bg_color ? bg_color : 'transparent'}"
 	class:text-black={bg_color}
-	>
+>
 	<p class="mr-auto ml-0 col-start-1 col-end-1">
 		{selected_question === -1 ? '0' : selected_question + 1}
 		/{quiz_data.questions.length}
@@ -127,9 +126,7 @@
 				</button>
 			{/if}
 			{#if question_results === null && selected_question !== -1}
-					<button on:click={get_question_results} class="admin-button"
+				<button on:click={get_question_results} class="admin-button">Show results </button>
-						>Show results
-					</button>
 			{/if}
 		{:else if selected_question !== -1}
 			<button on:click={show_solutions} class="admin-button"
@@ -146,16 +143,15 @@
 			</button>-->
 		{/if}
 	</div>
-	</div>
+</div>
-	{#if timer_res !== '0' && selected_question >= 0}
+{#if timer_res !== '0' && selected_question >= 0}
 	<span
 		class="fixed top-0 bg-red-500 h-8 transition-all mt-10"
-			style="width: {(100 / quiz_data.questions[selected_question].time) *
+		style="width: {(100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)}vw"
-				parseInt(timer_res)}vw"
 	/>
-	{/if}
 {/if}
-<div class:pt-28={game_mode === 'kahoot'} class="w-full h-full">
+
+<div class="w-full h-full pt-28">
 	{#if timer_res !== undefined && !final_results_clicked && !question_results}
 		<div class="flex flex-col justify-center w-screen h-1/6">
 			<h1 class="text-6xl text-center">
@@ -179,7 +175,6 @@
 				/>
 			</div>
 		{/if}
-		{#if game_mode === 'kahoot'}
 		{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
 			<div class="grid grid-cols-2 gap-2 w-full p-4">
 				{#each quiz_data.questions[selected_question].answers as answer, i}
@@ -188,20 +183,11 @@
 						style="background-color: {answer.color ?? '#B45309'}"
 						class:opacity-50={!answer.right &&
 							timer_res === '0' &&
-								quiz_data.questions[selected_question].type ===
+							quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
-									QuizQuestionType.ABCD}
 					>
 						<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
-							<span
+						<span class="text-center text-2xl px-2 py-4 w-full text-black"
-								class="text-center text-2xl px-2 py-4 w-full text-black"
+							>{answer.answer}</span
-								class:text-4xl={answer.right &&
-									timer_res === '0' &&
-									quiz_data.questions[selected_question].type ===
-										QuizQuestionType.ABCD}
-								class:underline={answer.right &&
-									timer_res === '0' &&
-									quiz_data.questions[selected_question].type ===
-										QuizQuestionType.ABCD}>{answer.answer}</span
 						>
 						<span class="pl-4 w-10" />
 					</div>
@@ -209,20 +195,9 @@
 			</div>
 		{/if}
 	{/if}
-	{/if}
 	<br />
 	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
-		{#if question_results === null}
+		{#if question_results === null}{:else if question_results === undefined}
-			{#if game_mode === 'normal'}
-				<div class="w-full flex justify-center">
-					<button
-						on:click={get_question_results}
-						id="GetQuestionResults"
-						class="admin-button">{$t('admin_page.get_results')}</button
-					>
-				</div>
-			{/if}
-		{:else if question_results === undefined}
 			{#if !final_results_clicked}
 				<div class="w-full flex justify-center">
 					<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
@@ -249,50 +224,9 @@
 				/>
 			{/await}
 		{/if}
-	{:else if timer_res !== undefined}
+	{:else if timer_res !== undefined}{/if}
-		{#if game_mode === 'normal'}
-			<div class="w-full flex justify-center">
-				<button
-					on:click={() => {
-						timer_res = '0';
-					}}
-					id="GetQuestionResultsAndStopTime"
-					class="admin-button">{$t('admin_page.stop_time')}</button
-				>
-			</div>
-		{/if}
-	{/if}
 	<br />
-	{#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0}
+	{#if get_question_title(selected_question + 1, quiz_data) !== '' && selected_question + 1 !== 0}{:else if selected_question + 1 === 0}
-		{#if game_mode === 'normal'}
-			<div class="w-full flex justify-center">
-				<button
-					class="admin-button"
-					disabled={!(timer_res === undefined || timer_res === '0')}
-					id="SetQuestionNumber"
-					on:click={() => {
-						set_question_number(selected_question + 1);
-					}}
-					>{$t('admin_page.show_next_question')}: {@html get_question_title(
-						selected_question + 1,
-						quiz_data
-					)}</button
-				>
-			</div>
-		{/if}
-	{:else if selected_question + 1 === 0}
-		{#if game_mode === 'normal'}
-			<div class="w-full flex justify-center">
-				<button
-					on:click={() => {
-						set_question_number(0);
-					}}
-					class="admin-button"
-				>
-					{$t('admin_page.start_by_showing_first_question')}
-				</button>
-			</div>
-		{:else}
 		<div class="flex flex-col justify-center w-screen h-full">
 			<h1 class="text-7xl text-center">{@html quiz_data.title}</h1>
 			<p class="text-3xl pt-8 text-center">{@html quiz_data.description}</p>
@@ -309,13 +243,4 @@
 			{/if}
 		</div>
 	{/if}
-	{:else if final_results_clicked === false}
-		{#if game_mode === 'normal'}
-			<div class="w-screen flex justify-center">
-				<button on:click={get_final_results} class="admin-button"
-					>{$t('admin_page.get_final_results')}</button
-				>
-			</div>
-		{/if}
-	{/if}
 </div>

frontend/src/lib/play/question.svelte

@@ -95,48 +95,43 @@
 		}
 	}
 
+	const get_div_height = (): string => {
+		if (game_mode === 'normal') {
+			if (question.image) {
+				return '66.666667';
+			} else {
+				return '83.333333';
+			}
+		} else {
+			return '100';
+		}
+	};
 	$: console.log(slider_value, 'values');
 </script>
 
 <div class="h-screen w-screen">
-	<div class="flex flex-col justify-center w-screen h-1/6">
+	{#if game_mode === 'normal'}
+		<div
+			class="flex flex-col justify-start w-screen"
+			style="height: {question.image ? '33.333333' : '16.666667'}%"
+		>
 			<h1 class="text-3xl text-center text-black dark:text-white mt-2">
 				{@html question.question}
 			</h1>
-		<div class="mx-auto my-2">
-			{#if game_mode !== 'kahoot'}
-				<CircularTimer
-					bind:text={timer_res}
-					bind:progress={circular_prgoress}
-					color="#ef4444"
-				/>
-			{/if}
-		</div>
-	</div>
 			{#if question.image !== null && game_mode !== 'kahoot'}
-		<div>
+				<div class="max-h-full">
 					<img
 						src={question.image}
-				class="h-2/5 object-cover mx-auto mb-8"
+						class="object-cover mx-auto mb-8 max-h-[90%]"
 						alt="Content for Question"
 					/>
 				</div>
 			{/if}
+		</div>
+	{/if}
 	{#if timer_res !== '0'}
 		{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
-			{#if game_mode === 'normal'}
+			<div class="w-full relative" style="height: {get_div_height()}%">
-				<div class="grid grid-cols-2 gap-2 w-full p-4">
-					{#each question.answers as answer}
-						<button
-							class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3"
-							style="background-color: {answer.color ?? '#B45309'}"
-							disabled={selected_answer !== undefined}
-							on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
-						>
-					{/each}
-				</div>
-			{:else if game_mode === 'kahoot'}
-				<div class="h-5/6 w-full relative">
 				<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"
 				>
@@ -155,19 +150,20 @@
 							disabled={selected_answer !== undefined}
 							on:click={() => selectAnswer(answer.answer)}
 						>
+							{#if game_mode === 'kahoot'}
 								<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
+							{:else}
+								<p class="m-auto">{answer.answer}</p>
+							{/if}
 						</button>
 					{/each}
 				</div>
 			</div>
-			{:else}
-				<p>Error</p>
-			{/if}
 		{:else if question.type === QuizQuestionType.RANGE}
 			{#await import('svelte-range-slider-pips')}
 				<Spinner />
 			{:then c}
-				<div class:pointer-events-none={selected_answer !== undefined}>
+				<div class:pointer-events-none={selected_answer !== undefined} class="mt-14">
 					<svelte:component
 						this={c.default}
 						bind:values={slider_value}

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

@@ -139,17 +139,7 @@
 				>{$t('admin_page.export_results')}</button
 			>
 		</div>
-		<!--{#if game_mode === 'kahoot'}-->
 		<FinalResults bind:data={player_scores} bind:show_final_results />
-		<!--		{:else}
-			{#await import('$lib/play/end.svelte') then c}
-				<svelte:component
-					this={c.default}
-					bind:final_results
-					bind:question_count={quiz_data.questions.length}
-				/>
-			{/await}
-		{/if}-->
 	{/if}
 	{#if !success}
 		<input placeholder="game id" bind:value={game_token} />

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

@@ -7,7 +7,7 @@
 	import Question from '$lib/play/question.svelte';
 	// import ShowResults from '$lib/play/show_results.svelte';
 	import { navbarVisible } from '$lib/stores';
-	import ShowEndScreen from '$lib/play/end.svelte';
+	import ShowEndScreen from '$lib/play/admin/final_results.svelte';
 	import KahootResults from '$lib/play/results_kahoot.svelte';
 	import { getLocalization } from '$lib/i18n';
 	import Cookies from 'js-cookie';
@@ -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:final_results bind:question_count={gameData.question_count} />
+			<ShowEndScreen bind:data={scores} show_final_results={true} />
 		{:else if gameData !== undefined && question_index === ''}
 			<ShowTitle
 				bind:title={gameData.title}