Mored on ui for the Random Name , now working on seting the absentesa nd all thing

jsconfig.json

@@ -24,5 +24,6 @@
 		 */
 		"checkJs": true,
 		"types": ["svelte", "estree"]
-  }
+	},
+	"exclude": ["wordle/**/*", "IdleScreen/**/*", "SelectionMenue/**/*"]
 }

src/IdleScreen/timeTable.svelte

@@ -4,7 +4,7 @@
 		table = timetable;
 	}
 
-	let table = $state({
+	let TempelateTable = {
 		Times: [
 			"07:50 - 08:50",
 			"08:50 - 09:40",
@@ -59,14 +59,16 @@
 			"Social Science",
 			"Science",
 		],
-	});
+	};
+
+	let table = $state();
 
 	let TempTimeTable = localStorage.getItem("TimeTable") || "";
 
 	if (TempTimeTable != "") {
 		table = JSON.parse(TempTimeTable);
 	} else {
-		newTable(TempTimeTable);
+		newTable($state.snapshot(TempelateTable));
 	}
 </script>
 

src/RandomName/TopDisplay.svelte

@@ -0,0 +1,90 @@
+<script>
+	import { RandomNamesState } from "./main.svelte";
+</script>
+
+<div id="root">
+	<div id="NotSelectedYet">
+		<h1>Not Selected Yet</h1>
+		<div class="wrap">
+			{#each RandomNamesState.NotSelectedYet as name}
+				<span draggable="true" class="NotSelectedYet">
+					{name}
+				</span>
+			{/each}
+		</div>
+	</div>
+	<hr />
+	<div id="Selected">
+		<h1>Selected</h1>
+		<div class="wrap">
+			{#each RandomNamesState.Selected as name}
+				<span draggable="true" class="Selected">
+					{name}
+				</span>
+			{/each}
+		</div>
+	</div>
+	<hr />
+	<div id="Absent">
+		<h1>Absent</h1>
+		<div class="wrap">
+			{#each RandomNamesState.Absent as name}
+				<span draggable="true" class="Absent">
+					{name}
+				</span>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	#root {
+		display: flex;
+		overflow-x: hidden;
+	}
+
+	span {
+		margin: 5px;
+		padding: 5px;
+		border-radius: 5px;
+		background-color: #4d4d4d;
+		color: white;
+		font-size: 30px;
+	}
+
+	h1 {
+		text-align: center;
+		font-size: 40px;
+		margin: 0;
+	}
+
+	#NotSelectedYet,
+	#Selected {
+		min-width: 40%;
+		max-width: 40%;
+	}
+
+	#Absent {
+		min-width: 20%;
+		max-width: 20%;
+	}
+
+	.wrap {
+		display: flex;
+		flex-wrap: wrap;
+		height: fit-content;
+		justify-content: center;
+	}
+
+	.NotSelectedYet {
+		color: #ffe677;
+	}
+
+	.Selected {
+		color: #a3ffa3;
+	}
+
+	.Absent {
+		color: #242424;
+	}
+</style>

src/RandomName/main.svelte

@@ -1,11 +1,70 @@
-<script>
+<script module>
+	import Selector from "./selector.svelte";
+	import TopDisplay from "./TopDisplay.svelte";
 
-function EditList() {
+	function EditList() {
 		console.log("Edit list of names");
 	}
+
+export let RandomNamesState = $state({
+NotSelectedYet: [
+"John",
+"Jane",
+"Alice",
+"Bob",
+"Charlie",
+"Diana",
+"Eve",
+"Frank",
+"Grace",
+"Hank",
+],
+Selected: [
+"John",
+"Jane",
+"Alice",
+"Bob",
+"Charlie",
+"Diana",
+"Eve",
+"Frank",
+"Grace",
+"Hank",
+],
+Absent: [
+"John",
+"Jane",
+"Alice",
+"Bob",
+"Charlie",
+"Diana",
+"Eve",
+"Frank",
+"Grace",
+"Hank",
+],
+selectedStudent: "none :(",
+});
+
+	export function SelectStudent() {
+		if (RandomNamesState.NotSelectedYet.length > 0) {
+			let randomIndex = Math.floor(
+				Math.random() * RandomNamesState.NotSelectedYet.length
+			);
+			RandomNamesState.selectedStudent =
+				RandomNamesState.NotSelectedYet[randomIndex];
+			RandomNamesState.Selected.push(
+				RandomNamesState.NotSelectedYet[randomIndex]
+			);
+			RandomNamesState.NotSelectedYet.splice(randomIndex, 1);
+		} else {
+			alert("All students have been selected.");
+		}
+	}
 </script>
 
-<div id="nav">
+<div id="wrap">
+	<div id="nav">
 		<a href="#/" aria-label="Back to main menu"
 			><button aria-label="Back to main menu"
 				><span class="front"
@@ -24,9 +83,7 @@ function EditList() {
 		>
 		<h1>Random Name</h1>
 		<div>
-		<button
+			<button aria-label="Back to main menu" onclick={() => EditList()}
-			aria-label="Back to main menu"
-			onclick={() => EditList()}
 				><span class="front"
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -41,10 +98,20 @@ function EditList() {
 				</span></button
 			>
 		</div>
+	</div>
+	<div id="root">
+		<div id="listWrap"><TopDisplay /></div>
+		<Selector />
+	</div>
 </div>
-<div id="root"></div>
 
 <style>
+	#wrap {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
 	#nav {
 		display: flex;
 		justify-content: space-between;
@@ -87,13 +154,12 @@ function EditList() {
 	}
 
 	#root {
-		height: 90%;
+		flex: 1;
 		display: flex;
-		margin: 0;
+		flex-direction: column;
-		font-family: "Sour Gummy", sans-serif;
+		justify-content: space-between;
-		background-color: #121212;
-		color: white;
 	}
+
 	h1 {
 		text-align: center;
 		margin: 5px 0px;
@@ -109,4 +175,11 @@ function EditList() {
 		text-decoration: none;
 		color: #444;
 	}
+
+	#listWrap {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
 </style>

src/RandomName/selector.svelte

@@ -0,0 +1,99 @@
+<script>
+	import { RandomNamesState, SelectStudent } from "./main.svelte";
+</script>
+
+<div id="root">
+	<p>The Selected Student is</p>
+	<p>thier name has bean auto moved to the Selected list</p>
+
+	<h1>{RandomNamesState.selectedStudent}</h1>
+	<button
+		aria-label="Back to main menu"
+		onclick={() => {
+			SelectStudent();
+		}}
+		><span class="front"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="24px"
+				viewBox="0 -960 960 960"
+				width="24px"
+				fill="#FFFFFF"
+				><path
+					d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
+				/></svg
+			>
+
+			{#if RandomNamesState.selectedStudent !== "none :("}
+				<span>Select Another Student</span>
+			{:else}
+				<span>Select one now :D</span>{/if}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="24px"
+				viewBox="0 -960 960 960"
+				width="24px"
+				fill="#FFFFFF"
+				><path
+					d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
+				/></svg
+			>
+		</span></button
+	>
+</div>
+
+<style>
+	#root {
+		background-color: #222;
+		border-radius: 30px 30px 0 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding-top: 20px;
+	}
+
+	button {
+		background: #292929;
+		border-radius: 12px;
+		border: none;
+		margin: 10px;
+		padding: 2px 0px;
+		cursor: pointer;
+		outline-offset: 4px;
+		width: fit-content;
+		margin-bottom: 40px;
+	}
+	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;
+		gap: 5px;
+	}
+
+	h1 {
+		font-size: 120px;
+		margin: 10px;
+	}
+
+	p {
+		color: #aaa;
+		margin: 0;
+	}
+</style>

src/SelectionMenue/TypeSelector.svelte

@@ -59,6 +59,24 @@
 				>
 			</button></a
 		>
+		<a href="#/announcer">
+			<button>
+				<span class="front">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="50px"
+						viewBox="0 -960 960 960"
+						width="50px"
+						fill="#FFFFFF"
+						><path
+							d="M720-440v-80h160v80H720Zm48 280-128-96 48-64 128 96-48 64Zm-80-480-48-64 128-96 48 64-128 96ZM200-200v-160h-40q-33 0-56.5-23.5T80-440v-80q0-33 23.5-56.5T160-600h160l200-120v480L320-360h-40v160h-80Zm240-182v-196l-98 58H160v80h182l98 58Zm120 36v-268q27 24 43.5 58.5T620-480q0 41-16.5 75.5T560-346ZM300-480Z"
+						/></svg
+					>
+					Announcer
+					<p>to shout from the speakers!</p></span
+				>
+			</button></a
+		>
 	</div>
 </div>
 

src/announcer/main.svelte

@@ -0,0 +1 @@
+yo chat

src/app.svelte

@@ -4,12 +4,14 @@
 	import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
 	import IdleScreen from "./IdleScreen/main.svelte";
 	import RandomName from "./RandomName/main.svelte";
+	import announcer from "./announcer/main.svelte";
 
 	let routes = {
 		"/": TypeSelector,
 		"/Wordle": Wordle,
 		"/IdleScreen": IdleScreen,
 		"/RandomName": RandomName,
+		"/announcer": announcer,
 	};
 </script>