1
function HTMLActuator() {
2
  this.tileContainer    = document.querySelector(".tile-container");
3
  this.scoreContainer   = document.querySelector(".score-container");
4
  this.bestContainer    = document.querySelector(".best-container");
5
  this.messageContainer = document.querySelector(".game-message");
6
  this.info             = document.querySelector(".info");  
7
  this.dogeSays = document.querySelector(".doge-says");
8
  this.adSpace = document.querySelector(".shout-out");
9

10
  this.score = 0;
11
}
12

13
var dogeSayings = ['such good', 'so amaze', 'many points', 'very unstoppable', 'great jorb', 'such playing', 'very good', 'points', 'very gaming', 'such player', 'concern' ,'bewildered', 'pro gamer', 'many game', 'so good', 'very scores', 'so scoring', 'so hot right now', 'such playing', 'such matching', 'so matched', 'very matched', 'very neat' ,'such natural',]
14

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

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

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

29
    self.updateScore(metadata.score);
30
    self.updateBestScore(metadata.bestScore);
31

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

40
  });
41
};
42

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

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

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

57
  var wrapper   = document.createElement("div");
58
  var inner     = document.createElement("div");
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

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

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

91
  // Add the inner part of the tile to the wrapper
92
  wrapper.appendChild(inner);
93

94
  // Put the tile on the board
95
  this.tileContainer.appendChild(wrapper);
96
};
97

98
HTMLActuator.prototype.applyClasses = function (element, classes) {
99
  element.setAttribute("class", classes.join(" "));
100
};
101

102
HTMLActuator.prototype.normalizePosition = function (position) {
103
  return { x: position.x + 1, y: position.y + 1 };
104
};
105

106
HTMLActuator.prototype.positionClass = function (position) {
107
  position = this.normalizePosition(position);
108
  return "tile-position-" + position.x + "-" + position.y;
109
};
110

111
HTMLActuator.prototype.updateScore = function (score) {
112
  this.clearContainer(this.scoreContainer);
113
  this.clearContainer(this.dogeSays)
114

115
  var difference = score - this.score;
116
  this.score = score;
117

118
  this.scoreContainer.textContent = this.score;
119

120
  if (difference > 0) {
121
    var addition = document.createElement("div");
122
    addition.classList.add("score-addition");
123
    addition.textContent = "+" + difference;
124
    this.scoreContainer.appendChild(addition);
125
    
126
    var message = dogeSayings[Math.floor(Math.random() * dogeSayings.length)]
127
    var messageElement = document.createElement("p");
128
    messageElement.textContent = message
129
    var left = 'left:' + Math.round(Math.random() * 80) + '%;'
130
    var top = 'top:' + Math.round(Math.random() * 80) + '%;'
131
    var color = 'color: rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ');'
132
    var styleString = left + top + color
133
    messageElement.setAttribute('style', styleString);
134
    this.dogeSays.appendChild(messageElement);
135
    if (difference > 4) {
136
     this.adSpace.innerHTML = ads[Math.floor(Math.random() * ads.length)]
137
    }
138
    
139
  }
140
};
141

142
HTMLActuator.prototype.updateBestScore = function (bestScore) {
143
  this.bestContainer.textContent = bestScore;
144
};
145

146
HTMLActuator.prototype.message = function (won) {
147
  var type    = won ? "game-won" : "game-over";
148
  var message = won ? "You win!" : "Game over!";
149

150
  this.messageContainer.classList.add(type);
151
  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
152
};
153

154
HTMLActuator.prototype.clearMessage = function () {
155
  // IE only takes one value to remove at a time.
156
  this.messageContainer.classList.remove("game-won");
157
  this.messageContainer.classList.remove("game-over");
158
};
159

160

161
HTMLActuator.prototype.showInfo = function () {
162
  if ( this.info.getAttribute('style') === "display:block;"){
163
    this.info.setAttribute('style','display:none;')
164
    document.querySelector('.show-info').innerHTML = 'INFO';
165
  } else {
166
    this.info.setAttribute('style','display:block;') 
167
    document.querySelector('.show-info').innerHTML = 'CLOSE';
168
  }
169
}
170

171
HTMLActuator.prototype.hideInfo = function () {
172
    this.info.setAttribute('style','display:none;')
173
}
174

175