Highlight AI controls.
authorOleksandr Gavenko <gavenkoa@gmail.com>
Tue, 09 Sep 2014 20:13:00 +0300
changeset 30 1d19768ca71d
parent 29 30a09d50ae21
child 31 9de51a02b039
Highlight AI controls.
2048.html
--- 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.