✨ Added circle and rectangle

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):

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:

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}

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>

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>

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>

frontend/src/lib/quiz_types.ts

@@ -5,9 +5,11 @@
  */
 
 export enum ElementTypes {
-	Text = 'TEXT',
+	Text = 'TEXT', // eslint-disable-line no-unused-vars
-	Headline = 'HEADLINE',
+	Headline = 'HEADLINE', // eslint-disable-line no-unused-vars
-	Image = 'IMAGE'
+	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 {