diff --git a/index.html b/index.html
index 3975e8178df7c3ec2f99bec8a1f4e5393c070f6a..263bf7211f92718efe2903db3fa53d5f4519441c 100644
--- a/index.html
+++ b/index.html
@@ -46,18 +46,7 @@
-
- 2
-
-
- 4
-
-
- 512
-
-
- 2048
-
+
diff --git a/js/game_manager.js b/js/game_manager.js
index 26c73d6920573a13b04df319912fe172d6da844a..f64660aadb87ad73b9628208df7fe44ec5aeb042 100644
--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -25,7 +25,9 @@ GameManager.prototype.addStartTiles = function () {
// Adds a tile in a random position
GameManager.prototype.addRandomTile = function () {
- var tile = new Tile(this.grid.randomAvailableCell());
+ var value = Math.random() < 0.9 ? 2 : 4;
+ var tile = new Tile(this.grid.randomAvailableCell(), value);
+
this.grid.insertTile(tile);
};
diff --git a/js/html_actuator.js b/js/html_actuator.js
index 25022e8ed377852feecc8f3d5e852323412101e8..cd6e2bbc296530e4730127dad25478e888b5d6a5 100644
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,13 +1,36 @@
function HTMLActuator() {
-
+ this.tileContainer = document.getElementsByClassName("tile-container")[0];
}
HTMLActuator.prototype.actuate = function (grid) {
- // Temporary debug visualizer
- grid.cells.forEach(function (row) {
- var mapped = row.map(function (tile) {
- return tile ? tile.value : " ";
- }).join(" | ");
- console.log(mapped);
+ var self = this;
+
+ this.clearContainer();
+
+ grid.cells.forEach(function (column) {
+ column.forEach(function (cell) {
+ if (cell) {
+ self.addTile(cell);
+ }
+ });
});
};
+
+HTMLActuator.prototype.clearContainer = function () {
+ while (this.tileContainer.firstChild) {
+ this.tileContainer.removeChild(this.tileContainer.firstChild);
+ }
+};
+
+HTMLActuator.prototype.addTile = function (tile) {
+ var element = document.createElement("div");
+
+ var x = tile.x + 1;
+ var y = tile.y + 1;
+ var position = "tile-position-" + x + "-" + y;
+
+ element.classList.add("tile", "tile-" + tile.value, position);
+ element.textContent = tile.value;
+
+ this.tileContainer.appendChild(element);
+};