added basic chart

package-lock.json

@@ -8,8 +8,8 @@
 			"name": "package",
 			"version": "0.0.0",
 			"dependencies": {
+				"chart.js": "^4.4.9",
 				"random-words": "^2.0.1",
-				"random-words-commonjs": "^2.0.1",
 				"word-exists": "^1.0.0"
 			},
 			"devDependencies": {
@@ -480,6 +480,11 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@kurkle/color": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+			"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
 			"version": "4.35.0",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz",
@@ -810,6 +815,17 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/chart.js": {
+			"version": "4.4.9",
+			"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
+			"integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+			"dependencies": {
+				"@kurkle/color": "^0.3.0"
+			},
+			"engines": {
+				"pnpm": ">=8"
+			}
+		},
 		"node_modules/clsx": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1013,14 +1029,6 @@
 				"seedrandom": "^3.0.5"
 			}
 		},
-		"node_modules/random-words-commonjs": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/random-words-commonjs/-/random-words-commonjs-2.0.1.tgz",
-			"integrity": "sha512-U7IWz6PF7omuiw6iGABYUJ6Mx8q9fp1h6wZym36m6xdUkSbmWKjqeYGZXWoWreQBGwB8clthFhzY9VoOa4lctA==",
-			"dependencies": {
-				"seedrandom": "^3.0.5"
-			}
-		},
 		"node_modules/rollup": {
 			"version": "4.35.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.35.0.tgz",

package.json

@@ -15,6 +15,7 @@
 		"vite": "^6.2.4"
 	},
 	"dependencies": {
+		"chart.js": "^4.4.9",
 		"random-words": "^2.0.1",
 		"word-exists": "^1.0.0"
 	}

src/wordle/InfoAndSetings/main.svelte

@@ -1,17 +1,21 @@
 <script>
 	import { newGame, WordLegnth } from "../logic.svelte.js";
 	import WordLegnthSetings from "./WordLegnthSetings.svelte";
+	import Stats from "./stats.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>
-
+	<div>
+		<h1>A Wordle clone designed for classrooms!</h1>
+		<h3>
+			Unlimited guesses, Unlimited words, and choose your own word length!
+		</h3>
+	</div>
 	<WordLegnthSetings />
+
+	<Stats />
 </div>
 
 <style>
@@ -22,6 +26,9 @@
 		margin: 20px;
 		margin-top: 5px;
 		border: 2px solid #444;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 	}
 
 	h1 {

src/wordle/InfoAndSetings/stats.svelte

@@ -0,0 +1,124 @@
+<script>
+	import { newGame, WordLegnth } from "../logic.svelte.js";
+
+	let LetersSelected = WordLegnth.v;
+
+	export let dataPoints = [5, 7, 8, 2]; // Expecting an array of numbers, e.g., [10, 20, 15, 30]
+
+	import { onMount } from "svelte";
+	import Chart from "chart.js/auto";
+	import { afterUpdate } from "svelte";
+
+	let canvas;
+	let chart;
+
+	onMount(() => {
+		const ctx = canvas.getContext("2d");
+		chart = new Chart(ctx, {
+			type: "line",
+			data: {
+				labels: dataPoints.map((_, i) => `Game ${i + 1}`),
+				datasets: [
+					{
+						label: "Number Of Guesses Taken to Win",
+						data: dataPoints,
+						borderColor: "rgba(75, 192, 192, 1)",
+						backgroundColor: "rgba(75, 192, 192, 0.2)",
+						fill: true,
+						tension: 0.3,
+					},
+				],
+			},
+			options: {
+				responsive: true,
+				scales: {
+					y: {
+						beginAtZero: true,
+					},
+				},
+			},
+		});
+	});
+
+	afterUpdate(() => {
+		if (chart) {
+			chart.data.labels = dataPoints.map((_, i) => `Point ${i + 1}`);
+			chart.data.datasets[0].data = dataPoints;
+			chart.update();
+		}
+	});
+
+	setTimeout(() => {
+		dataPoints = [5, 7, 8, 2, 10, 12, 15, 20];
+	}, 1000);
+</script>
+
+<div id="root">
+	<p>
+		Stats For:
+		<select>
+			<option value="3">3 Letters</option>
+			<option value="4">4 Letters</option>
+			<option value="5">5 Letters</option>
+			<option value="6">6 Letters</option>
+			<option value="7">7 Letters</option>
+			<option value="8">8 Letters</option>
+			<option value="9">9 Letters</option>
+			<option value="10">10 Letters</option>
+		</select>
+	</p>
+
+	<div id="toprow">
+		<div class="toprow">
+			<h2>Total WINS</h2>
+			<h1>00</h1>
+		</div>
+		<div class="toprow">
+			<h2>Avg No. of guesses</h2>
+			<h1>00</h1>
+		</div>
+	</div>
+	<canvas bind:this={canvas}></canvas>
+</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;
+	}
+	h2,
+	h1,
+	p {
+		text-align: center;
+		margin: 0px;
+	}
+
+	h2 {
+		font-size: 20px;
+		color: #888;
+	}
+
+	#toprow {
+		display: inline-flex;
+		gap: 20px;
+	}
+
+	.toprow {
+		background-color: #3f3f3f;
+		border-radius: 10px;
+	}
+
+	.toprow:nth-child(1n) {
+		min-width: 35%;
+	}
+	.toprow:nth-child(2n) {
+		width: 100%;
+	}
+</style>