🚧 New editor nearly done

2022-06-16 19:44:56 +02:00
parent a22cf647fd
commit d4bfe9138f
7 changed files with 238 additions and 13 deletions
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { EditorData, Answer } from '$lib/quiz_types';
+	import CheckerBg from '$lib/editor/checker-bg.svg';
+	import { reach } from 'yup';
+	import { dataSchema } from '$lib/yupSchemas';
+
+	export let data: EditorData;
+	export let selected_question: number;
+
+	let question = data.questions[selected_question];
+	$: question = data.questions[selected_question];
+	const empty_answer: Answer = {
+		right: false,
+		answer: ''
+	};
+</script>
+
+<div class="w-full h-full pb-20 px-20">
+	<div class="rounded-lg bg-white w-full h-full border-gray-500 drop-shadow-2xl">
+		<div class="h-fit bg-gray-300 rounded-t-lg">
+			<div class="flex align-middle p-4 gap-3">
+				<span
+					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-red-400 transition"
+				/>
+				<span
+					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-yellow-400 transition"
+				/>
+				<span
+					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-green-400 transition"
+				/>
+			</div>
+		</div>
+		<div class="flex flex-col">
+			<div class="flex justify-center pt-10 w-full">
+				<input
+					type="text"
+					bind:value={question.question}
+					placeholder="No title..."
+					class="p-3 rounded-lg border-gray-500 border text-center w-2/3 text-lg font-semibold placeholder:italic placeholder:font-normal"
+					class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
+						question.question
+					)}
+				/>
+			</div>
+			<div class="flex justify-center pt-10 w-full max-h-72 w-full">
+				<img src={question.image} alt="not available" class="max-h-72 h-auto w-auto" />
+			</div>
+			<div class="flex justify-center pt-10 w-full">
+				<div class="grid grid-cols-2 gap-4 w-full px-10">
+					{#each question.answers as answer, index}
+						<div
+							on:contextmenu|preventDefault={() => {
+								question.answers.splice(index, 1);
+								question.answers = question.answers;
+							}}
+							class="p-4 rounded-lg flex justify-center w-full"
+							class:bg-red-500={!answer.right}
+							class:bg-green-500={answer.right}
+							class:bg-yellow-500={!reach(
+								dataSchema,
+								'questions[].answers[].answer'
+							).isValidSync(answer.answer)}
+						>
+							<input
+								bind:value={answer.answer}
+								type="text"
+								class="bg-transparent border-b-2 border-dotted w-5/6 text-center"
+								placeholder="Empty..."
+							/>
+							<button
+								type="button"
+								on:click={() => {
+									answer.right = !answer.right;
+								}}
+							>
+								{#if answer.right}
+									<svg
+										class="w-6 h-6 inline-block"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								{:else}
+									<svg
+										class="w-6 h-6 inline-block"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								{/if}
+							</button>
+						</div>
+					{/each}
+					{#if question.answers.length < 4}
+						<button
+							class="p-4 rounded-lg bg-transparent"
+							style="background-image: url({CheckerBg})"
+							type="button"
+							on:click={() => {
+								question.answers = [...question.answers, { empty_answer }];
+							}}
+						>
+							<span class="italic text-center">Add an answer</span>
+						</button>
+					{/if}
+				</div>
+			</div>
+			<p class="italic text-center mt-auto pt-4">Right-click on an answer to delete it!</p>
+		</div>
+	</div>
+</div>