now you can add and remove pertiods in the idlescreen/timetable

jsconfig.json

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

src/IdleScreen/EditTimetable.svelte

@@ -1,4 +1,4 @@
-<script>
+<script module>
 	import { newTable } from "./timeTable.svelte";
 
 	let table = JSON.parse(localStorage.getItem("TimeTable"));
@@ -7,6 +7,7 @@
 <div id="root">
 	<div id="root">
 		<div id="wrap">
+			<div id="left">
 				<div class="Header Row">
 					<span class="DayOfWeek" style="Opacity: 0;"></span>
 					{#each table.Times as time}
@@ -80,6 +81,65 @@
 					{/each}
 				</div>
 			</div>
+			<div id="right">
+				<button
+					onclick={() => {
+							table.Times.push("");
+							table.Monday.push("");
+							table.Tuesday.push("");
+							table.Wednesday.push("");
+							table.Thursday.push("");
+							table.Friday.push("");
+							newTable(table);
+							table = JSON.parse(
+								localStorage.getItem("TimeTable"),
+							);
+						
+					}}
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="24px"
+						viewBox="0 -960 960 960"
+						width="24px"
+						fill="#FFFFFF"
+						><path
+							d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
+						/></svg
+					> <br />Add<br />new<br />Period
+				</button>
+				<button
+					onclick={() => {
+						if (
+							confirm(
+								"This will remove the last period, it is not reversable! are you sure?",
+							)
+						) {
+							table.Times.pop();
+							table.Monday.pop();
+							table.Tuesday.pop();
+							table.Wednesday.pop();
+							table.Thursday.pop();
+							table.Friday.pop();
+							newTable(table);
+							table = JSON.parse(
+								localStorage.getItem("TimeTable"),
+							);
+						}
+					}}
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="24px"
+						viewBox="0 -960 960 960"
+						width="24px"
+						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
+					><br />
+					Delete<br />last<br />Period
+				</button>
+			</div>
+		</div>
 	</div>
 </div>
 
@@ -102,8 +162,7 @@
 		background-color: #252525;
 		padding: 20px;
 		border-radius: 20px;
-		flex-direction: column;
+		gap: 20px;
-		gap: 5px;
 	}
 
 	.Row {
@@ -138,4 +197,32 @@
 	.Header > input {
 		background-color: #30492e;
 	}
+
+	#left {
+		gap: 5px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	#right {
+		gap: 10px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	#right > button {
+		background-color: rgb(63, 63, 63);
+		color: white;
+		border: 2px solid white;
+		border-radius: 10px;
+		cursor: pointer;
+		transition: all 0.1s ease-in-out;
+	}
+
+	#right > button:hover {
+		transform: scale(1.2);
+		background-color: rgb(50, 50, 50);
+	}
 </style>

src/app.svelte

@@ -4,14 +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";
+    import Announcer from "./announcer/main.svelte";
 
     let routes = {
         "/": TypeSelector,
         "/Wordle": Wordle,
         "/IdleScreen": IdleScreen,
         "/RandomName": RandomName,
-		"/announcer": announcer,
+        "/announcer": Announcer,
     };
 </script>