Improved wordle Ui even more

src/wordle/InfoAndSetings/WordLegnthSetings.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { newGame, WordLegnth } from "../logic.svelte.js";
+	import { TabOpen } from "./main.svelte";
 
 	let LetersSelected = WordLegnth.v;
 </script>
@@ -18,6 +19,7 @@
 		onclick={() => {
 			WordLegnth.v = LetersSelected;
 			newGame();
+			TabOpen.v = "none";
 		}}
 		>Start New Game with Word legnth of {LetersSelected} letters
 	</button>
@@ -34,6 +36,7 @@
 		padding: 10px;
 		margin: 20px;
 		border-radius: 10px;
+		width: 400px;
 	}
 	h4 {
 		text-align: center;

src/wordle/InfoAndSetings/main.svelte

@@ -1,45 +1,58 @@
-<script>
+<script module>
 	import { newGame, WordLegnth } from "../logic.svelte.js";
 	import WordLegnthSetings from "./WordLegnthSetings.svelte";
 	import Stats from "./stats.svelte";
 
-	let LetersSelected = WordLegnth.v;
+	export let TabOpen = $state({ v: "none" });
+
+	export function OpenTab(type) {
+		TabOpen.v = type;
+	}
 </script>
 
-<div id="root">
+{#if TabOpen.v !== "none"}
-	<div>
+	<div id="UperLayer">
-		<h1>A Wordle clone designed for classrooms!</h1>
+		<div id="wrap">
-		<h3>
+			{#if TabOpen.v == "WordLength"}
-			Unlimited guesses, Unlimited words, and choose your own word length!
+				<WordLegnthSetings />
-		</h3>
+			{:else if TabOpen.v == "Stats"}
+				<Stats />
+			{/if}
+			<button
+				class="close"
+				onclick={() => (TabOpen.v = "none")}
+				aria-label="close">CLOSE</button
+			>
+		</div>
 	</div>
-	<WordLegnthSetings />
+{/if}
-
-	<Stats />
-</div>
 
 <style>
-	#root {
+	#UperLayer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
 		height: 100%;
-		width: 35%;
+		backdrop-filter: blur(5px);
-		border-radius: 20px;
+		background-color: rgba(0, 0, 0, 0.5);
-		margin: 20px;
+		z-index: 1;
-		margin-top: 5px;
+		display: grid;
-		border: 2px solid #444;
+		place-items: center;
+	}
+
+	#wrap {
 		display: flex;
 		flex-direction: column;
-		justify-content: space-between;
 	}
 
-	h1 {
+	.close {
-		text-align: center;
+		background-color: #2b2b2b;
-		margin: 5px 0px;
+		color: #888;
-		text-decoration: underline #444;
+		border: none;
-	}
+		padding: 10px 20px;
-
+		border-radius: 5px;
-	h3 {
+		cursor: pointer;
-		text-align: center;
+		align-self: center;
-		margin: 5px 0px;
-		text-decoration: underline #444;
 	}
 </style>

src/wordle/InfoAndSetings/stats.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { data } from "../logic.svelte.js";
+	import { data, WordLegnth } from "../logic.svelte.js";
 
 	// svelte-ignore non_reactive_update
-	let LetersSelected = "5";
+	let LetersSelected = JSON.stringify(WordLegnth.v);
 
 	let dataPoints = data.value[LetersSelected];
 
@@ -122,6 +122,7 @@
 		padding: 10px;
 		margin: 20px;
 		border-radius: 10px;
+		width: 700px;
 	}
 	h2,
 	h1,

src/wordle/game.svelte

@@ -4,13 +4,66 @@
 	import { onMount } from "svelte";
 	import { handleKey } from "./logic.svelte.js";
 	import Right from "./InfoAndSetings/main.svelte";
+	import { OpenTab } from "./InfoAndSetings/main.svelte";
 
 	onMount(() => {
 		window.addEventListener("keydown", handleKey);
 	});
 </script>
 
-<h1>CLASSROOM WORDLE <span>~made by Rhythm Upadhyay of 7th A</span></h1>
+<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>Wordle</h1>
+	<div>
+		<button
+			aria-label="Back to main menu"
+			onclick={() => OpenTab("WordLength")}
+			><span class="front"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"
+					><path
+						d="M320-80 160-240l160-160 57 56-64 64h334l-63-64 56-56 160 160L640-80l-57-56 64-64H313l63 64-56 56ZM200-480v-400h80v400h-80Zm240 0v-400h80v400h-80Zm240 0v-400h80v400h-80Z"
+					/></svg
+				> Change word legnth
+			</span></button
+		>
+		<button
+			aria-label="Back to main menu"
+			onclick={() => OpenTab("Stats")}
+			><span class="front"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"
+					><path
+						d="m105-399-65-47 200-320 120 140 160-260 120 180 135-214 65 47-198 314-119-179-152 247-121-141-145 233Zm475 159q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM784-80 676-188q-21 14-45.5 21t-50.5 7q-75 0-127.5-52.5T400-340q0-75 52.5-127.5T580-520q75 0 127.5 52.5T760-340q0 26-7 50.5T732-244l108 108-56 56Z"
+					/></svg
+				> Stats
+			</span></button
+		>
+	</div>
+</div>
 <div id="root">
 	<div id="left">
 		<Display />
@@ -20,6 +73,47 @@
 </div>
 
 <style>
+	#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 {
 		height: 90%;
 		display: flex;