sucses full merged and made the anouncer feature, i convered it to tailwind and diffrent comonents!

package.json

@@ -12,7 +12,6 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/postcss": "^4.1.6",
@@ -28,11 +27,11 @@
 	},
 	"dependencies": {
 		"@supabase/supabase-js": "^2.49.4",
+		"@sveltejs/adapter-static": "^3.0.8",
 		"chart.js": "^4.4.9",
-		"drag-drop-touch": "^1.3.1",
-		"kokoro-js": "^1.2.1",
+		"js-confetti": "^0.12.0",
 		"random-words": "^2.0.1",
-		"svelte-spa-router": "^4.0.1",
+		"svelte-5-french-toast": "^2.0.4",
 		"word-exists": "^1.0.0"
 	}
 }

src/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/lib/showAlert.js

@@ -0,0 +1,2 @@
+import JSConfetti from "js-confetti";
+const jsConfetti = new JSConfetti();

src/routes/+layout.svelte

@@ -1,38 +1,17 @@
 <script>
+	export const prerender = true;
+	import { Toaster } from "svelte-5-french-toast";
 	let { children } = $props();
-
-	import { confettiAnimation } from "./Confetti.js";
-	let ShowAlertDiv = $state(false);
-	let ShowAlertText = $state("this Code is bad");
-	let ShowAlertType = $state("Error");
-
-	export function ShowAlert(text, type) {
-		ShowAlertDiv = true;
-		ShowAlertType = type;
-
-		ShowAlertText = text;
-		setTimeout(() => {
-			ShowAlertDiv = false;
-		}, 1500);
-
-		if (type == "success") {
-			confettiAnimation();
-		}
-	}
 </script>
 
+<Toaster />
 <div id="root">
 	<div class="h-full text-white">{@render children()}</div>
 </div>
-{#if ShowAlertDiv == true}
-	<div id="alert">
-		<h1 class={ShowAlertType}>{ShowAlertText}</h1>
-	</div>
-{/if}
 
 <style>
 	@import "https://www.nerdfonts.com/assets/css/webfont.css";
-	@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
+	@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 "tailwindcss";
 
 	:root {

src/routes/+page.svelte

@@ -6,9 +6,8 @@
 	/>
 	<h2>A collection of awesome tools, games, and more — made to be used in any classroom!</h2>
 	<h3>MAIN</h3>
-
 	<div id="items2">
-		<a href="/KahhotClone">
+		<a href="/kahootclone">
 			<button class="button2">
 				<span class="front2">
 					<svg
@@ -22,8 +21,8 @@
 						/></svg
 					>
 					DaKahootClone
-					<p>The best ever kahoot clone.</p></span
-				>
+					<p>The best ever kahoot clone.</p>
+				</span>
 			</button></a
 		>
 	</div>
@@ -47,7 +46,7 @@
 				>
 			</button></a
 		>
-		<a href="#/RandomName">
+		<a href="/RandomName">
 			<button>
 				<span class="front">
 					<svg
@@ -65,7 +64,7 @@
 				>
 			</button></a
 		>
-		<a href="#/Wordle">
+		<a href="/wordle">
 			<button>
 				<span class="front">
 					<svg
@@ -84,7 +83,7 @@
 			</button></a
 		>
 
-		<a href="#/announcer">
+		<a href="/announcer">
 			<button>
 				<span class="front">
 					<svg

src/routes/Confetti.js

@@ -1,316 +0,0 @@
-export function confettiAnimation() {
-	(() => {
-		"use strict";
-
-		// Utility functions grouped into a single object
-		const Utils = {
-			// Parse pixel values to numeric values
-			parsePx: (value) => parseFloat(value.replace(/px/, "")),
-
-			// Generate a random number between two values, optionally with a fixed precision
-			getRandomInRange: (min, max, precision = 0) => {
-				const multiplier = Math.pow(10, precision);
-				const randomValue = Math.random() * (max - min) + min;
-				return Math.floor(randomValue * multiplier) / multiplier;
-			},
-
-			// Pick a random item from an array
-			getRandomItem: (array) =>
-				array[Math.floor(Math.random() * array.length)],
-
-			// Scaling factor based on screen width
-			getScaleFactor: () => Math.log(window.innerWidth) / Math.log(1920),
-
-			// Debounce function to limit event firing frequency
-			debounce: (func, delay) => {
-				let timeout;
-				return (...args) => {
-					clearTimeout(timeout);
-					timeout = setTimeout(() => func(...args), delay);
-				};
-			},
-		};
-
-		// Precomputed constants
-		const DEG_TO_RAD = Math.PI / 180;
-
-		// Centralized configuration for default values
-		const defaultConfettiConfig = {
-			confettiesNumber: 250,
-			confettiRadius: 6,
-			confettiColors: [
-				"#fcf403",
-				"#62fc03",
-				"#f4fc03",
-				"#03e7fc",
-				"#03fca5",
-				"#a503fc",
-				"#fc03ad",
-				"#fc03c2",
-			],
-			emojies: [],
-			svgIcon: null, // Example SVG link
-		};
-
-		// Confetti class representing individual confetti pieces
-		class Confetti {
-			constructor({
-				initialPosition,
-				direction,
-				radius,
-				colors,
-				emojis,
-				svgIcon,
-			}) {
-				const speedFactor =
-					Utils.getRandomInRange(0.9, 1.7, 3) *
-					Utils.getScaleFactor();
-				this.speed = { x: speedFactor, y: speedFactor };
-				this.finalSpeedX = Utils.getRandomInRange(0.2, 0.6, 3);
-				this.rotationSpeed =
-					emojis.length || svgIcon
-						? 0.01
-						: Utils.getRandomInRange(0.03, 0.07, 3) *
-						  Utils.getScaleFactor();
-				this.dragCoefficient = Utils.getRandomInRange(
-					0.0005,
-					0.0009,
-					6
-				);
-				this.radius = { x: radius, y: radius };
-				this.initialRadius = radius;
-				this.rotationAngle =
-					direction === "left"
-						? Utils.getRandomInRange(0, 0.2, 3)
-						: Utils.getRandomInRange(-0.2, 0, 3);
-				this.emojiRotationAngle = Utils.getRandomInRange(
-					0,
-					2 * Math.PI
-				);
-				this.radiusYDirection = "down";
-
-				const angle =
-					direction === "left"
-						? Utils.getRandomInRange(82, 15) * DEG_TO_RAD
-						: Utils.getRandomInRange(-15, -82) * DEG_TO_RAD;
-				this.absCos = Math.abs(Math.cos(angle));
-				this.absSin = Math.abs(Math.sin(angle));
-
-				const offset = Utils.getRandomInRange(-150, 0);
-				const position = {
-					x:
-						initialPosition.x +
-						(direction === "left" ? -offset : offset) * this.absCos,
-					y: initialPosition.y - offset * this.absSin,
-				};
-
-				this.position = { ...position };
-				this.initialPosition = { ...position };
-				this.color =
-					emojis.length || svgIcon
-						? null
-						: Utils.getRandomItem(colors);
-				this.emoji = emojis.length ? Utils.getRandomItem(emojis) : null;
-				this.svgIcon = null;
-
-				// Preload SVG if provided
-				if (svgIcon) {
-					this.svgImage = new Image();
-					this.svgImage.src = svgIcon;
-					this.svgImage.onload = () => {
-						this.svgIcon = this.svgImage; // Mark as ready once loaded
-					};
-				}
-
-				this.createdAt = Date.now();
-				this.direction = direction;
-			}
-
-			draw(context) {
-				const { x, y } = this.position;
-				const { x: radiusX, y: radiusY } = this.radius;
-				const scale = window.devicePixelRatio;
-
-				if (this.svgIcon) {
-					context.save();
-					context.translate(scale * x, scale * y);
-					context.rotate(this.emojiRotationAngle);
-					context.drawImage(
-						this.svgIcon,
-						-radiusX,
-						-radiusY,
-						radiusX * 2,
-						radiusY * 2
-					);
-					context.restore();
-				} else if (this.color) {
-					context.fillStyle = this.color;
-					context.beginPath();
-					context.ellipse(
-						x * scale,
-						y * scale,
-						radiusX * scale,
-						radiusY * scale,
-						this.rotationAngle,
-						0,
-						2 * Math.PI
-					);
-					context.fill();
-				} else if (this.emoji) {
-					context.font = `${radiusX * scale}px serif`;
-					context.save();
-					context.translate(scale * x, scale * y);
-					context.rotate(this.emojiRotationAngle);
-					context.textAlign = "center";
-					context.fillText(this.emoji, 0, radiusY / 2); // Adjust vertical alignment
-					context.restore();
-				}
-			}
-
-			updatePosition(deltaTime, currentTime) {
-				const elapsed = currentTime - this.createdAt;
-
-				if (this.speed.x > this.finalSpeedX) {
-					this.speed.x -= this.dragCoefficient * deltaTime;
-				}
-
-				this.position.x +=
-					this.speed.x *
-					(this.direction === "left" ? -this.absCos : this.absCos) *
-					deltaTime;
-				this.position.y =
-					this.initialPosition.y -
-					this.speed.y * this.absSin * elapsed +
-					(0.00125 * Math.pow(elapsed, 2)) / 2;
-
-				if (!this.emoji && !this.svgIcon) {
-					this.rotationSpeed -= 1e-5 * deltaTime;
-					this.rotationSpeed = Math.max(this.rotationSpeed, 0);
-
-					if (this.radiusYDirection === "down") {
-						this.radius.y -= deltaTime * this.rotationSpeed;
-						if (this.radius.y <= 0) {
-							this.radius.y = 0;
-							this.radiusYDirection = "up";
-						}
-					} else {
-						this.radius.y += deltaTime * this.rotationSpeed;
-						if (this.radius.y >= this.initialRadius) {
-							this.radius.y = this.initialRadius;
-							this.radiusYDirection = "down";
-						}
-					}
-				}
-			}
-
-			isVisible(canvasHeight) {
-				return this.position.y < canvasHeight + 100;
-			}
-		}
-
-		class ConfettiManager {
-			constructor() {
-				this.canvas = document.createElement("canvas");
-				// @ts-ignore
-				this.canvas.style =
-					"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none;";
-				document.body.appendChild(this.canvas);
-				this.context = this.canvas.getContext("2d");
-				this.confetti = [];
-				this.lastUpdated = Date.now();
-				window.addEventListener(
-					"resize",
-					Utils.debounce(() => this.resizeCanvas(), 200)
-				);
-				this.resizeCanvas();
-				requestAnimationFrame(() => this.loop());
-			}
-
-			resizeCanvas() {
-				this.canvas.width = window.innerWidth * window.devicePixelRatio;
-				this.canvas.height =
-					window.innerHeight * window.devicePixelRatio;
-			}
-
-			addConfetti(config = {}) {
-				const {
-					confettiesNumber,
-					confettiRadius,
-					confettiColors,
-					emojies,
-					svgIcon,
-				} = {
-					...defaultConfettiConfig,
-					...config,
-				};
-
-				const baseY = (5 * window.innerHeight) / 7;
-				for (let i = 0; i < confettiesNumber / 2; i++) {
-					this.confetti.push(
-						new Confetti({
-							initialPosition: { x: 0, y: baseY },
-							direction: "right",
-							radius: confettiRadius,
-							colors: confettiColors,
-							emojis: emojies,
-							svgIcon,
-						})
-					);
-					this.confetti.push(
-						new Confetti({
-							initialPosition: { x: window.innerWidth, y: baseY },
-							direction: "left",
-							radius: confettiRadius,
-							colors: confettiColors,
-							emojis: emojies,
-							svgIcon,
-						})
-					);
-				}
-			}
-
-			resetAndStart(config = {}) {
-				// Clear existing confetti
-				this.confetti = [];
-				// Add new confetti
-				this.addConfetti(config);
-			}
-
-			loop() {
-				const currentTime = Date.now();
-				const deltaTime = currentTime - this.lastUpdated;
-				this.lastUpdated = currentTime;
-
-				this.context.clearRect(
-					0,
-					0,
-					this.canvas.width,
-					this.canvas.height
-				);
-
-				this.confetti = this.confetti.filter((item) => {
-					item.updatePosition(deltaTime, currentTime);
-					item.draw(this.context);
-					return item.isVisible(this.canvas.height);
-				});
-
-				requestAnimationFrame(() => this.loop());
-			}
-		}
-
-		const manager = new ConfettiManager();
-		manager.addConfetti();
-
-		const triggerButton = document.getElementById("show-again");
-		if (triggerButton) {
-			triggerButton.addEventListener("click", () =>
-				manager.addConfetti()
-			);
-		}
-
-		const resetInput = document.getElementById("reset");
-		if (resetInput) {
-			resetInput.addEventListener("input", () => manager.resetAndStart());
-		}
-	})();
-}

src/routes/IdleScreen/+page.svelte

@@ -15,7 +15,7 @@
 
 <div id="wrap">
 	<div id="nav">
-		<a href="#/" aria-label="Back to main menu"
+		<a href="/" aria-label="Back to main menu"
 			><button aria-label="Back to main menu"
 				><span class="front"
 					><svg

src/routes/KahhotClone/host/[gamePin]/+page.js

@@ -1,5 +0,0 @@
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}

src/routes/KahhotClone/play/[gamePin]/+page.js

@@ -1,5 +0,0 @@
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}

src/routes/KahhotClone/results/[gamePin]/+page.js

@@ -1,5 +0,0 @@
-export function load({ params }) {
-	return {
-		gamePin: params.gamePin
-	};
-}

src/routes/RandomName/+page.svelte

@@ -57,7 +57,7 @@
 
 <div id="wrap">
 	<div id="nav">
-		<a href="#/" aria-label="Back to main menu"
+		<a href="/" aria-label="Back to main menu"
 			><button aria-label="Back to main menu"
 				><span class="front"
 					><svg

src/routes/RandomName/EditNameOfStudents.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { newNames, RandomNamesState } from "./main.svelte";
+	import { newNames, RandomNamesState } from "./+page.svelte";
 
 	let names =
 		RandomNamesState.NotSelectedYet.join("\n") +

src/routes/RandomName/TopDisplay.svelte

@@ -1,9 +1,7 @@
 <script context="module">
-	import { RandomNamesState } from "./main.svelte";
+	import { RandomNamesState } from "./+page.svelte";
 
 	let DragTempName = "na";
-
-	import "drag-drop-touch";
 </script>
 
 <div id="root">

src/routes/RandomName/selector.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { RandomNamesState, SelectStudent } from "./main.svelte";
+	import { RandomNamesState, SelectStudent } from "./+page.svelte";
 </script>
 
 <div id="root">

src/routes/announcer/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+	import List from "./components/CommonAnounceedTexts/list.svelte";
+	import Add from "./components/CustomText/add.svelte";
+	import CustomText from "./components/CustomText/CustomText.svelte";
+
+	import { onMount } from "svelte";
+	import { LoadMostUsedAnnouncement } from "./logic/LoadMostUsedAnnouncement.js";
+	onMount(() => LoadMostUsedAnnouncement());
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-5 p-5">
+	<div class="w-fit rounded-2xl bg-gray-900 p-3">
+		<h1 class="text-center text-4xl">Most Announced announcements</h1>
+		<List />
+		<hr class="my-5 w-full border-gray-600" />
+		<h1 class="text-center text-4xl">Or announce something else</h1>
+		<CustomText />
+		<Add />
+	</div>
+</div>

src/routes/announcer/ActualAnnouncer.svelte

@@ -1,182 +0,0 @@
-<script>
-	let text = $state("");
-
-	function speak() {
-		window.speechSynthesis.speak(
-			Object.assign(new SpeechSynthesisUtterance(text), {
-				rate: 0.5,
-			})
-		);
-	}
-
-	let TempelateCommonAnounce = $state(["Please be quiet"]);
-
-	let CommonAnounce = $state([]);
-
-	export function newNames(Names) {
-		localStorage.setItem("CommonAnounce", JSON.stringify(Names));
-	}
-
-	let TempCommonAnounce = localStorage.getItem("CommonAnounce") || "";
-
-	if (TempCommonAnounce != "") {
-		CommonAnounce = JSON.parse(TempCommonAnounce);
-	} else {
-		CommonAnounce = $state.snapshot(TempelateCommonAnounce);
-		localStorage.setItem("CommonAnounce", JSON.stringify(CommonAnounce));
-	}
-</script>
-
-<div id="root">
-	<div id="wrap">
-		<h1>Most Announced announcements</h1>
-
-		<div id="mostanouncedanounements">
-			{#each CommonAnounce as anouncement, i}
-				<div>
-					<button
-						class="anuncement"
-						onclick={() => {
-							text = anouncement;
-							speak();
-						}}
-					>
-						{anouncement}
-					</button>
-					<button
-						aria-label="Delete anouncement"
-						onclick={() => {
-							if (
-								confirm(
-									"Are you sure you want to delete this anouncement?"
-								)
-							) {
-								CommonAnounce.splice(i, 1);
-								localStorage.setItem(
-									"CommonAnounce",
-									JSON.stringify(CommonAnounce)
-								);
-							}
-						}}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							height="15px"
-							viewBox="0 -960 960 960"
-							width="15px"
-							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
-						></button
-					>
-				</div>
-			{/each}
-		</div>
-
-		<hr />
-
-		<h1>Or announce something else</h1>
-		<div>
-			<input
-				bind:value={text}
-				placeholder="Type in here what you want to announce"
-			/>
-			<button onclick={speak}>Play</button>
-		</div>
-		{#if text}
-			<button
-				id="new"
-				onclick={() => {
-					CommonAnounce.push(text);
-					text = "";
-					localStorage.setItem(
-						"CommonAnounce",
-						JSON.stringify(CommonAnounce)
-					);
-				}}>Add "{text}" to "Most Announced announcements"</button
-			>
-		{/if}
-	</div>
-
-
-</div>
-
-<style>
-	#root {
-		height: 100%;
-		display: grid;
-		place-items: center;
-	}
-
-	#wrap {
-		display: flex;
-		flex-direction: column;
-		gap: 5px;
-		padding: 20px;
-		border-radius: 20px;
-		width: fit-content;
-	}
-
-	input {
-		font-size: 20px;
-		padding: 10px;
-		border-radius: 12px;
-		border: none;
-		background-color: #292929;
-		color: white;
-		width: 400px;
-	}
-	button {
-		font-size: 20px;
-		padding: 10px;
-		border-radius: 12px;
-		border: none;
-		background-color: #292929;
-		color: white;
-		cursor: pointer;
-		transition: all 0.1s ease-in-out;
-	}
-
-	button:hover {
-		background-color: #414141;
-		transform: rotateZ(-15deg) scale(1.2);
-	}
-
-	hr {
-		width: 100%;
-		height: 2px;
-		background-color: #292929;
-		border: none;
-		margin: 0;
-	}
-
-	h1 {
-		text-align: center;
-		margin: 0;
-		font-size: 30px;
-	}
-
-	#mostanouncedanounements {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		gap: 10px;
-	}
-	.anuncement:hover {
-		transform: scale(1.1);
-	}
-	.anuncement {
-		width: calc(100% - 40px);
-	}
-
-	#new {
-		width: fit-content;
-		align-self: center;
-		font-size: 15px;
-	}
-
-	#new:hover {
-		transform: scale(1.1);
-	}
-</style>

src/routes/announcer/components/CommonAnounceedTexts/delete.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { DeleteMostUsedAnnouncement } from "../../logic/AddAndDeleteMostUsedAnnouncements.js";
+
+	let props = $props();
+	let announcementID = props.announcementID;
+</script>
+
+<button
+	class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
+	aria-label="Delete announcement"
+	onclick={() => DeleteMostUsedAnnouncement(announcementID)}
+>
+	<i class="nf nf-md-trash_can_outline"></i></button
+>

src/routes/announcer/components/CommonAnounceedTexts/list.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { MostUsedAnnouncements } from "../../logic/announcerData.svelte.js";
+	import Delete from "./delete.svelte";
+	import Text from "./text.svelte";
+</script>
+
+{#each MostUsedAnnouncements.v as announcementText, announcementID}
+	<div class="flex w-full gap-2 mt-2">
+		<Text {announcementText} />
+		<Delete {announcementID} />
+	</div>
+{/each}

src/routes/announcer/components/CommonAnounceedTexts/text.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { AnnounceUsingTTS } from "../../logic/AnnounceUsingTTS.js";
+
+	let props = $props();
+	let announcementText = props.announcementText;
+</script>
+
+<button
+	class="w-full cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-105 hover:bg-gray-600"
+	onclick={() => AnnounceUsingTTS(announcementText)}
+>
+	{announcementText}
+</button>

src/routes/announcer/components/CustomText/CustomText.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Input from "./input.svelte";
+	import Play from "./play.svelte";
+</script>
+
+<div class="mt-2 flex gap-2">
+	<Input />
+	<Play />
+</div>

src/routes/announcer/components/CustomText/add.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { AddMostUsedAnnouncement } from "../../logic/AddAndDeleteMostUsedAnnouncements.js";
+	import { CurrentText } from "../../logic/announcerData.svelte.js";
+</script>
+
+{#if CurrentText.v}
+	<div class="flex w-full justify-center mt-2">
+		<button
+			class="text-1xl w-fit cursor-pointer self-center rounded-2xl bg-gray-800 p-2.5 transition-all hover:scale-110 hover:bg-gray-600"
+			onclick={() => {
+				AddMostUsedAnnouncement(CurrentText.v);
+				CurrentText.v = "";
+			}}>Add "{CurrentText.v}" to "Most Announced announcements"</button
+		>
+	</div>
+{/if}

src/routes/announcer/components/CustomText/input.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { CurrentText } from "../../logic/announcerData.svelte.js";
+</script>
+
+<input
+	bind:value={CurrentText.v}
+	placeholder="Type in here what you want to announce"
+	class="flex-1 rounded-2xl bg-gray-800 p-2.5 text-2xl"
+/>

src/routes/announcer/components/CustomText/play.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { AnnounceUsingTTS } from "../../logic/AnnounceUsingTTS.js";
+	import { CurrentText } from "../../logic/announcerData.svelte.js";
+</script>
+
+<button
+	class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
+	onclick={() => AnnounceUsingTTS(CurrentText.v)}
+>
+	📢</button
+>

src/routes/announcer/logic/AddAndDeleteMostUsedAnnouncements.js

@@ -0,0 +1,13 @@
+import { MostUsedAnnouncements } from "./announcerData.svelte.js";
+
+export function AddMostUsedAnnouncement(announcementText) {
+	MostUsedAnnouncements.v.push(announcementText);
+    localStorage.setItem("MostUsedAnnouncements", JSON.stringify(MostUsedAnnouncements.v));
+}
+
+export function DeleteMostUsedAnnouncement(announcementID) {
+	if (confirm("Are you sure you want to delete this announcement?")) {
+		MostUsedAnnouncements.v.splice(announcementID, 1);
+		localStorage.setItem("MostUsedAnnouncements", JSON.stringify(MostUsedAnnouncements.v));
+	}
+}

src/routes/announcer/logic/AnnounceUsingTTS.js

@@ -0,0 +1,7 @@
+export function AnnounceUsingTTS(text) {
+    window.speechSynthesis.speak(
+        Object.assign(new SpeechSynthesisUtterance(text), {
+            rate: 0.5,
+        }),
+    );
+}

src/routes/announcer/logic/LoadMostUsedAnnouncement.js

@@ -0,0 +1,12 @@
+import { MostUsedAnnouncements } from "./announcerData.svelte.js";
+
+export function LoadMostUsedAnnouncement() {
+	let TempMostUsedAnnouncements = JSON.parse(localStorage.getItem("MostUsedAnnouncements")) || "";
+
+	if (TempMostUsedAnnouncements == "") {
+		MostUsedAnnouncements.v = ["Please be quiet"];
+		localStorage.setItem("MostUsedAnnouncements", JSON.stringify(MostUsedAnnouncements.v));
+	} else {
+		MostUsedAnnouncements.v = TempMostUsedAnnouncements;
+	}
+}

src/routes/announcer/logic/announcerData.svelte.js

@@ -0,0 +1,2 @@
+export let CurrentText = $state({ v: "" });
+export let MostUsedAnnouncements = $state({ v: [] });

src/routes/announcer/main.svelte

@@ -1,100 +0,0 @@
-<script>
-	import ActualAnnouncer from "./ActualAnnouncer.svelte";
-</script>
-
-<div id="wrap">
-	<div id="nav">
-		<a href="#/" aria-label="Back to main menu"
-			><button aria-label="Back to main menu"
-				><span class="front"
-					><svg
-						xmlns="http://www.w3.org/2000/svg"
-						height="24px"
-						viewBox="0 -960 960 960"
-						width="24px"
-						fill="#FFFFFF"
-						><path
-							d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
-						/></svg
-					> GO BACK
-				</span></button
-			></a
-		>
-		<h1>Announcer</h1>
-	</div>
-	<div id="root">
-		<ActualAnnouncer />
-	</div>
-</div>
-
-<style>
-	#wrap {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	#nav {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background-color: #121212;
-		color: white;
-	}
-
-	button {
-		background: #292929;
-		border-radius: 12px;
-		border: none;
-		margin: 10px;
-		padding: 2px 0px;
-		cursor: pointer;
-		outline-offset: 4px;
-		max-width: 400px;
-	}
-	button:hover .front {
-		transform: translateY(-7px);
-	}
-
-	button:active .front {
-		transform: translateY(-2px);
-	}
-
-	.front {
-		display: flex;
-		text-align: center;
-		align-items: center;
-		padding: 5px;
-		border-radius: 12px;
-
-		background: #4d4d4d;
-		color: white;
-		transform: translateY(-4px);
-		transition: all 0.1s ease-in-out;
-		font-family: "JetBrains Mono", monospace;
-		font-size: 25px;
-	}
-
-	#root {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-	}
-
-	h1 {
-		text-align: center;
-		margin: 5px 0px;
-		text-decoration: underline #444;
-		position: fixed;
-		top: 0;
-		left: 50%;
-		transform: translate(-50%, 0);
-	}
-
-	span {
-		font-size: 0.5em;
-		text-decoration: none;
-		color: #444;
-	}
-</style>

src/routes/kahootclone/+page.svelte

@@ -2,13 +2,13 @@
 	<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 ever kahoot clone.</p>
-		<a href="./join">
+		<a href="./kahootclone/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">
+		<a href="./kahootclone/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

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

@@ -47,5 +47,5 @@ export async function createGame(questions, gamePin) {
 		return;
 	}
 
-	window.location.href = "/host/" + gamePin;
+	window.location.href = `/host?gamepin=${gamePin}` ;
 }

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

@@ -7,10 +7,11 @@
 	import { GetCurrentPlayers } from "./logic/GetCurrentPlayers.js";
 	import { onMount } from "svelte";
 
-	export let data;
-	const gamePin = data.gamePin;
+	let gamePin;
 
 	onMount(() => {
+		gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
+		
 		GetCurrentPlayers(gamePin);
 		AutoUpdatePlayersList(gamePin);
 	});

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 + "?playerID=host-null");
+	window.location.replace("/results?gamepin=" + GamePin + "&playerID=host-null");
 }

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

@@ -15,5 +15,5 @@ export async function joinGame(pin, name) {
 
 	Checking.v = false;
 
-	window.location.href = `./play/${pin}?name=${name}&playerid=${id}`;
+	window.location.href = `./play?gamepin=${pin}&name=${name}&playerid=${id}`;
 }

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

@@ -8,16 +8,16 @@
 	import { onMount } from "svelte";
 	import { name,playerid } from "./logic/HostsData.svelte.js";
 
-	export let data;
-	const gamePin = data.gamePin;
+	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);
-
-		name.v = new URLSearchParams(new URL(window.location.href).search).get("name");
-		playerid.v = new URLSearchParams(new URL(window.location.href).search).get("playerid");
 	});
 </script>
 

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 + "?playerID=" + playerid.v);
+		window.location.replace("/results?gamepin" + gamePin  + "&playerID=" + playerid.v);
 		return;
 	}
 

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

@@ -2,14 +2,15 @@
 	import { supabase } from "$lib/supabase";
 	import { onMount } from "svelte";
 
-	export let data;
-	const gamePin = data.gamePin;
+	let gamePin;
 
 	let playerID;
 	let players = [];
 
 	onMount(async () => {
 		playerID = new URLSearchParams(new URL(window.location.href).search).get("playerID");
+		gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
+
 
 		let { data: fetchedPlayers } = await supabase
 			.from("players")

src/routes/wordle/logic.svelte.js

@@ -1,6 +1,6 @@
 import wordExists from "word-exists";
 import { generate } from "random-words";
-import { ShowAlert } from "../+layout.svelte";
+import toast from "svelte-5-french-toast";
 
 export let WordLegnth = $state({ v: 5 });
 
@@ -87,6 +87,8 @@ export function newGame() {
 
 function GameWin() {
 	ShowAlert("You win!", "success");
+	toast.success("You win!");
+
 	data.value[WordLegnth.v].push(words.v.length);
 	localStorage.setItem("WordleGamesData", JSON.stringify(data.value));
 	newGame();

svelte.config.js

@@ -1,13 +1,7 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
+export default {
 	kit: {
-		// 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()
 	}
 };
-
-export default config;