Add board editor.
authorOleksandr Gavenko <gavenkoa@gmail.com>
Mon, 08 Sep 2014 01:03:05 +0300
changeset 17 06ad7999b9f6
parent 16 ab283d2534db
child 18 42d62e5123b2
Add board editor.
2048.html
--- a/2048.html	Mon Sep 08 00:18:13 2014 +0300
+++ b/2048.html	Mon Sep 08 01:03:05 2014 +0300
@@ -141,6 +141,56 @@
         }
       }
     }
+    ui.board.handleEdit = function(tdDom, i, j) {
+      if (!tdDom.firstChild || tdDom.firstChild.nodeType === Node.TEXT_NODE) {
+        if (tdDom.firstChild)
+          tdDom.removeChild(tdDom.firstChild);
+        var inputDom = document.createElement('input');
+        inputDom.value = board.current[i][j];
+        inputDom.style.width = '1em';
+        tdDom.appendChild(inputDom);
+        inputDom.focus();
+        inputDom.select();
+        inputDom.addEventListener("blur", function(tdDom, i, j) {
+          return function(event) {
+            ui.board.handleEdit(tdDom, i, j);
+            return false;
+          }
+        }(tdDom, i, j));
+      } else {
+        var inputDom = tdDom.firstChild;
+        var val = parseInt(inputDom.value);
+        if (0 <= val && val < 15) {
+          board.current[i][j] = val;
+          ui.board.set(i, j, val);
+        } else {
+          ui.board.set(i, j, board.current[i][j]);
+        }
+      }
+    }
+    ui.board.enableEdit = function() {
+      var trDoms = boardDom.querySelectorAll("tr");
+      for (var i = 0; i < 4; i++) {
+        var tdDoms = trDoms[i].querySelectorAll("td");
+        for (var j = 0; j < 4; j++) {
+          var tdDom = tdDoms[j];
+          tdDom.addEventListener("click", function(tdDom, i, j) {
+            return function(event) {
+              ui.board.handleEdit(tdDom, i, j);
+              return false;
+            }
+          }(tdDom, i, j));
+          tdDom.addEventListener("keyup", function(tdDom, i, j) {
+            return function(event) {
+              if (event.keyCode === 13)
+                ui.board.handleEdit(tdDom, i, j);
+            }
+          }(tdDom, i, j));
+        }
+      }
+    }
+    ui.board.enableEdit();
+
     ui.score = {};
     var scoreDom = document.getElementById("score");
     var maxDom = document.getElementById("max");
@@ -220,7 +270,6 @@
     });
 
     document.getElementById("test").addEventListener("click", function() {
-      console.log("x1: %o", ui.brdEngine);
       board.move.replaceByBoardJS(ui.brdEngine);
     });