✨ Finished Slides

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

@@ -5,38 +5,36 @@
   -->
 <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';
+	import { onMount } from 'svelte';
+	import Pikaso from 'pikaso';
 
 	export let question: Question;
 
-	let main_el: HTMLElement | undefined;
+	let canvas_el: HTMLDivElement | undefined;
+	let canvas: Pikaso;
+	let img_src = '';
+
+	onMount(() => {
+		canvas = new Pikaso({
+			container: canvas_el,
+			snapToGrid: {},
+			selection: {
+				interactive: false
+			}
+		});
+		if (typeof question.answers === 'string') {
+			const data = JSON.parse(question.answers);
+			canvas.import.json(data);
+			img_src = canvas.export.toImage();
+		}
+	});
 </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 class="w-full h-full">
+	<div class="hidden">
+		<div bind:this={canvas_el} class="w-full h-full block" />
+	</div>
+	<div class="w-full h-full flex justify-center">
+		<img src={img_src} />
+	</div>
 </div>