you can now UPLAD IMAGES AND VIDS!!! in the quetions of kahootlone/quizzlet

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

@@ -53,6 +53,13 @@
 			{/each}
 		</div>
 		<GenerateOptionsUsingAI {index} />
-		<input type="file" onchange={() => UpLoadFiles(files[0])} bind:files accept="image/*,video/*" />
+		<input
+			type="file"
+			onchange={async () => {
+				questions.v[index].media = await UpLoadFiles(files[0]);
+			}}
+			bind:files
+			accept="image/*,video/*"
+		/>
 	</div>
 </div>

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

@@ -1,4 +1,6 @@
+
 import { DefaultQuestions } from "$lib/config.js";
+import toast from "svelte-5-french-toast";
 
 export let Wait = $state({ v: false });
 export let questions = $state({
@@ -29,6 +31,6 @@ export function DeleteQuestion(index) {
 			questions.v.splice(index, 1);
 		}
 	} else {
-		alert("You need at least one question.");
+		toast.error("You need at least one question.");
 	}
 }

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

@@ -1,5 +1,6 @@
 import { questions } from "./GameCreateData.svelte.js";
 import { AiPrompts } from "$lib/config.js";
+import toast from "svelte-5-french-toast";
 
 export function GenerateOptionsUsingAI(index) {
 	fetch("https://ai.hackclub.com/chat/completions", {
@@ -26,9 +27,9 @@ export function GenerateOptionsUsingAI(index) {
 			questions.v[index].name = question;
 		})
 		.catch((error) => {
-			alert("Error:" + error);
+			toast.error("Error:" + error);
 			return;
 		});
 
-	alert("added!");
+	toast.success("added!");
 }

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

@@ -1,5 +1,6 @@
 import { questions } from "./GameCreateData.svelte.js";
 import { AiPrompts } from "$lib/config.js";
+import toast from "svelte-5-french-toast";
 
 export function GenerateQuestionsUsingAI() {
 	let topic = window.prompt(
@@ -30,9 +31,9 @@ export function GenerateQuestionsUsingAI() {
 			questions.v = JSON.parse(data.choices[0].message.content);
 		})
 		.catch((error) => {
-			alert("Error:" + error);
+			toast.error("Error:" + error);
 			return;
 		});
 
-	alert("added!");
+	toast.success("added!");
 }

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

@@ -1,4 +1,6 @@
 import { supabase } from "$lib/supabase";
+import toast from "svelte-5-french-toast";
+
 
 export async function createGame(questions, gamePin) {
 	const { data: gameData, error: gameError } = await supabase.from("games").insert({
@@ -9,7 +11,7 @@ export async function createGame(questions, gamePin) {
 	});
 
 	if (gameError) {
-		alert("Failed to create game: " + gameError.message + "\n\nPlease try again.");
+		toast.error("Failed to create game: " + gameError.message + "\n\nPlease try again.");
 		return;
 	}
 
@@ -18,6 +20,7 @@ export async function createGame(questions, gamePin) {
 		gameid: gamePin,
 		questionstext: q.name,
 		correctanswer: q.correctAnswer,
+		media: q.media || null,
 	}));
 
 	const { data: questionsResult, error: questionsError } = await supabase
@@ -26,7 +29,7 @@ export async function createGame(questions, gamePin) {
 		.select("id");
 
 	if (questionsError) {
-		alert("Failed to insert questions: " + questionsError.message + "\n\nPlease try again.");
+		toast.error("Failed to insert questions: " + questionsError.message + "\n\nPlease try again.");
 		return;
 	}
 
@@ -43,9 +46,9 @@ export async function createGame(questions, gamePin) {
 	const { error: answersError } = await supabase.from("answers").insert(answersData);
 
 	if (answersError) {
-		alert("Failed to insert answers: " + answersError.message + "\n\nPlease try again.");
+		toast.error("Failed to insert answers: " + answersError.message + "\n\nPlease try again.");
 		return;
 	}
 
-	window.location.href = `/host?gamepin=${gamePin}` ;
+	window.location.href = `/kahootclone/host?gamepin=${gamePin}`;
 }

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

@@ -1,11 +1,12 @@
 import { createGame } from "./InsertGameInDB.js";
 import { questions,Wait } from "./GameCreateData.svelte.js";
+import toast from "svelte-5-french-toast";
 
 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.name === "")) return toast.error("Please fill all questions");
+	if (questions.v.some((q) => q.answers.some((a) => a === ""))) return toast.error("Fill all options");
 	if (questions.v.some((q) => q.correctAnswer === undefined))
-		return alert("Select correct answers");
+		return toast.error("Select correct answers");
 
 	const gamePin = Math.floor(Math.random() * 1000000)
 		.toString()

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

@@ -27,5 +27,5 @@ export async function UpLoadFiles(file) {
 	// Retrieve public URL
 	const { data: publicData } = supabase.storage.from("useruploadedcontent").getPublicUrl(filePath);
 
-	toast.success(publicData.publicUrl);
+	return publicData.publicUrl;
 }

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

@@ -2,18 +2,20 @@
 	import PlayingDisplay from "./components/DuringGame/display.svelte";
 
 	import LobbyDisplay from "./components/lobby/display.svelte";
-	import { Status } from "./logic/HostsData.svelte.js";
+	import { Status,gamePin } from "./logic/HostsData.svelte.js";
 	import { AutoUpdatePlayersList } from "./logic/UpdatePlayersList.js";
 	import { GetCurrentPlayers } from "./logic/GetCurrentPlayers.js";
 	import { onMount } from "svelte";
-
-	let gamePin;
-
+	
 	onMount(() => {
-		gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
-		
-		GetCurrentPlayers(gamePin);
-		AutoUpdatePlayersList(gamePin);
+		gamePin.v = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
+
+
+
+		console.log("Game Pin: " + gamePin.v);
+
+		GetCurrentPlayers(gamePin.v);
+		AutoUpdatePlayersList(gamePin.v);
 	});
 </script>
 
@@ -22,7 +24,7 @@
 		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} />
+			<LobbyDisplay/>
 		{:else if Status.v == "started"}
 			<PlayingDisplay />
 		{/if}

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

@@ -1,5 +1,5 @@
 <script>
-	import { PeopleAwnseredQ, Totalplayers } from "./../../logic/HostsData.svelte.js";
+	import { PeopleAwnseredQ, Totalplayers } from "../../logic/HostsData.svelte.js";
 </script>
 
 <div class="mt-2 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">

src/routes/kahootclone/host/components/DuringGame/awnseringQuetions/ProgressBar.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { currentQuestion, totalQuetions } from "./../../../logic/HostsData.svelte.js";
+	import { currentQuestion, totalQuetions } from "../../../logic/HostsData.svelte.js";
 </script>
 
 <div class="mt-5 mb-2 flex w-full items-center justify-center gap-3">

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

@@ -6,4 +6,6 @@
 
 <ProgressBar />
 <Question />
+
+
 <Awnsers />

src/routes/kahootclone/host/components/DuringGame/awnseringQuetions/text/Quetion.svelte

@@ -5,3 +5,20 @@
 <h1 class="m-[0] text-center text-5xl">
 	Q{currentQuestion.v + 1}. {CurrentQuestionDetails.v.question}
 </h1>
+{#if CurrentQuestionDetails.v.media != null}
+	<div class="mb-3 flex items-center justify-center">
+		{#if CurrentQuestionDetails.v.media.match(/\.(mp4|webm|ogg|mov|avi|mkv)$/i)}
+			<video
+				src={CurrentQuestionDetails.v.media}
+				class="max-h-[300px] max-w-[500px] rounded-lg"
+				controls
+			/>
+		{:else}
+			<img
+				src={CurrentQuestionDetails.v.media}
+				class="max-h-[300px] max-w-[500px] rounded-lg"
+				alt="Question media"
+			/>
+		{/if}
+	</div>
+{/if}

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

@@ -2,14 +2,15 @@
 	import StartGame from "./buttons/startGame.svelte";
 	import Players from "./PlayersGUI/players.svelte";
 
-	let props = $props();
-    let gamePin = props.gamePin;
+	import { gamePin } from "../../logic/HostsData.svelte.js";
+
+	console.log("Game Pin: " + gamePin.v);
 </script>
 
 <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}
+	{gamePin.v}
 </h1>
 <Players />
-<StartGame {gamePin} />
+<StartGame gamePin={gamePin.v} />

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

@@ -3,5 +3,5 @@ import { supabase } from "$lib/supabase.js";
 export async function GameOver(GamePin) {
 	await supabase.from("games").update({ status: `completed` }).eq("gamepin", GamePin);
 
-	window.location.replace("/results?gamepin=" + GamePin + "&playerID=host-null");
+	window.location.replace("/kahootclone/results?gamepin=" + GamePin + "&playerID=host-null");
 }

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

@@ -14,5 +14,5 @@ export async function GetCurrentPlayers(gamePin) {
 		return;
 	}
 
-	players.v = data ? data.map(player => player.playername) : [];
+	players.v = data ? data.map((player) => player.playername) : [];
 }

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

@@ -8,3 +8,5 @@ export let PeopleAwnseredQ = $state({ v: 0 });
 export let Totalplayers = $state({ v: 3 });
 
 export let CurrentQuestionDetails = $state({ v: {} });
+
+export let gamePin = $state({ v: "" });

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

@@ -32,7 +32,7 @@ export async function WaitForAwnser(questionid, gamePin) {
 
 	const { data: questionsData } = await supabase
 		.from("questions")
-		.select("id,questionstext,correctanswer")
+		.select("*")
 		.eq("gameid", Number(gamePin))
 		.order("id", { ascending: true });
 
@@ -47,5 +47,6 @@ export async function WaitForAwnser(questionid, gamePin) {
 		correctAnswer: questionsData[currentQuestion.v].correctanswer,
 		answers: answers.map((answer) => answer.content),
 		questionid: questionsData[currentQuestion.v].id,
+		media: questionsData[currentQuestion.v].media || null,
 	};
 }

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

@@ -1,18 +1,15 @@
 import { supabase } from "$lib/supabase.js";
 import { LobbyConnection } from "./UpdatePlayersList.js";
-import {
-	questions,
-	Status,
-	Totalplayers,
-	totalQuetions,
-	players,
-} from "./HostsData.svelte.js";
+import { questions, Status, Totalplayers, totalQuetions, players } from "./HostsData.svelte.js";
 import { WaitForAwnser } from "./WaitForAwnser.js";
+import toast from "svelte-5-french-toast";
 
 export async function startGame(gamePin) {
 	if (players.v.length == 0) {
-		alert("you need at least 1 person to start the game!");
+		toast.error("you need at least 1 person to start the game!");
 		return;
+
+		
 	}
 
 	await supabase.removeChannel(LobbyConnection);

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

@@ -1,6 +1,8 @@
 <script>
+	import toast from "svelte-5-french-toast";
 	import { joinGame } from "./logic/joinGame.js";
 	import { Checking } from "./logic/JoinGameData.svelte.js";
+	
 
 	let pin;
 	let name;
@@ -35,7 +37,7 @@
 				class="mt-2 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
 				on:click={() => {
 					if (!pin || !name) {
-						alert("Please fill in the game pin and your name.");
+						toast.error("Please fill in the game pin and your name.");
 					} else {
 						joinGame(pin, name);
 					}

src/routes/kahootclone/join/logic/InsertPlayerInDB.js

@@ -1,4 +1,6 @@
 import { supabase } from "$lib/supabase";
+import toast from "svelte-5-french-toast";
+
 
 export async function addPlayer(name, gamePin) {
 	const { data, error } = await supabase
@@ -11,7 +13,7 @@ export async function addPlayer(name, gamePin) {
 		.select("id");
 
 	if (error) {
-		alert("Failed to join game: " + error.message + "\n\nPlease try again.");
+		toast.error("Failed to join game: " + error.message + "\n\nPlease try again.");
 		return;
 	}
 

src/routes/kahootclone/join/logic/joinGame.js

@@ -1,12 +1,14 @@
 import { addPlayer } from "./InsertPlayerInDB.js";
 import { validateGamePin } from "./validateGamePin.js";
 import { Checking } from "./JoinGameData.svelte.js";
+import toast from "svelte-5-french-toast";
+
 
 export async function joinGame(pin, name) {
 	Checking.v = true;
 
 	if (!(await validateGamePin(pin))) {
-		alert("Invalid game pin. Please try again.");
+		toast.error("Invalid game pin. Please try again.");
 		Checking.v = false;
 		return;
 	}

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

@@ -26,7 +26,7 @@
 					--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)]"
+				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:bg-[var(--bg-color-checked)] hover:border-[var(--border-color-hover)]"
 			>
 				<i class="nf {AnswersSymbolAndColorScheme[index].Symbol}"></i>
 				{answer}

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

@@ -5,7 +5,7 @@
 	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";
+	import { CurrentQuestion, Selected, questions } from "../../logic/HostsData.svelte.js";
 </script>
 
 <div class="bg-grey-900 flex h-full items-center justify-center">
@@ -15,6 +15,25 @@
 		<ProgressBar />
 		{#if CurrentQuestion.v != null}
 			<Question />
+
+			{#if questions.v.media != null}
+				<div class="mb-3 flex items-center justify-center">
+					{#if questions.v.media.match(/\.(mp4|webm|ogg|mov|avi|mkv)$/i)}
+						<video
+							src={questions.v.media}
+							class="max-h-[300px] max-w-[500px] rounded-lg"
+							controls
+						/>
+					{:else}
+						<img
+							src={questions.v.media}
+							class="max-h-[300px] max-w-[500px] rounded-lg"
+							alt="Question media"
+						/>
+					{/if}
+				</div>
+			{/if}
+
 			<Awnsers />
 			{#if Selected.v != null}
 				<SubmitAwnser />

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

@@ -11,7 +11,7 @@ import { supabase } from "$lib/supabase.js";
 
 export async function NewStatus(NewStatus, gamePin) {
 	if (NewStatus == "completed") {
-		window.location.replace("/results?gamepin" + gamePin  + "&playerID=" + playerid.v);
+		window.location.replace("/kahootclone/results?gamepin=" + gamePin  + "&playerID=" + playerid.v);
 		return;
 	}
 
@@ -20,7 +20,7 @@ export async function NewStatus(NewStatus, gamePin) {
 
 	const { data: questionsData } = await supabase
 		.from("questions")
-		.select("id,questionstext,correctanswer")
+		.select("*")
 		.eq("gameid", Number(gamePin))
 		.order("id", { ascending: true });
 
@@ -37,6 +37,7 @@ export async function NewStatus(NewStatus, gamePin) {
 		correctAnswer: questionsData[CurrentQuestion.v].correctanswer,
 		answers: answers.map((answer) => answer.content),
 		questionid: questionsData[CurrentQuestion.v].id,
+		media: questionsData[CurrentQuestion.v].media || null,
 	};
 
 	isWait.v = false;