-
Notifications
You must be signed in to change notification settings - Fork 13
/
sudoku-js.html
297 lines (255 loc) · 10.9 KB
/
sudoku-js.html
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE HTML>
<!-- vim:filetype=html:textwidth=200:shiftwidth=4:softtabstop=4:expandtab
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Limited reasoner demo</title>
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">-->
<style type="text/css">
body { font-family: 'Open Sans', sans-serif; font-size: 140%; }
p { text-align: justify; }
h1 { font-size: 220%; }
h2 { font-size: 170%; border-bottom: 1px solid #aaa; }
form .label { display: inline-block; min-width: 15em; }
form input.number { width: 5em; }
#custom { font-family: monospace; }
#play-button { background-color: black; color: #eee; font-family: inherit; font-weight: bold; font-size: 100%; margin-top: 1ex; margin-left: 1em; padding-left: 3em; padding-right: 3em; padding-top: 1ex; padding-bottom: 1ex; }
#play-button {
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
}
#output { min-width: 95%; min-height: 5ex; background-color: #dddddd; border: 2px solid black; overflow: scroll; margin-top: 3ex; }
#output { background: repeating-linear-gradient( 45deg, #e5e5e5, #e5e5e5 10px, #eeeeee 10px, #eeeeee 20px); }
#output { font-family: monospace; font-size: 120%; line-height: 119%; }
#output span { }
#output span.black { color: black; }
#output span.dim { color: #999; }
#output span.reset { color: inherit; }
#output span.red { color: red; font-weight: bold; }
#output span.green { color: green; font-weight: bold; }
</style>
<script src="../jquery-3.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">\x3C/script>')</script>
<script>
var runtimeIsReadyFlag = false;
var Module = {
onRuntimeInitialized: function() { runtimeIsReadyFlag = true; initGame(); }
};
</script>
<script src="sudoku-js.js"></script>
</head>
<body>
<h1>Limited Reasoner Demo: Sudoku</h1>
<p>
<b>Quick start:</b> choose a "Game Configuration", hit the "Click to play Sudoku!" button, and see the agent play.
</p>
<p>
For further demos and details on the reasoner, <a href="../">click here</a>.
</p>
<h2>Sudoku</h2>
<form>
<div class="label">Sudoku game:</div>
<select id="configs">
<option value="">Custom:</option>
</select>
<input id="custom" type="text" size="90" placeholder="Line by line. Whitespace is ignored. Other characters represent blanks. E.g.: 5.1.8...4.42.6.718..742..5..159...6.32..1.47..7.3.41.......834729..47...7....5..9" />
<br />
<div class="label">Max. number of case splits:</div> <input type="number" id="max_k" min="0" value="2" class="number"><br />
<input id="play-button" type="button" value="Click to play Sudoku!" />
</form>
<script>
$(document).ready(function() {
$('#play-button').click(function() { play(); });
$('#play-button').focus();
$('#configs').change(function() {
var config = document.getElementById('configs').value;
if (config) {
$('#custom').hide();
} else {
$('#custom').show().focus();
}
initGame();
});
$('#custom').change(function() { initGame(); });
$('#custom').keyup(function() { initGame(); });
$('#custom').hide();
$.ajax({
url : 'sudokus.txt',
dataType: 'text',
success: function(data) {
var lines = data.split('\n');
for (var i = lines.length - 1; i >= 0; --i) {
var line = lines[i].trim();
if (line.length == 0) {
continue;
}
var sudoku = line;
var description = line;
var splitIndex = line.indexOf(' ');
if (splitIndex != -1) {
sudoku = line.substring(0, line.indexOf(' '));
description = line.substring(line.indexOf(' '), line.length);
}
$('#configs').prepend($('<option>', {value: sudoku, text: description})).select();
if (i == 0) {
$('#configs').val(sudoku).change();
}
}
}
});
});
var t0 = null;
function initGame() {
if (!runtimeIsReadyFlag) {
return;
}
$('#output').empty();
config = document.getElementById('configs').value;
if (!config) {
config = $('#custom').val();
}
if (!config) {
config = '';
}
config = config.replace(/\s/g,'');
max_k = document.getElementById('max_k').value;
if (max_k == null) {
max_k = 2;
}
Module.ccall('limbo_init', 'void', ['string', 'number'], [config, max_k]);
}
function play() {
t0 = performance.now();
initGame();
playTurn();
setTimeout(function() { scrollToShow('#output'); }, 50);
}
function playTurn() {
setTimeout(function() {
var game_over = Module.ccall('limbo_play_turn', 'number', [], []);
if (!game_over) {
playTurn();
} else {
var t1 = performance.now();
console.log("Playing and printing took "+ Math.round(t1 - t0) +" milliseconds");
}
}, 0);
}
var last_str = null;
function printLine(str) {
// The minesweeper agent prints at the end of each turn a line of the form
// "Last move took [...]". We use this to split up the different turns and
// display them individually: one div per turn, and only the last turn's
// div is visible.
if (str.length == 0) {
return;
}
var is_first = $('#output').children().length == 0;
var had_last = last_str && (last_str.indexOf('Ready') != -1 || last_str.indexOf('Last') != -1);
if (had_last) {
$('#output').children().last().hide();
}
if (is_first || had_last) {
$('#output').append('<div></div>');
$('#output').children().last().addClass('field');
}
// Hack: on iOS Safari and Chrome, double spaces are not displayed correctly sometimes;
// so let's use '_' as fill character and re-replace it with " " in the Javascript
// code.
str = str.replace(/_/g, " ") + '<br />';
$('#output').children().last().append($(document.createElement('div')).html(str));
last_str = str;
}
function scrollToShow(e) {
var currentTop = $(document).scrollTop();
var currentBottom = $(document).scrollTop() + $(window).height();
var goalTop = $(e).offset().top;
var goalBottom = $(e).offset().top + $(e).outerHeight();
var inDisplay = function(pos) { return currentTop <= pos && pos <= currentBottom; };
var topOfScreen = function(pos) { return pos < currentTop; };
var belowOfScreen = function(pos) { return pos > currentBottom; };
var fitsIntoScreen = $(e).outerHeight() <= $(window).height();
var goal;
var timeout = 200;
if (inDisplay(goalTop) && inDisplay(goalBottom)) {
// No need to scroll.
} else if (!inDisplay(goalTop) && belowOfScreen(goalTop) && fitsIntoScreen) {
// Scroll so that bottom of element aligns with bottom of window.
$('html, body').animate({ scrollTop: goalBottom - $(window).height() }, timeout);
} else if (!inDisplay(goalTop)) {
// Scroll so that top of element aligns with top of window.
$('html, body').animate({ scrollTop: goalTop }, timeout);
} else if (!inDisplay(goalBottom)) {
// Scroll so that bottom of element aligns with bottom of window.
$('html, body').animate({ scrollTop: goalBottom - $(window).height() }, timeout);
}
}
function showField(which) {
$('#output').children(':visible').each(function(i) {
if (which == 'prev' && $(this).prev().length) {
$(this).hide();
$(this).prev().show();
}
if (which == 'next' && $(this).next().length) {
$(this).hide();
$(this).next().show();
}
});
}
$(document).ready(function() {
$('#field-prev').click(function() { showField('prev'); return false; });
$('#field-next').click(function() { showField('next'); return false; });
});
$(document).keydown(function(e) {
switch(e.which) {
case 37: showField('prev'); break; // left
case 39: showField('next'); break; // right
default: return;
}
e.preventDefault();
});
</script>
<div id="output"></div>
<p>
<b>Quick explanation:</b>
The agent attempts to complete the field so that every row, column, and 3×3 box contains exactly one 1, 2, 3, 4, 5, 6, 7, 8, 9.
</p>
<p>See <a href="#field-prev" id="field-prev">previous</a> / <a href="#field-next" id="field-next">next</a> turn (or use arrow keys ⇦ ⇨).
<h2>About Sudoku</h2>
<p>
The field must be completed so that every row, column, and 3×3 box contains exactly one 1, 2, 3, 4, 5, 6, 7, 8, 9.
There is only one correct solution.
</p>
<h2>About the Agent</h2>
<p>
The agent is a simple C++ program that loops over all cells and uses the reasoner to find out which cells are known to contain a number 1, ..., 9.
</p>
<p>
There are two simple types of constraints to represent the game rules.
Firstly, constraints of the form <code>val(X,Y) ≠ val(X',Y')</code> for certain values <code>X, X', Y, Y'</code> from 1, ..., 9 stipulate that in no row, column, or 3×3 box any number occurs twice.
Secondly, for every cell <code>X, Y</code>there is a constraint <code>val(X,Y) = 1 ∨ val(X,Y) = 2 ∨ ... ∨ val(X,Y) = 9</code> to indicate that its value is a number 1, ..., 9.
</p>
<p>
On every turn, the agent checks for every cell and every value 1, ..., 9 whether the cell is known to take this value.
This process is repeated for increasing split level, until a known value is found for a cell: first for split level 0, then for 1, ..., until the maximum specified split level.
If no value is found for any cell, the agent admits defeat and stops.
</p>
<p>
Note the agent's actions are not represented in the knowledge base—it's just hard-coded in C++.
Extending the knowledge base to a basic action theory that also represents the agent's actions would be the next step.
</p>
<p>
The runtime reported by the game refers to the time the agent actually spend playing.
The actual time that passes between starting and finishing the game may be longer because the graphical display procedures take quite some time (they are a bit hacky).
</p>
</body>
</html>