From 736059646dfa4a952f4d981b4d0b5a0e32ffc065 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Thu, 15 May 2025 06:27:40 +0530
Subject: [PATCH] made the filestructure better and migrated the game creation
 from the old type of db to the newer relational db type!

---
 .vscode/settings.json                         |  10 +-
 README.md                                     |  69 +++----
 jsconfig.json                                 |   8 +-
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 src/app.css                                   |   1 -
 src/routes/+layout.svelte                     |   3 +-
 src/routes/+page.svelte                       |  25 ++-
 src/routes/create/+page.svelte                | 170 ++----------------
 .../components/Questions/answers.svelte       |  23 +++
 .../components/Questions/question.svelte      |  30 ++++
 .../components/buttons/DeleteQuestion.svelte  |  20 +++
 .../components/buttons/NewQuestion.svelte     |  15 ++
 .../components/buttons/StartGame.svelte       |  18 ++
 .../buttons/UseDemoQuestions.svelte           |  15 ++
 .../create/logic/GameCreateData.svelte.js     |  54 ++++++
 src/routes/create/logic/InsertGameInDB.js     |  58 ++++++
 src/routes/create/logic/StartGame.js          |  17 ++
 src/routes/host/[gamePin]/+page.js            |   6 -
 src/routes/host/[gamePin]/+page.svelte        |  81 ---------
 src/routes/hostgame/[gamePin]/+page.js        |   6 -
 src/routes/hostgame/[gamePin]/+page.svelte    | 100 -----------
 src/routes/join/+page.svelte                  |  72 --------
 src/routes/play-lobby/[gamePin]/+page.js      |   6 -
 src/routes/play-lobby/[gamePin]/+page.svelte  | 112 ------------
 src/routes/play/[gamePin]/+page.js            |   5 -
 src/routes/play/[gamePin]/+page.svelte        | 134 --------------
 svelte.config.js                              |  10 +-
 28 files changed, 343 insertions(+), 736 deletions(-)
 delete mode 100644 src/app.css
 create mode 100644 src/routes/create/components/Questions/answers.svelte
 create mode 100644 src/routes/create/components/Questions/question.svelte
 create mode 100644 src/routes/create/components/buttons/DeleteQuestion.svelte
 create mode 100644 src/routes/create/components/buttons/NewQuestion.svelte
 create mode 100644 src/routes/create/components/buttons/StartGame.svelte
 create mode 100644 src/routes/create/components/buttons/UseDemoQuestions.svelte
 create mode 100644 src/routes/create/logic/GameCreateData.svelte.js
 create mode 100644 src/routes/create/logic/InsertGameInDB.js
 create mode 100644 src/routes/create/logic/StartGame.js
 delete mode 100644 src/routes/host/[gamePin]/+page.js
 delete mode 100644 src/routes/host/[gamePin]/+page.svelte
 delete mode 100644 src/routes/hostgame/[gamePin]/+page.js
 delete mode 100644 src/routes/hostgame/[gamePin]/+page.svelte
 delete mode 100644 src/routes/join/+page.svelte
 delete mode 100644 src/routes/play-lobby/[gamePin]/+page.js
 delete mode 100644 src/routes/play-lobby/[gamePin]/+page.svelte
 delete mode 100644 src/routes/play/[gamePin]/+page.js
 delete mode 100644 src/routes/play/[gamePin]/+page.svelte

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0067ed3..8a9beca 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,13 @@
 	"editor.quickSuggestions": {
 		"strings": true
 	},
-	"cSpell.words": ["SUPABASE"]
+	"cSpell.words": [
+		"correctanswer",
+		"creationdate",
+		"gameid",
+		"kahoot",
+		"questionid",
+		"questionstext",
+		"SUPABASE"
+	]
 }
diff --git a/README.md b/README.md
index b5b2950..321f964 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,45 @@
-# sv
+# DB Diagrams
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+## Current DB Diagram
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+```mermaid
+    erDiagram
+        GAMES {
+            int GamePIN PK
+            string gameStatus
+            json questions
+            jsonb players
+        }
 ```
 
-## Developing
+## Goal MVP DB Diagram
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```mermaid
+    erDiagram
+        GAMES {
+            int ID PK
+            string creator
+            date creationDate
+            string status
+        }
+        QUESTIONS {
+            int ID PK
+            int GameID FK
+            string QuestionsText
+            string CorrectAnswer
+        }
+        ANSWERS {
+            int ID PK
+            int QuestionID FK
+            string content
+        }
+        PLAYERS {
+            int ID PK
+            int GameID FK
+            int Score
+        }
 
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+        GAMES ||--o{ QUESTIONS : contains
+        QUESTIONS ||--o{ ANSWERS : has
+        GAMES ||--o{ PLAYERS : participated_by
 ```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/jsconfig.json b/jsconfig.json
index a86a4fd..428e42f 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,13 +2,7 @@
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": false,
+		"checkJs": true,
 		"moduleResolution": "bundler"
 	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-	
 }
diff --git a/package-lock.json b/package-lock.json
index 4569f4e..95b6d82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^4.0.0",
+				"@sveltejs/adapter-static": "^3.0.8",
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"@tailwindcss/postcss": "^4.1.6",
@@ -1091,6 +1092,15 @@
 				"@sveltejs/kit": "^2.0.0"
 			}
 		},
+		"node_modules/@sveltejs/adapter-static": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.8.tgz",
+			"integrity": "sha512-YaDrquRpZwfcXbnlDsSrBQNCChVOT9MGuSg+dMAyfsAa1SmiAhrA5jUYUiIMC59G92kIbY/AaQOWcBdq+lh+zg==",
+			"dev": true,
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "2.20.8",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.8.tgz",
diff --git a/package.json b/package.json
index 7b25e2b..d04f917 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/postcss": "^4.1.6",
diff --git a/src/app.css b/src/app.css
deleted file mode 100644
index d4b5078..0000000
--- a/src/app.css
+++ /dev/null
@@ -1 +0,0 @@
-@import 'tailwindcss';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 42146f4..1fde110 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,12 @@
 <script>
-	import '../app.css';
 	let { children } = $props();
 </script>
 
 <div class="h-full text-white">{@render children()}</div>
 
 <style>
+	@import 'tailwindcss';
+
 	:root {
 		background-color: black;
 	}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7f94d35..6bd1214 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,19 +1,18 @@
-<script>
-	import { goto } from '$app/navigation';
-</script>
-
 <div class="bg-grey-900 flex h-full items-center justify-center">
 	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
 		<h1 class="m-[0] text-6xl">DaKahootClone</h1>
-		<p class="m-[0] mb-2 text-lg text-gray-400">The best eveer kahoot clone.</p>
-		<button
-			on:click={() => goto('/join')}
-			class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-			>Join a game</button
-		>
-		<button
-			class="cursor-pointer rounded-full bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-			on:click={() => goto('/create')}>Create and Host a game</button
+		<p class="m-[0] mb-2 text-lg text-gray-400">The best ever kahoot clone.</p>
+		<a href="./join">
+			<button
+				class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+				>Join a game</button
+			></a
 		>
+		<a href="./create">
+			<button
+				class="cursor-pointer rounded-full bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+				>Create and Host a game</button
+			>
+		</a>
 	</div>
 </div>
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
index ab613bd..88aaf5c 100644
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -1,170 +1,22 @@
 <script>
-	import { supabase } from '$lib/supabase';
-	import { goto } from '$app/navigation';
-	let questions = $state([
-		{
-			name: '',
-			answers: ['', '', '', ''],
-			correctAnswer: undefined,
-			playersCompelted: 0
-		}
-	]);
+	import UseDemoQuestions from './components/buttons/UseDemoQuestions.svelte';
+	import NewQuestion from './components/buttons/NewQuestion.svelte';
+	import StartGame from './components/buttons/StartGame.svelte';
+	import Question from './components/Questions/question.svelte';
+	import { questions } from './logic/GameCreateData.svelte.js';
 
-	async function startGame() {
-		if (questions.some((q) => q.name === '')) return alert('Please fill all questions');
-		if (questions.some((q) => q.answers.some((a) => a === ''))) return alert('Fill all options');
-		if (questions.some((q) => q.correctAnswer === undefined))
-			return alert('Select correct answers');
-
-		const gamePin = Math.floor(Math.random() * 1000000)
-			.toString()
-			.padStart(6, '0');
-
-		const { error } = await supabase.from('games').insert({
-			gamePIN: gamePin,
-			gameStatus: 'lobby',
-			questions: $state.snapshot(questions),
-			players: []
-		});
-
-		if (error) {
-			alert('Failed to create game: ' + error.message + '\n\nPlease try again.');
-			return;
-		}
-
-		goto('/host/' + gamePin);
-	}
+	$inspect(questions);
 </script>
 
 <div class="bg-grey-900 flex justify-center p-5">
 	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
-		<button
-			onclick={() => {
-				questions = [
-					{
-						name: 'Is hack club awesome?',
-						answers: ['its ok', 'its the BEST place in the world', 'nahh its bad', 'Gu Gu Ga Ga'],
-						correctAnswer: 1,
-						playersCompelted: 0
-					},
-					{
-						name: 'Who is the best programer in the world?',
-						answers: ['Sundar Pichai', 'Bill Gates', 'RezHackXYZ', 'Elon musk'],
-						correctAnswer: 2,
-						playersCompelted: 0
-					},
-					{
-						name: 'What was the 5/11 incident?',
-						answers: [
-							'mass pings of @/birds',
-							'twin towers getting blasted by planes',
-							'the opening ceremony of the store of 7/11 on the 5/11 date',
-							'the opening ceremony of the competitor store of 7/11'
-						],
-						correctAnswer: 0,
-						playersCompelted: 0
-					}
-				];
-			}}
-			class="-mt-5 mb-3 flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24px"
-				viewBox="0 -960 960 960"
-				width="24px"
-				fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
-			>Use demo questions</button
-		>
-		{#each questions as question, i}
-			<div class="flex items-center gap-3">
-				<div
-					class="mb-3 flex flex-col items-center justify-center gap-1 rounded-2xl bg-gray-600 p-2"
-				>
-					<div class="flex h-fit items-center gap-3">
-						<h1 class="mt-2 mb-3 text-2xl">Q{i + 1}.</h1>
-						<input
-							type="text"
-							bind:value={question.name}
-							placeholder="Question {i + 1}"
-							class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
-						/><button
-							onclick={() => {
-								if (questions.length > 1) {
-									if (
-										confirm('Are you sure you want to delete this question? You cant undo this.')
-									) {
-										questions.splice(i, 1);
-									}
-								} else {
-									alert('You need at least one question.');
-								}
-							}}
-							class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-red-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-							><svg
-								xmlns="http://www.w3.org/2000/svg"
-								height="24px"
-								viewBox="0 -960 960 960"
-								width="24px"
-								fill="#FFFFFF"
-								><path
-									d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
-								/></svg
-							>Delete question</button
-						>
-					</div>
-					<div class="flex flex-col gap-2">
-						{#each question.answers as answer, i2}
-							<div class="flex items-center gap-2">
-								<input
-									type="radio"
-									value={i2}
-									name={i}
-									bind:group={question.correctAnswer}
-									class="input"
-								/><input
-									placeholder="Option {i2 + 1}"
-									bind:value={question.answers[i2]}
-									class="w-[500px] rounded-lg bg-gray-800 p-1 text-center text-white"
-								/>
-							</div>
-						{/each}
-					</div>
-				</div>
-			</div>
+		<UseDemoQuestions />
+		{#each questions.v as question, index}
+			<Question {index} />
 		{/each}
 		<div class="flex gap-3">
-			<button
-				onclick={() => {
-					questions.push({
-						name: '',
-						answers: ['', '', '', ''],
-						correctAnswer: undefined,
-						playersCompelted: 0
-					});
-				}}
-				class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
-				>New question</button
-			>
-			<button
-				onclick={startGame}
-				class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"
-					><path
-						d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
-					/></svg
-				>Start Quiz</button
-			>
+			<NewQuestion />
+			<StartGame />
 		</div>
 	</div>
 </div>
diff --git a/src/routes/create/components/Questions/answers.svelte b/src/routes/create/components/Questions/answers.svelte
new file mode 100644
index 0000000..dd8002e
--- /dev/null
+++ b/src/routes/create/components/Questions/answers.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { questions } from '../../logic/GameCreateData.svelte.js';
+
+	let props = $props();
+	let questionsIndex = props.questionsIndex;
+	let index = props.answersIndex;
+</script>
+
+<div class="flex items-center gap-2">
+	<input
+		type="radio"
+		value={index}
+		name={index.toString()}
+		bind:group={questions.v[questionsIndex].correctAnswer}
+		class="input"
+	/>
+
+	<input
+		placeholder="Option {index + 1}"
+		bind:value={questions.v[questionsIndex].answers[index]}
+		class="w-[500px] rounded-lg bg-gray-800 p-1 text-center text-white"
+	/>
+</div>
diff --git a/src/routes/create/components/Questions/question.svelte b/src/routes/create/components/Questions/question.svelte
new file mode 100644
index 0000000..33c5db0
--- /dev/null
+++ b/src/routes/create/components/Questions/question.svelte
@@ -0,0 +1,30 @@
+<script>
+	import DeleteQuestion from '../buttons/DeleteQuestion.svelte';
+	import Answers from './answers.svelte';
+	import { questions } from '../../logic/GameCreateData.svelte.js';
+
+	let props = $props();
+	let index = props.index;
+</script>
+
+<div class="flex items-center gap-3">
+	<div class="mb-3 flex flex-col items-center justify-center gap-1 rounded-2xl bg-gray-600 p-2">
+		<div class="flex h-fit items-center gap-3">
+			<h1 class="mt-2 mb-3 text-2xl">Q{index + 1}.</h1>
+			<input
+				type="text"
+				bind:value={questions.v[index].name}
+				placeholder="Question {index + 1}"
+				class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
+			/>
+			<DeleteQuestion {index} />
+		</div>
+
+		
+		<div class="flex flex-col gap-2">
+			{#each questions.v[index].answers as answer, answersIndex}
+				<Answers questionsIndex={index} {answersIndex} />
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/src/routes/create/components/buttons/DeleteQuestion.svelte b/src/routes/create/components/buttons/DeleteQuestion.svelte
new file mode 100644
index 0000000..7057ea9
--- /dev/null
+++ b/src/routes/create/components/buttons/DeleteQuestion.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { DeleteQuestion } from '../../logic/GameCreateData.svelte.js';
+
+	let props = $props();
+</script>
+
+<button
+	onclick={() => DeleteQuestion(props.index)}
+	class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-red-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		fill="#FFFFFF"
+		><path
+			d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
+		/></svg
+	>Delete question</button
+>
diff --git a/src/routes/create/components/buttons/NewQuestion.svelte b/src/routes/create/components/buttons/NewQuestion.svelte
new file mode 100644
index 0000000..63cc2d6
--- /dev/null
+++ b/src/routes/create/components/buttons/NewQuestion.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { AddQuestion } from '../../logic/GameCreateData.svelte.js';
+</script>
+
+<button
+	onclick={() => AddQuestion()}
+	class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
+	>New question</button
+>
diff --git a/src/routes/create/components/buttons/StartGame.svelte b/src/routes/create/components/buttons/StartGame.svelte
new file mode 100644
index 0000000..10f8d3a
--- /dev/null
+++ b/src/routes/create/components/buttons/StartGame.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { startGame } from '../../logic/StartGame.js';
+</script>
+
+<button
+	onclick={startGame}
+	class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		fill="#FFFFFF"
+		><path
+			d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
+		/></svg
+	>Start Quiz</button
+>
diff --git a/src/routes/create/components/buttons/UseDemoQuestions.svelte b/src/routes/create/components/buttons/UseDemoQuestions.svelte
new file mode 100644
index 0000000..ead81cd
--- /dev/null
+++ b/src/routes/create/components/buttons/UseDemoQuestions.svelte
@@ -0,0 +1,15 @@
+<script>
+	import {  SetQuestionsToDemoQuestions } from '../../logic/GameCreateData.svelte.js';
+</script>
+
+<button
+	onclick={() => SetQuestionsToDemoQuestions()}
+	class="-mt-5 mb-3 flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
+	>Use demo questions</button
+>
diff --git a/src/routes/create/logic/GameCreateData.svelte.js b/src/routes/create/logic/GameCreateData.svelte.js
new file mode 100644
index 0000000..7a4f224
--- /dev/null
+++ b/src/routes/create/logic/GameCreateData.svelte.js
@@ -0,0 +1,54 @@
+export let questions = $state({
+	v: [
+		{
+			name: '',
+			answers: ['', '', '', ''],
+			correctAnswer: undefined
+		}
+	]
+});
+
+let DemoQuestions = [
+	{
+		name: 'Is hack club awesome?',
+		answers: ['its ok', 'its the BEST place in the world', 'its bad', 'Gu Gu Ga Ga'],
+		correctAnswer: 1
+	},
+	{
+		name: 'Who is the best programer in the world?',
+		answers: ['Some person', 'Bill Gates', 'RezHackXYZ', 'another person'],
+		correctAnswer: 2
+	},
+	{
+		name: 'What was the 5/11 incident?',
+		answers: [
+			'mass pings of @/birds',
+			'twin towers getting blasted by planes',
+			'the opening ceremony of the store of 7/11 on the 5/11 date',
+			'the opening ceremony of the competitor store of 7/11'
+		],
+		correctAnswer: 0
+	}
+];
+
+export function SetQuestionsToDemoQuestions() {
+	questions.v = DemoQuestions;
+}
+
+export function AddQuestion() {
+	questions.v.push({
+		name: '',
+		answers: ['', '', '', ''],
+		correctAnswer: undefined
+	});
+}
+
+export function DeleteQuestion(index) {
+	if (questions.v.length > 1) {
+		if (confirm('Are you sure you want to delete this question? You cant undo this.')) {
+			questions.v.splice(index, 1);
+		}
+	} else {
+		alert('You need at least one question.');
+	}
+}
diff --git a/src/routes/create/logic/InsertGameInDB.js b/src/routes/create/logic/InsertGameInDB.js
new file mode 100644
index 0000000..15fe789
--- /dev/null
+++ b/src/routes/create/logic/InsertGameInDB.js
@@ -0,0 +1,58 @@
+import { supabase } from '$lib/supabase';
+
+export async function createGame(questions, gamePin) {
+	// Insert the game into the GAMES table
+	const { data: gameData, error: gameError } = await supabase
+		.from('games')
+		.insert({
+			creator: 'anonymous', // Replace with actual creator if available
+			creationdate: new Date().toISOString(),
+			status: 'lobby',
+			GamePIN: gamePin
+		})
+		.select('id')
+		.single();
+
+	if (gameError) {
+		alert('Failed to create game: ' + gameError.message + '\n\nPlease try again.');
+		return;
+	}
+
+	const gameid = gameData.id;
+
+	// Prepare questions and answers for batch insertion
+	const questionsData = questions.map((q, index) => ({
+		gameid: gameid,
+		questionstext: q.name,
+		correctanswer: q.correctAnswer
+	}));
+
+	const { data: questionsResult, error: questionsError } = await supabase
+		.from('questions')
+		.insert(questionsData)
+		.select('id');
+
+	if (questionsError) {
+		alert('Failed to insert questions: ' + questionsError.message + '\n\nPlease try again.');
+		return;
+	}
+
+	const answersData = [];
+	questionsResult.forEach((question, index) => {
+		questions[index].answers.forEach((answer, answerIndex) => {
+			answersData.push({
+				questionid: question.id,
+				content: answer
+			});
+		});
+	});
+
+	const { error: answersError } = await supabase.from('answers').insert(answersData);
+
+	if (answersError) {
+		alert('Failed to insert answers: ' + answersError.message + '\n\nPlease try again.');
+		return;
+	}
+
+	alert('Game created successfully!');
+}
diff --git a/src/routes/create/logic/StartGame.js b/src/routes/create/logic/StartGame.js
new file mode 100644
index 0000000..d24afe4
--- /dev/null
+++ b/src/routes/create/logic/StartGame.js
@@ -0,0 +1,17 @@
+import { goto } from '$app/navigation';
+import { createGame } from './InsertGameInDB.js';
+import { questions } from './GameCreateData.svelte.js';
+
+export async function startGame() {
+	if (questions.v.some((q) => q.name === '')) return alert('Please fill all questions');
+	if (questions.v.some((q) => q.answers.some((a) => a === ''))) return alert('Fill all options');
+	if (questions.v.some((q) => q.correctAnswer === undefined)) return alert('Select correct answers');
+
+	const gamePin = Math.floor(Math.random() * 1000000)
+		.toString()
+		.padStart(6, '0');
+
+	createGame($state.snapshot(questions), gamePin);
+
+	goto('/host/' + gamePin);
+}
diff --git a/src/routes/host/[gamePin]/+page.js b/src/routes/host/[gamePin]/+page.js
deleted file mode 100644
index 1bfee35..0000000
--- a/src/routes/host/[gamePin]/+page.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// Example of what your +page.js or +page.server.js might need
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}
diff --git a/src/routes/host/[gamePin]/+page.svelte b/src/routes/host/[gamePin]/+page.svelte
deleted file mode 100644
index 8f7b1a2..0000000
--- a/src/routes/host/[gamePin]/+page.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
-	import { supabase } from '$lib/supabase';
-	import { goto } from '$app/navigation';
-
-	export let data;
-	const gamePin = data.gamePin;
-
-	let players = [];
-
-	// Subscribe to realtime changes in players
-	function subscribeToPlayers() {
-		const channel = supabase
-			.channel(`game-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					players = payload.new.players || [];
-				}
-			)
-			.subscribe();
-	}
-
-	onMount(async () => {
-		const { data: gameData } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.maybeSingle();
-
-		if (gameData?.players) {
-			players = gameData.players;
-		}
-
-		subscribeToPlayers();
-	});
-</script>
-
-<div class="bg-grey-900 flex h-full items-center justify-center">
-	<div
-		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
-	>
-		<h1 class="m-[0] text-9xl">HOSTING</h1>
-		<h1 class="m-[0] text-7xl">Game Pin:</h1>
-		<h1 class="m-[0] rounded-2xl bg-gray-700 pt-1.5 pr-2 pb-0 pl-2 font-mono text-5xl">
-			{gamePin}
-		</h1>
-		<h1 class="m-[0] mt-10 text-6xl">Players Joined:</h1>
-		<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.length})</h1>
-		<div class="mt-2 flex flex-wrap justify-center gap-2">
-			{#each players as player}
-				<span class="m-[0] rounded-xl bg-gray-700 pt-1 pr-2 pb-0 pl-2 font-mono text-3xl"
-					>{player.name}</span
-				>
-			{/each}
-		</div>
-		<button
-			class="mt-5 cursor-pointer rounded-2xl bg-green-700 p-2 text-4xl transition-all hover:scale-110 hover:-rotate-10"
-			on:click={async () => {
-				if (players.length > 0) {
-					if (confirm('Are you sure you want to start the game?')) {
-						await supabase
-							.from('games')
-							.update({ gameStatus: 'started' })
-							.eq('gamePIN', Number(data.gamePin));
-						goto(`/hostgame/${gamePin}`);
-					}
-				} else {
-					alert('You need at least one player to start the game.');
-				}
-			}}>Start the game</button
-		>
-	</div>
-</div>
diff --git a/src/routes/hostgame/[gamePin]/+page.js b/src/routes/hostgame/[gamePin]/+page.js
deleted file mode 100644
index 1bfee35..0000000
--- a/src/routes/hostgame/[gamePin]/+page.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// Example of what your +page.js or +page.server.js might need
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}
diff --git a/src/routes/hostgame/[gamePin]/+page.svelte b/src/routes/hostgame/[gamePin]/+page.svelte
deleted file mode 100644
index 980a609..0000000
--- a/src/routes/hostgame/[gamePin]/+page.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { supabase } from '$lib/supabase';
-
-	export let data;
-	const gamePin = data.gamePin;
-
-	let totalQuetions = 3;
-	let currentQuestion = 0;
-
-	let PeopleAwnseredQ = 2;
-	let Totalplayers = 3;
-
-	let questions = [];
-
-	async function NewUpdate(question) {
-		if (question[currentQuestion].playersCompelted == Totalplayers) {
-			currentQuestion++;
-			await supabase
-				.from('games')
-				.update({ gameStatus: `${currentQuestion}` })
-				.eq('gamePIN', Number(data.gamePin));
-			PeopleAwnseredQ = 0;
-		} else {
-			PeopleAwnseredQ = question[currentQuestion].playersCompelted;
-			
-		}
-	}
-
-	onMount(async () => {
-		const channel = supabase
-			.channel(`game-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					if (payload.new.questions != questions) {
-						questions = payload.new.questions;
-						currentQuestion = Number(payload.new.gameStatus);
-						NewUpdate(questions);
-					}
-				}
-			)
-			.subscribe();
-
-		const { data, error } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		Totalplayers = data.players.length;
-
-		const { data: data2, error: error2 } = await supabase
-			.from('games')
-			.select('questions')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		questions = data2.questions;
-		totalQuetions = questions.length;
-
-		currentQuestion = 0;
-		await supabase
-			.from('games')
-			.update({ gameStatus: currentQuestion.toString() })
-			.eq('gamePIN', Number(gamePin));
-	});
-</script>
-
-<div class="bg-grey-900 flex h-full items-center justify-center">
-	<div
-		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
-	>
-		<h1 class="m-[0] text-7xl">HOSTING</h1>
-		<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
-			<h3>Question {currentQuestion + 1} of {totalQuetions} is beeing awnsered</h3>
-			<div class="flex-1 rounded-full border-2 border-gray-600">
-				<div
-					class="h-4 rounded-full bg-green-600 transition-all duration-700"
-					style="width: {(currentQuestion / totalQuetions) * 100}%;"
-				></div>
-			</div>
-		</div>
-		<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
-			<h3>{PeopleAwnseredQ} out of {Totalplayers} have awnsered the quetion</h3>
-			<div class="flex-1 rounded-full border-2 border-gray-600">
-				<div
-					class="h-4 rounded-full bg-green-600 transition-all duration-700"
-					style="width: {(PeopleAwnseredQ / Totalplayers) * 100}%;"
-				></div>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
deleted file mode 100644
index 5a10102..0000000
--- a/src/routes/join/+page.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script>
-	import { goto } from '$app/navigation';
-	import { supabase } from '$lib/supabase';
-
-	let pin;
-	let name;
-	let Checking = false;
-
-	async function validateGamePin() {
-		const { data, error } = await supabase
-			.from('games')
-			.select('gamePIN')
-			.eq('gamePIN', Number(pin))
-			.maybeSingle();
-
-		// Return true if valid
-		return data !== null && !error;
-	}
-
-	async function joinGame() {
-		if (!pin || !name) {
-			alert('Please fill in the game pin and your name.');
-			return;
-		}
-
-		Checking = true;
-
-		const isValid = await validateGamePin();
-		if (!isValid) {
-			alert('Invalid game pin. Please try again.');
-			Checking = false;
-			return;
-		}
-
-		goto('/play-lobby/' + pin, {
-			state: {
-				name
-			}
-		});
-	}
-</script>
-
-<div class="bg-grey-900 flex h-full items-center justify-center">
-	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
-		<h1 class="m-[0] mb-3 text-5xl">Join a game here</h1>
-
-		<input
-			placeholder="Enter game pin"
-			class="rounded-lg bg-gray-800 p-2 text-center text-white"
-			bind:value={pin}
-		/>
-
-		<input
-			placeholder="Enter your name"
-			bind:value={name}
-			class="rounded-lg bg-gray-800 p-2 text-center text-white"
-		/>
-
-		{#if !Checking}
-			<button
-				class="mt-4 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-				on:click={joinGame}
-			>
-				Join game
-			</button>
-		{:else}<button
-				class="mt-4 cursor-pointer rounded-full bg-gray-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
-			>
-				Checking if pin is valid...
-			</button>{/if}
-	</div>
-</div>
diff --git a/src/routes/play-lobby/[gamePin]/+page.js b/src/routes/play-lobby/[gamePin]/+page.js
deleted file mode 100644
index 1bfee35..0000000
--- a/src/routes/play-lobby/[gamePin]/+page.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// Example of what your +page.js or +page.server.js might need
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}
diff --git a/src/routes/play-lobby/[gamePin]/+page.svelte b/src/routes/play-lobby/[gamePin]/+page.svelte
deleted file mode 100644
index 5405f1d..0000000
--- a/src/routes/play-lobby/[gamePin]/+page.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
-	import { supabase } from '$lib/supabase';
-	import { goto } from '$app/navigation';
-
-	export let data;
-	const gamePin = data.gamePin;
-	const name = $page.state?.name;
-
-	let players = [];
-
-	async function addPlayer() {
-		const { data: gameData, error } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.maybeSingle();
-
-		let updatedPlayers = gameData.players || [];
-
-		const alreadyExists = updatedPlayers.some((p) => p.name === name);
-		if (!alreadyExists) {
-			updatedPlayers.push({ name: name, score: 0 });
-
-			const { error: updateError } = await supabase
-				.from('games')
-				.update({ players: updatedPlayers })
-				.eq('gamePIN', Number(gamePin));
-		}
-	}
-
-	// Subscribe to realtime changes in players
-	function subscribeToPlayers() {
-		const channel = supabase
-			.channel(`game-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					players = payload.new.players || [];
-				}
-			)
-			.subscribe();
-	}
-
-	function subscribeToGameStatus() {
-		supabase
-			.channel(`status-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					if (payload.new.gameStatus === 'started') {
-						goto(`/play/${gamePin}`, {
-							state: {
-								name
-							}
-						});
-					}
-				}
-			)
-			.subscribe();
-	}
-	onMount(async () => {
-		await addPlayer();
-
-		const { data: gameData } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.maybeSingle();
-
-		if (gameData?.players) {
-			players = gameData.players;
-		}
-
-		subscribeToPlayers();
-		subscribeToGameStatus();
-	});
-</script>
-
-<div class="bg-grey-900 flex h-full items-center justify-center">
-	<div
-		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
-	>
-		<h1 class="m-[0] text-9xl">PLAYING</h1>
-		<h1 class="m-[0] text-7xl">Game Pin:</h1>
-		<h1 class="m-[0] rounded-2xl bg-gray-700 pt-1.5 pr-2 pb-0 pl-2 font-mono text-5xl">
-			{gamePin}
-		</h1>
-		<h1 class="m-[0] mt-10 text-6xl">Players Joined:</h1>
-		<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.length})</h1>
-		<div class="mt-2 flex flex-wrap justify-center gap-2">
-			{#each players as player}
-				<span class="m-[0] rounded-xl bg-gray-700 pt-1 pr-2 pb-0 pl-2 font-mono text-3xl"
-					>{player.name}</span
-				>
-			{/each}
-		</div>
-	</div>
-</div>
diff --git a/src/routes/play/[gamePin]/+page.js b/src/routes/play/[gamePin]/+page.js
deleted file mode 100644
index aea5dc3..0000000
--- a/src/routes/play/[gamePin]/+page.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}
diff --git a/src/routes/play/[gamePin]/+page.svelte b/src/routes/play/[gamePin]/+page.svelte
deleted file mode 100644
index 3283028..0000000
--- a/src/routes/play/[gamePin]/+page.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script>
-	import { supabase } from '$lib/supabase';
-	import { onMount } from 'svelte';
-	export let data;
-	const gamePin = data.gamePin;
-	import { page } from '$app/stores';
-	const name = $page.state?.name;
-
-	let question = [];
-	let Selected = null;
-	let currentQuestion = 0;
-	let isWait = true;
-	let gameStatus = '';
-	let players = [];
-
-	onMount(async () => {
-		const channel = supabase
-			.channel(`game-${gamePin}`)
-			.on(
-				'postgres_changes',
-				{
-					event: 'UPDATE',
-					schema: 'public',
-					table: 'games',
-					filter: `gamePIN=eq.${gamePin}`
-				},
-				(payload) => {
-					if (payload.new.gameStatus != gameStatus) {
-						gameStatus = payload.new.gameStatus;
-						isWait = false;
-						Selected = null;
-						currentQuestion = Number(gameStatus);
-					}
-				}
-			)
-			.subscribe();
-
-		const { data, error } = await supabase
-			.from('games')
-			.select('questions')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		if (!error && data) {
-			question = data.questions || [];
-		}
-	});
-
-	async function SubmitAnswer() {
-		isWait = true;
-
-		const { data, error } = await supabase
-			.from('games')
-			.select('players')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-		players = data.players;
-
-		if (question[currentQuestion].correctAnswer == Selected) {
-			players.forEach((player) => {
-				if (player.name == name) {
-					player.score += 1;
-				}
-			});
-			await supabase.from('games').update({ players: players }).eq('gamePIN', Number(gamePin));
-		}
-
-		const { data: data2 } = await supabase
-			.from('games')
-			.select('questions')
-			.eq('gamePIN', Number(gamePin))
-			.single();
-
-		question = data2.questions;
-
-		question[currentQuestion].playersCompelted++;
-		console.log('Players Completed:', question[currentQuestion].playersCompelted);
-
-		await supabase.from('games').update({ questions: question }).eq('gamePIN', Number(gamePin));
-	}
-</script>
-
-<div class="bg-grey-900 flex h-full items-center justify-center">
-	<div
-		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
-	>
-		<div class="mb-5 flex w-full items-center justify-center gap-3">
-			<h3>Question {currentQuestion + 1} of {question.length}</h3>
-			<div class="flex-1 rounded-full border-2 border-gray-600">
-				<div
-					class="h-4 rounded-full bg-green-600 transition-all duration-700"
-					style="width: {(currentQuestion / question.length) * 100}%;"
-				></div>
-			</div>
-		</div>
-		{#if isWait != true}
-			<h1 class="m-[0] text-center text-5xl">
-				Q{currentQuestion + 1}. {question[currentQuestion].name}
-			</h1>
-			<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
-				{#each question[currentQuestion].answers as answer, index}
-					<div class="flex">
-						<input
-							type="radio"
-							id="O{index}"
-							name="question"
-							class="peer sr-only"
-							value={index}
-							bind:group={Selected}
-						/>
-						<label
-							class="w-full cursor-pointer rounded-lg border-3 border-gray-600 bg-gray-600 pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-blue-600 peer-checked:bg-blue-600 hover:border-blue-600"
-							for="O{index}">{answer}</label
-						>
-					</div>
-				{/each}
-			</div>
-			{#if Selected != null}
-				<button
-					class="mt-4 cursor-pointer gap-0 rounded-lg bg-green-700 p-2 text-3xl transition-all hover:scale-110 hover:-rotate-10"
-					onclick={SubmitAnswer}
-					>submit answer
-				</button>
-			{:else}
-				<button
-					class="mt-4 cursor-pointer gap-0 rounded-lg bg-gray-700 p-2 text-3xl transition-all hover:scale-110"
-					>select an answer to submit!
-				</button>
-			{/if}
-		{:else}<h1 class="m-[0] text-center text-5xl">
-				Please wait for everyone else to answer the question.
-			</h1>{/if}
-	</div>
-</div>
diff --git a/svelte.config.js b/svelte.config.js
index 10c4eeb..57a49bd 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -6,7 +6,15 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			// default options are shown. On some platforms
+			// these options are set automatically — see below
+			pages: 'build',
+			assets: 'build',
+			fallback: undefined,
+			precompress: false,
+			strict: true
+		})
 	}
 };