✨ Slides kinda working

frontend/src/lib/admin.svelte

@@ -87,14 +87,14 @@
 			timer_res = seconds.toString();
 		}, 1000);
 	};
-	let circular_prgoress = 0;
+	let circular_progress = 0;
 	$: {
 		try {
-			circular_prgoress =
+			circular_progress =
 				1 -
 				((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
 		} catch {
-			circular_prgoress = 0;
+			circular_progress = 0;
 		}
 	}
 </script>
@@ -126,7 +126,7 @@
 				</button>
 			{/if}
 			{#if question_results === null && selected_question !== -1}
-				<button on:click={get_question_results} class="admin-button">Show results </button>
+				<button on:click={get_question_results} class="admin-button">Show results</button>
 			{/if}
 		{:else if selected_question !== -1}
 			<button on:click={show_solutions} class="admin-button"
@@ -153,50 +153,62 @@
 
 <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">
-				{@html quiz_data.questions[selected_question].question}
-			</h1>
-			<!--			<span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
-			<div class="mx-auto my-2">
-				<CircularTimer
-					bind:text={timer_res}
-					bind:progress={circular_prgoress}
-					color="#ef4444"
+		{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
+			{#await import('$lib/play/admin/slide.svelte')}
+				<Spinner my_20={false} />
+			{:then c}
+				<svelte:component
+					this={c.default}
+					bind:question={quiz_data.questions[selected_question]}
 				/>
+			{/await}
+		{:else}
+			<div class="flex flex-col justify-center w-screen h-1/6">
+				<h1 class="text-6xl text-center">
+					{@html quiz_data.questions[selected_question].question}
+				</h1>
+				<!--			<span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
+				<div class="mx-auto my-2">
+					<CircularTimer
+						bind:text={timer_res}
+						bind:progress={circular_progress}
+						color="#ef4444"
+					/>
+				</div>
 			</div>
-		</div>
-		{#if quiz_data.questions[selected_question].image !== null}
-			<div>
-				<img
-					src={quiz_data.questions[selected_question].image}
-					class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
-					alt="Content for Question"
-				/>
-			</div>
-		{/if}
-		{#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}
-					<div
-						class="rounded-lg h-fit flex"
-						style="background-color: {answer.color ?? '#B45309'}"
-						class:opacity-50={!answer.right &&
-							timer_res === '0' &&
-							quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
-					>
-						<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
-						<span class="text-center text-2xl px-2 py-4 w-full text-black"
-							>{answer.answer}</span
+			{#if quiz_data.questions[selected_question].image !== null}
+				<div>
+					<img
+						src={quiz_data.questions[selected_question].image}
+						class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
+						alt="Content for Question"
+					/>
+				</div>
+			{/if}
+			{#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}
+						<div
+							class="rounded-lg h-fit flex"
+							style="background-color: {answer.color ?? '#B45309'}"
+							class:opacity-50={!answer.right &&
+								timer_res === '0' &&
+								quiz_data.questions[selected_question].type ===
+									QuizQuestionType.ABCD}
 						>
-						<span class="pl-4 w-10" />
-					</div>
-				{/each}
-			</div>
+							<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
+							<span class="text-center text-2xl px-2 py-4 w-full text-black"
+								>{answer.answer}</span
+							>
+							<span class="pl-4 w-10" />
+						</div>
+					{/each}
+				</div>
+			{/if}
 		{/if}
 	{/if}
 	<br />
-	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
+	{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE}
 		{#if question_results === null}{:else if question_results === undefined}
 			{#if !final_results_clicked}
 				<div class="w-full flex justify-center">

frontend/src/lib/editor/slide.svelte

@@ -187,7 +187,7 @@
 						</svg>
 					</button>-->
 				{#if el.type === ElementTypes.Text}
-					<TextElement bind:text={el.data} />
+					<TextElement bind:data={el.data} />
 				{:else if el.type === ElementTypes.Headline}
 					<HeadlineElement bind:data={el.data} />
 				{/if}

frontend/src/lib/editor/slides/types/headline.svelte

@@ -5,10 +5,17 @@
   -->
 <script lang="ts">
 	export let data;
+	export let editor = true;
 </script>
 
-<input
-	bind:value={data}
-	type="text"
-	class="w-full h-full dark:text-black text-center text-3xl min-h-fit"
-/>
+{#if editor}
+	<input
+		bind:value={data}
+		type="text"
+		class="w-full h-full dark:text-black text-center text-3xl min-h-fit"
+	/>
+{:else}
+	<h2 class="w-full h-full text-center text-3xl min-h-fit">
+		{data}
+	</h2>
+{/if}

frontend/src/lib/editor/slides/types/text.svelte

@@ -4,13 +4,12 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
-	export let text;
+	export let data;
+	export let editor = true;
 </script>
 
-<!--
-  - This Source Code Form is subject to the terms of the Mozilla Public
-  - 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/.
-  -->
-
-<textarea bind:value={text} class="w-full h-full dark:text-black resize-none" />
+{#if editor}
+	<textarea bind:value={data} class="w-full h-full dark:text-black resize-none" />
+{:else}
+	<p>{data}</p>
+{/if}

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

@@ -0,0 +1,42 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - 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">
+	import type { Question } from '$lib/quiz_types';
+	import TextElement from '$lib/editor/slides/types/text.svelte';
+	import HeadlineElement from '$lib/editor/slides/types/headline.svelte';
+	import { ElementTypes } from '$lib/quiz_types.js';
+	import { draggable } from '@neodrag/svelte';
+
+	export let question: Question;
+
+	let main_el: HTMLElement | undefined;
+</script>
+
+<div class="w-full min-h-[calc(100vh-8rem)]" bind:this={main_el}>
+	{#if main_el}
+		{#each question.answers as el, i}
+			<div
+				use:draggable={{
+					bounds: 'parent',
+					handle: '.drag',
+					disabled: true,
+					defaultPosition: {
+						x: el.x * main_el.offsetWidth,
+						y: el.y * main_el.offsetHeight
+					}
+				}}
+				style="height: {el.height * main_el.offsetHeight}px; width: {el.width *
+					main_el.offsetWidth}px"
+			>
+				{#if el.type === ElementTypes.Text}
+					<TextElement bind:data={el.data} editor={false} />
+				{:else if el.type === ElementTypes.Headline}
+					<HeadlineElement bind:data={el.data} editor={false} />
+				{/if}
+			</div>
+		{/each}
+	{/if}
+</div>