155 lines
3 KiB
Svelte
155 lines
3 KiB
Svelte
<script>
|
|
import { data, WordLegnth } from "../logic.svelte.js";
|
|
|
|
// svelte-ignore non_reactive_update
|
|
let LetersSelected = JSON.stringify(WordLegnth.v);
|
|
|
|
let dataPoints = data.value[LetersSelected];
|
|
|
|
import { onMount } from "svelte";
|
|
import Chart from "chart.js/auto";
|
|
|
|
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: $state.snapshot(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,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
let Avgguesses = $state(
|
|
(
|
|
dataPoints.reduce((acc, val) => acc + val, 0) / dataPoints.length
|
|
).toFixed(2)
|
|
);
|
|
let TotalWins = $state(dataPoints.length);
|
|
|
|
$effect(() => {
|
|
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 = (
|
|
dataPoints.reduce((acc, val) => acc + val, 0) / dataPoints.length
|
|
).toFixed(2);
|
|
TotalWins = dataPoints.length;
|
|
}
|
|
</script>
|
|
|
|
<div id="root">
|
|
<p>
|
|
Stats For:
|
|
<select
|
|
bind:value={LetersSelected}
|
|
onchange={() => {
|
|
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 = (
|
|
dataPoints.reduce((acc, val) => acc + val, 0) /
|
|
dataPoints.length
|
|
).toFixed(2);
|
|
TotalWins = dataPoints.length;
|
|
}}
|
|
>
|
|
<option value="3">3 Letters</option>
|
|
<option value="4">4 Letters</option>
|
|
<option value="5" selected>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>{TotalWins}</h1>
|
|
</div>
|
|
<div class="toprow">
|
|
<h2>Avg No. of guesses</h2>
|
|
<h1>{Avgguesses}</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;
|
|
width: 700px;
|
|
}
|
|
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>
|