mvp MADE!

src/wordle/display.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { CurrentWord, words } from "./logic.svelte.js";
+	import { CurrentWord, words,WordLegnth } from "./logic.svelte.js";
 </script>
 
-<div id="root">
+<div id="DisplayOfWords">
 	{#each words as word}
 		<div class="word">
 			{#each word as letter}
@@ -11,16 +11,14 @@
 		</div>
 	{/each}
 	<div class="word">
-		<span>{CurrentWord.v[0]}</span>
+		{#each Array(WordLegnth) as _, i}
-		<span>{CurrentWord.v[1]}</span>
+		<span>{CurrentWord.v[i] || ''}</span>
-		<span>{CurrentWord.v[2]}</span>
+		{/each}
-		<span>{CurrentWord.v[3]}</span>
-		<span>{CurrentWord.v[4]}</span>
 	</div>
 </div>
 
 <style>
-	#root {
+	#DisplayOfWords {
 		height: calc(100% - 320px);
 		border: 2px solid #202020;
 		margin: 20px;
@@ -58,18 +56,18 @@
 
 	/* width */
 	::-webkit-scrollbar {
-		width: 20px;
+		width: 10px;
 	}
 
 	/* Track */
 	::-webkit-scrollbar-track {
-		box-shadow: inset 0 0 5px grey;
+		border: 1px solid #5c5c5c;
 		border-radius: 10px;
 	}
 
 	/* Handle */
 	::-webkit-scrollbar-thumb {
-		background: red;
+		background: #3f3f3f;
 		border-radius: 10px;
 	}
 </style>

src/wordle/game.svelte

@@ -1,6 +1,12 @@
 <script>
 	import Keyboard from "./keyboard.svelte";
 	import Display from "./display.svelte";
+	import { onMount } from "svelte";
+	import { handleKey } from "./logic.svelte.js";
+
+	onMount(() => {
+		window.addEventListener("keydown", handleKey);
+	});
 </script>
 
 <div id="root">
@@ -10,13 +16,12 @@
 
 <style>
 	#root {
-        width: calc(50% - 40px);
+		width: 885px;
 		height: calc(100% - 75px);
 		border-radius: 20px;
 		margin: 20px;
 		margin-top: 5px;
 		border: 2px solid #444;
-
 		font-family: "JetBrains Mono", monospace;
 	}
 </style>

src/wordle/keyboard.svelte

@@ -43,9 +43,9 @@
 	}
 
 	button {
-		background-color: #202020;
+		background: none;
 		font-family: "JetBrains Mono", monospace;
-		color: #808080;
+		color: #888;
 		width: 80px;
 		height: 70px;
 		display: flex;
@@ -66,6 +66,6 @@
 		background-color: #2b2b2b;
 	}
 	.o {
-		background-color: #202829;
+		background-color: #00202c;
 	}
 </style>

src/wordle/logic.svelte.js

@@ -1,7 +1,11 @@
 import wordExists from "word-exists";
-import {generate} from "random-words";
+import { generate } from "random-words";
+import { onMount } from "svelte";
 
-export let CorrectWord = generate({ minLength: 5, maxLength: 5 });
+export let WordLegnth = 5; 
+
+let CorrectWord = generate({ minLength: WordLegnth, maxLength: WordLegnth });
+console.log("CorrectWord: ", CorrectWord);
 export let words = $state([]);
 export let CurrentWord = $state({ v: [] });
 export let keys = $state([
@@ -35,12 +39,85 @@ export let keys = $state([
 	["⏎", "o"],
 ]);
 
-function SendWord(word) {}
+function GameWin() {
+	alert("You win!");
+	document.location.reload();
+}
+
+function SendWord(word) {
+	let result = Array(word.length).fill(null);
+	let used = Array(CorrectWord.length).fill(false);
+
+	// First pass: exact matches
+	for (let i = 0; i < word.length; i++) {
+		if (word[i].toLowerCase() === CorrectWord[i].toLowerCase()) {
+			result[i] = [word[i].toUpperCase(), "c"];
+			used[i] = true;
+		}
+	}
+
+	// Second pass: wrong place but correct letter
+	for (let i = 0; i < word.length; i++) {
+		if (result[i]) continue;
+
+		let found = false;
+		for (let j = 0; j < CorrectWord.length; j++) {
+			if (
+				!used[j] &&
+				word[i].toLowerCase() === CorrectWord[j].toLowerCase()
+			) {
+				found = true;
+				used[j] = true;
+				break;
+			}
+		}
+
+		result[i] = found
+			? [word[i].toUpperCase(), "d"]
+			: [word[i].toUpperCase(), "w"];
+	}
+
+	words.push(result);
+
+	setTimeout(() => {
+		document.getElementById("DisplayOfWords").scrollTo({
+			top: document.getElementById("DisplayOfWords").scrollHeight,
+			behavior: "smooth",
+		});
+	}, 100);
+
+	// Update keyboard status
+	for (let [letter, status] of result) {
+		let keyIndex = keys.findIndex(
+			(k) => k[0].toLowerCase() === letter.toLowerCase()
+		);
+		if (keyIndex !== -1) {
+			let current = keys[keyIndex][1];
+			if (status === "c") {
+				keys[keyIndex][1] = "c";
+			} else if (status === "d" && current === "n") {
+				keys[keyIndex][1] = "d";
+			} else if (status === "w" && current === "n") {
+				keys[keyIndex][1] = "w";
+			}
+		}
+	}
+
+	// Check for win
+	if (result.every(([_, status]) => status === "c")) {
+		GameWin();
+	}
+}
 
 export function ButtonPressed(key) {
+	document.getElementById("DisplayOfWords").scrollTo({
+		top: document.getElementById("DisplayOfWords").scrollHeight,
+		behavior: "smooth",
+	});
+
 	if (key === "⏎") {
-		if (CurrentWord.v.length === 5) {
+		if (CurrentWord.v.length === WordLegnth) {
-			let word = CurrentWord.v.join("");
+			let word = CurrentWord.v.join("").toUpperCase();
 			if (wordExists(word)) {
 				SendWord(CurrentWord.v);
 				CurrentWord.v = [];
@@ -53,9 +130,20 @@ export function ButtonPressed(key) {
 		CurrentWord.v.pop();
 		return;
 	}
-	if (CurrentWord.v.length === 5) {
+	if (CurrentWord.v.length === WordLegnth) {
 		return;
 	}
 
 	CurrentWord.v.push(key);
 }
+export function handleKey(event) {
+	const key = event.key.toLowerCase();
+
+	if (key === "enter") {
+		ButtonPressed("⏎");
+	} else if (key === "backspace") {
+		ButtonPressed("⌫");
+	} else if (/^[a-z]$/.test(key)) {
+		ButtonPressed(key.toUpperCase());
+	}
+}