Add board editor.
--- 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);
});