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

@@ -24,37 +24,49 @@
 					</label>
 
 					<label>
-						<input type="radio" name="win-type" value="full">
+						<input type="radio" name="win-type" value="full-board">
 						Full board
 					</label>
 				</fieldset>
 
 				<fieldset class="input-container">
 					<legend>Workers</legend>
-					<input id="workers" type="number" min="1" value="1">
+
+					<label>
+						Amount:
+						<input id="workers" type="number" min="1" value="1" style="width: 70px;">
+					</label>
+
+					<label>
+						Batch size:
+						<input id="batch-size" type="number" min="1" value="1000" style="width: 100px;">
+					</label>
 				</fieldset>
 			</div>
 
-			<div>
+			<div id="numbers-container">
-				<fieldset id="numbers-container" class="input-container">
+				<fieldset class="input-container">
 					<legend>Numbers</legend>
-					<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">--</span> plates tried &emsp;
+					<span id="attempts">0</span> boards tried &emsp;
-					(<span id="speed">--</span>/sec)
+					(<span id="speed">0.00</span>/sec)
 				</b>
+				<div id="result-list"></div>
 			</div>
 
+			<div>
 				<fieldset>
 					<legend>Log</legend>
 					<div id="log"></div>
 				</fieldset>
+			</div>
 		</main>
 	</body>
 </html>

main.js

@@ -1,11 +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);
+	document.getElementById("speed").innerText = (totalAttempts / time).toFixed(2);
 }
 
 function log(text, workerId) {
@@ -31,13 +38,38 @@ function resetWorkers() {
 }
 
 function runWorkers() {
+	const numbers = [].map.call(document.getElementsByClassName("number-input"), input => input.valueAsNumber)
+		.filter(value => !isNaN(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();
 
 	const amount = document.getElementById("workers").valueAsNumber;
+	const batchSize = document.getElementById("batch-size").valueAsNumber;
 
 	log(`Creating ${amount} workers`);
+	log(`* Win type: ${winType}`);
+	log(`* Numbers: ${numbers.join(", ")}`);
+
+	const usedNames = [];
 
 	for (let i = 0; i < amount; i++) {
+		let name;
+		do
+			name = names[Math.floor(Math.random() * names.length)];
+		while (usedNames.includes(name));
+		usedNames.push(name);
+
 		const worker = new Worker("worker.js");
 		worker.addEventListener("message", message => {
 			switch (message.data.type) {
@@ -45,7 +77,6 @@ function runWorkers() {
 					if (!paused) worker.postMessage({ type: "run" });
 					break;
 				case "stats":
-					totalTime += message.data.time;
 					totalAttempts += message.data.attempts;
 
 					showStats();
@@ -53,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);
@@ -60,16 +101,32 @@ function runWorkers() {
 			}
 		});
 
-		worker.postMessage({ type: "init", id: i + 1 });
+		worker.postMessage({ type: "init", id: i + 1, numbers, winType, name, batchSize });
 		workers.push(worker);
 	}
 }
 
+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") {
 		const input = document.createElement("input");
 		input.type = "number";
+		input.className = "number-input";
 		input.min = 1;
 		input.max = 90;
 
@@ -117,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

@@ -18,16 +18,40 @@ main {
 .input-container {
 	display: flex;
 	flex-direction: column;
+	flex-wrap: wrap;
 	gap: 0.5rem;
 	background-color: #EEE;
 	margin: 0.5rem;
 }
 
+#numbers-container .input-container {
+	max-height: 800px;
+	display: flex;
+	flex-direction: row;
+}
+
+#numbers-container input {
+	flex-basis: calc(50% - 4px);
+}
+
+#numbers-container {
+	width: 400px;
+}
+
 #results {
 	margin-top: 1rem;
 	width: 400px;
 }
 
+#result-list div {
+	margin-top: 1rem;
+	line-height: 1;
+}
+
+#result-list .winner {
+	color: #2E7D32;
+}
+
 #log {
 	height: 200px;
 	width: 400px;

worker.js

@@ -1,17 +1,20 @@
 importScripts("seedrandom.js");
 importScripts("generator.js");
 
-console.log("worker");
-
 let workerId;
-let currentInput = "";
+let workerName;
+let winType;
+let numbers;
+let batchSize;
+
+let nameIndex = 0;
 let attempts = 0;
 let startedAt;
 
 let statsInterval;
 let guessInterval;
 
-function getNumbers(name) {
+function getBoard(name) {
 	Math.seedrandom(name);
 
 	let numbers = [];
@@ -21,15 +24,50 @@ function getNumbers(name) {
 	}
 
 	const activatedCols = generate_rows_check();
-	const activatedNumbers = [];
+	const board = [[], [], []];
 
 	for (let row = 0; row < 3; row++) {
 		for (const col of activatedCols[row]) {
-			activatedNumbers.push(numbers[(col - 1) * 3 + row]);
+			board[row].push(numbers[(col - 1) * 3 + row]);
 		}
 	}
 
-	return activatedNumbers;
+	return board;
+}
+
+function hasWonRow(row, numbers) {
+	return row.every(number => numbers.includes(number));
+}
+
+function getRowsWon(board, numbers) {
+	return board.filter(row => hasWonRow(row, numbers)).length;
+}
+
+function hasWon(wonRows, winType) {
+	switch (winType) {
+		case "row":
+			return wonRows >= 1;
+		case "two-rows":
+			return wonRows >= 2;
+		case "full-board":
+			return wonRows >= 3;
+	}
+}
+
+function guess() {
+	for (let i = 0; i < 100; i++) {
+		const name = workerName + nameIndex++;
+		attempts++;
+
+		const board = getBoard(name);
+		
+		const wonRows = getRowsWon(board, numbers);
+
+		if (hasWon(wonRows, winType)) {
+			self.postMessage({ type: "winner", name });
+			self.postMessage({ type: "log", text: `Found winner: ${name}`, id: workerId });
+		}
+	}
 }
 
 function sendStats() {
@@ -44,30 +82,6 @@ function resetStats() {
 	startedAt = Date.now();
 }
 
-function generateNextInput(input) {
-	const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-	if (input.length === 0)
-		return alphabet[0];
-
-	for (let i = input.length - 1; i >= 0; i--) {
-		const index = alphabet.indexOf(input[i]);
-
-		if (index < alphabet.length - 1) {
-			return input.substring(0, i) + alphabet[index + 1] + alphabet[0].repeat(input.length - i - 1);
-		}
-	}
-
-	return alphabet[0] + input;
-}
-
-function guess() {
-	currentInput = generateNextInput(currentInput);
-	attempts++;
-
-	// TODO
-}
-
 function run() {
 	statsInterval = setInterval(sendStats, 1000);
 	guessInterval = setInterval(guess, 0);
@@ -78,9 +92,14 @@ function run() {
 }
 
 function stop() {
+	if (!statsInterval && !guessInterval) return;
+
 	clearInterval(statsInterval);
 	clearInterval(guessInterval);
 
+	statsInterval = null;
+	guessInterval = null;
+
 	sendStats();
 
 	self.postMessage({ type: "log", text: "Stopping worker", id: workerId });
@@ -90,6 +109,10 @@ self.onmessage = message => {
 	switch (message.data.type) {
 		case "init":
 			workerId = message.data.id;
+			workerName = message.data.name;
+			winType = message.data.winType;
+			numbers = message.data.numbers;
+			batchSize = message.data.batchSize;
 			self.postMessage({ type: "ready" });
 			break;
 		case "run":