time limit now works and the limit shows in the hosts screen!

src/lib/config.js

@@ -62,11 +62,13 @@ export let DefaultQuestions = [
 		name: "What should you do when you're free?",
 		answers: ["Do something in real life!", "Play video games", "Code!", "Touch grass!"],
 		correctAnswer: 2,
+		timeLimit: 30,
 	},
 	{
 		name: "Is RezHackXYZ the best programmer in the world?",
 		answers: ["Yes :)", "No :("],
 		correctAnswer: 0,
+		timeLimit: 5,
 	},
 	{
 		name: "Best place in the world?",
@@ -81,6 +83,7 @@ export let DefaultQuestions = [
 			"Twitter",
 		],
 		correctAnswer: 4,
+		timeLimit: 120,
 	},
 ];
 

src/routes/kahootclone/create/components/Questions/question.svelte

@@ -44,6 +44,20 @@
 					<option value={i + 2}>{i + 2}</option>
 				{/each}
 			</select>
+			<select
+				bind:value={questions.v[index].timeLimit}
+				class="h-fit rounded-xl bg-gray-800 p-1 text-center text-white"
+			>
+				<option disabled selected>Time Limit</option>
+				<option value={null}>infinite</option>
+				<option value={5}>5 sec</option>
+				<option value={10}>10 sec</option>
+				<option value={15}>15 sec</option>
+				<option value={30}>30 sec</option>
+				<option value={60}>1 min</option>
+				<option value={120}>2 min</option>
+				<option value={300}>5 min</option>
+			</select>
 			<DeleteQuestion {index} />
 		</div>
 

src/routes/kahootclone/create/logic/GameCreateData.svelte.js

@@ -9,6 +9,7 @@ export let questions = $state({
 			name: "",
 			answers: ["", "", "", ""],
 			correctAnswer: undefined,
+			timeLimit: 30,
 		},
 	],
 });
@@ -22,6 +23,7 @@ export function AddQuestion() {
 		name: "",
 		answers: ["", "", "", ""],
 		correctAnswer: undefined,
+		timeLimit: 30,
 	});
 }
 

src/routes/kahootclone/create/logic/InsertGameInDB.js

@@ -20,6 +20,7 @@ export async function createGame(questions, gamePin) {
 		gameid: gamePin,
 		questionstext: q.name,
 		correctanswer: q.correctAnswer,
+		timelimit: q.timeLimit,
 		media: q.media || null,
 	}));
 

src/routes/kahootclone/host/components/DuringGame/display.svelte

@@ -1,8 +1,10 @@
 <script>
 	import PeopleAwnsered from "./PeopleAwnsered.svelte";
 	import Display from "./awnseringQuetions/display.svelte";
+	import TimeLeft from "./timeLeft.svelte";
 </script>
 
 <h1 class="m-[0] text-7xl">HOSTING</h1>
 <Display />
 <PeopleAwnsered />
+<TimeLeft />

src/routes/kahootclone/host/components/DuringGame/timeLeft.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { TotalTimeLeft, timeLeft } from "../../logic/HostsData.svelte.js";
+</script>
+
+{#if TotalTimeLeft.v != null}
+	<div class="mt-2 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
+		<h3>{timeLeft.v}sec out of {TotalTimeLeft.v}secs is left</h3>
+		<div class="flex-1 rounded-full border-2 border-gray-600">
+			<div
+				class="h-4 rounded-full bg-green-600 transition-all duration-500"
+				style="width: {(timeLeft.v / TotalTimeLeft.v) * 100}%;"
+			></div>
+		</div>
+	</div>
+{/if}

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

@@ -9,4 +9,7 @@ export let Totalplayers = $state({ v: 3 });
 
 export let CurrentQuestionDetails = $state({ v: {} });
 
-export let gamePin = $state({ v: "" });
+export let gamePin = $state({ v: "" });
+
+export let timeLeft = $state({ v: 0 });
+export let TotalTimeLeft = $state({ v: 0 });

src/routes/kahootclone/host/logic/WaitForAwnser.js

@@ -1,12 +1,23 @@
 import { supabase } from "$lib/supabase.js";
 import { onNewPlayerAwnsered } from "./onNewPlayerAwnsered.js";
-import { currentQuestion, questions, CurrentQuestionDetails } from "./HostsData.svelte.js";
+import {
+	currentQuestion,
+	questions,
+	CurrentQuestionDetails,
+	TotalTimeLeft,
+	timeLeft,
+	PeopleAwnseredQ,
+	totalQuetions,
+} from "./HostsData.svelte.js";
+import { GameOver } from "./GameOver.js";
 
 let WaitingForAwnserConection;
+let TimeLimitInterval;
 
 export async function WaitForAwnser(questionid, gamePin) {
 	if (questionid != 0) {
 		await supabase.removeChannel(WaitingForAwnserConection);
+		clearInterval(TimeLimitInterval);
 	}
 
 	await supabase
@@ -48,5 +59,31 @@ export async function WaitForAwnser(questionid, gamePin) {
 		answers: answers.map((answer) => answer.content),
 		questionid: questionsData[currentQuestion.v].id,
 		media: questionsData[currentQuestion.v].media || null,
+		timeLimit: questionsData[currentQuestion.v].timelimit,
 	};
+
+	TotalTimeLeft.v = CurrentQuestionDetails.v.timeLimit;
+	timeLeft.v = CurrentQuestionDetails.v.timeLimit;
+	console.log("Time left:", timeLeft.v);
+	console.log("Total time left:", TotalTimeLeft.v);
+
+	if (TotalTimeLeft.v != null) {
+		TimeLimitInterval = setInterval(() => {
+			console.log("Time left:", timeLeft.v);
+			if (timeLeft.v > 0) {
+				timeLeft.v--;
+				console.log("Time left after decrement:", timeLeft.v);
+			} else {
+				supabase.removeChannel(WaitingForAwnserConection);
+				currentQuestion.v++;
+				if (currentQuestion.v == totalQuetions.v) {
+					//GameOver(gamePin);
+					return;
+				}
+				PeopleAwnseredQ.v = 0;
+
+				WaitForAwnser(currentQuestion.v, gamePin);
+			}
+		}, 1000);
+	}
 }