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>

src/wordle/game.svelte

@@ -1,8 +1,9 @@
 <script>
-	import Keyboard from "./keyboard.svelte";
+	import Keyboard from "./game/keyboard.svelte";
-	import Display from "./display.svelte";
+	import Display from "./game/display.svelte";
 	import { onMount } from "svelte";
 	import { handleKey } from "./logic.svelte.js";
+	import Right from "./InfoAndSetings/main.svelte";
 
 	onMount(() => {
 		window.addEventListener("keydown", handleKey);
@@ -10,14 +11,26 @@
 </script>
 
 <div id="root">
+	<div id="left">
 		<Display />
 		<Keyboard />
+	</div>
+    <Right />
 </div>
 
 <style>
 	#root {
-		width: 885px;
+        height: 90%;
-		height: calc(100% - 75px);
+		display: flex;
+		margin: 0;
+		font-family: "Sour Gummy", sans-serif;
+		background-color: #121212;
+		color: white;
+	}
+
+	#left {
+		width: 100%;
+		height: 100%;
 		border-radius: 20px;
 		margin: 20px;
 		margin-top: 5px;

src/wordle/game/display.svelte

@@ -1,9 +1,9 @@
 <script>
-	import { CurrentWord, words,WordLegnth } from "./logic.svelte.js";
+	import { CurrentWord, words, WordLegnth } from "../logic.svelte.js";
 </script>
 
 <div id="DisplayOfWords">
-	{#each words as word}
+	{#each words.v as word}
 		<div class="word">
 			{#each word as letter}
 				<span class={letter[1]}>{letter[0]}</span>
@@ -11,8 +11,8 @@
 		</div>
 	{/each}
 	<div class="word">
-		{#each Array(WordLegnth) as _, i}
+		{#each Array(WordLegnth.v) as _, i}
-		<span>{CurrentWord.v[i] || ''}</span>
+			<span>{CurrentWord.v[i] || ""}</span>
 		{/each}
 	</div>
 </div>

src/wordle/game/keyboard.svelte

@@ -1,10 +1,10 @@
 <script>
-	import { keys, ButtonPressed } from "./logic.svelte.js";
+	import { keys, ButtonPressed } from "../logic.svelte.js";
 </script>
 
 <div id="root">
 	<div class="word">
-		{#each keys.slice(0, 10) as key}
+		{#each keys.v.slice(0, 10) as key}
 			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
 				>{key[0]}</button
 			>
@@ -12,14 +12,14 @@
 	</div>
 
 	<div class="word">
-		{#each keys.slice(10, 19) as key}
+		{#each keys.v.slice(10, 19) as key}
 			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
 				>{key[0]}</button
 			>
 		{/each}
 	</div>
 	<div class="word">
-		{#each keys.slice(19) as key}
+		{#each keys.v.slice(19) as key}
 			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
 				>{key[0]}</button
 			>

src/wordle/logic.svelte.js

@@ -2,13 +2,17 @@ import wordExists from "word-exists";
 import { generate } from "random-words";
 import { onMount } from "svelte";
 
-export let WordLegnth = 5; 
+export let WordLegnth = $state({ v: 5 });
 
-let CorrectWord = generate({ minLength: WordLegnth, maxLength: WordLegnth });
+let CorrectWord = generate({
+	minLength: WordLegnth.v,
+	maxLength: WordLegnth.v,
+});
 console.log("CorrectWord: ", CorrectWord);
-export let words = $state([]);
+export let words = $state({ v: [] });
 export let CurrentWord = $state({ v: [] });
-export let keys = $state([
+export let keys = $state({
+	v: [
 		["Q", "n"],
 		["W", "n"],
 		["E", "n"],
@@ -37,11 +41,52 @@ export let keys = $state([
 		["N", "n"],
 		["M", "n"],
 		["⏎", "o"],
-]);
+	],
+});
+
+export function newGame() {
+	CorrectWord = generate({
+		minLength: WordLegnth.v,
+		maxLength: WordLegnth.v,
+	});
+	console.log("CorrectWord: ", CorrectWord);
+	words.v = [];
+	CurrentWord.v = [];
+	keys.v = [
+		["Q", "n"],
+		["W", "n"],
+		["E", "n"],
+		["R", "n"],
+		["T", "n"],
+		["Y", "n"],
+		["U", "n"],
+		["I", "n"],
+		["O", "n"],
+		["P", "n"],
+		["A", "n"],
+		["S", "n"],
+		["D", "n"],
+		["F", "n"],
+		["G", "n"],
+		["H", "n"],
+		["J", "n"],
+		["K", "n"],
+		["L", "n"],
+		["⌫", "o"],
+		["Z", "n"],
+		["X", "n"],
+		["C", "n"],
+		["V", "n"],
+		["B", "n"],
+		["N", "n"],
+		["M", "n"],
+		["⏎", "o"],
+	];
+}
 
 function GameWin() {
 	alert("You win!");
-	document.location.reload();
+	newGame();
 }
 
 function SendWord(word) {
@@ -77,7 +122,7 @@ function SendWord(word) {
 			: [word[i].toUpperCase(), "w"];
 	}
 
-	words.push(result);
+	words.v.push(result);
 
 	setTimeout(() => {
 		document.getElementById("DisplayOfWords").scrollTo({
@@ -88,17 +133,17 @@ function SendWord(word) {
 
 	// Update keyboard status
 	for (let [letter, status] of result) {
-		let keyIndex = keys.findIndex(
+		let keyIndex = keys.v.findIndex(
 			(k) => k[0].toLowerCase() === letter.toLowerCase()
 		);
 		if (keyIndex !== -1) {
-			let current = keys[keyIndex][1];
+			let current = keys.v[keyIndex][1];
 			if (status === "c") {
-				keys[keyIndex][1] = "c";
+				keys.v[keyIndex][1] = "c";
 			} else if (status === "d" && current === "n") {
-				keys[keyIndex][1] = "d";
+				keys.v[keyIndex][1] = "d";
 			} else if (status === "w" && current === "n") {
-				keys[keyIndex][1] = "w";
+				keys.v[keyIndex][1] = "w";
 			}
 		}
 	}
@@ -116,7 +161,7 @@ export function ButtonPressed(key) {
 	});
 
 	if (key === "⏎") {
-		if (CurrentWord.v.length === WordLegnth) {
+		if (CurrentWord.v.length === WordLegnth.v) {
 			let word = CurrentWord.v.join("").toUpperCase();
 			if (wordExists(word)) {
 				SendWord(CurrentWord.v);
@@ -130,7 +175,7 @@ export function ButtonPressed(key) {
 		CurrentWord.v.pop();
 		return;
 	}
-	if (CurrentWord.v.length === WordLegnth) {
+	if (CurrentWord.v.length === WordLegnth.v) {
 		return;
 	}