2048.html
changeset 25 2ef10a49a28f
parent 21 ed0292f0c7c6
child 26 fba85224a8f0
--- a/2048.html	Tue Sep 09 18:39:52 2014 +0300
+++ b/2048.html	Tue Sep 09 18:44:56 2014 +0300
@@ -11,9 +11,6 @@
   <script src="ai.js"></script>
 
   <style>
-    body {
-      width: 100%;
-    }
     h1, div.area {
       text-align: center;
       margin: 10px auto;
@@ -31,6 +28,24 @@
     .report > .name {
       font-weight: bold;
     }
+    div.ai {
+      border: 1px red solid;
+      margin-top: 20px;
+      padding: 2px;
+      position: relative;
+      background-color: cornsilk;
+    }
+    div.ai.enabled {
+      background-color: wheat;
+    }
+    div.ai > h5 {
+      margin: 2px 0;
+    }
+    button.ai {
+      position: absolute;
+      left: 1em;
+      top: -1em;
+    }
   </style>
 </head>
 <body>
@@ -82,14 +97,32 @@
       <button id="right">right</button>
       <button id="test">test</button>
     </div>
-    <h1>AI</h1>
+    <h1>AIs</h1>
     <div>
-      <button id="ai-random">random</button>
-      <button id="ai-next-max-score">next max score</button>
-      <button id="ai-next-max-value">next max value</button>
-      <button id="ai-deep-max-score">deep max score</button>
-      <button id="ai-deep-max-score-corner">deep max score corner</button>
-      <button id="ai-expectimax">expectimax</button>
+      <div class="ai" id="ai-random">
+        <button class="ai">enable</button>
+        <h5>bling random</h5>
+      </div>
+      <div class="ai" id="ai-next-max-score">
+        <button class="ai">enable</button>
+        <h5>next merge makes max score</h5>
+      </div>
+      <div class="ai" id="ai-next-max-value">
+        <button class="ai">enable</button>
+        <h5>next merge makes max value</h5>
+      </div>
+      <div class="ai enabled" id="ai-deep-max-score">
+        <button class="ai">enable</button>
+        <h5>deep merges without simulation make max score</h5>
+      </div>
+      <div class="ai" id="ai-deep-max-score-corner">
+        <button class="ai">enable</button>
+        <h5>deep merges without simulation make max score + bonus if max value at corner/edge</h5>
+      </div>
+      <div class="ai" id="ai-expectimax">
+        <button class="ai">enable</button>
+        <h5>expectimax</h5>
+      </div>
     </div>
   </div>
 
@@ -292,7 +325,7 @@
       }
       var tmpBrd = board.create();
       board.copy(board.current, tmpBrd);
-      var move = ui.ai.analyse(tmpBrd);
+      var move = ui.ai.current.analyse(tmpBrd);
       if (typeof move === 'undefined') {
         ui.message.set("I don't know how to move!");
         return;
@@ -315,7 +348,7 @@
       while (!board.gameOver(board.current)) {
         var tmpBrd = board.create();
         board.copy(board.current, tmpBrd);
-        var move = ui.ai.analyse(tmpBrd);
+        var move = ui.ai.current.analyse(tmpBrd);
         if (typeof move === 'undefined') {
           ui.message.set("I don't know how to move!");
           return;
@@ -342,26 +375,56 @@
     ////////////////////////////////////////////////////////////////
     // Register AIs.
 
-    ui.brdEngine = BoardArr2d; // TODO make user selectable
+    ui.ai = {};
+    ui.ai.current = null;
+    ui.ai.algList = {
+      "ai-random": function() {
+        return new ai.random(ui.brdEngine);
+      },
+      "ai-next-max-score": function() {
+        return new ai.nextMaxScore(ui.brdEngine);
+      },
+      "ai-next-max-value": function() {
+        return new ai.nextMaxValue(ui.brdEngine);
+      },
+      "ai-deep-max-score": function() {
+        return new ai.deepMaxScore(ui.brdEngine);
+      },
+      "ai-deep-max-score-corner": function() {
+        return new ai.deepMaxScoreCorner(ui.brdEngine);
+      },
+      "ai-expectimax": function() {
+        return new ai.expectimax(ui.brdEngine);
+      },
+      // "": function() {
+      //   return new ai.(ui.brdEngine);
+      // },
+    };
+    ui.ai.domList = document.querySelectorAll('div.ai');
+    for (var i = 0; i < ui.ai.domList.length; i++) {
+      ui.ai.domList[i].querySelectorAll('button.ai')[0].addEventListener("click", function (event) {
+        ui.ai.enable(event.target.parentNode);
+      });
+    }
 
-    document.getElementById("ai-random").addEventListener("click", function() {
-      ui.ai = new ai.random(ui.brdEngine);
-    });
-    document.getElementById("ai-next-max-score").addEventListener("click", function() {
-      ui.ai = new ai.nextMaxScore(ui.brdEngine);
-    });
-    document.getElementById("ai-next-max-value").addEventListener("click", function() {
-      ui.ai = new ai.nextMaxValue(ui.brdEngine);
-    });
-    document.getElementById("ai-deep-max-score").addEventListener("click", function() {
-      ui.ai = new ai.deepMaxScore(ui.brdEngine);
-    });
-    document.getElementById("ai-deep-max-score-corner").addEventListener("click", function() {
-      ui.ai = new ai.deepMaxScoreCorner(ui.brdEngine);
-    });
-    document.getElementById("ai-expectimax").addEventListener("click", function() {
-      ui.ai = new ai.expectimax(ui.brdEngine);
-    });
+    ui.ai.moveToTop = function(aiDom) {
+      for (var i = 0; i < ui.ai.domList.length; i++) {
+        ui.ai.domList[i].classList.remove('enabled');
+      }
+      var rootDom = aiDom.parentNode;
+      rootDom.removeChild(aiDom);
+      rootDom.insertBefore(aiDom, rootDom.firstChild);
+      aiDom.classList.add('enabled');
+    }
+    ui.ai.enable = function(aiDom) {
+      if (ui.ai.current)
+        ui.ai.current.cleanup();
+      var ai = ui.ai.algList[aiDom.id];
+      ui.ai.moveToTop(aiDom);
+      ui.ai.current = ai();
+    }
+
+    ui.brdEngine = BoardArr2d; // TODO make user selectable
 
   </script>