✨ Added background-image to quizzes

frontend/src/lib/editor/settings-card.svelte

@@ -14,6 +14,7 @@
 	const { t } = getLocalization();
 
 	let uppyOpen = false;
+	let bg_uppy_open = false;
 
 	export let edit_id: string;
 	export let data: EditorData;
@@ -38,7 +39,12 @@
 				/>
 			</div>
 		</div>
-		<div class="dark:bg-gray-700">
+		<div
+			class="dark:bg-gray-700 h-full"
+			style="background-repeat: no-repeat;background-size: 100% 100%;background-image: {data.background_image
+				? `url("${data.background_image}")`
+				: `unset`}"
+		>
 			<div class="flex justify-center pt-10 w-full">
 				<!--<input
 					type="text"
@@ -173,6 +179,40 @@
 					</div>
 				</div>
 			</div>
+			<div class="flex justify-center pt-10">
+				<h3>Background-Image</h3>
+			</div>
+			<div class="w-full flex justify-center -mt-8">
+				{#if data.background_image}
+					<button
+						on:click={() => {
+							data.background_image = undefined;
+						}}
+						class="mt-10 bg-red-500 p-2 rounded-lg border-2 border-black transition hover:bg-red-400"
+						>Remove Background-Image</button
+					>
+				{:else if pow_data === undefined}
+					<a href="/docs/pow" target="_blank" class="cursor-help pt-10">
+						<Spinner my_20={false} />
+					</a>
+				{:else}
+					{#await import('$lib/editor/uploader.svelte')}
+						<div class="pt-10">
+							<Spinner my_20={false} />
+						</div>
+					{:then c}
+						<svelte:component
+							this={c.default}
+							bind:modalOpen={bg_uppy_open}
+							bind:edit_id
+							bind:data
+							selected_question={-1}
+							bind:pow_data
+							bind:pow_salt
+						/>
+					{/await}
+				{/if}
+			</div>
 		</div>
 	</div>
 </div>

frontend/src/lib/editor/uploader.svelte

@@ -21,6 +21,7 @@
 	import '@uppy/image-editor/dist/style.css';
 	import type { EditorData } from '../quiz_types';
 	import { getLocalization } from '$lib/i18n';
+
 	const { t } = getLocalization();
 
 	export let modalOpen = false;
@@ -65,6 +66,8 @@
 		console.log(pow_data);
 		if (selected_question === undefined) {
 			data.cover_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
+		} else if (selected_question === -1) {
+			data.background_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
 		} else {
 			data.questions[
 				selected_question

frontend/src/lib/quiz_types.ts

@@ -22,6 +22,7 @@ export interface QuizData {
 	started: boolean;
 	cover_image?: string;
 	background_color?: string;
+	background_image?: string;
 }
 
 export enum QuizQuestionType {
@@ -65,4 +66,5 @@ export interface EditorData {
 	questions: Question[];
 	cover_image?: string;
 	background_color?: string;
+	background_image?: string;
 }

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

@@ -131,7 +131,9 @@
 		players = players;
 	};
 	let bg_color;
+	let bg_image;
 	$: bg_color = quiz_data ? quiz_data.background_color : undefined;
+	$: bg_image = quiz_data ? quiz_data.background_image : undefined;
 	let show_final_results = false;
 	$: show_final_results = JSON.stringify(final_results) !== JSON.stringify([null]);
 </script>
@@ -142,7 +144,9 @@
 </svelte:head>
 <div
 	class="min-h-screen min-w-full"
-	style="background: {bg_color ? bg_color : 'transparent'}"
+	style="background-repeat: no-repeat;background-size: 100% 100%;background-image: {bg_image
+		? `url('${bg_image}')`
+		: `unset`}; background-color: {bg_color ? bg_color : 'transparent'}"
 	class:text-black={bg_color}
 >
 	{#if JSON.stringify(final_results) !== JSON.stringify([null])}