From 7a79630eb48abe3e5229559dd78bf1705456cb75 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Fri, 23 Dec 2022 12:30:12 +0100
Subject: [PATCH] :sparkles: Added circle and rectangle

---
 classquiz/db/models.py                        |  2 ++
 classquiz/routers/editor.py                   |  1 +
 frontend/src/lib/editor/slide.svelte          |  8 +++++++-
 .../editor/slides/element_selection.svelte    | 18 ++++++++++++++++-
 .../src/lib/editor/slides/types/circle.svelte | 20 +++++++++++++++++++
 .../lib/editor/slides/types/rectangle.svelte  | 20 +++++++++++++++++++
 frontend/src/lib/quiz_types.ts                |  8 +++++---
 7 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/lib/editor/slides/types/circle.svelte
 create mode 100644 frontend/src/lib/editor/slides/types/rectangle.svelte

diff --git a/classquiz/db/models.py b/classquiz/db/models.py
index 63c74d6..8d25793 100644
--- a/classquiz/db/models.py
+++ b/classquiz/db/models.py
@@ -119,6 +119,8 @@ class SlideElementTypes(str, Enum):
     TEXT = "TEXT"
     HEADLINE = "HEADLINE"
     IMAGE = "IMAGE"
+    RECTANGLE = "RECTANGLE"
+    CIRCLE = "CIRCLE"
 
 
 class SlideElement(BaseModel):
diff --git a/classquiz/routers/editor.py b/classquiz/routers/editor.py
index 7f1459f..1e2ec09 100644
--- a/classquiz/routers/editor.py
+++ b/classquiz/routers/editor.py
@@ -198,6 +198,7 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
         quiz.description = quiz_input.description
         quiz.updated_at = datetime.now()
         quiz.questions = quiz_input.dict()["questions"]
+        print(quiz.questions)
         quiz.cover_image = quiz_input.cover_image
         quiz.background_color = quiz_input.background_color
         for image in images_to_delete:
diff --git a/frontend/src/lib/editor/slide.svelte b/frontend/src/lib/editor/slide.svelte
index 712e83b..a0e5ba6 100644
--- a/frontend/src/lib/editor/slide.svelte
+++ b/frontend/src/lib/editor/slide.svelte
@@ -6,6 +6,8 @@
 <script lang="ts">
 	import TextElement from './slides/types/text.svelte';
 	import HeadlineElement from './slides/types/headline.svelte';
+	import RectangleElement from './slides/types/rectangle.svelte';
+	import CircleElement from './slides/types/circle.svelte';
 	import { draggable } from '@neodrag/svelte';
 	import type { Question } from '$lib/quiz_types';
 	import { ElementTypes, QuizQuestionType } from '$lib/quiz_types';
@@ -108,7 +110,7 @@
 				}px`;
 				elements_binds[i].style.width = `${data.answers[i].width * main_el.offsetWidth}px`;
 			}
-		}, 100);
+		}, 200);
 	});
 </script>
 
@@ -190,6 +192,10 @@
 					<TextElement bind:data={el.data} />
 				{:else if el.type === ElementTypes.Headline}
 					<HeadlineElement bind:data={el.data} />
+				{:else if el.type === ElementTypes.Rectangle}
+					<RectangleElement bind:data={el.data} />
+				{:else if el.type === ElementTypes.Circle}
+					<CircleElement bind:data={el.data} />
 				{/if}
 			</div>
 		{/each}
diff --git a/frontend/src/lib/editor/slides/element_selection.svelte b/frontend/src/lib/editor/slides/element_selection.svelte
index ac07cf1..581c46b 100644
--- a/frontend/src/lib/editor/slides/element_selection.svelte
+++ b/frontend/src/lib/editor/slides/element_selection.svelte
@@ -11,7 +11,9 @@
 	export let selected_element;
 	const keybinding_list = {
 		t: ElementTypes.Text,
-		h: ElementTypes.Headline
+		h: ElementTypes.Headline,
+		r: ElementTypes.Rectangle,
+		c: ElementTypes.Circle
 		// "i": ElementTypes.Image
 	};
 
@@ -50,6 +52,20 @@
 			type: ElementTypes.Text,
 			icon: undefined,
 			shortcut: 't'
+		},
+		{
+			name: 'Rectangle',
+			description: 'Just a rectangle',
+			type: ElementTypes.Rectangle,
+			icon: undefined,
+			shortcut: 'r'
+		},
+		{
+			name: 'Circle',
+			description: 'Just a circle',
+			type: ElementTypes.Circle,
+			icon: undefined,
+			shortcut: 'c'
 		}
 	];
 </script>
diff --git a/frontend/src/lib/editor/slides/types/circle.svelte b/frontend/src/lib/editor/slides/types/circle.svelte
new file mode 100644
index 0000000..2a3b06a
--- /dev/null
+++ b/frontend/src/lib/editor/slides/types/circle.svelte
@@ -0,0 +1,20 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let data: string;
+	export let editor = true;
+
+	if (!data) {
+		data = '#ed333b';
+	}
+	$: console.log(data);
+</script>
+
+<div class="rounded-full w-full h-full flex justify-center p-2" style="background-color: {data}">
+	{#if editor}
+		<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
+	{/if}
+</div>
diff --git a/frontend/src/lib/editor/slides/types/rectangle.svelte b/frontend/src/lib/editor/slides/types/rectangle.svelte
new file mode 100644
index 0000000..502d7c8
--- /dev/null
+++ b/frontend/src/lib/editor/slides/types/rectangle.svelte
@@ -0,0 +1,20 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let data: string;
+	export let editor = true;
+
+	if (!data) {
+		data = '#ed333b';
+	}
+	$: console.log(data);
+</script>
+
+<div class="w-full h-full flex justify-center p-2" style="background-color: {data}">
+	{#if editor}
+		<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
+	{/if}
+</div>
diff --git a/frontend/src/lib/quiz_types.ts b/frontend/src/lib/quiz_types.ts
index fbda89c..b336e93 100644
--- a/frontend/src/lib/quiz_types.ts
+++ b/frontend/src/lib/quiz_types.ts
@@ -5,9 +5,11 @@
  */
 
 export enum ElementTypes {
-	Text = 'TEXT',
-	Headline = 'HEADLINE',
-	Image = 'IMAGE'
+	Text = 'TEXT', // eslint-disable-line no-unused-vars
+	Headline = 'HEADLINE', // eslint-disable-line no-unused-vars
+	Image = 'IMAGE', // eslint-disable-line no-unused-vars
+	Rectangle = 'RECTANGLE', // eslint-disable-line no-unused-vars
+	Circle = 'CIRCLE' // eslint-disable-line no-unused-vars
 }
 
 export interface QuizData {