Prepare UI for AI configuration.
--- 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>