merge both repos! atempt 1 by making the file system the same!

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

@@ -0,0 +1,34 @@
+<script>
+	import AwnserQuetion from "./components/awnseringQuetions/display.svelte";
+	import LobbyDisplay from "./components/lobby/display.svelte";
+	import { Status } from "./logic/HostsData.svelte.js";
+	import { AutoUpdatePlayersList } from "./logic/UpdatePlayersList.js";
+	import { GetCurrentPlayers } from "./logic/GetCurrentPlayers.js";
+	import { IntializeGameStart } from "./logic/IntializeGameStart.js";
+	import { onMount } from "svelte";
+	import { name,playerid } from "./logic/HostsData.svelte.js";
+
+	let gamePin;
+
+	onMount(() => {
+		name.v = new URLSearchParams(new URL(window.location.href).search).get("name");
+		playerid.v = new URLSearchParams(new URL(window.location.href).search).get("playerid");
+		gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
+
+		GetCurrentPlayers(gamePin);
+		AutoUpdatePlayersList(gamePin);
+		IntializeGameStart(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"
+	>
+		{#if Status.v == "lobby"}
+			<LobbyDisplay {gamePin} />
+		{:else if Status.v == "started"}
+			<AwnserQuetion />
+		{/if}
+	</div>
+</div>

src/routes/kahootclone/play/components/awnseringQuetions/Awnsers.svelte

@@ -0,0 +1,36 @@
+<script>
+	import { questions, Selected } from "../../logic/HostsData.svelte.js";
+	import { AnswersSymbolAndColorScheme } from "$lib/config.js";
+</script>
+
+<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
+	{#each questions.v.answers as answer, index}
+		<div class="flex">
+			<input
+				type="radio"
+				id="O{index}"
+				name="question"
+				class="peer sr-only"
+				value={index}
+				bind:group={Selected.v}
+			/>
+
+			<label
+				for="O{index}"
+				style="
+					--border-color: {AnswersSymbolAndColorScheme[index].Color};
+					--bg-color: {AnswersSymbolAndColorScheme[index].Color};
+					--border-color-checked: {AnswersSymbolAndColorScheme[index].SelectedColor};
+					--bg-color-checked: {AnswersSymbolAndColorScheme[index].SelectedColor};
+					--border-color-hover: {AnswersSymbolAndColorScheme[index].HoverBorderColor};
+					--border-color-checked: {AnswersSymbolAndColorScheme[index].SelectedBorderColor};
+					--border-color-hover: {AnswersSymbolAndColorScheme[index].HoverBorderColor};
+				"
+				class="w-full cursor-pointer rounded-lg border-[5px] border-[var(--border-color)] bg-[var(--bg-color)] pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-[var(--border-color-checked)] peer-checked:border-[var(--border-color-checked)] peer-checked:bg-[var(--bg-color-checked)] hover:border-[var(--border-color-hover)]"
+			>
+				<i class="nf {AnswersSymbolAndColorScheme[index].Symbol}"></i>
+				{answer}
+			</label>
+		</div>
+	{/each}
+</div>

src/routes/kahootclone/play/components/awnseringQuetions/ProgressBar.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { CurrentQuestion, TotalQuestions } from "../../logic/HostsData.svelte.js";
+</script>
+
+<div class="mb-5 flex w-full items-center justify-center gap-3">
+	<h3>Question {CurrentQuestion.v + 1} of {TotalQuestions.v}</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.v / TotalQuestions.v) * 100}%;"
+		></div>
+	</div>
+</div>

src/routes/kahootclone/play/components/awnseringQuetions/buttons/SelectFirst.svelte

@@ -0,0 +1,13 @@
+<div class="group relative">
+	<button
+		class="mt-4 cursor-not-allowed gap-0 rounded-lg bg-gray-500 p-2 text-3xl text-gray-300 transition-all"
+		disabled
+	>
+		Submit
+	</button>
+	<div
+		class="invisible absolute bottom-full left-1/2 mb-2 w-40 -translate-x-1/2 rounded-md bg-black px-3 py-1 text-center text-sm text-white opacity-0 transition-all group-hover:visible group-hover:opacity-100"
+	>
+		Select an option to submit
+	</div>
+</div>

src/routes/kahootclone/play/components/awnseringQuetions/buttons/submitAwnser.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { SubmitAnswer } from "../../../logic/SubmitAnswer.js";
+</script>
+
+<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
+</button>

src/routes/kahootclone/play/components/awnseringQuetions/display.svelte

@@ -0,0 +1,28 @@
+<script>
+	import Question from "./text/Quetion.svelte";
+	import Awnsers from "./Awnsers.svelte";
+	import ProgressBar from "./ProgressBar.svelte";
+	import SelectFirst from "./buttons/SelectFirst.svelte";
+	import Wait from "./text/wait.svelte";
+	import SubmitAwnser from "./buttons/submitAwnser.svelte";
+	import { CurrentQuestion, Selected } from "../../logic/HostsData.svelte.js";
+</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"
+	>
+		<ProgressBar />
+		{#if CurrentQuestion.v != null}
+			<Question />
+			<Awnsers />
+			{#if Selected.v != null}
+				<SubmitAwnser />
+			{:else}
+				<SelectFirst />
+			{/if}
+		{:else}
+			<Wait />
+		{/if}
+	</div>
+</div>

src/routes/kahootclone/play/components/awnseringQuetions/text/Quetion.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { CurrentQuestion, questions } from "../../../logic/HostsData.svelte.js";
+</script>
+
+<h1 class="m-[0] text-center text-5xl">
+	Q{CurrentQuestion.v + 1}. {questions.v.question}
+</h1>

src/routes/kahootclone/play/components/awnseringQuetions/text/wait.svelte

@@ -0,0 +1 @@
+<h1 class="m-[0] text-center text-5xl">Please wait for everyone else to answer the question.</h1>

src/routes/kahootclone/play/components/lobby/PlayersGUI/playerBadge.svelte

@@ -0,0 +1,6 @@
+<script>
+	let props = $props();
+	let playerName = props.playerName;
+</script>
+
+<span class="m-[0] rounded-xl bg-gray-700 pt-1 pr-2 pb-0 pl-2 font-mono text-3xl">{playerName}</span>

src/routes/kahootclone/play/components/lobby/PlayersGUI/players.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { players } from "../../../logic/HostsData.svelte.js";
+	import PlayerBadge from "./playerBadge.svelte";
+</script>
+
+<h1 class="m-[0] mt-5 text-6xl">Players Joined:</h1>
+<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.v.length})</h1>
+<div class="mt-2 flex flex-wrap justify-center gap-2">
+	{#each players.v as playerName}
+		<PlayerBadge {playerName} />
+	{/each}
+</div>

src/routes/kahootclone/play/components/lobby/display.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Players from "./PlayersGUI/players.svelte";
+
+	let props = $props();
+	let gamePin = props.gamePin;
+</script>
+
+<h1 class="m-[0] text-9xl">PLAYING</h1>
+
+<h1 class="m-[0] text-7xl text-center">Waiting for host to start the game</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>
+-->
+<Players />

src/routes/kahootclone/play/logic/GetCurrentPlayers.js

@@ -0,0 +1,18 @@
+import { supabase } from "$lib/supabase.js";
+import { players } from "./HostsData.svelte.js";
+
+export async function GetCurrentPlayers(gamePin) {
+	const { data, error } = await supabase
+		.from("players")
+		.select("playername")
+		.eq("gameid", Number(gamePin));
+
+	console.log("Current players data:", JSON.stringify(data));
+
+	if (error) {
+		console.error("Error fetching players:", error);
+		return;
+	}
+
+	players.v = data ? data.map(player => player.playername) : [];
+}

src/routes/kahootclone/play/logic/HostsData.svelte.js

@@ -0,0 +1,9 @@
+export let players = $state({ v: {} });
+export let Status = $state({ v: "lobby" });
+export let questions = $state({ v: {} });
+export let CurrentQuestion = $state({ v: null });
+export let TotalQuestions = $state({ v: 0 });
+export let Selected = $state({ v: null });
+export let isWait = $state({ v: true });
+export let name = $state({ v: "" });
+export let playerid = $state({ v: null });

src/routes/kahootclone/play/logic/IntializeGameStart.js

@@ -0,0 +1,22 @@
+import { supabase } from "$lib/supabase.js";
+import { NewStatus } from "./NewStatus.js";
+
+export async function IntializeGameStart(gamepin) {
+	supabase
+		.channel(`game_status_${gamepin}`)
+		.on(
+			"postgres_changes",
+			{
+				event: "UPDATE",
+				schema: "public",
+				table: "games",
+				filter: `gamepin=eq.${gamepin}`,
+			},
+			(payload) => {
+				if (payload.new.status) {
+					NewStatus(payload.new.status, gamepin);
+				}
+			},
+		)
+		.subscribe();
+}

src/routes/kahootclone/play/logic/NewStatus.js

@@ -0,0 +1,44 @@
+import {
+	CurrentQuestion,
+	Status,
+	questions,
+	isWait,
+	Selected,
+	playerid,
+	TotalQuestions,
+} from "./HostsData.svelte.js";
+import { supabase } from "$lib/supabase.js";
+
+export async function NewStatus(NewStatus, gamePin) {
+	if (NewStatus == "completed") {
+		window.location.replace("/results?gamepin" + gamePin  + "&playerID=" + playerid.v);
+		return;
+	}
+
+	Status.v = "started";
+	CurrentQuestion.v = Number(NewStatus.replace("question-", ""));
+
+	const { data: questionsData } = await supabase
+		.from("questions")
+		.select("id,questionstext,correctanswer")
+		.eq("gameid", Number(gamePin))
+		.order("id", { ascending: true });
+
+	TotalQuestions.v = questionsData.length;
+
+	const { data: answers } = await supabase
+		.from("answers")
+		.select("content")
+		.eq("questionid", Number(questionsData[CurrentQuestion.v].id))
+		.order("id", { ascending: true });
+
+	questions.v = {
+		question: questionsData[CurrentQuestion.v].questionstext,
+		correctAnswer: questionsData[CurrentQuestion.v].correctanswer,
+		answers: answers.map((answer) => answer.content),
+		questionid: questionsData[CurrentQuestion.v].id,
+	};
+
+	isWait.v = false;
+	Selected.v = null;
+}

src/routes/kahootclone/play/logic/SubmitAnswer.js

@@ -0,0 +1,31 @@
+import { CurrentQuestion, Selected, questions, playerid } from "./HostsData.svelte.js";
+import { supabase } from "$lib/supabase.js";
+
+export async function SubmitAnswer() {
+	CurrentQuestion.v = null;
+
+	if (Selected.v == questions.v.correctAnswer) {
+		await supabase
+			.from("answeredby")
+			.insert([
+				{ questionid: questions.v.questionid, nameofanswerer: playerid.v, correct: true },
+			])
+			.select();
+
+		let { data: score } = await supabase.from("players").select("score").eq("id", playerid.v);
+
+		await supabase
+			.from("players")
+			.update({ score: score[0].score + 1 })
+			.eq("id", playerid.v)
+			.select();
+        
+	} else {
+		await supabase
+			.from("answeredby")
+			.insert([
+				{ questionid: questions.v.questionid, nameofanswerer: playerid.v, correct: false },
+			])
+			.select();
+	}
+}

src/routes/kahootclone/play/logic/UpdatePlayersList.js

@@ -0,0 +1,26 @@
+import { supabase } from "$lib/supabase.js";
+import { players } from "./HostsData.svelte.js";
+
+export let LobbyConnection;
+
+function onNewPlayer(Newplayers) {
+	players.v.push(Newplayers.playername);
+}
+
+export async function AutoUpdatePlayersList(gamePin) {
+	LobbyConnection = supabase
+		.channel("players-realtime")
+		.on(
+			"postgres_changes",
+			{
+				event: "INSERT",
+				schema: "public",
+				table: "players",
+				filter: `gameid=eq.${gamePin}`,
+			},
+			(payload) => {
+				onNewPlayer(payload.new);
+			},
+		)
+		.subscribe();
+}

src/routes/kahootclone/play/logic/startGame.js

@@ -0,0 +1,23 @@
+import { supabase } from "$lib/supabase.js";
+import { LobbyConnection } from "./UpdatePlayersList.js";
+import { questions, Status, CurrentQuestion, TotalQuestions } from "./HostsData.svelte.js";
+
+export async function startGame(gamePin) {
+	await supabase.removeChannel(LobbyConnection);
+
+	Status.v = "started";
+
+	const { data } = await supabase
+		.from("questions")
+		.select("*")
+		.eq("gameid", Number(gamePin))
+		.order("id", { ascending: true });
+	TotalQuestions.v = data.length;
+
+	CurrentQuestion.v = 0;
+
+	await supabase
+		.from("games")
+		.update({ status: `question-${CurrentQuestion.v}` })
+		.eq("gamepin", gamePin);
+}