From d4bfe9138f727f476e286049135564823a5f3d33 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Thu, 16 Jun 2022 19:44:56 +0200
Subject: [PATCH] :construction: New editor nearly done

---
 frontend/src/lib/editor.svelte               |  38 +++++-
 frontend/src/lib/editor/card.svelte          | 127 +++++++++++++++++++
 frontend/src/lib/editor/checker-bg.svg       |   3 +
 frontend/src/lib/editor/settings-card.svelte |  54 +++++++-
 frontend/src/lib/editor/sidebar.svelte       |  20 ++-
 frontend/src/lib/yupSchemas.ts               |   8 +-
 frontend/src/routes/__layout.svelte          |   1 +
 7 files changed, 238 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/lib/editor/card.svelte
 create mode 100644 frontend/src/lib/editor/checker-bg.svg

diff --git a/frontend/src/lib/editor.svelte b/frontend/src/lib/editor.svelte
index 3c3fd5a..77c2c6f 100644
--- a/frontend/src/lib/editor.svelte
+++ b/frontend/src/lib/editor.svelte
@@ -5,6 +5,7 @@
 	import type { EditorData, Question, Answer } from './quiz_types';
 	import Sidebar from '$lib/editor/sidebar.svelte';
 	import SettingsCard from '$lib/editor/settings-card.svelte';
+	import QuizCard from '$lib/editor/card.svelte';
 
 	const { t } = getLocalization();
 
@@ -68,9 +69,38 @@
 	<div>
 		<Sidebar bind:data bind:selected_question />
 	</div>
-	<div class="col-span-5">
-		{#if selected_question === -1}
-			<SettingsCard bind:data />
-		{/if}
+	<div class="col-span-5 flex flex-col">
+		<div class="h-10 w-full bg-white mb-10 flex align-middle justify-center rounded-br-lg">
+			{#if schemaInvalid}
+				<p class="text-center w-full text-red-600 h-full">{yupErrorMessage}</p>
+			{/if}
+			<button
+				class="pr-2 align-middle bg-purple-400 pl-2 ml-auto whitespace-nowrap disabled:opacity-60 rounded-br-lg"
+				disabled={schemaInvalid}
+			>
+				<span>Save</span>
+				<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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div class="w-full h-full">
+			{#if selected_question === -1}
+				<SettingsCard bind:data />
+			{:else}
+				<QuizCard bind:data bind:selected_question />
+			{/if}
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/editor/card.svelte b/frontend/src/lib/editor/card.svelte
new file mode 100644
index 0000000..011a2e9
--- /dev/null
+++ b/frontend/src/lib/editor/card.svelte
@@ -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>
diff --git a/frontend/src/lib/editor/checker-bg.svg b/frontend/src/lib/editor/checker-bg.svg
new file mode 100644
index 0000000..2996684
--- /dev/null
+++ b/frontend/src/lib/editor/checker-bg.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="16" height="16">
+    <path fill="#d0d0d0" fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/>
+</svg>
diff --git a/frontend/src/lib/editor/settings-card.svelte b/frontend/src/lib/editor/settings-card.svelte
index 9707d8d..4f47e91 100644
--- a/frontend/src/lib/editor/settings-card.svelte
+++ b/frontend/src/lib/editor/settings-card.svelte
@@ -4,7 +4,7 @@
 	export let data: EditorData;
 </script>
 
-<div class="w-full h-full p-20">
+<div class="w-full h-full pb-20 px-20">
 	<div class="rounded-lg bg-white w-full h-full border-gray-500">
 		<div class="h-fit bg-gray-300 rounded-t-lg">
 			<div class="flex align-middle p-4 gap-3">
@@ -24,9 +24,59 @@
 				<input
 					type="text"
 					bind:value={data.title}
-					class="p-3 rounded-lg border-gray-500 border text-center w-1/3"
+					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold"
 				/>
 			</div>
+			<div class="flex justify-center pt-10 w-full max-h-32">
+				<textarea
+					type="text"
+					bind:value={data.description}
+					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none"
+				/>
+			</div>
+			<div class="pt-10">
+				<button
+					type="button"
+					on:click={() => {
+						data.public = !data.public;
+					}}
+					class="text-center w-full"
+				>
+					{#if data.public}
+						<svg
+							class="w-8 h-8 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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>Public</span>
+					{:else}
+						<svg
+							class="w-8 h-8 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+						<span>Private</span>
+					{/if}
+				</button>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte
index 205f54c..fa9cea8 100644
--- a/frontend/src/lib/editor/sidebar.svelte
+++ b/frontend/src/lib/editor/sidebar.svelte
@@ -59,7 +59,7 @@
 		>
 			<input
 				type="text"
-				class="whitespace-nowrap truncate text-center w-full bg-transparent rounded"
+				class="whitespace-nowrap truncate text-center w-full bg-transparent rounded font-semibold"
 				bind:value={data.title}
 			/>
 		</div>
@@ -130,7 +130,12 @@
 				use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
 				class="m-1 border border-gray-500 rounded-lg p-0.5"
 			>
-				<h1 class="whitespace-nowrap truncate text-center">
+				<h1
+					class="whitespace-nowrap truncate text-center rounded-lg"
+					class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
+						question.question
+					)}
+				>
 					{#if question.question === ''}
 						<span class="italic text-gray-500">No title...</span>
 					{:else}
@@ -157,7 +162,16 @@
 						class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center"
 						class:bg-green-500={answer.right}
 						class:bg-red-500={!answer.right}
-						use:tippy={{ content: answer.answer }}>{answer.answer}</span
+						class:bg-yellow-500={!reach(
+							dataSchema,
+							'questions[].answers[].answer'
+						).isValidSync(answer.answer)}
+						use:tippy={{ content: answer.answer === '' ? 'Empty...' : answer.answer }}
+						>{#if answer.answer === ''}
+							<i>Empty...</i>
+						{:else}
+							{answer.answer}
+						{/if}</span
 					>
 				{/each}
 			</div>
diff --git a/frontend/src/lib/yupSchemas.ts b/frontend/src/lib/yupSchemas.ts
index da53d68..8d95ec4 100644
--- a/frontend/src/lib/yupSchemas.ts
+++ b/frontend/src/lib/yupSchemas.ts
@@ -9,14 +9,14 @@ export const dataSchema = yup.object({
 		.max(300, 'The title has to be shorter than 300 characters'),
 	description: yup
 		.string()
-		.required()
-		.min(3, 'The title has to be longer than 3 characters')
-		.max(300, 'The title has to be shorter than 300 characters'),
+		.required('The description is required!')
+		.min(3, 'The description has to be longer than 3 characters')
+		.max(500, 'The description has to be shorter than 500 characters'),
 	questions: yup
 		.array()
 		.of(
 			yup.object({
-				question: yup.string().required('A question is required').max(299),
+				question: yup.string().required('A question-title is required').max(299),
 				time: yup.number().required().positive('The time has to be positive'),
 				image: yup
 					.string()
diff --git a/frontend/src/routes/__layout.svelte b/frontend/src/routes/__layout.svelte
index 38c6dd9..c9a1a5b 100644
--- a/frontend/src/routes/__layout.svelte
+++ b/frontend/src/routes/__layout.svelte
@@ -82,6 +82,7 @@
 		// height: 100%;
 		// width: 100%;
 
+		// bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]
 		background: linear-gradient(to right, #009444, #39b54a, #8dc63f) repeat-y;
 		background-size: cover;
 		/*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */