Wordle is now sucssfull complete!

src/wordle/InfoAndSetings/stats.svelte

@@ -1,20 +1,10 @@
-<script module>
+<script>
-	import { newGame, WordLegnth } from "../logic.svelte.js";
+	import { data } from "../logic.svelte.js";
-
-	let data = {
-		3: [],
-		4: [],
-		5: [],
-		6: [],
-		7: [],
-		8: [],
-		9: [],
-		10: [],
-	};
 
+	// svelte-ignore non_reactive_update
 	let LetersSelected = "5";
 
-	let dataPoints = data[LetersSelected];
+	let dataPoints = data.value[LetersSelected];
 
 	import { onMount } from "svelte";
 	import Chart from "chart.js/auto";
@@ -31,7 +21,7 @@
 				datasets: [
 					{
 						label: "Number Of Guesses Taken to Win",
-						data: dataPoints,
+						data: $state.snapshot(dataPoints),
 						borderColor: "rgba(75, 192, 192, 1)",
 						backgroundColor: "rgba(75, 192, 192, 0.2)",
 						fill: true,
@@ -50,16 +40,30 @@
 		});
 	});
 
+	let Avgguesses = $state(
+		(
+			dataPoints.reduce((acc, val) => acc + val, 0) / dataPoints.length
+		).toFixed(2)
+	);
+	let TotalWins = $state(dataPoints.length);
 
-	export function SetdataTo(NewData) {
+	$effect(() => {
-		data = NewData;
+		const snapshot = JSON.stringify(data.value);
+		UpdateChart(data.value);
+	});
+
+	function UpdateChart(val) {
+		dataPoints = data.value[LetersSelected];
+		if (chart) {
+			chart.data.labels = dataPoints.map((_, i) => `Point ${i + 1}`);
+			chart.data.datasets[0].data = $state.snapshot(dataPoints);
+			chart.update();
 		}
-
+		Avgguesses = (
-	let Avgguesses = (
 			dataPoints.reduce((acc, val) => acc + val, 0) / dataPoints.length
 		).toFixed(2);
-    
+		TotalWins = dataPoints.length;
-	let TotalWins = dataPoints.length;
+	}
 </script>
 
 <div id="root">
@@ -68,12 +72,12 @@
 		<select
 			bind:value={LetersSelected}
 			onchange={() => {
-				dataPoints = data[LetersSelected];
+				dataPoints = data.value[LetersSelected];
 				if (chart) {
 					chart.data.labels = dataPoints.map(
 						(_, i) => `Point ${i + 1}`
 					);
-					chart.data.datasets[0].data = dataPoints;
+					chart.data.datasets[0].data = $state.snapshot(dataPoints);
 					chart.update();
 				}
 				Avgguesses = (
@@ -81,8 +85,6 @@
 					dataPoints.length
 				).toFixed(2);
 				TotalWins = dataPoints.length;
-				console.log(TotalWins);
-				console.log(dataPoints);
 			}}
 		>
 			<option value="3">3 Letters</option>

src/wordle/logic.svelte.js

@@ -1,6 +1,5 @@
 import wordExists from "word-exists";
 import { generate } from "random-words";
-import { SetdataTo } from "./InfoAndSetings/stats.svelte";
 
 export let WordLegnth = $state({ v: 5 });
 
@@ -87,6 +86,8 @@ export function newGame() {
 
 function GameWin() {
 	alert("You win!");
+	data.value[WordLegnth.v].push(words.v.length);
+	
 	newGame();
 }
 
@@ -193,3 +194,16 @@ export function handleKey(event) {
 		ButtonPressed(key.toUpperCase());
 	}
 }
+
+export let data = $state({
+	value: {
+		3: [],
+		4: [],
+		5: [],
+		6: [],
+		7: [],
+		8: [],
+		9: [],
+		10: [],
+	},
+});