Fix stats and layout, implement automatic pausing/starting

generator.js

@@ -1,5 +1,4 @@
 function myFunction(elmnt) {
-  console.log(elmnt.style.backgroundColor);
   if (elmnt.style.backgroundColor == "white") {
     elmnt.style.backgroundColor = "hsl(120, 100%, 75%)";
   } else {
@@ -60,7 +59,6 @@ function contains_digits(rows) {
   return true;
 }
 function generate_rows_check() {
-  console.log(rows);
   var rows = new Array(generate_row(), generate_row(), generate_row());
   while (!contains_digits(rows)) {
     var rows = new Array(generate_row(), generate_row(), generate_row());

index.html

@@ -47,17 +47,18 @@
 			<div id="numbers-container">
 				<fieldset class="input-container">
 					<legend>Numbers</legend>
-					<input class="number-input" type="number" min="1" max="90">
+					<input class="number-input" type="number" min="1" max="90" autocomplete="off">
 				</fieldset>
 			</div>
 
 			<div id="results">
-				<button id="pause">Pause</button>
+				<button id="pause">Start</button>
 				&emsp;
 				<b>
 					<span id="attempts">0</span> boards tried &emsp;
 					(<span id="speed">0.00</span>/sec)
 				</b>
+				<div id="result-list"></div>
 			</div>
 
 			<div>

main.js

@@ -1,14 +1,18 @@
 let paused = false;
+let autoStart = true;
 let workers = [];
 let totalTime = 0;
+let startedAt;
 let totalAttempts = 0;
 let names = [];
 
 fetch("names.json").then(res => res.json()).then(json => names = json);
 
 function showStats() {
+	const time = totalTime + (Date.now() - startedAt);
+
 	document.getElementById("attempts").innerText = totalAttempts;
-	document.getElementById("speed").innerText = (totalAttempts / totalTime).toFixed(2); // TODO fix totalTime
+	document.getElementById("speed").innerText = (totalAttempts / time).toFixed(2);
 }
 
 function log(text, workerId) {
@@ -36,7 +40,17 @@ function resetWorkers() {
 function runWorkers() {
 	const numbers = [].map.call(document.getElementsByClassName("number-input"), input => input.valueAsNumber)
 		.filter(value => !isNaN(value));
-	const winType = document.querySelector("input[name=win-type]:checked").value;
+
+	if (numbers.length < 4) return;
+
+	if (paused && !autoStart) return;
+	setPaused(false);
+
+	startedAt = Date.now();
+
+	const selectedWinType = document.querySelector("input[name=win-type]:checked");
+	const winType = selectedWinType.value;
+	const winTypeLabel = selectedWinType.parentElement.innerText.trim();
 
 	resetWorkers();
 
@@ -63,7 +77,6 @@ function runWorkers() {
 					if (!paused) worker.postMessage({ type: "run" });
 					break;
 				case "stats":
-					totalTime += message.data.time;
 					totalAttempts += message.data.attempts;
 
 					showStats();
@@ -71,6 +84,16 @@ function runWorkers() {
 				case "log":
 					log(message.data.text, message.data.id);
 					break;
+				case "winner":
+					document.getElementById("result-list").innerHTML +=
+						`<div>
+							<span class="winner">Winner:</span> <b>${message.data.name}</b>
+							<br>
+							<small>(${winTypeLabel} &mdash; ${numbers.join(", ")})</small>
+						</div>`;
+
+					setPaused(true);
+					autoStart = true;
 				case "terminate":
 					worker.terminate();
 					workers.splice(workers.indexOf(worker), 1);
@@ -83,6 +106,21 @@ function runWorkers() {
 	}
 }
 
+function setPaused(value) {
+	paused = value;
+
+	for (const worker of workers) {
+		worker.postMessage({ type: paused ? "stop" : "run" });
+	}
+
+	document.getElementById("pause").innerText = paused ? "Start" : "Pause";
+
+	if (paused)
+		totalTime += (Date.now() - startedAt);
+
+	startedAt = Date.now();
+}
+
 document.getElementById("numbers-container").addEventListener("keydown", event => {
 	// Add new input field on enter
 	if (event.key === "Enter") {
@@ -136,13 +174,8 @@ document.getElementById("numbers-container").addEventListener("keydown", event =
 });
 
 document.getElementById("pause").addEventListener("click", event => {
-	paused = !paused;
+	setPaused(!paused);
-
+	autoStart = false;
-	for (const worker of workers) {
-		worker.postMessage({ type: paused ? "stop" : "run" });
-	}
-
-	event.target.innerText = paused ? "Start" : "Pause";
 });
 
 document.getElementById("workers").value = navigator.hardwareConcurrency ?? 1;

style.css

@@ -43,6 +43,15 @@ main {
 	width: 400px;
 }
 
+#result-list div {
+	margin-top: 1rem;
+	line-height: 1;
+}
+
+#result-list .winner {
+	color: #2E7D32;
+}
+
 #log {
 	height: 200px;
 	width: 400px;

worker.js

@@ -64,7 +64,6 @@ function guess() {
 		const wonRows = getRowsWon(board, numbers);
 
 		if (hasWon(wonRows, winType)) {
-			console.log(board, board.filter(row => hasWonRow(row, numbers)), numbers);
 			self.postMessage({ type: "winner", name });
 			self.postMessage({ type: "log", text: `Found winner: ${name}`, id: workerId });
 		}