dsasd

src/wordle/InfoAndSetings/WordLegnthSetings.svelte

@@ -0,0 +1,42 @@
+<script>
+	import { newGame, WordLegnth } from "../logic.svelte.js";
+
+	let LetersSelected = WordLegnth.v;
+</script>
+
+<div id="root">
+	<h4>Select The Word legnth (between 3 and 10 letters)</h4>
+	<input
+		type="range"
+		id="vol"
+		name="vol"
+		min="3"
+		max="10"
+		bind:value={LetersSelected}
+	/>
+	<button
+		onclick={() => {
+			WordLegnth.v = LetersSelected;
+			newGame();
+		}}
+		>Start New Game with Word legnth of {LetersSelected} letters
+	</button>
+</div>
+
+<style>
+	#root {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		margin: 10px;
+		justify-content: center;
+		background-color: #303030;
+		padding: 10px;
+		margin: 20px;
+		border-radius: 10px;
+	}
+	h4 {
+		text-align: center;
+		margin: 0px;
+	}
+</style>

src/wordle/InfoAndSetings/main.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { newGame, WordLegnth } from "../logic.svelte.js";
+	import WordLegnthSetings from "./WordLegnthSetings.svelte";
+
+	let LetersSelected = WordLegnth.v;
+</script>
+
+<div id="root">
+	<h1>A Wordle clone designed for classrooms!</h1>
+	<h3>
+		Unlimited guesses, Unlimited words, and choose your own word length!
+	</h3>
+
+	<WordLegnthSetings />
+</div>
+
+<style>
+	#root {
+		height: 100%;
+		width: 35%;
+		border-radius: 20px;
+		margin: 20px;
+		margin-top: 5px;
+		border: 2px solid #444;
+	}
+
+	h1 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+	}
+
+	h3 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+	}
+</style>