Highlight AI controls.
--- a/2048.html Tue Sep 09 20:00:45 2014 +0300
+++ b/2048.html Tue Sep 09 20:13:00 2014 +0300
@@ -28,6 +28,18 @@
margin: 0;
text-align: center;
}
+ div.ai-control {
+ border: 1px red solid;
+ display: inline-block;
+ margin: 10px 0 2px 0;
+ padding: 2px 2px 2px 1em;
+ background-color: cornsilk;
+ }
+ div.ai-control:before {
+ content: "AI: ";
+ margin-left: -.5em;
+ padding: 0;
+ }
.report > .name {
font-weight: bold;
}
@@ -97,8 +109,10 @@
<div id="control-area" class="area">
<div>
<button id="start">Start</button>
+ </div>
+ <div class="ai-control">
+ <button id="suggest">Suggest</button>
<button id="step">Step</button>
- <button id="loop">Loop</button>
<button id="finish">Finish</button>
</div>
<div>
@@ -265,59 +279,65 @@
turnDom.innerHTML = '' + turn;
}
- function start() {
+ ui.action = {};
+
+ ui.action.start = function() {
ui.score.clear();
ui.message.clear();
board.current = board.create();
board.putRandom(board.current);
ui.board.update(board.current);
}
- document.getElementById("start").addEventListener("click", start);
+ document.getElementById("start").addEventListener("click", ui.action.start);
- function up() {
+ ui.action.up = function() {
var updated = board.move.up(board.current);
if (updated) {
board.putRandom(board.current);
ui.board.update(board.current);
ui.score.update(board.current);
+ ui.ai.current && ui.ai.current.cleanup();
}
}
- document.getElementById("up").addEventListener("click", up);
- function down() {
+ document.getElementById("up").addEventListener("click", ui.action.up);
+ ui.action.down = function() {
var updated = board.move.down(board.current);
if (updated) {
board.putRandom(board.current);
ui.board.update(board.current);
ui.score.update(board.current);
+ ui.ai.current && ui.ai.current.cleanup();
}
}
- document.getElementById("down").addEventListener("click", down);
- function left() {
+ document.getElementById("down").addEventListener("click", ui.action.down);
+ ui.action.left = function() {
var updated = board.move.left(board.current);
if (updated) {
board.putRandom(board.current);
ui.board.update(board.current);
ui.score.update(board.current);
+ ui.ai.current && ui.ai.current.cleanup();
}
}
- document.getElementById("left").addEventListener("click", left);
- function right() {
+ document.getElementById("left").addEventListener("click", ui.action.left);
+ ui.action.right = function() {
var updated = board.move.right(board.current);
if (updated) {
board.putRandom(board.current);
ui.board.update(board.current);
ui.score.update(board.current);
+ ui.ai.current && ui.ai.current.cleanup();
}
}
- document.getElementById("right").addEventListener("click", right);
+ document.getElementById("right").addEventListener("click", ui.action.right);
document.body.addEventListener("keydown", function(event) {
var key = event.keyCode || event.which;
switch (key) {
- case 38: up(); break;
- case 40: down(); break;
- case 37: left(); break;
- case 39: right(); break;
+ case 38: ui.action.up(); break;
+ case 40: ui.action.down(); break;
+ case 37: ui.action.left(); break;
+ case 39: ui.action.right(); break;
}
return false;
});
@@ -359,7 +379,7 @@
}
document.getElementById("step").addEventListener("click", step);
- function finish() {
+ ui.action.finish = function() {
ui.message.clear();
var step = 0;
var tsFrom = new Date().getTime();
@@ -387,8 +407,9 @@
ui.score.update(board.current);
ui.score.speed(step*1000.0/(tsTo-tsFrom), step);
ui.message.set("Game over!");
+ ui.ai.current && ui.ai.current.cleanup();
}
- document.getElementById("finish").addEventListener("click", finish);
+ document.getElementById("finish").addEventListener("click", ui.action.finish);
////////////////////////////////////////////////////////////////
// Register AIs.