add basic rake file with appcache:update task
add basic rake file with appcache:update task

file:a/README.md -> file:b/README.md
# 2048 # 2048
A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone). A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone).
   
Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/) Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/)
   
### Contributions ### Contributions
   
- [TimPetricola](https://github.com/TimPetricola) added best score storage - [TimPetricola](https://github.com/TimPetricola) added best score storage
- [chrisprice](https://github.com/chrisprice) added custom code for swipe handling on mobile - [chrisprice](https://github.com/chrisprice) added custom code for swipe handling on mobile
  - [elektryk](https://github.com/elektryk) made swipes work on Windows Phone
   
Many thanks to [rayhaanj](https://github.com/rayhaanj), [Mechazawa](https://github.com/Mechazawa), [grant](https://github.com/grant), [remram44](https://github.com/remram44) and [ghoullier](https://github.com/ghoullier) for the many other good contributions. Many thanks to [rayhaanj](https://github.com/rayhaanj), [Mechazawa](https://github.com/Mechazawa), [grant](https://github.com/grant), [remram44](https://github.com/remram44) and [ghoullier](https://github.com/ghoullier) for the many other good contributions.
   
### Screenshot ### Screenshot
   
[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png) [![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
   
That screenshot is fake, by the way. I never reached 2048 :smile: That screenshot is fake, by the way. I never reached 2048 :smile:
   
## Contributing ## Contributing
Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specific branch and request to pull into `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process. Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specific branch and request to pull into `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
   
You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md) You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md)
   
## License ## License
2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt) 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt)
   
## Donations ## Donations
I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like buying me coffee, you can donate at my BTC address: `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i`. Thank you very much! I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like buying me coffee, you can donate at my BTC address: `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i`. Thank you very much!
   
file:b/Rakefile (new)
  require "date"
 
  namespace :appcache do
  desc "update the date in the appcache file (in the gh-pages branch)"
  task :update do
  appcache = File.read("cache.appcache")
  updated = "# Updated: #{DateTime.now}\n"
 
  File.write("cache.appcache", appcache.sub(/\A(#.*$\n)?/, updated))
  end
  end
 
file:a/index.html -> file:b/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>2048</title> <title>2048</title>
   
<link href="style/main.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png"> <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
   
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="heading"> <div class="heading">
<h1 class="title">2048</h1> <h1 class="title">2048</h1>
<div class="scores-container"> <div class="scores-container">
<div class="score-container">0</div> <div class="score-container">0</div>
<div class="best-container">0</div> <div class="best-container">0</div>
</div> </div>
</div> </div>
<p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p> <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
   
<div class="game-container"> <div class="game-container">
<div class="game-message"> <div class="game-message">
<p></p> <p></p>
<div class="lower"> <div class="lower">
  <a class="keep-playing-button">Keep going</a>
<a class="retry-button">Try again</a> <a class="retry-button">Try again</a>
</div> </div>
</div> </div>
   
<div class="grid-container"> <div class="grid-container">
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
</div> </div>
   
<div class="tile-container"> <div class="tile-container">
   
</div> </div>
</div> </div>
   
<p class="game-explanation"> <p class="game-explanation">
<strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong> <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
</p> </p>
<hr> <hr>
<p> <p>
<strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or fakes, and should be used with caution. <strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or fakes, and should be used with caution.
</p> </p>
<hr> <hr>
<p> <p>
Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a> Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
</p> </p>
</div> </div>
   
<script src="js/animframe_polyfill.js"></script> <script src="js/animframe_polyfill.js"></script>
<script src="js/keyboard_input_manager.js"></script> <script src="js/keyboard_input_manager.js"></script>
<script src="js/html_actuator.js"></script> <script src="js/html_actuator.js"></script>
<script src="js/grid.js"></script> <script src="js/grid.js"></script>
<script src="js/tile.js"></script> <script src="js/tile.js"></script>
<script src="js/local_score_manager.js"></script> <script src="js/local_score_manager.js"></script>
<script src="js/game_manager.js"></script> <script src="js/game_manager.js"></script>
<script src="js/application.js"></script> <script src="js/application.js"></script>
</body> </body>
</html> </html>
   
function GameManager(size, InputManager, Actuator, ScoreManager) { function GameManager(size, InputManager, Actuator, ScoreManager) {
this.size = size; // Size of the grid this.size = size; // Size of the grid
this.inputManager = new InputManager; this.inputManager = new InputManager;
this.scoreManager = new ScoreManager; this.scoreManager = new ScoreManager;
this.actuator = new Actuator; this.actuator = new Actuator;
   
this.startTiles = 2; this.startTiles = 2;
   
this.inputManager.on("move", this.move.bind(this)); this.inputManager.on("move", this.move.bind(this));
this.inputManager.on("restart", this.restart.bind(this)); this.inputManager.on("restart", this.restart.bind(this));
  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
   
this.setup(); this.setup();
} }
   
// Restart the game // Restart the game
GameManager.prototype.restart = function () { GameManager.prototype.restart = function () {
this.actuator.restart(); this.actuator.continue();
this.setup(); this.setup();
  };
   
  // Keep playing after winning
  GameManager.prototype.keepPlaying = function () {
  this.keepPlaying = true;
  this.actuator.continue();
  };
   
  GameManager.prototype.isGameTerminated = function () {
  if (this.over || (this.won && !this.keepPlaying)) {
  return true;
  } else {
  return false;
  }
}; };
   
// Set up the game // Set up the game
GameManager.prototype.setup = function () { GameManager.prototype.setup = function () {
this.grid = new Grid(this.size); this.grid = new Grid(this.size);
   
this.score = 0; this.score = 0;
this.over = false; this.over = false;
this.won = false; this.won = false;
  this.keepPlaying = false;
   
// Add the initial tiles // Add the initial tiles
this.addStartTiles(); this.addStartTiles();
   
// Update the actuator // Update the actuator
this.actuate(); this.actuate();
}; };
   
// Set up the initial tiles to start the game with // Set up the initial tiles to start the game with
GameManager.prototype.addStartTiles = function () { GameManager.prototype.addStartTiles = function () {
for (var i = 0; i < this.startTiles; i++) { for (var i = 0; i < this.startTiles; i++) {
this.addRandomTile(); this.addRandomTile();
} }
}; };
   
// Adds a tile in a random position // Adds a tile in a random position
GameManager.prototype.addRandomTile = function () { GameManager.prototype.addRandomTile = function () {
if (this.grid.cellsAvailable()) { if (this.grid.cellsAvailable()) {
var value = Math.random() < 0.9 ? 2 : 4; var value = Math.random() < 0.9 ? 2 : 4;
var tile = new Tile(this.grid.randomAvailableCell(), value); var tile = new Tile(this.grid.randomAvailableCell(), value);
   
this.grid.insertTile(tile); this.grid.insertTile(tile);
} }
}; };
   
// Sends the updated grid to the actuator // Sends the updated grid to the actuator
GameManager.prototype.actuate = function () { GameManager.prototype.actuate = function () {
if (this.scoreManager.get() < this.score) { if (this.scoreManager.get() < this.score) {
this.scoreManager.set(this.score); this.scoreManager.set(this.score);
} }
   
this.actuator.actuate(this.grid, { this.actuator.actuate(this.grid, {
score: this.score, score: this.score,
over: this.over, over: this.over,
won: this.won, won: this.won,
bestScore: this.scoreManager.get() bestScore: this.scoreManager.get(),
  terminated: this.isGameTerminated()
}); });
   
}; };
   
// Save all tile positions and remove merger info // Save all tile positions and remove merger info
GameManager.prototype.prepareTiles = function () { GameManager.prototype.prepareTiles = function () {
this.grid.eachCell(function (x, y, tile) { this.grid.eachCell(function (x, y, tile) {
if (tile) { if (tile) {
tile.mergedFrom = null; tile.mergedFrom = null;
tile.savePosition(); tile.savePosition();
} }
}); });
}; };
   
// Move a tile and its representation // Move a tile and its representation
GameManager.prototype.moveTile = function (tile, cell) { GameManager.prototype.moveTile = function (tile, cell) {
this.grid.cells[tile.x][tile.y] = null; this.grid.cells[tile.x][tile.y] = null;
this.grid.cells[cell.x][cell.y] = tile; this.grid.cells[cell.x][cell.y] = tile;
tile.updatePosition(cell); tile.updatePosition(cell);
}; };
   
// Move tiles on the grid in the specified direction // Move tiles on the grid in the specified direction
GameManager.prototype.move = function (direction) { GameManager.prototype.move = function (direction) {
// 0: up, 1: right, 2:down, 3: left // 0: up, 1: right, 2:down, 3: left
var self = this; var self = this;
   
if (this.over || this.won) return; // Don't do anything if the game's over if (this.isGameTerminated()) return; // Don't do anything if the game's over
   
var cell, tile; var cell, tile;
   
var vector = this.getVector(direction); var vector = this.getVector(direction);
var traversals = this.buildTraversals(vector); var traversals = this.buildTraversals(vector);
var moved = false; var moved = false;
   
// Save the current tile positions and remove merger information // Save the current tile positions and remove merger information
this.prepareTiles(); this.prepareTiles();
   
// Traverse the grid in the right direction and move tiles // Traverse the grid in the right direction and move tiles
traversals.x.forEach(function (x) { traversals.x.forEach(function (x) {
traversals.y.forEach(function (y) { traversals.y.forEach(function (y) {
cell = { x: x, y: y }; cell = { x: x, y: y };
tile = self.grid.cellContent(cell); tile = self.grid.cellContent(cell);
   
if (tile) { if (tile) {
var positions = self.findFarthestPosition(cell, vector); var positions = self.findFarthestPosition(cell, vector);
var next = self.grid.cellContent(positions.next); var next = self.grid.cellContent(positions.next);
   
// Only one merger per row traversal? // Only one merger per row traversal?
if (next && next.value === tile.value && !next.mergedFrom) { if (next && next.value === tile.value && !next.mergedFrom) {
var merged = new Tile(positions.next, tile.value * 2); var merged = new Tile(positions.next, tile.value * 2);
merged.mergedFrom = [tile, next]; merged.mergedFrom = [tile, next];
   
self.grid.insertTile(merged); self.grid.insertTile(merged);
self.grid.removeTile(tile); self.grid.removeTile(tile);
   
// Converge the two tiles' positions // Converge the two tiles' positions
tile.updatePosition(positions.next); tile.updatePosition(positions.next);
   
// Update the score // Update the score
self.score += merged.value; self.score += merged.value;
   
// The mighty 2048 tile // The mighty 2048 tile
if (merged.value === 2048) self.won = true; if (merged.value === 2048) self.won = true;
} else { } else {
self.moveTile(tile, positions.farthest); self.moveTile(tile, positions.farthest);
} }
   
if (!self.positionsEqual(cell, tile)) { if (!self.positionsEqual(cell, tile)) {
moved = true; // The tile moved from its original cell! moved = true; // The tile moved from its original cell!
} }
} }
}); });
}); });
   
if (moved) { if (moved) {
this.addRandomTile(); this.addRandomTile();
   
if (!this.movesAvailable()) { if (!this.movesAvailable()) {
this.over = true; // Game over! this.over = true; // Game over!
} }
   
this.actuate(); this.actuate();
} }
}; };
   
// Get the vector representing the chosen direction // Get the vector representing the chosen direction
GameManager.prototype.getVector = function (direction) { GameManager.prototype.getVector = function (direction) {
// Vectors representing tile movement // Vectors representing tile movement
var map = { var map = {
0: { x: 0, y: -1 }, // up 0: { x: 0, y: -1 }, // up
1: { x: 1, y: 0 }, // right 1: { x: 1, y: 0 }, // right
2: { x: 0, y: 1 }, // down 2: { x: 0, y: 1 }, // down
3: { x: -1, y: 0 } // left 3: { x: -1, y: 0 } // left
}; };
   
return map[direction]; return map[direction];
}; };
   
// Build a list of positions to traverse in the right order // Build a list of positions to traverse in the right order
GameManager.prototype.buildTraversals = function (vector) { GameManager.prototype.buildTraversals = function (vector) {
var traversals = { x: [], y: [] }; var traversals = { x: [], y: [] };
   
for (var pos = 0; pos < this.size; pos++) { for (var pos = 0; pos < this.size; pos++) {
traversals.x.push(pos); traversals.x.push(pos);
traversals.y.push(pos); traversals.y.push(pos);
} }
   
// Always traverse from the farthest cell in the chosen direction // Always traverse from the farthest cell in the chosen direction
if (vector.x === 1) traversals.x = traversals.x.reverse(); if (vector.x === 1) traversals.x = traversals.x.reverse();
if (vector.y === 1) traversals.y = traversals.y.reverse(); if (vector.y === 1) traversals.y = traversals.y.reverse();
   
return traversals; return traversals;
}; };
   
GameManager.prototype.findFarthestPosition = function (cell, vector) { GameManager.prototype.findFarthestPosition = function (cell, vector) {
var previous; var previous;
   
// Progress towards the vector direction until an obstacle is found // Progress towards the vector direction until an obstacle is found
do { do {
previous = cell; previous = cell;
cell = { x: previous.x + vector.x, y: previous.y + vector.y }; cell = { x: previous.x + vector.x, y: previous.y + vector.y };
} while (this.grid.withinBounds(cell) && } while (this.grid.withinBounds(cell) &&
this.grid.cellAvailable(cell)); this.grid.cellAvailable(cell));
   
return { return {
farthest: previous, farthest: previous,
next: cell // Used to check if a merge is required next: cell // Used to check if a merge is required
}; };
}; };
   
GameManager.prototype.movesAvailable = function () { GameManager.prototype.movesAvailable = function () {
return this.grid.cellsAvailable() || this.tileMatchesAvailable(); return this.grid.cellsAvailable() || this.tileMatchesAvailable();
}; };
   
// Check for available matches between tiles (more expensive check) // Check for available matches between tiles (more expensive check)
GameManager.prototype.tileMatchesAvailable = function () { GameManager.prototype.tileMatchesAvailable = function () {
var self = this; var self = this;
   
var tile; var tile;
   
for (var x = 0; x < this.size; x++) { for (var x = 0; x < this.size; x++) {
for (var y = 0; y < this.size; y++) { for (var y = 0; y < this.size; y++) {
tile = this.grid.cellContent({ x: x, y: y }); tile = this.grid.cellContent({ x: x, y: y });
   
if (tile) { if (tile) {
for (var direction = 0; direction < 4; direction++) { for (var direction = 0; direction < 4; direction++) {
var vector = self.getVector(direction); var vector = self.getVector(direction);
var cell = { x: x + vector.x, y: y + vector.y }; var cell = { x: x + vector.x, y: y + vector.y };
   
var other = self.grid.cellContent(cell); var other = self.grid.cellContent(cell);
   
if (other && other.value === tile.value) { if (other && other.value === tile.value) {
return true; // These two tiles can be merged return true; // These two tiles can be merged
} }
} }
} }
} }
} }
   
return false; return false;
}; };
   
GameManager.prototype.positionsEqual = function (first, second) { GameManager.prototype.positionsEqual = function (first, second) {
return first.x === second.x && first.y === second.y; return first.x === second.x && first.y === second.y;
}; };
   
function HTMLActuator() { function HTMLActuator() {
this.tileContainer = document.querySelector(".tile-container"); this.tileContainer = document.querySelector(".tile-container");
this.scoreContainer = document.querySelector(".score-container"); this.scoreContainer = document.querySelector(".score-container");
this.bestContainer = document.querySelector(".best-container"); this.bestContainer = document.querySelector(".best-container");
this.messageContainer = document.querySelector(".game-message"); this.messageContainer = document.querySelector(".game-message");
   
this.score = 0; this.score = 0;
} }
   
HTMLActuator.prototype.actuate = function (grid, metadata) { HTMLActuator.prototype.actuate = function (grid, metadata) {
var self = this; var self = this;
   
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
self.clearContainer(self.tileContainer); self.clearContainer(self.tileContainer);
   
grid.cells.forEach(function (column) { grid.cells.forEach(function (column) {
column.forEach(function (cell) { column.forEach(function (cell) {
if (cell) { if (cell) {
self.addTile(cell); self.addTile(cell);
} }
}); });
}); });
   
self.updateScore(metadata.score); self.updateScore(metadata.score);
self.updateBestScore(metadata.bestScore); self.updateBestScore(metadata.bestScore);
   
if (metadata.over) self.message(false); // You lose if (metadata.terminated) {
if (metadata.won) self.message(true); // You win! if (metadata.over) {
  self.message(false); // You lose
  } else if (metadata.won) {
  self.message(true); // You win!
  }
  }
   
}); });
}; };
   
HTMLActuator.prototype.restart = function () { // Continues the game (both restart and keep playing)
  HTMLActuator.prototype.continue = function () {
this.clearMessage(); this.clearMessage();
}; };
   
HTMLActuator.prototype.clearContainer = function (container) { HTMLActuator.prototype.clearContainer = function (container) {
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.firstChild); container.removeChild(container.firstChild);
} }
}; };
   
HTMLActuator.prototype.addTile = function (tile) { HTMLActuator.prototype.addTile = function (tile) {
var self = this; var self = this;
   
var element = document.createElement("div"); var wrapper = document.createElement("div");
  var inner = document.createElement("div");
var position = tile.previousPosition || { x: tile.x, y: tile.y }; var position = tile.previousPosition || { x: tile.x, y: tile.y };
positionClass = this.positionClass(position); var positionClass = this.positionClass(position);
   
// We can't use classlist because it somehow glitches when replacing classes // We can't use classlist because it somehow glitches when replacing classes
var classes = ["tile", "tile-" + tile.value, positionClass]; var classes = ["tile", "tile-" + tile.value, positionClass];
this.applyClasses(element, classes);  
   
element.textContent = tile.value; if (tile.value > 2048) classes.push("tile-super");
   
  this.applyClasses(wrapper, classes);
   
  inner.classList.add("tile-inner");
  inner.textContent = tile.value;
   
if (tile.previousPosition) { if (tile.previousPosition) {
// Make sure that the tile gets rendered in the previous position first // Make sure that the tile gets rendered in the previous position first
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
classes[2] = self.positionClass({ x: tile.x, y: tile.y }); classes[2] = self.positionClass({ x: tile.x, y: tile.y });
self.applyClasses(element, classes); // Update the position self.applyClasses(wrapper, classes); // Update the position
}); });
} else if (tile.mergedFrom) { } else if (tile.mergedFrom) {
classes.push("tile-merged"); classes.push("tile-merged");
this.applyClasses(element, classes); this.applyClasses(wrapper, classes);
   
// Render the tiles that merged // Render the tiles that merged
tile.mergedFrom.forEach(function (merged) { tile.mergedFrom.forEach(function (merged) {
self.addTile(merged); self.addTile(merged);
}); });
} else { } else {
classes.push("tile-new"); classes.push("tile-new");
this.applyClasses(element, classes); this.applyClasses(wrapper, classes);
} }
   
  // Add the inner part of the tile to the wrapper
  wrapper.appendChild(inner);
   
// Put the tile on the board // Put the tile on the board
this.tileContainer.appendChild(element); this.tileContainer.appendChild(wrapper);
}; };
   
HTMLActuator.prototype.applyClasses = function (element, classes) { HTMLActuator.prototype.applyClasses = function (element, classes) {
element.setAttribute("class", classes.join(" ")); element.setAttribute("class", classes.join(" "));
}; };
   
HTMLActuator.prototype.normalizePosition = function (position) { HTMLActuator.prototype.normalizePosition = function (position) {
return { x: position.x + 1, y: position.y + 1 }; return { x: position.x + 1, y: position.y + 1 };
}; };
   
HTMLActuator.prototype.positionClass = function (position) { HTMLActuator.prototype.positionClass = function (position) {
position = this.normalizePosition(position); position = this.normalizePosition(position);
return "tile-position-" + position.x + "-" + position.y; return "tile-position-" + position.x + "-" + position.y;
}; };
   
HTMLActuator.prototype.updateScore = function (score) { HTMLActuator.prototype.updateScore = function (score) {
this.clearContainer(this.scoreContainer); this.clearContainer(this.scoreContainer);
   
var difference = score - this.score; var difference = score - this.score;
this.score = score; this.score = score;
   
this.scoreContainer.textContent = this.score; this.scoreContainer.textContent = this.score;
   
if (difference > 0) { if (difference > 0) {
var addition = document.createElement("div"); var addition = document.createElement("div");
addition.classList.add("score-addition"); addition.classList.add("score-addition");
addition.textContent = "+" + difference; addition.textContent = "+" + difference;
   
this.scoreContainer.appendChild(addition); this.scoreContainer.appendChild(addition);
} }
}; };
   
HTMLActuator.prototype.updateBestScore = function (bestScore) { HTMLActuator.prototype.updateBestScore = function (bestScore) {
this.bestContainer.textContent = bestScore; this.bestContainer.textContent = bestScore;
}; };
   
HTMLActuator.prototype.message = function (won) { HTMLActuator.prototype.message = function (won) {
var type = won ? "game-won" : "game-over"; var type = won ? "game-won" : "game-over";
var message = won ? "You win!" : "Game over!"; var message = won ? "You win!" : "Game over!";
   
this.messageContainer.classList.add(type); this.messageContainer.classList.add(type);
this.messageContainer.getElementsByTagName("p")[0].textContent = message; this.messageContainer.getElementsByTagName("p")[0].textContent = message;
}; };
   
HTMLActuator.prototype.clearMessage = function () { HTMLActuator.prototype.clearMessage = function () {
this.messageContainer.classList.remove("game-won", "game-over"); // IE only takes one value to remove at a time.
  this.messageContainer.classList.remove("game-won");
  this.messageContainer.classList.remove("game-over");
}; };
   
function KeyboardInputManager() { function KeyboardInputManager() {
this.events = {}; this.events = {};
   
  if (window.navigator.msPointerEnabled) {
  //Internet Explorer 10 style
  this.eventTouchstart = "MSPointerDown";
  this.eventTouchmove = "MSPointerMove";
  this.eventTouchend = "MSPointerUp";
  } else {
  this.eventTouchstart = "touchstart";
  this.eventTouchmove = "touchmove";
  this.eventTouchend = "touchend";
  }
   
this.listen(); this.listen();
} }
   
KeyboardInputManager.prototype.on = function (event, callback) { KeyboardInputManager.prototype.on = function (event, callback) {
if (!this.events[event]) { if (!this.events[event]) {
this.events[event] = []; this.events[event] = [];
} }
this.events[event].push(callback); this.events[event].push(callback);
}; };
   
KeyboardInputManager.prototype.emit = function (event, data) { KeyboardInputManager.prototype.emit = function (event, data) {
var callbacks = this.events[event]; var callbacks = this.events[event];
if (callbacks) { if (callbacks) {
callbacks.forEach(function (callback) { callbacks.forEach(function (callback) {
callback(data); callback(data);
}); });
} }
}; };
   
KeyboardInputManager.prototype.listen = function () { KeyboardInputManager.prototype.listen = function () {
var self = this; var self = this;
   
var map = { var map = {
38: 0, // Up 38: 0, // Up
39: 1, // Right 39: 1, // Right
40: 2, // Down 40: 2, // Down
37: 3, // Left 37: 3, // Left
75: 0, // vim keybindings 75: 0, // vim keybindings
76: 1, 76: 1,
74: 2, 74: 2,
72: 3, 72: 3,
87: 0, // W 87: 0, // W
68: 1, // D 68: 1, // D
83: 2, // S 83: 2, // S
65: 3 // A 65: 3 // A
}; };
   
document.addEventListener("keydown", function (event) { document.addEventListener("keydown", function (event) {
var modifiers = event.altKey || event.ctrlKey || event.metaKey || var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
event.shiftKey; event.shiftKey;
var mapped = map[event.which]; var mapped = map[event.which];
   
if (!modifiers) { if (!modifiers) {
if (mapped !== undefined) { if (mapped !== undefined) {
event.preventDefault(); event.preventDefault();
self.emit("move", mapped); self.emit("move", mapped);
} }
   
if (event.which === 32) self.restart.bind(self)(event); if (event.which === 32) self.restart.bind(self)(event);
} }
}); });
   
var retry = document.getElementsByClassName("retry-button")[0]; var retry = document.querySelector(".retry-button");
retry.addEventListener("click", this.restart.bind(this)); retry.addEventListener("click", this.restart.bind(this));
retry.addEventListener("touchend", this.restart.bind(this)); retry.addEventListener(this.eventTouchend, this.restart.bind(this));
   
  var keepPlaying = document.querySelector(".keep-playing-button");
  keepPlaying.addEventListener("click", this.keepPlaying.bind(this));
  keepPlaying.addEventListener("touchend", this.keepPlaying.bind(this));
   
// Listen to swipe events // Listen to swipe events
var touchStartClientX, touchStartClientY; var touchStartClientX, touchStartClientY;
var gameContainer = document.getElementsByClassName("game-container")[0]; var gameContainer = document.getElementsByClassName("game-container")[0];
   
gameContainer.addEventListener("touchstart", function (event) { gameContainer.addEventListener(this.eventTouchstart, function (event) {
if (event.touches.length > 1) return; if (( !window.navigator.msPointerEnabled && event.touches.length > 1) || event.targetTouches > 1) return;
   
touchStartClientX = event.touches[0].clientX; if(window.navigator.msPointerEnabled){
touchStartClientY = event.touches[0].clientY; touchStartClientX = event.pageX;
  touchStartClientY = event.pageY;
  } else {
  touchStartClientX = event.touches[0].clientX;
  touchStartClientY = event.touches[0].clientY;
  }
   
event.preventDefault(); event.preventDefault();
}); });
   
gameContainer.addEventListener("touchmove", function (event) { gameContainer.addEventListener(this.eventTouchmove, function (event) {
event.preventDefault(); event.preventDefault();
}); });
   
gameContainer.addEventListener("touchend", function (event) { gameContainer.addEventListener(this.eventTouchend, function (event) {
if (event.touches.length > 0) return; if (( !window.navigator.msPointerEnabled && event.touches.length > 0) || event.targetTouches > 0) return;
   
var dx = event.changedTouches[0].clientX - touchStartClientX; var touchEndClientX, touchEndClientY;
  if(window.navigator.msPointerEnabled){
  touchEndClientX = event.pageX;
  touchEndClientY = event.pageY;
  } else {
  touchEndClientX = event.changedTouches[0].clientX;
  touchEndClientY = event.changedTouches[0].clientY;
  }
   
  var dx = touchEndClientX - touchStartClientX;
var absDx = Math.abs(dx); var absDx = Math.abs(dx);
   
var dy = event.changedTouches[0].clientY - touchStartClientY; var dy = touchEndClientY - touchStartClientY;
var absDy = Math.abs(dy); var absDy = Math.abs(dy);
   
if (Math.max(absDx, absDy) > 10) { if (Math.max(absDx, absDy) > 10) {
// (right : left) : (down : up) // (right : left) : (down : up)
self.emit("move", absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0)); self.emit("move", absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0));
} }
}); });
}; };
   
KeyboardInputManager.prototype.restart = function (event) { KeyboardInputManager.prototype.restart = function (event) {
event.preventDefault(); event.preventDefault();
this.emit("restart"); this.emit("restart");
}; };
   
  KeyboardInputManager.prototype.keepPlaying = function (event) {
  event.preventDefault();
  this.emit("keepPlaying");
  };
   
window.fakeStorage = { window.fakeStorage = {
_data: {}, _data: {},
   
setItem: function (id, val) { setItem: function (id, val) {
return this._data[id] = String(val); return this._data[id] = String(val);
}, },
   
getItem: function (id) { getItem: function (id) {
return this._data.hasOwnProperty(id) ? this._data[id] : undefined; return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
}, },
   
removeItem: function (id) { removeItem: function (id) {
return delete this._data[id]; return delete this._data[id];
}, },
   
clear: function () { clear: function () {
return this._data = {}; return this._data = {};
} }
}; };
   
function LocalScoreManager() { function LocalScoreManager() {
var localSupported = !!window.localStorage; this.key = "bestScore";
   
this.key = "bestScore"; var supported = this.localStorageSupported();
this.storage = localSupported ? window.localStorage : window.fakeStorage; this.storage = supported ? window.localStorage : window.fakeStorage;
} }
   
  LocalScoreManager.prototype.localStorageSupported = function () {
  var testKey = "test";
  var storage = window.localStorage;
   
  try {
  storage.setItem(testKey, "1");
  storage.removeItem(testKey);
  return true;
  } catch (error) {
  return false;
  }
  };
   
LocalScoreManager.prototype.get = function () { LocalScoreManager.prototype.get = function () {
return this.storage.getItem(this.key) || 0; return this.storage.getItem(this.key) || 0;
}; };
   
LocalScoreManager.prototype.set = function (score) { LocalScoreManager.prototype.set = function (score) {
this.storage.setItem(this.key, score); this.storage.setItem(this.key, score);
}; };
   
   
// Exponent // Exponent
// From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36 // From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
   
@function exponent($base, $exponent) { @function exponent($base, $exponent) {
// reset value // reset value
$value: $base; $value: $base;
// positive intergers get multiplied // positive intergers get multiplied
@if $exponent > 1 { @if $exponent > 1 {
@for $i from 2 through $exponent { @for $i from 2 through $exponent {
$value: $value * $base; } } $value: $value * $base; } }
// negitive intergers get divided. A number divided by itself is 1 // negitive intergers get divided. A number divided by itself is 1
@if $exponent < 1 { @if $exponent < 1 {
@for $i from 0 through -$exponent { @for $i from 0 through -$exponent {
$value: $value / $base; } } $value: $value / $base; } }
// return the last value written // return the last value written
@return $value; @return $value;
} }
   
@function pow($base, $exponent) { @function pow($base, $exponent) {
@return exponent($base, $exponent); @return exponent($base, $exponent);
} }
   
// Transition mixins // Transition mixins
@mixin transition($args...) { @mixin transition($args...) {
-webkit-transition: $args; -webkit-transition: $args;
-moz-transition: $args; -moz-transition: $args;
  transition: $args;
} }
   
@mixin transition-property($args...) { @mixin transition-property($args...) {
-webkit-transition-property: $args; -webkit-transition-property: $args;
-moz-transition-property: $args; -moz-transition-property: $args;
  transition-property: $args;
  }
   
  @mixin animation($args...) {
  -webkit-animation: $args;
  -moz-animation: $args;
  animation: $args;
  }
   
  @mixin animation-fill-mode($args...) {
  -webkit-animation-fill-mode: $args;
  -moz-animation-fill-mode: $args;
  animation-fill-mode: $args;
  }
   
  @mixin transform($args...) {
  -webkit-transform: $args;
  -moz-transform: $args;
  transform: $args;
} }
   
// Keyframe animations // Keyframe animations
@mixin keyframes($animation-name) { @mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name { @-webkit-keyframes $animation-name {
@content; @content;
} }
@-moz-keyframes $animation-name { @-moz-keyframes $animation-name {
@content; @content;
} }
@keyframes $animation-name { @keyframes $animation-name {
@content; @content;
} }
} }
   
@mixin animation($str) {  
-webkit-animation: #{$str};  
-moz-animation: #{$str};  
}  
   
@mixin animation-fill-mode($str) {  
-webkit-animation-fill-mode: #{$str};  
-moz-animation-fill-mode: #{$str};  
}  
   
// Media queries // Media queries
@mixin smaller($width) { @mixin smaller($width) {
@media screen and (max-width: $width) { @media screen and (max-width: $width) {
@content; @content;
} }
} }
   
@import url(fonts/clear-sans.css); @import url(fonts/clear-sans.css);
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #faf8ef; background: #faf8ef;
color: #776e65; color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; } font-size: 18px; }
   
body { body {
margin: 80px 0; } margin: 80px 0; }
   
.heading:after { .heading:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
h1.title { h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: block; display: block;
float: left; } float: left; }
   
@-webkit-keyframes move-up { @-webkit-keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
@-moz-keyframes move-up { @-moz-keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
@keyframes move-up { @keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
.scores-container { .scores-container {
float: right; float: right;
text-align: right; } text-align: right; }
   
.score-container, .best-container { .score-container, .best-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
background: #bbada0; background: #bbada0;
padding: 15px 25px; padding: 15px 25px;
font-size: 25px; font-size: 25px;
height: 25px; height: 25px;
line-height: 47px; line-height: 47px;
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
color: white; color: white;
margin-top: 8px; margin-top: 8px;
text-align: center; } text-align: center; }
.score-container:after, .best-container:after { .score-container:after, .best-container:after {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 10px; top: 10px;
left: 0; left: 0;
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
text-align: center; text-align: center;
color: #eee4da; } color: #eee4da; }
.score-container .score-addition, .best-container .score-addition { .score-container .score-addition, .best-container .score-addition {
position: absolute; position: absolute;
right: 30px; right: 30px;
color: red; color: red;
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
font-weight: bold; font-weight: bold;
color: rgba(119, 110, 101, 0.9); color: rgba(119, 110, 101, 0.9);
z-index: 100; z-index: 100;
-webkit-animation: move-up 600ms ease-in; -webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in; -moz-animation: move-up 600ms ease-in;
  animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both;
  animation-fill-mode: both; }
   
.score-container:after { .score-container:after {
content: "Score"; } content: "Score"; }
   
.best-container:after { .best-container:after {
content: "Best"; } content: "Best"; }
   
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.65; } line-height: 1.65; }
   
a { a {
color: #776e65; color: #776e65;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
cursor: pointer; } cursor: pointer; }
   
strong.important { strong.important {
text-transform: uppercase; } text-transform: uppercase; }
   
hr { hr {
border: none; border: none;
border-bottom: 1px solid #d8d4d0; border-bottom: 1px solid #d8d4d0;
margin-top: 20px; margin-top: 20px;
margin-bottom: 30px; } margin-bottom: 30px; }
   
.container { .container {
width: 500px; width: 500px;
margin: 0 auto; } margin: 0 auto; }
   
@-webkit-keyframes fade-in { @-webkit-keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
@-moz-keyframes fade-in { @-moz-keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: 15px; padding: 15px;
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 500px; width: 500px;
height: 500px; height: 500px;
  -ms-touch-action: none;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.game-container .game-message { .game-container .game-message {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(238, 228, 218, 0.5); background: rgba(238, 228, 218, 0.5);
z-index: 100; z-index: 100;
text-align: center; text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
  animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both;
  animation-fill-mode: both; }
.game-container .game-message p { .game-container .game-message p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
margin-top: 222px; } margin-top: 222px; }
.game-container .game-message .lower { .game-container .game-message .lower {
display: block; display: block;
margin-top: 59px; } margin-top: 59px; }
.game-container .game-message a { .game-container .game-message a {
display: inline-block; display: inline-block;
background: #8f7a66; background: #8f7a66;
border-radius: 3px; border-radius: 3px;
padding: 0 20px; padding: 0 20px;
text-decoration: none; text-decoration: none;
color: #f9f6f2; color: #f9f6f2;
height: 40px; height: 40px;
line-height: 42px; line-height: 42px;
margin-left: 9px; } margin-left: 9px; }
  .game-container .game-message a.keep-playing-button {
  display: none; }
.game-container .game-message.game-won { .game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5); background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; } color: #f9f6f2; }
  .game-container .game-message.game-won a.keep-playing-button {
  display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over { .game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; } display: block; }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
   
.grid-row { .grid-row {
margin-bottom: 15px; } margin-bottom: 15px; }
.grid-row:last-child { .grid-row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.grid-row:after { .grid-row:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
.grid-cell { .grid-cell {
width: 106.25px; width: 106.25px;
height: 106.25px; height: 106.25px;
margin-right: 15px; margin-right: 15px;
float: left; float: left;
border-radius: 3px; border-radius: 3px;
background: rgba(238, 228, 218, 0.35); } background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { .grid-cell:last-child {
margin-right: 0; } margin-right: 0; }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
   
  .tile, .tile .tile-inner {
  width: 107px;
  height: 107px;
  line-height: 116.25px; }
  .tile.tile-position-1-1 {
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  transform: translate(0px, 0px); }
  .tile.tile-position-1-2 {
  -webkit-transform: translate(0px, 121px);
  -moz-transform: translate(0px, 121px);
  transform: translate(0px, 121px); }
  .tile.tile-position-1-3 {
  -webkit-transform: translate(0px, 242px);
  -moz-transform: translate(0px, 242px);
  transform: translate(0px, 242px); }
  .tile.tile-position-1-4 {
  -webkit-transform: translate(0px, 363px);
  -moz-transform: translate(0px, 363px);
  transform: translate(0px, 363px); }
  .tile.tile-position-2-1 {
  -webkit-transform: translate(121px, 0px);
  -moz-transform: translate(121px, 0px);
  transform: translate(121px, 0px); }
  .tile.tile-position-2-2 {
  -webkit-transform: translate(121px, 121px);
  -moz-transform: translate(121px, 121px);
  transform: translate(121px, 121px); }
  .tile.tile-position-2-3 {
  -webkit-transform: translate(121px, 242px);
  -moz-transform: translate(121px, 242px);
  transform: translate(121px, 242px); }
  .tile.tile-position-2-4 {
  -webkit-transform: translate(121px, 363px);
  -moz-transform: translate(121px, 363px);
  transform: translate(121px, 363px); }
  .tile.tile-position-3-1 {
  -webkit-transform: translate(242px, 0px);
  -moz-transform: translate(242px, 0px);
  transform: translate(242px, 0px); }
  .tile.tile-position-3-2 {
  -webkit-transform: translate(242px, 121px);
  -moz-transform: translate(242px, 121px);
  transform: translate(242px, 121px); }
  .tile.tile-position-3-3 {
  -webkit-transform: translate(242px, 242px);
  -moz-transform: translate(242px, 242px);
  transform: translate(242px, 242px); }
  .tile.tile-position-3-4 {
  -webkit-transform: translate(242px, 363px);
  -moz-transform: translate(242px, 363px);
  transform: translate(242px, 363px); }
  .tile.tile-position-4-1 {
  -webkit-transform: translate(363px, 0px);
  -moz-transform: translate(363px, 0px);
  transform: translate(363px, 0px); }
  .tile.tile-position-4-2 {
  -webkit-transform: translate(363px, 121px);
  -moz-transform: translate(363px, 121px);
  transform: translate(363px, 121px); }
  .tile.tile-position-4-3 {
  -webkit-transform: translate(363px, 242px);
  -moz-transform: translate(363px, 242px);
  transform: translate(363px, 242px); }
  .tile.tile-position-4-4 {
  -webkit-transform: translate(363px, 363px);
  -moz-transform: translate(363px, 363px);
  transform: translate(363px, 363px); }
   
.tile { .tile {
width: 106.25px; position: absolute;
height: 106.25px;  
line-height: 116.25px; }  
.tile.tile-position-1-1 {  
position: absolute;  
left: 0px;  
top: 0px; }  
.tile.tile-position-1-2 {  
position: absolute;  
left: 0px;  
top: 121px; }  
.tile.tile-position-1-3 {  
position: absolute;  
left: 0px;  
top: 243px; }  
.tile.tile-position-1-4 {  
position: absolute;  
left: 0px;  
top: 364px; }  
.tile.tile-position-2-1 {  
position: absolute;  
left: 121px;  
top: 0px; }  
.tile.tile-position-2-2 {  
position: absolute;  
left: 121px;  
top: 121px; }  
.tile.tile-position-2-3 {  
position: absolute;  
left: 121px;  
top: 243px; }  
.tile.tile-position-2-4 {  
position: absolute;  
left: 121px;  
top: 364px; }  
.tile.tile-position-3-1 {  
position: absolute;  
left: 243px;  
top: 0px; }  
.tile.tile-position-3-2 {  
position: absolute;  
left: 243px;  
top: 121px; }  
.tile.tile-position-3-3 {  
position: absolute;  
left: 243px;  
top: 243px; }  
.tile.tile-position-3-4 {  
position: absolute;  
left: 243px;  
top: 364px; }  
.tile.tile-position-4-1 {  
position: absolute;  
left: 364px;  
top: 0px; }  
.tile.tile-position-4-2 {  
position: absolute;  
left: 364px;  
top: 121px; }  
.tile.tile-position-4-3 {  
position: absolute;  
left: 364px;  
top: 243px; }  
.tile.tile-position-4-4 {  
position: absolute;  
left: 364px;  
top: 364px; }  
   
.tile {  
border-radius: 3px;  
background: #eee4da;  
text-align: center;  
font-weight: bold;  
z-index: 10;  
font-size: 55px;  
-webkit-transition: 100ms ease-in-out; -webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out; -moz-transition: 100ms ease-in-out;
-webkit-transition-property: top, left; transition: 100ms ease-in-out;
-moz-transition-property: top, left; } -webkit-transition-property: -webkit-transform;
.tile.tile-2 { -moz-transition-property: -moz-transform;
  transition-property: transform; }
  .tile .tile-inner {
  border-radius: 3px;
  background: #eee4da;
  text-align: center;
  font-weight: bold;
  z-index: 10;
  font-size: 55px; }
  .tile.tile-2 .tile-inner {
background: #eee4da; background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-4 { .tile.tile-4 .tile-inner {
background: #ede0c8; background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-8 { .tile.tile-8 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f2b179; } background: #f2b179; }
.tile.tile-16 { .tile.tile-16 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f59563; } background: #f59563; }
.tile.tile-32 { .tile.tile-32 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f67c5f; } background: #f67c5f; }
.tile.tile-64 { .tile.tile-64 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f65e3b; } background: #f65e3b; }
.tile.tile-128 { .tile.tile-128 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edcf72; background: #edcf72;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-128 { .tile.tile-128 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-256 { .tile.tile-256 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edcc61; background: #edcc61;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-256 { .tile.tile-256 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-512 { .tile.tile-512 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edc850; background: #edc850;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-512 { .tile.tile-512 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-1024 { .tile.tile-1024 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edc53f; background: #edc53f;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-1024 { .tile.tile-1024 .tile-inner {
font-size: 15px; } } font-size: 15px; } }
.tile.tile-2048 { .tile.tile-2048 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edc22e; background: #edc22e;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
font-size: 35px; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
.tile.tile-2048 { .tile.tile-2048 .tile-inner {
font-size: 15px; } } font-size: 15px; } }
  .tile.tile-super .tile-inner {
  color: #f9f6f2;
  background: #3c3a32;
  font-size: 30px; }
  @media screen and (max-width: 520px) {
  .tile.tile-super .tile-inner {
  font-size: 10px; } }
   
@-webkit-keyframes appear { @-webkit-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
  transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
  transform: scale(1); } }
   
@-moz-keyframes appear { @-moz-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
  transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
  transform: scale(1); } }
   
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
  transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
  transform: scale(1); } }
.tile-new {  
  .tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms; -webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms; -moz-animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: both; animation: appear 200ms ease 100ms;
-moz-animation-fill-mode: both; } -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }
   
@-webkit-keyframes pop { @-webkit-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
  transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2);
  transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
  transform: scale(1); } }
   
@-moz-keyframes pop { @-moz-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
  transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2);
  transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
  transform: scale(1); } }
   
@keyframes pop { @keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
  transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2);
  transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
  transform: scale(1); } }
.tile-merged {  
  .tile-merged .tile-inner {
z-index: 20; z-index: 20;
-webkit-animation: pop 200ms ease 100ms; -webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms; -moz-animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: both; animation: pop 200ms ease 100ms;
-moz-animation-fill-mode: both; } -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }
   
.game-intro { .game-intro {
margin-bottom: 0; } margin-bottom: 0; }
   
.game-explanation { .game-explanation {
margin-top: 50px; } margin-top: 50px; }
   
@media screen and (max-width: 480px) { @media screen and (max-width: 520px) {
html, body { html, body {
font-size: 15px; } font-size: 15px; }
   
body { body {
margin: 20px 0; margin: 20px 0;
padding: 0 20px; } padding: 0 20px; }
   
h1.title { h1.title {
font-size: 27px; font-size: 27px;
margin-top: 15px; } margin-top: 15px; }
   
.container { .container {
width: 280px; width: 280px;
margin: 0 auto; } margin: 0 auto; }
   
.score-container, .best-container { .score-container, .best-container {
margin-top: 0; margin-top: 0;
padding: 15px 10px; padding: 15px 10px;
min-width: 40px; } min-width: 40px; }
   
.heading { .heading {
margin-bottom: 10px; } margin-bottom: 10px; }
   
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: 10px; padding: 10px;
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 280px; width: 280px;
height: 280px; height: 280px;
  -ms-touch-action: none;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.game-container .game-message { .game-container .game-message {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(238, 228, 218, 0.5); background: rgba(238, 228, 218, 0.5);
z-index: 100; z-index: 100;
text-align: center; text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
  animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both;
  animation-fill-mode: both; }
.game-container .game-message p { .game-container .game-message p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
margin-top: 222px; } margin-top: 222px; }
.game-container .game-message .lower { .game-container .game-message .lower {
display: block; display: block;
margin-top: 59px; } margin-top: 59px; }
.game-container .game-message a { .game-container .game-message a {
display: inline-block; display: inline-block;
background: #8f7a66; background: #8f7a66;
border-radius: 3px; border-radius: 3px;
padding: 0 20px; padding: 0 20px;
text-decoration: none; text-decoration: none;
color: #f9f6f2; color: #f9f6f2;
height: 40px; height: 40px;
line-height: 42px; line-height: 42px;
margin-left: 9px; } margin-left: 9px; }
  .game-container .game-message a.keep-playing-button {
  display: none; }
.game-container .game-message.game-won { .game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5); background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; } color: #f9f6f2; }
  .game-container .game-message.game-won a.keep-playing-button {
  display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over { .game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; } display: block; }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
   
.grid-row { .grid-row {
margin-bottom: 10px; } margin-bottom: 10px; }
.grid-row:last-child { .grid-row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.grid-row:after { .grid-row:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
.grid-cell { .grid-cell {
width: 57.5px; width: 57.5px;
height: 57.5px; height: 57.5px;
margin-right: 10px; margin-right: 10px;
float: left; float: left;
border-radius: 3px; border-radius: 3px;
background: rgba(238, 228, 218, 0.35); } background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { .grid-cell:last-child {
margin-right: 0; } margin-right: 0; }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
   
.tile { .tile, .tile .tile-inner {
width: 57.5px; width: 58px;
height: 57.5px; height: 58px;
line-height: 67.5px; } line-height: 67.5px; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; -webkit-transform: translate(0px, 0px);
left: 0px; -moz-transform: translate(0px, 0px);
top: 0px; } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
position: absolute; -webkit-transform: translate(0px, 67px);
left: 0px; -moz-transform: translate(0px, 67px);
top: 68px; } transform: translate(0px, 67px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
position: absolute; -webkit-transform: translate(0px, 135px);
left: 0px; -moz-transform: translate(0px, 135px);
top: 135px; } transform: translate(0px, 135px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
position: absolute; -webkit-transform: translate(0px, 202px);
left: 0px; -moz-transform: translate(0px, 202px);
top: 203px; } transform: translate(0px, 202px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
position: absolute; -webkit-transform: translate(67px, 0px);
left: 68px; -moz-transform: translate(67px, 0px);
top: 0px; } transform: translate(67px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
position: absolute; -webkit-transform: translate(67px, 67px);
left: 68px; -moz-transform: translate(67px, 67px);
top: 68px; } transform: translate(67px, 67px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
position: absolute; -webkit-transform: translate(67px, 135px);
left: 68px; -moz-transform: translate(67px, 135px);
top: 135px; } transform: translate(67px, 135px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
position: absolute; -webkit-transform: translate(67px, 202px);
left: 68px; -moz-transform: translate(67px, 202px);
top: 203px; } transform: translate(67px, 202px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
position: absolute; -webkit-transform: translate(135px, 0px);
left: 135px; -moz-transform: translate(135px, 0px);
top: 0px; } transform: translate(135px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
position: absolute; -webkit-transform: translate(135px, 67px);
left: 135px; -moz-transform: translate(135px, 67px);
top: 68px; } transform: translate(135px, 67px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
position: absolute; -webkit-transform: translate(135px, 135px);
left: 135px; -moz-transform: translate(135px, 135px);
top: 135px; } transform: translate(135px, 135px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
position: absolute; -webkit-transform: translate(135px, 202px);
left: 135px; -moz-transform: translate(135px, 202px);
top: 203px; } transform: translate(135px, 202px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
position: absolute; -webkit-transform: translate(202px, 0px);
left: 203px; -moz-transform: translate(202px, 0px);
top: 0px; } transform: translate(202px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
position: absolute; -webkit-transform: translate(202px, 67px);
left: 203px; -moz-transform: translate(202px, 67px);
top: 68px; } transform: translate(202px, 67px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
position: absolute; -webkit-transform: translate(202px, 135px);
left: 203px; -moz-transform: translate(202px, 135px);
top: 135px; } transform: translate(202px, 135px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
position: absolute; -webkit-transform: translate(202px, 202px);
left: 203px; -moz-transform: translate(202px, 202px);
top: 203px; } transform: translate(202px, 202px); }
   
.game-container { .game-container {
margin-top: 20px; } margin-top: 20px; }
   
.tile { .tile .tile-inner {
font-size: 35px; } font-size: 35px; }
   
.game-message p { .game-message p {
font-size: 30px !important; font-size: 30px !important;
height: 30px !important; height: 30px !important;
line-height: 30px !important; line-height: 30px !important;
margin-top: 90px !important; } margin-top: 90px !important; }
.game-message .lower { .game-message .lower {
margin-top: 30px !important; } } margin-top: 30px !important; } }
   
@import "helpers"; @import "helpers";
@import "fonts/clear-sans.css"; @import "fonts/clear-sans.css";
   
$field-width: 500px; $field-width: 500px;
$grid-spacing: 15px; $grid-spacing: 15px;
$grid-row-cells: 4; $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells; $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px; $tile-border-radius: 3px;
   
  $mobile-threshold: $field-width + 20px;
   
$text-color: #776E65; $text-color: #776E65;
$bright-text-color: #f9f6f2; $bright-text-color: #f9f6f2;
   
$tile-color: #eee4da; $tile-color: #eee4da;
$tile-gold-color: #edc22e; $tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%); $tile-gold-glow-color: lighten($tile-gold-color, 15%);
   
$game-container-background: #bbada0; $game-container-background: #bbada0;
   
$transition-speed: 100ms; $transition-speed: 100ms;
   
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
   
background: #faf8ef; background: #faf8ef;
color: $text-color; color: $text-color;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; font-size: 18px;
} }
   
body { body {
margin: 80px 0; margin: 80px 0;
} }
   
.heading:after { .heading:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
   
h1.title { h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: block; display: block;
float: left; float: left;
} }
   
@include keyframes(move-up) { @include keyframes(move-up) {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; opacity: 1;
} }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; opacity: 0;
} }
} }
   
.scores-container { .scores-container {
float: right; float: right;
text-align: right; text-align: right;
} }
   
.score-container, .best-container { .score-container, .best-container {
$height: 25px; $height: 25px;
   
position: relative; position: relative;
display: inline-block; display: inline-block;
background: $game-container-background; background: $game-container-background;
padding: 15px 25px; padding: 15px 25px;
font-size: $height; font-size: $height;
height: $height; height: $height;
line-height: $height + 22px; line-height: $height + 22px;
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
color: white; color: white;
margin-top: 8px; margin-top: 8px;
text-align: center; text-align: center;
   
&:after { &:after {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 10px; top: 10px;
left: 0; left: 0;
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
text-align: center; text-align: center;
color: $tile-color; color: $tile-color;
} }
   
.score-addition { .score-addition {
position: absolute; position: absolute;
right: 30px; right: 30px;
color: red; color: red;
font-size: $height; font-size: $height;
line-height: $height; line-height: $height;
font-weight: bold; font-weight: bold;
color: rgba($text-color, .9); color: rgba($text-color, .9);
z-index: 100; z-index: 100;
@include animation(move-up 600ms ease-in); @include animation(move-up 600ms ease-in);
@include animation-fill-mode(both); @include animation-fill-mode(both);
} }
} }
   
.score-container:after { .score-container:after {
content: "Score"; content: "Score";
} }
   
.best-container:after { .best-container:after {
content: "Best" content: "Best"
} }
   
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.65; line-height: 1.65;
} }
   
a { a {
color: $text-color; color: $text-color;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
   
strong { strong {
&.important { &.important {
text-transform: uppercase; text-transform: uppercase;
} }
} }
   
hr { hr {
border: none; border: none;
border-bottom: 1px solid lighten($text-color, 40%); border-bottom: 1px solid lighten($text-color, 40%);
margin-top: 20px; margin-top: 20px;
margin-bottom: 30px; margin-bottom: 30px;
} }
   
.container { .container {
width: $field-width; width: $field-width;
margin: 0 auto; margin: 0 auto;
} }
   
@include keyframes(fade-in) { @include keyframes(fade-in) {
0% { 0% {
opacity: 0; opacity: 0;
} }
   
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
   
// Styles for buttons // Styles for buttons
@mixin button { @mixin button {
display: inline-block; display: inline-block;
background: darken($game-container-background, 20%); background: darken($game-container-background, 20%);
border-radius: 3px; border-radius: 3px;
padding: 0 20px; padding: 0 20px;
text-decoration: none; text-decoration: none;
color: $bright-text-color; color: $bright-text-color;
height: 40px; height: 40px;
line-height: 42px; line-height: 42px;
} }
   
// Game field mixin used to render CSS at different width // Game field mixin used to render CSS at different width
@mixin game-field { @mixin game-field {
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: $grid-spacing; padding: $grid-spacing;
   
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
   
background: $game-container-background; background: $game-container-background;
border-radius: $tile-border-radius * 2; border-radius: $tile-border-radius * 2;
width: $field-width; width: $field-width;
height: $field-width; height: $field-width;
  -ms-touch-action: none;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
   
.game-message { .game-message {
display: none; display: none;
   
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba($tile-color, .5); background: rgba($tile-color, .5);
z-index: 100; z-index: 100;
   
text-align: center; text-align: center;
   
p { p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
margin-top: 222px; margin-top: 222px;
// height: $field-width; // height: $field-width;
// line-height: $field-width; // line-height: $field-width;
} }
   
.lower { .lower {
display: block; display: block;
margin-top: 59px; margin-top: 59px;
} }
   
a { a {
@include button; @include button;
margin-left: 9px; margin-left: 9px;
// margin-top: 59px; // margin-top: 59px;
   
  &.keep-playing-button {
  display: none;
  }
} }
   
@include animation(fade-in 800ms ease $transition-speed * 12); @include animation(fade-in 800ms ease $transition-speed * 12);
@include animation-fill-mode(both); @include animation-fill-mode(both);
   
&.game-won { &.game-won {
background: rgba($tile-gold-color, .5); background: rgba($tile-gold-color, .5);
color: $bright-text-color; color: $bright-text-color;
   
  a.keep-playing-button {
  display: inline-block;
  }
} }
   
&.game-won, &.game-over { &.game-won, &.game-over {
display: block; display: block;
} }
} }
} }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
   
.grid-row { .grid-row {
margin-bottom: $grid-spacing; margin-bottom: $grid-spacing;
   
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
   
&:after { &:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
} }
   
.grid-cell { .grid-cell {
width: $tile-size; width: $tile-size;
height: $tile-size; height: $tile-size;
margin-right: $grid-spacing; margin-right: $grid-spacing;
float: left; float: left;
   
border-radius: $tile-border-radius; border-radius: $tile-border-radius;
   
background: rgba($tile-color, .35); background: rgba($tile-color, .35);
   
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
   
.tile { .tile {
width: $tile-size; &, .tile-inner {
height: $tile-size; width: ceil($tile-size);
line-height: $tile-size + 10px; height: ceil($tile-size);
  line-height: $tile-size + 10px;
  }
   
// Build position classes // Build position classes
@for $x from 1 through $grid-row-cells { @for $x from 1 through $grid-row-cells {
@for $y from 1 through $grid-row-cells { @for $y from 1 through $grid-row-cells {
&.tile-position-#{$x}-#{$y} { &.tile-position-#{$x}-#{$y} {
position: absolute; $xPos: floor(($tile-size + $grid-spacing) * ($x - 1));
left: round(($tile-size + $grid-spacing) * ($x - 1)); $yPos: floor(($tile-size + $grid-spacing) * ($y - 1));
top: round(($tile-size + $grid-spacing) * ($y - 1)); @include transform(translate($xPos, $yPos));
} }
} }
} }
} }
} }
   
// End of game-field mixin // End of game-field mixin
@include game-field; @include game-field;
   
.tile { .tile {
border-radius: $tile-border-radius; position: absolute; // Makes transforms relative to the top-left corner
   
background: $tile-color; .tile-inner {
text-align: center; border-radius: $tile-border-radius;
font-weight: bold;  
z-index: 10; background: $tile-color;
  text-align: center;
font-size: 55px; font-weight: bold;
  z-index: 10;
   
  font-size: 55px;
  }
   
  // Movement transition
@include transition($transition-speed ease-in-out); @include transition($transition-speed ease-in-out);
@include transition-property(top, left); -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
   
$base: 2; $base: 2;
$exponent: 1; $exponent: 1;
$limit: 11; $limit: 11;
   
// Colors for all 11 states, false = no special color // Colors for all 11 states, false = no special color
$special-colors: false false, // 2 $special-colors: false false, // 2
false false, // 4 false false, // 4
#f78e48 true, // 8 #f78e48 true, // 8
#fc5e2e true, // 16 #fc5e2e true, // 16
#ff3333 true, // 32 #ff3333 true, // 32
#ff0000 true, // 64 #ff0000 true, // 64
false true, // 128 false true, // 128
false true, // 256 false true, // 256
false true, // 512 false true, // 512
false true, // 1024 false true, // 1024
false true; // 2048 false true; // 2048
   
// Build tile colors // Build tile colors
@while $exponent <= $limit { @while $exponent <= $limit {
$power: pow($base, $exponent); $power: pow($base, $exponent);
   
&.tile-#{$power} { &.tile-#{$power} .tile-inner {
// Calculate base background color // Calculate base background color
$gold-percent: ($exponent - 1) / ($limit - 1) * 100; $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
$mixed-background: mix($tile-gold-color, $tile-color, $gold-percent); $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);
   
$nth-color: nth($special-colors, $exponent); $nth-color: nth($special-colors, $exponent);
   
$special-background: nth($nth-color, 1); $special-background: nth($nth-color, 1);
$bright-color: nth($nth-color, 2); $bright-color: nth($nth-color, 2);
   
@if $special-background { @if $special-background {
$mixed-background: mix($special-background, $mixed-background, 55%); $mixed-background: mix($special-background, $mixed-background, 55%);
} }
   
@if $bright-color { @if $bright-color {
color: $bright-text-color; color: $bright-text-color;
} }
   
// Set background // Set background
background: $mixed-background; background: $mixed-background;
   
// Add glow // Add glow
$glow-opacity: max($exponent - 4, 0) / ($limit - 4); $glow-opacity: max($exponent - 4, 0) / ($limit - 4);
   
@if not $special-background { @if not $special-background {
box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8), box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8),
inset 0 0 0 1px rgba(white, $glow-opacity / 3); inset 0 0 0 1px rgba(white, $glow-opacity / 3);
} }
   
// Adjust font size for bigger numbers // Adjust font size for bigger numbers
@if $power >= 100 and $power < 1000 { @if $power >= 100 and $power < 1000 {
font-size: 45px; font-size: 45px;
   
// Media queries placed here to avoid carrying over the rest of the logic // Media queries placed here to avoid carrying over the rest of the logic
@include smaller(480px) { @include smaller($mobile-threshold) {
font-size: 25px; font-size: 25px;
} }
} @else if $power >= 1000 { } @else if $power >= 1000 {
font-size: 35px; font-size: 35px;
   
@include smaller(480px) { @include smaller($mobile-threshold) {
font-size: 15px; font-size: 15px;
} }
} }
} }
   
$exponent: $exponent + 1; $exponent: $exponent + 1;
  }
   
  // Super tiles (above 2048)
  &.tile-super .tile-inner {
  color: $bright-text-color;
  background: mix(#333, $tile-gold-color, 95%);
   
  font-size: 30px;
   
  @include smaller($mobile-threshold) {
  font-size: 10px;
  }
} }
} }
   
@include keyframes(appear) { @include keyframes(appear) {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); @include transform(scale(0));
-moz-transform: scale(0);  
} }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); @include transform(scale(1));
-moz-transform: scale(1); }
} }
}  
  .tile-new .tile-inner {
.tile-new {  
@include animation(appear 200ms ease $transition-speed); @include animation(appear 200ms ease $transition-speed);
@include animation-fill-mode(both); @include animation-fill-mode(backwards);
} }
   
@include keyframes(pop) { @include keyframes(pop) {
0% { 0% {
-webkit-transform: scale(0); @include transform(scale(0));
-moz-transform: scale(0);  
} }
   
50% { 50% {
-webkit-transform: scale(1.2); @include transform(scale(1.2));
-moz-transform: scale(1.2);  
} }
   
100% { 100% {
-webkit-transform: scale(1); @include transform(scale(1));
-moz-transform: scale(1); }
} }
}  
  .tile-merged .tile-inner {
.tile-merged {  
z-index: 20; z-index: 20;
@include animation(pop 200ms ease $transition-speed); @include animation(pop 200ms ease $transition-speed);
@include animation-fill-mode(both); @include animation-fill-mode(backwards);
} }
   
.game-intro { .game-intro {
margin-bottom: 0; margin-bottom: 0;
} }
   
.game-explanation { .game-explanation {
margin-top: 50px; margin-top: 50px;
} }
   
@include smaller(480px) { @include smaller($mobile-threshold) {
// Redefine variables for smaller screens // Redefine variables for smaller screens
$field-width: 280px; $field-width: 280px;
$grid-spacing: 10px; $grid-spacing: 10px;
$grid-row-cells: 4; $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells; $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px; $tile-border-radius: 3px;
   
html, body { html, body {
font-size: 15px; font-size: 15px;
} }
   
body { body {
margin: 20px 0; margin: 20px 0;
padding: 0 20px; padding: 0 20px;
} }
   
h1.title { h1.title {
font-size: 27px; font-size: 27px;
margin-top: 15px; margin-top: 15px;
} }
   
.container { .container {
width: $field-width; width: $field-width;
margin: 0 auto; margin: 0 auto;
} }
   
// .scores-container {  
// float: left;  
// clear: left;  
// }  
   
.score-container, .best-container { .score-container, .best-container {
margin-top: 0; margin-top: 0;
padding: 15px 10px; padding: 15px 10px;
min-width: 40px; min-width: 40px;
} }
   
.heading { .heading {
margin-bottom: 10px; margin-bottom: 10px;
} }
   
// Render the game field at the right width // Render the game field at the right width
@include game-field; @include game-field;
   
.game-container { .game-container {
margin-top: 20px; margin-top: 20px;
} }
   
// Rest of the font-size adjustments in the tile class // Rest of the font-size adjustments in the tile class
.tile { .tile .tile-inner {
font-size: 35px; font-size: 35px;
} }
   
.game-message { .game-message {
p { p {
font-size: 30px !important; font-size: 30px !important;
height: 30px !important; height: 30px !important;
line-height: 30px !important; line-height: 30px !important;
margin-top: 90px !important; margin-top: 90px !important;
} }
   
.lower { .lower {
margin-top: 30px !important; margin-top: 30px !important;
} }
} }
} }
   
comments