✨ Basic Quiztivity working

frontend/src/routes/quiztivity/create/+page.svelte

@@ -4,9 +4,8 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
-	import type { Data } from '../../../lib/quiztivity/types';
-	import Editor from '../../../lib/quiztivity/editor.svelte';
-	import { goto } from '$app/navigation';
+	import type { Data } from '$lib/quiztivity/types';
+	import Editor from '$lib/quiztivity/editor.svelte';
 
 	let data: Data = { pages: [], id: undefined, title: '' };
 	let saving = false;

frontend/src/routes/quiztivity/edit/+page.svelte

@@ -5,9 +5,7 @@
   -->
 <script lang="ts">
 	import type { PageData } from './$types';
-	import type { Data } from '../../../lib/quiztivity/types';
 	import Editor from '../../../lib/quiztivity/editor.svelte';
-	import { goto } from '$app/navigation';
 
 	export let data: PageData;
 

frontend/src/routes/quiztivity/edit/+page.ts

@@ -6,7 +6,7 @@
 
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
-import type { Data } from '../../../lib/quiztivity/types';
+import type { Data } from '$lib/quiztivity/types';
 
 export const load = (async ({ url, fetch }) => {
 	const id = url.searchParams.get('id');

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

@@ -0,0 +1,38 @@
+<!--
+  - 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 { PageData } from './$types';
+	import type { QuizTivityPage } from '$lib/quiztivity/types';
+	import { QuizTivityTypes } from '$lib/quiztivity/types';
+	import NavigationBar from './navigation_bar.svelte';
+
+	export let data: PageData;
+	let quiztivity = data.quiztivity;
+	for (let i = 0; i < quiztivity.pages.length; i++) {
+		const id = (Math.random() + 1).toString(36).substring(7);
+		const type: QuizTivityTypes = quiztivity.pages[i].type as QuizTivityTypes;
+		quiztivity.pages[i] = { ...quiztivity.pages[i], id, type };
+	}
+
+	let current_slide_index = 0;
+	let current_slide: QuizTivityPage = quiztivity.pages[current_slide_index];
+	$: current_slide = quiztivity.pages[current_slide_index];
+</script>
+
+<div class="w-full h-full flex flex-col overflow-scroll">
+	<div class="w-full h-full">
+		{#if current_slide.type === QuizTivityTypes.MARKDOWN}
+			{#await import('$lib/quiztivity/components/markdown/play.svelte') then c}
+				<svelte:component this={c.default} data={current_slide.data} />
+			{/await}
+		{:else if current_slide.type === QuizTivityTypes.MEMORY}
+			{#await import('$lib/quiztivity/components/memory/play.svelte') then c}
+				<svelte:component this={c.default} data={current_slide.data} />
+			{/await}
+		{/if}
+	</div>
+	<NavigationBar bind:current_slide_index question_count={quiztivity.pages.length} />
+</div>

frontend/src/routes/quiztivity/play/+page.ts

@@ -0,0 +1,24 @@
+/*
+ * 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/.
+ */
+
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import type { Data } from '$lib/quiztivity/types';
+
+export const load = (async ({ url, fetch }) => {
+	const id = url.searchParams.get('id');
+	if (!id) {
+		throw error(400, 'id missing');
+	}
+	const resp = await fetch(`/api/v1/quiztivity/${id}`);
+	if (!resp.ok) {
+		throw error(404, 'quiztivity not found');
+	}
+	const data: Data = await resp.json();
+	return {
+		quiztivity: data
+	};
+}) satisfies PageLoad;

frontend/src/routes/quiztivity/play/navigation_bar.svelte

@@ -0,0 +1,36 @@
+<!--
+  - 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 BrownButton from '$lib/components/buttons/brown.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	export let current_slide_index: number;
+	export let question_count: number;
+
+	const { t } = getLocalization();
+</script>
+
+<div class="mt-auto h-[7vh] bg-opacity-50 bg-black shadow-2xl flex justify-between">
+	<div class="my-auto justify-start ml-4">
+		<BrownButton
+			disabled={current_slide_index < 1}
+			on:click={() => {
+				current_slide_index -= 1;
+			}}>{$t('words.back')}</BrownButton
+		>
+	</div>
+	<div class="my-auto">
+		{current_slide_index + 1}/{question_count}
+	</div>
+	<div class="my-auto justify-end mr-4">
+		<BrownButton
+			disabled={current_slide_index === 1}
+			on:click={() => {
+				current_slide_index += 1;
+			}}>{$t('words.next')}</BrownButton
+		>
+	</div>
+</div>