From 9ff7ac497f9546ab1d64f1fac9dad7429bdce5b6 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Sat, 21 Oct 2023 21:54:26 +0200
Subject: [PATCH] :sparkles: Closes #138

---
 .../src/routes/view/[quiz_id]/+page.svelte    | 209 +++++++++---------
 1 file changed, 109 insertions(+), 100 deletions(-)

diff --git a/frontend/src/routes/view/[quiz_id]/+page.svelte b/frontend/src/routes/view/[quiz_id]/+page.svelte
index 26a6bdb..dd4b123 100644
--- a/frontend/src/routes/view/[quiz_id]/+page.svelte
+++ b/frontend/src/routes/view/[quiz_id]/+page.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import { getLocalization } from '$lib/i18n';
 	import CollapsSection from '$lib/collapsible.svelte';
 	import { createTippy } from 'svelte-tippy';
@@ -18,6 +18,9 @@ SPDX-License-Identifier: MPL-2.0
 	import RatingComponent from '$lib/view_quiz/RatingComponent.svelte';
 	import { page } from '$app/stores';
 	import ModComponent from './ModComponent.svelte';
+	import { get_foreground_color } from '$lib/helpers.ts';
+
+	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
 
 	const tippy = createTippy({
 		arrow: true,
@@ -76,48 +79,48 @@ SPDX-License-Identifier: MPL-2.0
 </svelte:head>
 
 <div>
-	<h1 class="text-4xl text-center">{@html quiz.title}</h1>
-	<div class="text-center">
+	<h1 class='text-4xl text-center'>{@html quiz.title}</h1>
+	<div class='text-center'>
 		<p>{@html quiz.description}</p>
 	</div>
-	<p class="text-center">
+	<p class='text-center'>
 		{$t('view_quiz_page.made_by')}
-		<a href="/user/{quiz.user_id.id}" class="underline">@{quiz.user_id.username}</a>
+		<a href='/user/{quiz.user_id.id}' class='underline'>@{quiz.user_id.username}</a>
 	</p>
 	{#if quiz.cover_image}
-		<div class="flex justify-center align-middle items-center">
-			<div class="h-[15vh] m-auto w-auto my-3">
+		<div class='flex justify-center align-middle items-center'>
+			<div class='h-[15vh] m-auto w-auto my-3'>
 				<img
-					class="max-h-full max-w-full block"
-					src="/api/v1/storage/download/{quiz.cover_image}"
-					alt="Not provided"
+					class='max-h-full max-w-full block'
+					src='/api/v1/storage/download/{quiz.cover_image}'
+					alt='Not provided'
 				/>
 			</div>
 		</div>
 	{/if}
-	<div class="text-center text-sm pt-1 mb-4">
+	<div class='text-center text-sm pt-1 mb-4'>
 		<ImportedOrNot imported={quiz.imported_from_kahoot} />
 	</div>
-	<div class="flex justify-center mb-2 flex-row gap-2">
+	<div class='flex justify-center mb-2 flex-row gap-2'>
 		<RatingComponent bind:quiz />
 		{#if mod_view}
 			<ModComponent autoReturn={auto_return} quiz_id={quiz.id} />
 		{/if}
 	</div>
-	<div class="flex flex-col justify-center">
-		<div class="mx-auto flex flex-col gap-2 justify-center w-fit">
+	<div class='flex flex-col justify-center'>
+		<div class='mx-auto flex flex-col gap-2 justify-center w-fit'>
 			{#if quiz.imported_from_kahoot && quiz.kahoot_id}
-				<div class="w-full">
+				<div class='w-full'>
 					<GrayButton
-						href="https://create.kahoot.it/details/{quiz.kahoot_id}"
-						target="_blank"
+						href='https://create.kahoot.it/details/{quiz.kahoot_id}'
+						target='_blank'
 					>
 						{$t('view_quiz_page.view_on_kahoot')}
 					</GrayButton>
 				</div>
 			{/if}
 			{#if logged_in}
-				<div class="w-full">
+				<div class='w-full'>
 					<GrayButton
 						on:click={() => {
 							start_game = quiz.id;
@@ -126,76 +129,76 @@ SPDX-License-Identifier: MPL-2.0
 					>
 						<!-- heroicons/legacy-outline/Play -->
 						<svg
-							class="w-5 h-5"
-							aria-hidden="true"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-							xmlns="http://www.w3.org/2000/svg"
+							class='w-5 h-5'
+							aria-hidden='true'
+							fill='none'
+							stroke='currentColor'
+							stroke-width='2'
+							viewBox='0 0 24 24'
+							xmlns='http://www.w3.org/2000/svg'
 						>
 							<path
-								d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-								stroke-linecap="round"
-								stroke-linejoin="round"
+								d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
+								stroke-linecap='round'
+								stroke-linejoin='round'
 							/>
 							<path
-								d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-								stroke-linecap="round"
-								stroke-linejoin="round"
+								d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+								stroke-linecap='round'
+								stroke-linejoin='round'
 							/>
 						</svg>
 					</GrayButton>
 				</div>
 			{:else}
 				<div use:tippy={{ content: 'You need to be logged in to start a game' }}>
-					<div class="w-full">
+					<div class='w-full'>
 						<GrayButton disabled={true} flex={true}>
 							<!-- heroicons/legacy-outline/Play -->
 							<svg
-								class="w-5 h-5"
-								aria-hidden="true"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								viewBox="0 0 24 24"
-								xmlns="http://www.w3.org/2000/svg"
+								class='w-5 h-5'
+								aria-hidden='true'
+								fill='none'
+								stroke='currentColor'
+								stroke-width='2'
+								viewBox='0 0 24 24'
+								xmlns='http://www.w3.org/2000/svg'
 							>
 								<path
-									d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-									stroke-linecap="round"
-									stroke-linejoin="round"
+									d='M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z'
+									stroke-linecap='round'
+									stroke-linejoin='round'
 								/>
 								<path
-									d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-									stroke-linecap="round"
-									stroke-linejoin="round"
+									d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+									stroke-linecap='round'
+									stroke-linejoin='round'
 								/>
 							</svg>
 						</GrayButton>
 					</div>
 				</div>
 			{/if}
-			<div class="w-full">
-				<GrayButton href="/practice?quiz_id={quiz.id}">
+			<div class='w-full'>
+				<GrayButton href='/practice?quiz_id={quiz.id}'>
 					{$t('words.practice')}
 				</GrayButton>
 			</div>
-			<div class="w-full">
+			<div class='w-full'>
 				{#if logged_in}
-					<GrayButton flex={true} href="/api/v1/eximport/{quiz.id}">
+					<GrayButton flex={true} href='/api/v1/eximport/{quiz.id}'>
 						<svg
-							class="w-5 h-5 inline-block"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-							xmlns="http://www.w3.org/2000/svg"
+							class='w-5 h-5 inline-block'
+							fill='none'
+							stroke='currentColor'
+							viewBox='0 0 24 24'
+							xmlns='http://www.w3.org/2000/svg'
 						>
 							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+								stroke-linecap='round'
+								stroke-linejoin='round'
+								stroke-width='2'
+								d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
 							/>
 						</svg>
 						{$t('words.download')}
@@ -204,17 +207,17 @@ SPDX-License-Identifier: MPL-2.0
 					<div use:tippy={{ content: 'You need to be logged in to download a game' }}>
 						<GrayButton disabled={true} flex={true}>
 							<svg
-								class="w-5 h-5 inline-block"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-								xmlns="http://www.w3.org/2000/svg"
+								class='w-5 h-5 inline-block'
+								fill='none'
+								stroke='currentColor'
+								viewBox='0 0 24 24'
+								xmlns='http://www.w3.org/2000/svg'
 							>
 								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+									stroke-linecap='round'
+									stroke-linejoin='round'
+									stroke-width='2'
+									d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
 								/>
 							</svg>
 							{$t('words.download')}
@@ -223,10 +226,10 @@ SPDX-License-Identifier: MPL-2.0
 				{/if}
 			</div>
 		</div>
-		<div class="flex justify-center">
+		<div class='flex justify-center'>
 			<a
-				href="mailto:report@mawoka.eu?subject=Report quiz {quiz.id}"
-				class="text-sm underline"
+				href='mailto:report@mawoka.eu?subject=Report quiz {quiz.id}'
+				class='text-sm underline'
 			>
 				{$t('words.report')}
 			</a>
@@ -234,10 +237,10 @@ SPDX-License-Identifier: MPL-2.0
 	</div>
 
 	{#each quiz.questions as question, index_question}
-		<div class="px-4 py-1">
+		<div class='px-4 py-1'>
 			<CollapsSection headerText={question.question} expanded={auto_expand}>
-				<div class="grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1">
-					<h3 class="text-3xl m-1 text-center">
+				<div class='grid grid-cols-1 gap-2 rounded-b-lg bg-white dark:bg-gray-700 -mt-1'>
+					<h3 class='text-3xl m-1 text-center'>
 						{index_question + 1}: {@html question.question}
 					</h3>
 
@@ -247,41 +250,47 @@ SPDX-License-Identifier: MPL-2.0
 					{#if question.image}
 						<span>
 							<MediaComponent
-								css_classes="mx-auto"
+								css_classes='mx-auto'
 								src={question.image}
-								alt="Not provided"
 								muted={true}
 							/>
 						</span>
 					{/if}
 					<p
-						class="m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center"
+						class='m-1 flex flex-row gap-2 flex-nowrap whitespace-nowrap w-full justify-center'
 					>
 						<svg
-							class="w-8 h-8 inline-block"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-							xmlns="http://www.w3.org/2000/svg"
+							class='w-8 h-8 inline-block'
+							fill='none'
+							stroke='currentColor'
+							viewBox='0 0 24 24'
+							xmlns='http://www.w3.org/2000/svg'
 						>
 							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+								stroke-linecap='round'
+								stroke-linejoin='round'
+								stroke-width='2'
+								d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
 							/>
 						</svg>
-						<span class="text-lg">{question.time}s</span>
+						<span class='text-lg'>{question.time}s</span>
 					</p>
 					{#if question.type === QuizQuestionType.ABCD || question.type === undefined || question.type === QuizQuestionType.CHECK}
-						<div class="grid grid-cols-2 gap-4 m-4 p-6">
+						<div class='grid grid-cols-2 gap-4 m-4 p-6'>
 							{#each question.answers as answer, index_answer}
 								<div
-									class="p-1 rounded-lg py-4"
-									class:bg-green-500={answer.right}
-									class:bg-red-500={!answer.right}
+									class='p-1 rounded-lg py-4 shadow-xl'
+									style='background-color: {answer.color ??
+								default_colors[index_answer]}; color: {get_foreground_color(
+								answer.color ?? default_colors[index_answer]
+
+							)}'
+													class:shadow-blue-500={answer.right &&
+						question.type !== QuizQuestionType.VOTING}
+					class:shadow-yellow-500={!answer.right &&
+						question.type !== QuizQuestionType.VOTING}
 								>
-									<h4 class="text-center">
+									<h4 class='text-center'>
 										{quiz.questions[index_question].answers[index_answer]
 											.answer}
 									</h4>
@@ -289,26 +298,26 @@ SPDX-License-Identifier: MPL-2.0
 							{/each}
 						</div>
 					{:else if question.type === QuizQuestionType.RANGE}
-						<p class="m-1 text-center">
+						<p class='m-1 text-center'>
 							All numbers between {question.answers.min_correct}
 							and {question.answers.max_correct} are correct, where numbers between {question
-								.answers.min} and {question.answers.max} can be selected.
+							.answers.min} and {question.answers.max} can be selected.
 						</p>
 					{:else if question.type === QuizQuestionType.ORDER}
-						<ul class="flex flex-col gap-4 m-4 p-6">
+						<ul class='flex flex-col gap-4 m-4 p-6'>
 							{#each question.answers as answer}
-								<li class="p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300">
-									<h4 class="text-center">
+								<li class='p-1 rounded-lg py-3 dark:bg-gray-500 bg-gray-300'>
+									<h4 class='text-center'>
 										{answer.answer}
 									</h4>
 								</li>
 							{/each}
 						</ul>
 					{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
-						<div class="grid grid-cols-2 gap-4 m-4 p-6">
+						<div class='grid grid-cols-2 gap-4 m-4 p-6'>
 							{#each question.answers as answer, index_answer}
-								<div class="p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300">
-									<h4 class="text-center">
+								<div class='p-1 rounded-lg py-4 dark:bg-gray-500 bg-gray-300'>
+									<h4 class='text-center'>
 										{quiz.questions[index_question].answers[index_answer]
 											.answer}
 									</h4>
@@ -319,7 +328,7 @@ SPDX-License-Identifier: MPL-2.0
 						{#await import('$lib/play/admin/slide.svelte')}
 							<Spinner my={false} />
 						{:then c}
-							<div class="max-h-[90%] max-w-[90%]">
+							<div class='max-h-[90%] max-w-[90%]'>
 								<svelte:component this={c.default} bind:question />
 							</div>
 						{/await}