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

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/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: [] });