1
function HTMLActuator() {
2
  this.tileContainer    = document.querySelector(".tile-container");
3
  this.scoreContainer   = document.querySelector(".score-container");
4
  this.scorePoints      = document.querySelector(".score-points");
5
  this.bestContainer    = document.querySelector(".best-container");
6
  this.bestPoints       = document.querySelector(".best-points");
7
  this.messageContainer = document.querySelector(".game-message");
8
  this.sharingContainer = document.querySelector(".score-sharing");
9

10
  this.score = 0;
11
  this.points = 0;
12
}
13

14
HTMLActuator.prototype.actuate = function (grid, metadata) {
15
  var self = this;
16

17
  window.requestAnimationFrame(function () {
18
    self.clearContainer(self.tileContainer);
19

20
    grid.cells.forEach(function (column) {
21
      column.forEach(function (cell) {
22
        if (cell) {
23
          self.addTile(cell);
24
        }
25
      });
26
    });
27

28
    self.updateScore(metadata.score, metadata.points);
29
    self.updateBestScore(metadata.bestScore, metadata.bestPoints);
30

31
    if (metadata.terminated) {
32
      if (metadata.over) {
33
        self.message(false); // You lose
34
      } else if (metadata.won) {
35
        self.message(true); // You win!
36
      }
37
    }
38

39
  });
40
};
41

42
// Continues the game (both restart and keep playing)
43
HTMLActuator.prototype.continueGame = function () {
44
  this.clearMessage();
45
};
46

47
HTMLActuator.prototype.clearContainer = function (container) {
48
  while (container.firstChild) {
49
    container.removeChild(container.firstChild);
50
  }
51
};
52

53
HTMLActuator.prototype.addTile = function (tile) {
54
  var self = this;
55

56
  var wrapper   = document.createElement("div");
57
  var inner     = document.createElement("div");
58
  var img       = document.createElement("img");
59
  var position  = tile.previousPosition || { x: tile.x, y: tile.y };
60
  var positionClass = this.positionClass(position);
61

62
  // We can't use classlist because it somehow glitches when replacing classes
63
  var classes = ["tile", "tile-" + tile.value, positionClass];
64

65
  if (tile.value > 2048) classes.push("tile-super");
66

67
  this.applyClasses(wrapper, classes);
68

69
  inner.classList.add("tile-inner");
70
  // inner.textContent = tile.value;
71
  // img.style.width = '100%';
72
  img.src = "style/img/" + tile.value + ".jpg";
73
  inner.appendChild(img);
74

75
  if (tile.previousPosition) {
76
    // Make sure that the tile gets rendered in the previous position first
77
    window.requestAnimationFrame(function () {
78
      classes[2] = self.positionClass({ x: tile.x, y: tile.y });
79
      self.applyClasses(wrapper, classes); // Update the position
80
    });
81
  } else if (tile.mergedFrom) {
82
    classes.push("tile-merged");
83
    this.applyClasses(wrapper, classes);
84

85
    // Render the tiles that merged
86
    tile.mergedFrom.forEach(function (merged) {
87
      self.addTile(merged);
88
    });
89
  } else {
90
    classes.push("tile-new");
91
    this.applyClasses(wrapper, classes);
92
  }
93

94
  // Add the inner part of the tile to the wrapper
95
  wrapper.appendChild(inner);
96

97
  // Put the tile on the board
98
  this.tileContainer.appendChild(wrapper);
99
};
100

101
HTMLActuator.prototype.applyClasses = function (element, classes) {
102
  element.setAttribute("class", classes.join(" "));
103
};
104

105
HTMLActuator.prototype.normalizePosition = function (position) {
106
  return { x: position.x + 1, y: position.y + 1 };
107
};
108

109
HTMLActuator.prototype.positionClass = function (position) {
110
  position = this.normalizePosition(position);
111
  return "tile-position-" + position.x + "-" + position.y;
112
};
113

114
HTMLActuator.prototype.updateScore = function (score, points) {
115
  this.clearContainer(this.scoreContainer);
116
  this.clearContainer(this.scorePoints);
117

118
  var difference = score - this.score;
119
  this.score = score;
120
	var pointDifference = points - this.points;
121
	this.points = points;
122

123
  // this.scoreContainer.textContent = this.score;
124
	this.scorePoints.textContent = this.points;
125
  this.scoreContainer.textContent = Localize( "p" + this.score );
126

127
  if (difference > 0) {
128
    var addition = document.createElement("div");
129
    addition.classList.add("score-addition");
130
    // addition.textContent = "+" + difference;
131
    addition.textContent = Localize( "p" + this.score );
132

133
    this.scoreContainer.appendChild(addition);
134
  }
135

136
	if (pointDifference > 0) {
137
		var punti = document.createElement("div");
138
		punti.classList.add("score-addition");
139
		punti.textContent = "+" + pointDifference;
140
		this.scorePoints.appendChild(punti);
141
	}
142
};
143

144
HTMLActuator.prototype.updateBestScore = function (bestScore, bestPoints) {
145
  this.bestContainer.textContent = Localize( "p" + bestScore);
146
  this.bestPoints.textContent = bestPoints;
147

148
	// var difference = score - this.score;
149
	// this.score = score;
150
};
151

152
HTMLActuator.prototype.message = function (won) {
153
  var type    = won ? "game-won" : "game-over";
154
  var message = Localize(type);
155

156
  this.messageContainer.classList.add(type);
157
  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
158

159
  this.clearContainer(this.sharingContainer);
160
  this.sharingContainer.appendChild(this.scoreTweetButton());
161
  twttr.widgets.load();
162
};
163

164
HTMLActuator.prototype.clearMessage = function () {
165
  // IE only takes one value to remove at a time.
166
  this.messageContainer.classList.remove("game-won");
167
  this.messageContainer.classList.remove("game-over");
168
};
169

170
HTMLActuator.prototype.scoreTweetButton = function () {
171
  var tweet = document.createElement("a");
172
  tweet.classList.add("twitter-share-button");
173
  tweet.setAttribute("href", "https://twitter.com/share");
174
  tweet.setAttribute("data-via", "giampiex");
175
  tweet.setAttribute("data-url", "http://git.io/cupcakes");
176
  tweet.setAttribute("data-counturl", "http://0x0800.github.io/2048-CUPCAKES");
177
  tweet.textContent = "Tweet";
178

179
  var text = Localize("tweet1") + Localize( this.score ).toUpperCase() + '", ' + this.points + " Kcal " + Localize("tweet2");
180
  tweet.setAttribute("data-text", text);
181

182
  return tweet;
183
};
184

185