✨ Added rudimentary image-support via imgur

frontend/src/app.d.ts

@@ -27,6 +27,7 @@ export interface QuizData {
 export interface Question {
 	time: string;
 	question: string;
+	image?: string;
 	answers: Answer[];
 }
 

frontend/src/lib/editor.svelte

@@ -13,6 +13,7 @@
 	interface Question {
 		question: string;
 		time: string;
+		image?: string;
 		answers: Answer[];
 	}
 
@@ -21,12 +22,15 @@
 		answer: string;
 	}
 
+
 	export let data: Data;
 	export let submit_button_text = 'Create';
+	let imgur_links_valid = false;
 
 	const empty_question: Question = {
 		question: '',
 		time: '20',
+		image: '',
 		answers: [
 			{
 				right: false,
@@ -35,6 +39,21 @@
 		]
 	};
 
+	const checkIfAllQuestionImagesComplyWithRegex = (questions: Array<Question>) => {
+		let NoteverythingValid = false;
+		const regex = /^https:\/\/i\.imgur\.com\/.{7}.(jpg|png|gif)$/;
+		for (let i = 0; i < questions.length; i++) {
+			const question = questions[i];
+			if (question.image && !regex.test(question.image)) {
+				console.log('not valid');
+				NoteverythingValid = true;
+			}
+		}
+		return NoteverythingValid;
+	};
+
+	$: imgur_links_valid = checkIfAllQuestionImagesComplyWithRegex(data.questions);
+
 	const empty_answer: Answer = {
 		right: false,
 		answer: ''
@@ -69,6 +88,17 @@
 				class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black'
 			/>
 
+		</label>
+		<label class='m-1'>
+			{$t('words.image')}:
+			<input
+				type='text'
+				placeholder='https://i.imgur.com/kSPCidY.png'
+				bind:value={question.image}
+				class='text-black w-3/5 bg-inherit border-dotted border-b-2 border-black'
+
+			/>
+
 		</label>
 		<label class='m-1'>
 			{$t('editor.time_in_seconds')}:
@@ -141,4 +171,10 @@
 >
 	{$t('editor.add_new_question')}
 </button>
-<button type='submit' class='text-xl'>{submit_button_text}</button>
+{#if imgur_links_valid}
+	<p class='text-blue-600 text-xl text-center w-fit mx-auto'>
+		Not all links are imgur-links! <!-- TODO: Add translation -->
+	</p>
+{/if}
+<button type='submit' class='text-xl disabled:cursor-not-allowed disabled:border disabled:border-red-500 w-fit mx-auto'
+		disabled={imgur_links_valid}>{submit_button_text}</button>

frontend/src/lib/i18n/locales/de.json

@@ -80,7 +80,8 @@
         "username": "Nutzername",
         "password": "Passwort",
         "email": "Email",
-        "description": "Beschreibung"
+        "description": "Beschreibung",
+        "image": "Bild"
     },
     "editor": {
         "time_in_seconds": "Zeit in Sekunden",

frontend/src/lib/i18n/locales/en.json

@@ -80,7 +80,8 @@
         "docs": "Docs",
         "close": "Close",
         "save": "Save",
-        "description": "Description"
+        "description": "Description",
+        "image": "Image"
     },
     "editor": {
         "time_in_seconds": "Time in seconds",

frontend/src/lib/play/question.svelte

@@ -48,6 +48,9 @@
 	</h1>
 	<span class="text-center py-2 text-lg">{timer_res}</span>
 </div>
+<div>
+	<img src='{question.image}' class="w-full h-full object-cover" alt='Question image'>
+</div>
 {#if timer_res !== '0'}
 	<div class="flex flex-wrap">
 		{#each question.answers as answer}

frontend/src/routes/play.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script context='module' lang='ts'>
 	export async function load({ url }) {
 		const token = url.searchParams.get('pin');
 		return {
@@ -9,7 +9,7 @@
 	}
 </script>
 
-<script lang="ts">
+<script lang='ts'>
 	import { socket } from '$lib/socket';
 	import JoinGame from '$lib/play/join.svelte';
 	import type { Answer, QuizData } from '../app';
@@ -71,6 +71,13 @@
 
 <svelte:head>
 	<title>ClassQuiz - Play</title>
+	{#if gameData !== undefined}
+		{#each gameData.questions as question}
+			{#if question.image !== undefined}
+				<link rel='preload' as='image' href={question.image} />
+			{/if}
+		{/each}
+	{/if}
 </svelte:head>
 <div>
 	{#if !gameMeta.started && gameData === undefined}