magic-square/index.html at master · denilsonsa/magic-square · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Magic square finder</title>
<style>
html, body {
	font-family: sans-serif;
	color: black;
	background: white;
}
#size {
	width: 3em;
	text-align: center;
}
#solutions table {
	display: inline-table;
	table-layout: fixed;
	border-collapse: collapse;
	border: 1px gray solid;
	margin: 4px;
}
#solutions table td {
	padding: 0;
	width: 2em;
	height: 2em;
	text-align: center;
	vertical-align: middle;
	color: black;
}
#solutions table tr:nth-child(even) td:nth-child(even) { background: white; }
#solutions table tr:nth-child(odd)  td:nth-child(odd)  { background: white; }
#solutions table tr:nth-child(odd)  td:nth-child(even) { background: #E8E8E8; }
#solutions table tr:nth-child(even) td:nth-child(odd)  { background: #E8E8E8; }
</style>
</head>
<body>

<h1>Magic square finder</h1>

<p>This tool uses a brute-force algorithm to find as many <a href="https://en.wikipedia.org/wiki/Magic_square">magic squares</a> as possible. The solutions are calculated in a random order. Size=3 is very fast. Size=4 is fast enough. Size=5 (or larger) has very large search space and it is very unlikely to find a solution. <a href="https://github.com/denilsonsa/magic-square">The entire source-code is on GitHub.</a></p>

<input id="size" type="number" min="3" max="8" step="1" value="3">
<input id="start" type="button" value="Start calculating">
<input id="stop" type="button" value="Stop" disabled>

<div><output id="how_many">0</output> solution(s) found.</div>

<div id="solutions"></div>

<script>
'use strict';


var g_worker = null;
var g_how_many_solutions = 0;

function interrupt_worker() {
	if (g_worker) {
		g_worker.terminate();
		g_worker = null;

		document.getElementById('stop').setAttribute('disabled', 'disabled');
	}
}

function clear_solutions() {
	document.getElementById('solutions').innerHTML = '';
	document.getElementById('how_many').value = g_how_many_solutions = 0;
}
function add_solution(board) {
	var table = document.createElement('table');
	for (let row of board) {
		let tr = document.createElement('tr');
		table.appendChild(tr);
		for (let cell of row) {
			let td = document.createElement('td');
			td.textContent = cell;
			tr.appendChild(td);
		}
	}
	document.getElementById('solutions').appendChild(table);
	document.getElementById('how_many').value = ++g_how_many_solutions;
}

function worker_message_handler(ev) {
	var board = ev.data;
	if (board) {
		add_solution(board);
	} else {
		interrupt_worker();
	}
}

function start_handler() {
	var size = document.getElementById('size').valueAsNumber;
	if (size < 3) return;

	interrupt_worker();
	clear_solutions();
	document.getElementById('stop').removeAttribute('disabled');

	g_worker = new Worker('worker.js');
	g_worker.addEventListener('message', worker_message_handler);
	g_worker.postMessage(size);

}

function stop_handler() {
	interrupt_worker();
}

function init() {
	document.getElementById('start').addEventListener('click', start_handler);
	document.getElementById('stop').addEventListener('click', stop_handler);
}
init();

</script>
</body>
</html>