aded bases ui for selector of tools

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"chart.js": "^4.4.9",
 				"random-words": "^2.0.1",
+				"svelte-spa-router": "^4.0.1",
 				"word-exists": "^1.0.0"
 			},
 			"devDependencies": {
@@ -1057,6 +1058,14 @@
 				"seedrandom": "^3.0.5"
 			}
 		},
+		"node_modules/regexparam": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+			"integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/rollup": {
 			"version": "4.35.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.35.0.tgz",
@@ -1134,6 +1143,17 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/svelte-spa-router": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
+			"integrity": "sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==",
+			"dependencies": {
+				"regexparam": "2.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ItalyPaleAle"
+			}
+		},
 		"node_modules/tinyglobby": {
 			"version": "0.2.13",
 			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",

package.json

@@ -17,6 +17,7 @@
 	"dependencies": {
 		"chart.js": "^4.4.9",
 		"random-words": "^2.0.1",
+		"svelte-spa-router": "^4.0.1",
 		"word-exists": "^1.0.0"
 	}
 }

src/SelectionMenue/TypeSelector.svelte

@@ -0,0 +1 @@
+<a href="#/Wordle">Wordle</a>

src/app.svelte

@@ -1,10 +1,16 @@
 <script>
-	import Game from "./wordle/game.svelte";
+	import Router from "svelte-spa-router";
+	import Wordle from "./wordle/game.svelte";
+	import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
+
+	let routes = {
+		"/": TypeSelector,
+		"/Wordle": Wordle,
+	};
 </script>
 
 <div id="root">
-	<h1>CLASSROOM WORDLE <span>~made by Rhythm Upadhyay of 7th A</span></h1>
+	<Router {routes} />
-	<Game />
 </div>
 
 <style>
@@ -15,21 +21,7 @@
 
 	#root {
 		height: 100%;
-		display: flex;
-		flex-direction: column;
 		margin: 0;
 		font-family: "Sour Gummy", sans-serif;
 	}
-
-	h1 {
-		text-align: center;
-		margin: 5px 0px;
-		text-decoration: underline #444;
-	}
-
-	span {
-		font-size: 0.5em;
-		text-decoration: none;
-		color: #444;
-	}
 </style>

src/wordle/game.svelte

@@ -10,17 +10,18 @@
 	});
 </script>
 
+<h1>CLASSROOM WORDLE <span>~made by Rhythm Upadhyay of 7th A</span></h1>
 <div id="root">
 	<div id="left">
 		<Display />
 		<Keyboard />
 	</div>
-    <Right />
+	<Right />
 </div>
 
 <style>
 	#root {
-        height: 90%;
+		height: 90%;
 		display: flex;
 		margin: 0;
 		font-family: "Sour Gummy", sans-serif;
@@ -37,4 +38,15 @@
 		border: 2px solid #444;
 		font-family: "JetBrains Mono", monospace;
 	}
+	h1 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+	}
+
+	span {
+		font-size: 0.5em;
+		text-decoration: none;
+		color: #444;
+	}
 </style>

src/wordle/logic.svelte.js

@@ -210,7 +210,7 @@ export let data = $state({
 
 let WordleGamesData = localStorage.getItem("WordleGamesData") || "";
 
-if (WordleGamesData == "") {
+if (WordleGamesData != "") {
 	data.value = JSON.parse(WordleGamesData);
 } else {
 	data.value = {