it now also adds the awnsers to the db

src/lib/config.js

@@ -59,11 +59,11 @@ export let AnswersSymbolAndColorScheme = [
 
 export let DefaultQuestions = [
 	{
-		questionText: "What should you do when you're free?",
+		questionText: "What should you do when you're free?", 
 		timeLimit: 15,
 		type: "SingleAnswer",
 		options: ["Do something in real life!", "Play video games", "Code!", "Touch grass!"],
-		CorrectOption: 2,
+		CorrectOption: { SingleAnswer: 2 },
 		hasMedia: false,
 		mediaURL: null,
 	},

src/routes/kahootclone/create/+page.svelte

@@ -16,4 +16,4 @@
 	<QuestionsList />
 	<div class="flex h-full w-[54%] flex-col gap-2"><HowTheQuestionWillLook /><Buttons /></div>
 	<QuestionOptions />
-</div>
+</div>

src/routes/kahootclone/create/Buttons.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { DefaultQuestions } from "$lib/config.js";
 	import { QuestionsData } from "./create.svelte";
+	import { createGame } from "./createGame";
 </script>
 
 <div class="flex w-full justify-center gap-2 overflow-y-auto rounded border-2 p-3 pr-5">
@@ -10,7 +11,7 @@
 	<button class="btn flex items-center gap-1">
 		<i class="nf nf-md-cpu_64_bit"></i> Generate Questions Using AI
 	</button>
-	<button class="btn flex items-center gap-1">
+	<button class="btn flex items-center gap-1" onclick={() => createGame()}>
 		<i class="nf nf-md-play"></i> Start Game
 	</button>
 </div>

src/routes/kahootclone/create/createGame.js

@@ -0,0 +1,51 @@
+import { supabase } from "$lib/supabase.js";
+import { QuestionsData } from "./create.svelte.js";
+import toast from "svelte-5-french-toast";
+
+export async function createGame() {
+	let GamesData;
+	try {
+		GamesData = await toast.promise(
+			(async () => {
+				let { data, error } = await supabase.from("games").insert([{}]).select("id,gamepin");
+				if (error) {
+					throw new Error(error.message);
+				}
+				return data;
+			})(),
+			{
+				loading: "Adding Game...",
+				success: "Game added!",
+				error: (err) => `Could not add game.\nError: ${err.message}\n\n Please try again.`,
+			},
+		);
+
+		await toast.promise(
+			(async () => {
+				const { data, error } = await supabase
+					.from("questions")
+					.insert(
+						QuestionsData.v.map((_, index) => ({
+							...QuestionsData.v[index],
+							gameid: GamesData[0].id,
+						})),
+					)
+					.select();
+				if (error) {
+					throw new Error(error.message);
+				}
+				return data;
+			})(),
+			{
+				loading: "Adding Questions and Answers...",
+				success: "Questions and Answers added!",
+				error: (err) =>
+					`Could not add Questions and Answers.\nError: ${err.message}\n\n Please try again.`,
+			},
+		);
+	} catch (error) {
+		return;
+	}
+
+	toast.success(`Game created! Your game pin is: ${GamesData[0].gamepin}`);
+}

src/routes/tailwind.css

@@ -1,9 +1,10 @@
 @import "https://www.nerdfonts.com/assets/css/webfont.css";
 @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");
 @import "tailwindcss";
 
 :root {
-	@apply bg-gray-950 font-[Sour_Gummy] text-white;
+	@apply bg-gray-950 font-[Space_Grotesk] text-white;
 }
 
 .btn {