+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sources/2048frama/js/animframe_polyfill.js b/sources/2048frama/js/animframe_polyfill.js
new file mode 100644
index 0000000..c45a13e
--- /dev/null
+++ b/sources/2048frama/js/animframe_polyfill.js
@@ -0,0 +1,26 @@
+(function() {
+ var lastTime = 0;
+ var vendors = ['webkit', 'moz'];
+ for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+ window.cancelAnimationFrame =
+ window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+ }
+
+ if (!window.requestAnimationFrame) {
+ window.requestAnimationFrame = function(callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ }
+
+ if (!window.cancelAnimationFrame) {
+ window.cancelAnimationFrame = function(id) {
+ clearTimeout(id);
+ };
+ }
+}());
diff --git a/sources/2048frama/js/application.js b/sources/2048frama/js/application.js
new file mode 100644
index 0000000..a4d310a
--- /dev/null
+++ b/sources/2048frama/js/application.js
@@ -0,0 +1,4 @@
+// Wait till the browser is ready to render the game (avoids glitches)
+window.requestAnimationFrame(function () {
+ new GameManager(4, KeyboardInputManager, HTMLActuator, LocalScoreManager);
+});
diff --git a/sources/2048frama/js/game_manager.js b/sources/2048frama/js/game_manager.js
new file mode 100644
index 0000000..b36aea3
--- /dev/null
+++ b/sources/2048frama/js/game_manager.js
@@ -0,0 +1,245 @@
+function GameManager(size, InputManager, Actuator, ScoreManager) {
+ this.size = size; // Size of the grid
+ this.inputManager = new InputManager;
+ this.scoreManager = new ScoreManager;
+ this.actuator = new Actuator;
+
+ this.startTiles = 2;
+
+ this.inputManager.on("move", this.move.bind(this));
+ this.inputManager.on("restart", this.restart.bind(this));
+ this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
+
+ this.setup();
+}
+
+// Restart the game
+GameManager.prototype.restart = function () {
+ this.actuator.continue();
+ 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
+GameManager.prototype.setup = function () {
+ this.grid = new Grid(this.size);
+
+ this.score = 0;
+ this.over = false;
+ this.won = false;
+ this.keepPlaying = false;
+
+ // Add the initial tiles
+ this.addStartTiles();
+
+ // Update the actuator
+ this.actuate();
+};
+
+// Set up the initial tiles to start the game with
+GameManager.prototype.addStartTiles = function () {
+ for (var i = 0; i < this.startTiles; i++) {
+ this.addRandomTile();
+ }
+};
+
+// Adds a tile in a random position
+GameManager.prototype.addRandomTile = function () {
+ if (this.grid.cellsAvailable()) {
+ var value = Math.random() < 0.9 ? 2 : 4;
+ var tile = new Tile(this.grid.randomAvailableCell(), value);
+
+ this.grid.insertTile(tile);
+ }
+};
+
+// Sends the updated grid to the actuator
+GameManager.prototype.actuate = function () {
+ if (this.scoreManager.get() < this.score) {
+ this.scoreManager.set(this.score);
+ }
+
+ this.actuator.actuate(this.grid, {
+ score: this.score,
+ over: this.over,
+ won: this.won,
+ bestScore: this.scoreManager.get(),
+ terminated: this.isGameTerminated()
+ });
+
+};
+
+// Save all tile positions and remove merger info
+GameManager.prototype.prepareTiles = function () {
+ this.grid.eachCell(function (x, y, tile) {
+ if (tile) {
+ tile.mergedFrom = null;
+ tile.savePosition();
+ }
+ });
+};
+
+// Move a tile and its representation
+GameManager.prototype.moveTile = function (tile, cell) {
+ this.grid.cells[tile.x][tile.y] = null;
+ this.grid.cells[cell.x][cell.y] = tile;
+ tile.updatePosition(cell);
+};
+
+// Move tiles on the grid in the specified direction
+GameManager.prototype.move = function (direction) {
+ // 0: up, 1: right, 2:down, 3: left
+ var self = this;
+
+ if (this.isGameTerminated()) return; // Don't do anything if the game's over
+
+ var cell, tile;
+
+ var vector = this.getVector(direction);
+ var traversals = this.buildTraversals(vector);
+ var moved = false;
+
+ // Save the current tile positions and remove merger information
+ this.prepareTiles();
+
+ // Traverse the grid in the right direction and move tiles
+ traversals.x.forEach(function (x) {
+ traversals.y.forEach(function (y) {
+ cell = { x: x, y: y };
+ tile = self.grid.cellContent(cell);
+
+ if (tile) {
+ var positions = self.findFarthestPosition(cell, vector);
+ var next = self.grid.cellContent(positions.next);
+
+ // Only one merger per row traversal?
+ if (next && next.value === tile.value && !next.mergedFrom) {
+ var merged = new Tile(positions.next, tile.value * 2);
+ merged.mergedFrom = [tile, next];
+
+ self.grid.insertTile(merged);
+ self.grid.removeTile(tile);
+
+ // Converge the two tiles' positions
+ tile.updatePosition(positions.next);
+
+ // Update the score
+ self.score += merged.value;
+
+ // The mighty 2048 tile
+ if (merged.value === 2048) self.won = true;
+ } else {
+ self.moveTile(tile, positions.farthest);
+ }
+
+ if (!self.positionsEqual(cell, tile)) {
+ moved = true; // The tile moved from its original cell!
+ }
+ }
+ });
+ });
+
+ if (moved) {
+ this.addRandomTile();
+
+ if (!this.movesAvailable()) {
+ this.over = true; // Game over!
+ }
+
+ this.actuate();
+ }
+};
+
+// Get the vector representing the chosen direction
+GameManager.prototype.getVector = function (direction) {
+ // Vectors representing tile movement
+ var map = {
+ 0: { x: 0, y: -1 }, // up
+ 1: { x: 1, y: 0 }, // right
+ 2: { x: 0, y: 1 }, // down
+ 3: { x: -1, y: 0 } // left
+ };
+
+ return map[direction];
+};
+
+// Build a list of positions to traverse in the right order
+GameManager.prototype.buildTraversals = function (vector) {
+ var traversals = { x: [], y: [] };
+
+ for (var pos = 0; pos < this.size; pos++) {
+ traversals.x.push(pos);
+ traversals.y.push(pos);
+ }
+
+ // Always traverse from the farthest cell in the chosen direction
+ if (vector.x === 1) traversals.x = traversals.x.reverse();
+ if (vector.y === 1) traversals.y = traversals.y.reverse();
+
+ return traversals;
+};
+
+GameManager.prototype.findFarthestPosition = function (cell, vector) {
+ var previous;
+
+ // Progress towards the vector direction until an obstacle is found
+ do {
+ previous = cell;
+ cell = { x: previous.x + vector.x, y: previous.y + vector.y };
+ } while (this.grid.withinBounds(cell) &&
+ this.grid.cellAvailable(cell));
+
+ return {
+ farthest: previous,
+ next: cell // Used to check if a merge is required
+ };
+};
+
+GameManager.prototype.movesAvailable = function () {
+ return this.grid.cellsAvailable() || this.tileMatchesAvailable();
+};
+
+// Check for available matches between tiles (more expensive check)
+GameManager.prototype.tileMatchesAvailable = function () {
+ var self = this;
+
+ var tile;
+
+ for (var x = 0; x < this.size; x++) {
+ for (var y = 0; y < this.size; y++) {
+ tile = this.grid.cellContent({ x: x, y: y });
+
+ if (tile) {
+ for (var direction = 0; direction < 4; direction++) {
+ var vector = self.getVector(direction);
+ var cell = { x: x + vector.x, y: y + vector.y };
+
+ var other = self.grid.cellContent(cell);
+
+ if (other && other.value === tile.value) {
+ return true; // These two tiles can be merged
+ }
+ }
+ }
+ }
+ }
+
+ return false;
+};
+
+GameManager.prototype.positionsEqual = function (first, second) {
+ return first.x === second.x && first.y === second.y;
+};
diff --git a/sources/2048frama/js/grid.js b/sources/2048frama/js/grid.js
new file mode 100644
index 0000000..05fe057
--- /dev/null
+++ b/sources/2048frama/js/grid.js
@@ -0,0 +1,84 @@
+function Grid(size) {
+ this.size = size;
+
+ this.cells = [];
+
+ this.build();
+}
+
+// Build a grid of the specified size
+Grid.prototype.build = function () {
+ for (var x = 0; x < this.size; x++) {
+ var row = this.cells[x] = [];
+
+ for (var y = 0; y < this.size; y++) {
+ row.push(null);
+ }
+ }
+};
+
+// Find the first available random position
+Grid.prototype.randomAvailableCell = function () {
+ var cells = this.availableCells();
+
+ if (cells.length) {
+ return cells[Math.floor(Math.random() * cells.length)];
+ }
+};
+
+Grid.prototype.availableCells = function () {
+ var cells = [];
+
+ this.eachCell(function (x, y, tile) {
+ if (!tile) {
+ cells.push({ x: x, y: y });
+ }
+ });
+
+ return cells;
+};
+
+// Call callback for every cell
+Grid.prototype.eachCell = function (callback) {
+ for (var x = 0; x < this.size; x++) {
+ for (var y = 0; y < this.size; y++) {
+ callback(x, y, this.cells[x][y]);
+ }
+ }
+};
+
+// Check if there are any cells available
+Grid.prototype.cellsAvailable = function () {
+ return !!this.availableCells().length;
+};
+
+// Check if the specified cell is taken
+Grid.prototype.cellAvailable = function (cell) {
+ return !this.cellOccupied(cell);
+};
+
+Grid.prototype.cellOccupied = function (cell) {
+ return !!this.cellContent(cell);
+};
+
+Grid.prototype.cellContent = function (cell) {
+ if (this.withinBounds(cell)) {
+ return this.cells[cell.x][cell.y];
+ } else {
+ return null;
+ }
+};
+
+// Inserts a tile at its position
+Grid.prototype.insertTile = function (tile) {
+ this.cells[tile.x][tile.y] = tile;
+};
+
+Grid.prototype.removeTile = function (tile) {
+ this.cells[tile.x][tile.y] = null;
+};
+
+Grid.prototype.withinBounds = function (position) {
+ return position.x >= 0 && position.x < this.size &&
+ position.y >= 0 && position.y < this.size;
+};
diff --git a/sources/2048frama/js/html_actuator.js b/sources/2048frama/js/html_actuator.js
new file mode 100644
index 0000000..7d20907
--- /dev/null
+++ b/sources/2048frama/js/html_actuator.js
@@ -0,0 +1,139 @@
+function HTMLActuator() {
+ this.tileContainer = document.querySelector(".tile-container");
+ this.scoreContainer = document.querySelector(".score-container");
+ this.bestContainer = document.querySelector(".best-container");
+ this.messageContainer = document.querySelector(".game-message");
+
+ this.score = 0;
+}
+
+HTMLActuator.prototype.actuate = function (grid, metadata) {
+ var self = this;
+
+ window.requestAnimationFrame(function () {
+ self.clearContainer(self.tileContainer);
+
+ grid.cells.forEach(function (column) {
+ column.forEach(function (cell) {
+ if (cell) {
+ self.addTile(cell);
+ }
+ });
+ });
+
+ self.updateScore(metadata.score);
+ self.updateBestScore(metadata.bestScore);
+
+ if (metadata.terminated) {
+ if (metadata.over) {
+ self.message(false); // You lose
+ } else if (metadata.won) {
+ self.message(true); // You win!
+ }
+ }
+
+ });
+};
+
+// Continues the game (both restart and keep playing)
+HTMLActuator.prototype.continue = function () {
+ this.clearMessage();
+};
+
+HTMLActuator.prototype.clearContainer = function (container) {
+ while (container.firstChild) {
+ container.removeChild(container.firstChild);
+ }
+};
+
+HTMLActuator.prototype.addTile = function (tile) {
+ var self = this;
+
+ var wrapper = document.createElement("div");
+ var inner = document.createElement("div");
+ var position = tile.previousPosition || { x: tile.x, y: tile.y };
+ var positionClass = this.positionClass(position);
+
+ // We can't use classlist because it somehow glitches when replacing classes
+ var classes = ["tile", "tile-" + tile.value, positionClass];
+
+ if (tile.value > 2048) classes.push("tile-super");
+
+ this.applyClasses(wrapper, classes);
+
+ inner.classList.add("tile-inner");
+ inner.textContent = tile.value;
+
+ if (tile.previousPosition) {
+ // Make sure that the tile gets rendered in the previous position first
+ window.requestAnimationFrame(function () {
+ classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+ self.applyClasses(wrapper, classes); // Update the position
+ });
+ } else if (tile.mergedFrom) {
+ classes.push("tile-merged");
+ this.applyClasses(wrapper, classes);
+
+ // Render the tiles that merged
+ tile.mergedFrom.forEach(function (merged) {
+ self.addTile(merged);
+ });
+ } else {
+ classes.push("tile-new");
+ this.applyClasses(wrapper, classes);
+ }
+
+ // Add the inner part of the tile to the wrapper
+ wrapper.appendChild(inner);
+
+ // Put the tile on the board
+ this.tileContainer.appendChild(wrapper);
+};
+
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+ element.setAttribute("class", classes.join(" "));
+};
+
+HTMLActuator.prototype.normalizePosition = function (position) {
+ return { x: position.x + 1, y: position.y + 1 };
+};
+
+HTMLActuator.prototype.positionClass = function (position) {
+ position = this.normalizePosition(position);
+ return "tile-position-" + position.x + "-" + position.y;
+};
+
+HTMLActuator.prototype.updateScore = function (score) {
+ this.clearContainer(this.scoreContainer);
+
+ var difference = score - this.score;
+ this.score = score;
+
+ this.scoreContainer.textContent = this.score;
+
+ if (difference > 0) {
+ var addition = document.createElement("div");
+ addition.classList.add("score-addition");
+ addition.textContent = "+" + difference;
+
+ this.scoreContainer.appendChild(addition);
+ }
+};
+
+HTMLActuator.prototype.updateBestScore = function (bestScore) {
+ this.bestContainer.textContent = bestScore;
+};
+
+HTMLActuator.prototype.message = function (won) {
+ var type = won ? "game-won" : "game-over";
+ var message = won ? "Vous avez gagné !" : "Game over !";
+
+ this.messageContainer.classList.add(type);
+ this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+};
+
+HTMLActuator.prototype.clearMessage = function () {
+ // IE only takes one value to remove at a time.
+ this.messageContainer.classList.remove("game-won");
+ this.messageContainer.classList.remove("game-over");
+};
diff --git a/sources/2048frama/js/keyboard_input_manager.js b/sources/2048frama/js/keyboard_input_manager.js
new file mode 100644
index 0000000..a29744c
--- /dev/null
+++ b/sources/2048frama/js/keyboard_input_manager.js
@@ -0,0 +1,130 @@
+function KeyboardInputManager() {
+ 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();
+}
+
+KeyboardInputManager.prototype.on = function (event, callback) {
+ if (!this.events[event]) {
+ this.events[event] = [];
+ }
+ this.events[event].push(callback);
+};
+
+KeyboardInputManager.prototype.emit = function (event, data) {
+ var callbacks = this.events[event];
+ if (callbacks) {
+ callbacks.forEach(function (callback) {
+ callback(data);
+ });
+ }
+};
+
+KeyboardInputManager.prototype.listen = function () {
+ var self = this;
+
+ var map = {
+ 38: 0, // Up
+ 39: 1, // Right
+ 40: 2, // Down
+ 37: 3, // Left
+ 75: 0, // vim keybindings
+ 76: 1,
+ 74: 2,
+ 72: 3,
+ 87: 0, // W
+ 68: 1, // D
+ 83: 2, // S
+ 65: 3 // A
+ };
+
+ document.addEventListener("keydown", function (event) {
+ var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
+ event.shiftKey;
+ var mapped = map[event.which];
+
+ if (!modifiers) {
+ if (mapped !== undefined) {
+ event.preventDefault();
+ self.emit("move", mapped);
+ }
+
+ if (event.which === 32) self.restart.bind(self)(event);
+ }
+ });
+
+ var retry = document.querySelector(".retry-button");
+ retry.addEventListener("click", 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
+ var touchStartClientX, touchStartClientY;
+ var gameContainer = document.getElementsByClassName("game-container")[0];
+
+ gameContainer.addEventListener(this.eventTouchstart, function (event) {
+ if (( !window.navigator.msPointerEnabled && event.touches.length > 1) || event.targetTouches > 1) return;
+
+ if(window.navigator.msPointerEnabled){
+ touchStartClientX = event.pageX;
+ touchStartClientY = event.pageY;
+ } else {
+ touchStartClientX = event.touches[0].clientX;
+ touchStartClientY = event.touches[0].clientY;
+ }
+
+ event.preventDefault();
+ });
+
+ gameContainer.addEventListener(this.eventTouchmove, function (event) {
+ event.preventDefault();
+ });
+
+ gameContainer.addEventListener(this.eventTouchend, function (event) {
+ if (( !window.navigator.msPointerEnabled && event.touches.length > 0) || event.targetTouches > 0) return;
+
+ 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 dy = touchEndClientY - touchStartClientY;
+ var absDy = Math.abs(dy);
+
+ if (Math.max(absDx, absDy) > 10) {
+ // (right : left) : (down : up)
+ self.emit("move", absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0));
+ }
+ });
+};
+
+KeyboardInputManager.prototype.restart = function (event) {
+ event.preventDefault();
+ this.emit("restart");
+};
+
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+ event.preventDefault();
+ this.emit("keepPlaying");
+};
diff --git a/sources/2048frama/js/local_score_manager.js b/sources/2048frama/js/local_score_manager.js
new file mode 100644
index 0000000..ec4575d
--- /dev/null
+++ b/sources/2048frama/js/local_score_manager.js
@@ -0,0 +1,48 @@
+window.fakeStorage = {
+ _data: {},
+
+ setItem: function (id, val) {
+ return this._data[id] = String(val);
+ },
+
+ getItem: function (id) {
+ return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+ },
+
+ removeItem: function (id) {
+ return delete this._data[id];
+ },
+
+ clear: function () {
+ return this._data = {};
+ }
+};
+
+function LocalScoreManager() {
+ this.key = "bestScore";
+
+ var supported = this.localStorageSupported();
+ 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 () {
+ return this.storage.getItem(this.key) || 0;
+};
+
+LocalScoreManager.prototype.set = function (score) {
+ this.storage.setItem(this.key, score);
+};
+
diff --git a/sources/2048frama/js/tile.js b/sources/2048frama/js/tile.js
new file mode 100644
index 0000000..de08333
--- /dev/null
+++ b/sources/2048frama/js/tile.js
@@ -0,0 +1,17 @@
+function Tile(position, value) {
+ this.x = position.x;
+ this.y = position.y;
+ this.value = value || 2;
+
+ this.previousPosition = null;
+ this.mergedFrom = null; // Tracks tiles that merged together
+}
+
+Tile.prototype.savePosition = function () {
+ this.previousPosition = { x: this.x, y: this.y };
+};
+
+Tile.prototype.updatePosition = function (position) {
+ this.x = position.x;
+ this.y = position.y;
+};
diff --git a/sources/2048frama/meta/apple-touch-icon.png b/sources/2048frama/meta/apple-touch-icon.png
new file mode 100644
index 0000000..3fd20f6
Binary files /dev/null and b/sources/2048frama/meta/apple-touch-icon.png differ
diff --git a/sources/2048frama/style/fonts/ClearSans-Bold-webfont.eot b/sources/2048frama/style/fonts/ClearSans-Bold-webfont.eot
new file mode 100644
index 0000000..3678ef2
Binary files /dev/null and b/sources/2048frama/style/fonts/ClearSans-Bold-webfont.eot differ
diff --git a/sources/2048frama/style/fonts/ClearSans-Bold-webfont.svg b/sources/2048frama/style/fonts/ClearSans-Bold-webfont.svg
new file mode 100644
index 0000000..aa985ae
--- /dev/null
+++ b/sources/2048frama/style/fonts/ClearSans-Bold-webfont.svg
@@ -0,0 +1,640 @@
+
+
+
\ No newline at end of file
diff --git a/sources/2048frama/style/fonts/ClearSans-Bold-webfont.woff b/sources/2048frama/style/fonts/ClearSans-Bold-webfont.woff
new file mode 100644
index 0000000..184a945
Binary files /dev/null and b/sources/2048frama/style/fonts/ClearSans-Bold-webfont.woff differ
diff --git a/sources/2048frama/style/fonts/ClearSans-Light-webfont.eot b/sources/2048frama/style/fonts/ClearSans-Light-webfont.eot
new file mode 100644
index 0000000..0dc609d
Binary files /dev/null and b/sources/2048frama/style/fonts/ClearSans-Light-webfont.eot differ
diff --git a/sources/2048frama/style/fonts/ClearSans-Light-webfont.svg b/sources/2048frama/style/fonts/ClearSans-Light-webfont.svg
new file mode 100644
index 0000000..1d5d2ec
--- /dev/null
+++ b/sources/2048frama/style/fonts/ClearSans-Light-webfont.svg
@@ -0,0 +1,670 @@
+
+
+
\ No newline at end of file
diff --git a/sources/2048frama/style/fonts/ClearSans-Light-webfont.woff b/sources/2048frama/style/fonts/ClearSans-Light-webfont.woff
new file mode 100644
index 0000000..44555e0
Binary files /dev/null and b/sources/2048frama/style/fonts/ClearSans-Light-webfont.woff differ
diff --git a/sources/2048frama/style/fonts/ClearSans-Regular-webfont.eot b/sources/2048frama/style/fonts/ClearSans-Regular-webfont.eot
new file mode 100644
index 0000000..b020e05
Binary files /dev/null and b/sources/2048frama/style/fonts/ClearSans-Regular-webfont.eot differ
diff --git a/sources/2048frama/style/fonts/ClearSans-Regular-webfont.svg b/sources/2048frama/style/fonts/ClearSans-Regular-webfont.svg
new file mode 100644
index 0000000..1e2cffd
--- /dev/null
+++ b/sources/2048frama/style/fonts/ClearSans-Regular-webfont.svg
@@ -0,0 +1,669 @@
+
+
+
\ No newline at end of file
diff --git a/sources/2048frama/style/fonts/ClearSans-Regular-webfont.woff b/sources/2048frama/style/fonts/ClearSans-Regular-webfont.woff
new file mode 100644
index 0000000..9d58858
Binary files /dev/null and b/sources/2048frama/style/fonts/ClearSans-Regular-webfont.woff differ
diff --git a/sources/2048frama/style/fonts/clear-sans.css b/sources/2048frama/style/fonts/clear-sans.css
new file mode 100644
index 0000000..de2811d
--- /dev/null
+++ b/sources/2048frama/style/fonts/clear-sans.css
@@ -0,0 +1,30 @@
+@font-face {
+ font-family: "Clear Sans";
+ src: url("ClearSans-Light-webfont.eot");
+ src: url("ClearSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
+ url("ClearSans-Light-webfont.svg#clear_sans_lightregular") format("svg"),
+ url("ClearSans-Light-webfont.woff") format("woff");
+ font-weight: 200;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Clear Sans";
+ src: url("ClearSans-Regular-webfont.eot");
+ src: url("ClearSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
+ url("ClearSans-Regular-webfont.svg#clear_sansregular") format("svg"),
+ url("ClearSans-Regular-webfont.woff") format("woff");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Clear Sans";
+ src: url("ClearSans-Bold-webfont.eot");
+ src: url("ClearSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
+ url("ClearSans-Bold-webfont.svg#clear_sansbold") format("svg"),
+ url("ClearSans-Bold-webfont.woff") format("woff");
+ font-weight: 700;
+ font-style: normal;
+}
+
diff --git a/sources/2048frama/style/helpers.scss b/sources/2048frama/style/helpers.scss
new file mode 100644
index 0000000..53b9dc1
--- /dev/null
+++ b/sources/2048frama/style/helpers.scss
@@ -0,0 +1,72 @@
+// Exponent
+// From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
+
+@function exponent($base, $exponent) {
+ // reset value
+ $value: $base;
+ // positive intergers get multiplied
+ @if $exponent > 1 {
+ @for $i from 2 through $exponent {
+ $value: $value * $base; } }
+ // negitive intergers get divided. A number divided by itself is 1
+ @if $exponent < 1 {
+ @for $i from 0 through -$exponent {
+ $value: $value / $base; } }
+ // return the last value written
+ @return $value;
+}
+
+@function pow($base, $exponent) {
+ @return exponent($base, $exponent);
+}
+
+// Transition mixins
+@mixin transition($args...) {
+ -webkit-transition: $args;
+ -moz-transition: $args;
+ transition: $args;
+}
+
+@mixin transition-property($args...) {
+ -webkit-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
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes $animation-name {
+ @content;
+ }
+ @-moz-keyframes $animation-name {
+ @content;
+ }
+ @keyframes $animation-name {
+ @content;
+ }
+}
+
+// Media queries
+@mixin smaller($width) {
+ @media screen and (max-width: $width) {
+ @content;
+ }
+}
diff --git a/sources/2048frama/style/main.css b/sources/2048frama/style/main.css
new file mode 100644
index 0000000..5bf4b55
--- /dev/null
+++ b/sources/2048frama/style/main.css
@@ -0,0 +1,716 @@
+@import url(fonts/clear-sans.css);
+html, body {
+ margin: 0;
+ padding: 0;
+ background: #faf8ef;
+ color: #776e65;
+ font-family: "Helvetica Neue", Arial, sans-serif;
+ font-size: 18px; }
+
+body {
+ margin: 80px 0; }
+
+.heading:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+h1.title {
+ font-size: 40px;
+ font-weight: bold;
+ margin: 0;
+ display: block;
+ float: left; }
+
+@-webkit-keyframes move-up {
+ 0% {
+ top: 25px;
+ opacity: 1; }
+
+ 100% {
+ top: -50px;
+ opacity: 0; } }
+
+@-moz-keyframes move-up {
+ 0% {
+ top: 25px;
+ opacity: 1; }
+
+ 100% {
+ top: -50px;
+ opacity: 0; } }
+
+@keyframes move-up {
+ 0% {
+ top: 25px;
+ opacity: 1; }
+
+ 100% {
+ top: -50px;
+ opacity: 0; } }
+
+.scores-container {
+ float: right;
+ text-align: right; }
+
+.score-container, .best-container {
+ position: relative;
+ display: inline-block;
+ background: #bbada0;
+ padding: 15px 25px;
+ font-size: 25px;
+ height: 25px;
+ line-height: 47px;
+ font-weight: bold;
+ border-radius: 3px;
+ color: white;
+ margin-top: 8px;
+ text-align: center; }
+ .score-container:after, .best-container:after {
+ position: absolute;
+ width: 100%;
+ top: 10px;
+ left: 0;
+ text-transform: uppercase;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ color: #eee4da; }
+ .score-container .score-addition, .best-container .score-addition {
+ position: absolute;
+ right: 30px;
+ color: red;
+ font-size: 25px;
+ line-height: 25px;
+ font-weight: bold;
+ color: rgba(119, 110, 101, 0.9);
+ z-index: 100;
+ -webkit-animation: move-up 600ms ease-in;
+ -moz-animation: move-up 600ms ease-in;
+ animation: move-up 600ms ease-in;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both; }
+
+.score-container:after {
+ content: "Score"; }
+
+.best-container:after {
+ content: "Record"; }
+
+p {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.65; }
+
+a {
+ color: #776e65;
+ font-weight: bold;
+ text-decoration: underline;
+ cursor: pointer; }
+
+strong.important {
+ text-transform: uppercase; }
+
+hr {
+ border: none;
+ border-bottom: 1px solid #d8d4d0;
+ margin-top: 20px;
+ margin-bottom: 30px; }
+
+.container {
+ width: 500px;
+ margin: 0 auto; }
+
+@-webkit-keyframes fade-in {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+@-moz-keyframes fade-in {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+@keyframes fade-in {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+.game-container {
+ margin-top: 40px;
+ position: relative;
+ padding: 15px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ background: #bbada0;
+ border-radius: 6px;
+ width: 500px;
+ height: 500px;
+ -ms-touch-action: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .game-container .game-message {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(238, 228, 218, 0.5);
+ z-index: 100;
+ text-align: center;
+ -webkit-animation: fade-in 800ms ease 1200ms;
+ -moz-animation: fade-in 800ms ease 1200ms;
+ animation: fade-in 800ms ease 1200ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both; }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px; }
+ .game-container .game-message .lower {
+ display: block;
+ margin-top: 59px; }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #8f7a66;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 9px; }
+ .game-container .game-message a.keep-playing-button {
+ display: none; }
+ .game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ 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 {
+ display: block; }
+
+.grid-container {
+ position: absolute;
+ z-index: 1; }
+
+.grid-row {
+ margin-bottom: 15px; }
+ .grid-row:last-child {
+ margin-bottom: 0; }
+ .grid-row:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+.grid-cell {
+ width: 106.25px;
+ height: 106.25px;
+ margin-right: 15px;
+ float: left;
+ border-radius: 3px;
+ background: rgba(238, 228, 218, 0.35); }
+ .grid-cell:last-child {
+ margin-right: 0; }
+
+.tile-container {
+ position: absolute;
+ 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 {
+ position: absolute;
+ -webkit-transition: 100ms ease-in-out;
+ -moz-transition: 100ms ease-in-out;
+ transition: 100ms ease-in-out;
+ -webkit-transition-property: -webkit-transform;
+ -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-image: url("../im/soutenir.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+ 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-inner {
+ background: #ede0c8;
+ background-image: url("../im/framamindmap.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+ 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-inner {
+ background: #bb9bbf;
+ background-image: url("../im/framadvd.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
+ .tile.tile-16 .tile-inner {
+ background: #f8a389;
+ background-image: url("../im/framazic.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
+ .tile.tile-32 .tile-inner {
+ background: #d8b74d;
+ background-image: url("../im/framatube.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.07937), inset 0 0 0 1px rgba(255, 255, 255, 0.04762); }
+ .tile.tile-64 .tile-inner {
+ background: #f0a751;
+ background-image: url("../im/framakey.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.15873), inset 0 0 0 1px rgba(255, 255, 255, 0.09524); }
+ .tile.tile-128 .tile-inner {
+ background: #7e8c87;
+ background-image: url("../im/framabook.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px; }
+ .tile.tile-256 .tile-inner {
+ background: #fbeb76;
+ background-image: url("../im/framapad.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px; }
+ .tile.tile-512 .tile-inner {
+ background: #4da66d;
+ background-image: url("../im/framablog.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px; }
+ .tile.tile-1024 .tile-inner {
+ background: #89a9d7;
+ background-image: url("../im/favicon.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px; }
+ .tile.tile-2048 .tile-inner {
+ background: #c76d5c;
+ background-image: url("../im/framasoft.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px; }
+ .tile.tile-super .tile-inner {
+ color: #f9f6f2;
+ background: #3c3a32;
+ background-image: url("../im/goldenframa.png");
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px; }
+ @media screen and (max-width: 520px) {
+ .tile.tile-super .tile-inner {
+ font-size: 10px; } }
+
+@-webkit-keyframes appear {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@-moz-keyframes appear {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@keyframes appear {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+.tile-new .tile-inner {
+ -webkit-animation: appear 200ms ease 100ms;
+ -moz-animation: appear 200ms ease 100ms;
+ animation: appear 200ms ease 100ms;
+ -webkit-animation-fill-mode: backwards;
+ -moz-animation-fill-mode: backwards;
+ animation-fill-mode: backwards; }
+
+@-webkit-keyframes pop {
+ 0% {
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@-moz-keyframes pop {
+ 0% {
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@keyframes pop {
+ 0% {
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+.tile-merged .tile-inner {
+ z-index: 20;
+ -webkit-animation: pop 200ms ease 100ms;
+ -moz-animation: pop 200ms ease 100ms;
+ animation: pop 200ms ease 100ms;
+ -webkit-animation-fill-mode: backwards;
+ -moz-animation-fill-mode: backwards;
+ animation-fill-mode: backwards; }
+
+.game-intro {
+ margin-bottom: 0; }
+
+.game-explanation {
+ margin-top: 50px; }
+
+@media screen and (max-width: 520px) {
+ html, body {
+ font-size: 15px; }
+
+ body {
+ margin: 20px 0;
+ padding: 0 20px; }
+
+ h1.title {
+ font-size: 27px;
+ margin-top: 15px; }
+
+ .container {
+ width: 280px;
+ margin: 0 auto; }
+
+ .score-container, .best-container {
+ margin-top: 0;
+ padding: 15px 10px;
+ min-width: 40px; }
+
+ .heading {
+ margin-bottom: 10px; }
+
+ .game-container {
+ margin-top: 40px;
+ position: relative;
+ padding: 10px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ background: #bbada0;
+ border-radius: 6px;
+ width: 280px;
+ height: 280px;
+ -ms-touch-action: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .game-container .game-message {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(199, 109, 92, 0.5);
+ z-index: 100;
+ text-align: center;
+ -webkit-animation: fade-in 800ms ease 1200ms;
+ -moz-animation: fade-in 800ms ease 1200ms;
+ animation: fade-in 800ms ease 1200ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both; }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px; }
+ .game-container .game-message .lower {
+ display: block;
+ margin-top: 59px; }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #8f7a66;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 9px; }
+ .game-container .game-message a.keep-playing-button {
+ display: none; }
+ .game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ 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 {
+ display: block; }
+
+ .grid-container {
+ position: absolute;
+ z-index: 1; }
+
+ .grid-row {
+ margin-bottom: 10px; }
+ .grid-row:last-child {
+ margin-bottom: 0; }
+ .grid-row:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+ .grid-cell {
+ width: 57.5px;
+ height: 57.5px;
+ margin-right: 10px;
+ float: left;
+ border-radius: 3px;
+ background: rgba(199, 109, 92, 0.35); }
+ .grid-cell:last-child {
+ margin-right: 0; }
+
+ .tile-container {
+ position: absolute;
+ z-index: 2; }
+
+ .tile, .tile .tile-inner {
+ width: 58px;
+ height: 58px;
+ line-height: 67.5px; }
+ .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, 67px);
+ -moz-transform: translate(0px, 67px);
+ transform: translate(0px, 67px); }
+ .tile.tile-position-1-3 {
+ -webkit-transform: translate(0px, 135px);
+ -moz-transform: translate(0px, 135px);
+ transform: translate(0px, 135px); }
+ .tile.tile-position-1-4 {
+ -webkit-transform: translate(0px, 202px);
+ -moz-transform: translate(0px, 202px);
+ transform: translate(0px, 202px); }
+ .tile.tile-position-2-1 {
+ -webkit-transform: translate(67px, 0px);
+ -moz-transform: translate(67px, 0px);
+ transform: translate(67px, 0px); }
+ .tile.tile-position-2-2 {
+ -webkit-transform: translate(67px, 67px);
+ -moz-transform: translate(67px, 67px);
+ transform: translate(67px, 67px); }
+ .tile.tile-position-2-3 {
+ -webkit-transform: translate(67px, 135px);
+ -moz-transform: translate(67px, 135px);
+ transform: translate(67px, 135px); }
+ .tile.tile-position-2-4 {
+ -webkit-transform: translate(67px, 202px);
+ -moz-transform: translate(67px, 202px);
+ transform: translate(67px, 202px); }
+ .tile.tile-position-3-1 {
+ -webkit-transform: translate(135px, 0px);
+ -moz-transform: translate(135px, 0px);
+ transform: translate(135px, 0px); }
+ .tile.tile-position-3-2 {
+ -webkit-transform: translate(135px, 67px);
+ -moz-transform: translate(135px, 67px);
+ transform: translate(135px, 67px); }
+ .tile.tile-position-3-3 {
+ -webkit-transform: translate(135px, 135px);
+ -moz-transform: translate(135px, 135px);
+ transform: translate(135px, 135px); }
+ .tile.tile-position-3-4 {
+ -webkit-transform: translate(135px, 202px);
+ -moz-transform: translate(135px, 202px);
+ transform: translate(135px, 202px); }
+ .tile.tile-position-4-1 {
+ -webkit-transform: translate(202px, 0px);
+ -moz-transform: translate(202px, 0px);
+ transform: translate(202px, 0px); }
+ .tile.tile-position-4-2 {
+ -webkit-transform: translate(202px, 67px);
+ -moz-transform: translate(202px, 67px);
+ transform: translate(202px, 67px); }
+ .tile.tile-position-4-3 {
+ -webkit-transform: translate(202px, 135px);
+ -moz-transform: translate(202px, 135px);
+ transform: translate(202px, 135px); }
+ .tile.tile-position-4-4 {
+ -webkit-transform: translate(202px, 202px);
+ -moz-transform: translate(202px, 202px);
+ transform: translate(202px, 202px); }
+
+ .game-container {
+ margin-top: 20px; }
+
+ .tile .tile-inner {
+ font-size: 35px; }
+
+ .game-message p {
+ font-size: 30px !important;
+ height: 30px !important;
+ line-height: 30px !important;
+ margin-top: 90px !important; }
+ .game-message .lower {
+ margin-top: 30px !important; } }
diff --git a/sources/2048frama/style/main.scss b/sources/2048frama/style/main.scss
new file mode 100644
index 0000000..3499559
--- /dev/null
+++ b/sources/2048frama/style/main.scss
@@ -0,0 +1,511 @@
+@import "helpers";
+@import "fonts/clear-sans.css";
+
+$field-width: 500px;
+$grid-spacing: 15px;
+$grid-row-cells: 4;
+$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+$tile-border-radius: 3px;
+
+$mobile-threshold: $field-width + 20px;
+
+$text-color: #776E65;
+$bright-text-color: #f9f6f2;
+
+$tile-color: #eee4da;
+$tile-gold-color: #edc22e;
+$tile-gold-glow-color: lighten($tile-gold-color, 15%);
+
+$game-container-background: #bbada0;
+
+$transition-speed: 100ms;
+
+html, body {
+ margin: 0;
+ padding: 0;
+
+ background: #faf8ef;
+ color: $text-color;
+ font-family: "Helvetica Neue", Arial, sans-serif;
+ font-size: 18px;
+}
+
+body {
+ margin: 80px 0;
+}
+
+.heading:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+h1.title {
+ font-size: 80px;
+ font-weight: bold;
+ margin: 0;
+ display: block;
+ float: left;
+}
+
+@include keyframes(move-up) {
+ 0% {
+ top: 25px;
+ opacity: 1;
+ }
+
+ 100% {
+ top: -50px;
+ opacity: 0;
+ }
+}
+
+.scores-container {
+ float: right;
+ text-align: right;
+}
+
+.score-container, .best-container {
+ $height: 25px;
+
+ position: relative;
+ display: inline-block;
+ background: $game-container-background;
+ padding: 15px 25px;
+ font-size: $height;
+ height: $height;
+ line-height: $height + 22px;
+ font-weight: bold;
+ border-radius: 3px;
+ color: white;
+ margin-top: 8px;
+ text-align: center;
+
+ &:after {
+ position: absolute;
+ width: 100%;
+ top: 10px;
+ left: 0;
+ text-transform: uppercase;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ color: $tile-color;
+ }
+
+ .score-addition {
+ position: absolute;
+ right: 30px;
+ color: red;
+ font-size: $height;
+ line-height: $height;
+ font-weight: bold;
+ color: rgba($text-color, .9);
+ z-index: 100;
+ @include animation(move-up 600ms ease-in);
+ @include animation-fill-mode(both);
+ }
+}
+
+.score-container:after {
+ content: "Score";
+}
+
+.best-container:after {
+ content: "Best"
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.65;
+}
+
+a {
+ color: $text-color;
+ font-weight: bold;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+strong {
+ &.important {
+ text-transform: uppercase;
+ }
+}
+
+hr {
+ border: none;
+ border-bottom: 1px solid lighten($text-color, 40%);
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+
+.container {
+ width: $field-width;
+ margin: 0 auto;
+}
+
+@include keyframes(fade-in) {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+// Styles for buttons
+@mixin button {
+ display: inline-block;
+ background: darken($game-container-background, 20%);
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: $bright-text-color;
+ height: 40px;
+ line-height: 42px;
+}
+
+// Game field mixin used to render CSS at different width
+@mixin game-field {
+ .game-container {
+ margin-top: 40px;
+ position: relative;
+ padding: $grid-spacing;
+
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+
+ background: $game-container-background;
+ border-radius: $tile-border-radius * 2;
+ width: $field-width;
+ height: $field-width;
+ -ms-touch-action: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ .game-message {
+ display: none;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba($tile-color, .5);
+ z-index: 100;
+
+ text-align: center;
+
+ p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px;
+ // height: $field-width;
+ // line-height: $field-width;
+ }
+
+ .lower {
+ display: block;
+ margin-top: 59px;
+ }
+
+ a {
+ @include button;
+ margin-left: 9px;
+ // margin-top: 59px;
+
+ &.keep-playing-button {
+ display: none;
+ }
+ }
+
+ @include animation(fade-in 800ms ease $transition-speed * 12);
+ @include animation-fill-mode(both);
+
+ &.game-won {
+ background: rgba($tile-gold-color, .5);
+ color: $bright-text-color;
+
+ a.keep-playing-button {
+ display: inline-block;
+ }
+ }
+
+ &.game-won, &.game-over {
+ display: block;
+ }
+ }
+ }
+
+ .grid-container {
+ position: absolute;
+ z-index: 1;
+ }
+
+ .grid-row {
+ margin-bottom: $grid-spacing;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+ }
+
+ .grid-cell {
+ width: $tile-size;
+ height: $tile-size;
+ margin-right: $grid-spacing;
+ float: left;
+
+ border-radius: $tile-border-radius;
+
+ background: rgba($tile-color, .35);
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ .tile-container {
+ position: absolute;
+ z-index: 2;
+ }
+
+ .tile {
+ &, .tile-inner {
+ width: ceil($tile-size);
+ height: ceil($tile-size);
+ line-height: $tile-size + 10px;
+ }
+
+ // Build position classes
+ @for $x from 1 through $grid-row-cells {
+ @for $y from 1 through $grid-row-cells {
+ &.tile-position-#{$x}-#{$y} {
+ $xPos: floor(($tile-size + $grid-spacing) * ($x - 1));
+ $yPos: floor(($tile-size + $grid-spacing) * ($y - 1));
+ @include transform(translate($xPos, $yPos));
+ }
+ }
+ }
+ }
+}
+
+// End of game-field mixin
+@include game-field;
+
+.tile {
+ position: absolute; // Makes transforms relative to the top-left corner
+
+ .tile-inner {
+ border-radius: $tile-border-radius;
+
+ background: $tile-color;
+ text-align: center;
+ font-weight: bold;
+ z-index: 10;
+
+ font-size: 55px;
+ }
+
+ // Movement transition
+ @include transition($transition-speed ease-in-out);
+ -webkit-transition-property: -webkit-transform;
+ -moz-transition-property: -moz-transform;
+ transition-property: transform;
+
+ $base: 2;
+ $exponent: 1;
+ $limit: 11;
+
+ // Colors for all 11 states, false = no special color
+ $special-colors: #eee4da false, // 2
+ #ede0c8 false, // 4
+ #bb9bbf false, // 8
+ #f8a389 false, // 16
+ #d8b74d false, // 32
+ #f0a751 false, // 64
+ #7e8c87 true, // 128
+ #fbeb76 true, // 256
+ #4da66d true, // 512
+ #89a9d7 true, // 1024
+ #c76d5c true; // 2048
+
+ $tile-pokemon: url('../im/weedle.png'), // 2
+ url('../im/pidgey.png'), // 4
+ url('../im/zubat.png'), // 8
+ url('../im/magikarp.png'), // 16
+ url('../im/psyduck.png'), // 32
+ url('../im/ninetales.png'), // 64
+ url('../im/snorlax.png'), // 128
+ url('../im/pikachu.png'), // 256
+ url('../im/venasaur.png'), // 512
+ url('../im/blastoise.png'), // 1024
+ url('../im/charizard.png'); // 2048
+
+ // Build tile colors
+ @while $exponent <= $limit {
+ $power: pow($base, $exponent);
+
+ &.tile-#{$power} .tile-inner {
+ // Calculate base background color
+
+ $nth-color: nth($special-colors, $exponent);
+
+ $tile-color: nth($nth-color, 1);
+ $use-shadow: nth($nth-color, 2);
+
+
+ // Set background
+ background: $tile-color;
+ background-image: nth($tile-pokemon, $exponent);
+ background-size: 80% 80%;
+ background-repeat: no-repeat;
+ background-position: center;
+ font-size: 0px;
+
+ // Add glow
+ $glow-opacity: max($exponent - 4, 0) / ($limit - 4);
+
+ @if not $use-shadow {
+ 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);
+ }
+ }
+
+ $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) {
+ 0% {
+ opacity: 0;
+ @include transform(scale(0));
+ }
+
+ 100% {
+ opacity: 1;
+ @include transform(scale(1));
+ }
+}
+
+.tile-new .tile-inner {
+ @include animation(appear 200ms ease $transition-speed);
+ @include animation-fill-mode(backwards);
+}
+
+@include keyframes(pop) {
+ 0% {
+ @include transform(scale(0));
+ }
+
+ 50% {
+ @include transform(scale(1.2));
+ }
+
+ 100% {
+ @include transform(scale(1));
+ }
+}
+
+.tile-merged .tile-inner {
+ z-index: 20;
+ @include animation(pop 200ms ease $transition-speed);
+ @include animation-fill-mode(backwards);
+}
+
+.game-intro {
+ margin-bottom: 0;
+}
+
+.game-explanation {
+ margin-top: 50px;
+}
+
+@include smaller($mobile-threshold) {
+ // Redefine variables for smaller screens
+ $field-width: 280px;
+ $grid-spacing: 10px;
+ $grid-row-cells: 4;
+ $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+ $tile-border-radius: 3px;
+
+ html, body {
+ font-size: 15px;
+ }
+
+ body {
+ margin: 20px 0;
+ padding: 0 20px;
+ }
+
+ h1.title {
+ font-size: 27px;
+ margin-top: 15px;
+ }
+
+ .container {
+ width: $field-width;
+ margin: 0 auto;
+ }
+
+ .score-container, .best-container {
+ margin-top: 0;
+ padding: 15px 10px;
+ min-width: 40px;
+ }
+
+ .heading {
+ margin-bottom: 10px;
+ }
+
+ // Render the game field at the right width
+ @include game-field;
+
+ .game-container {
+ margin-top: 20px;
+ }
+
+ // Rest of the font-size adjustments in the tile class
+ .tile .tile-inner {
+ font-size: 35px;
+ }
+
+ .game-message {
+ p {
+ font-size: 30px !important;
+ height: 30px !important;
+ line-height: 30px !important;
+ margin-top: 90px !important;
+ }
+
+ .lower {
+ margin-top: 30px !important;
+ }
+ }
+}
diff --git a/sources/2048originel/.gitignore b/sources/2048originel/.gitignore
new file mode 100644
index 0000000..0d31019
--- /dev/null
+++ b/sources/2048originel/.gitignore
@@ -0,0 +1 @@
+.sass-cache/
diff --git a/sources/2048originel/.jshintrc b/sources/2048originel/.jshintrc
new file mode 100644
index 0000000..87dbf9a
--- /dev/null
+++ b/sources/2048originel/.jshintrc
@@ -0,0 +1,19 @@
+{
+ "esnext": true,
+ "indent": 2,
+ "maxlen": 80,
+ "freeze": true,
+ "camelcase": true,
+ "unused": true,
+ "eqnull": true,
+ "proto": true,
+ "supernew": true,
+ "noyield": true,
+ "evil": true,
+ "node": true,
+ "boss": true,
+ "expr": true,
+ "loopfunc": true,
+ "white": true,
+ "maxdepth": 4
+}
diff --git a/sources/2048originel/CONTRIBUTING.md b/sources/2048originel/CONTRIBUTING.md
new file mode 100644
index 0000000..968baa9
--- /dev/null
+++ b/sources/2048originel/CONTRIBUTING.md
@@ -0,0 +1,2 @@
+## Contributing
+Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
diff --git a/sources/2048originel/LICENSE.txt b/sources/2048originel/LICENSE.txt
new file mode 100644
index 0000000..b0dbfa4
--- /dev/null
+++ b/sources/2048originel/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Gabriele Cirulli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/sources/2048originel/README.md b/sources/2048originel/README.md
new file mode 100644
index 0000000..19c6d0e
--- /dev/null
+++ b/sources/2048originel/README.md
@@ -0,0 +1,31 @@
+# 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).
+
+Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/)
+
+### Contributions
+
+ - [TimPetricola](https://github.com/TimPetricola) added best score storage
+ - [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.
+
+### Screenshot
+
+
+
+ 2048 Frama
+
+
+ 0
+ 0
+ Assemble les tuiles identiques pour réussir à découvrir !
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Comment jouer : Utilisez les flèches du clavier pour déplacer les tuiles. Quand deux tuiles avec le même dessin se touchent, elles fusionnent ! +
++
+ Note : Framasoft héberge une version personnalisée du jeu créé par Gabriele Cirulli. sous licence libre MIT. +
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sources/2048originel/js/animframe_polyfill.js b/sources/2048originel/js/animframe_polyfill.js
new file mode 100644
index 0000000..c45a13e
--- /dev/null
+++ b/sources/2048originel/js/animframe_polyfill.js
@@ -0,0 +1,26 @@
+(function() {
+ var lastTime = 0;
+ var vendors = ['webkit', 'moz'];
+ for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+ window.cancelAnimationFrame =
+ window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+ }
+
+ if (!window.requestAnimationFrame) {
+ window.requestAnimationFrame = function(callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ }
+
+ if (!window.cancelAnimationFrame) {
+ window.cancelAnimationFrame = function(id) {
+ clearTimeout(id);
+ };
+ }
+}());
diff --git a/sources/2048originel/js/application.js b/sources/2048originel/js/application.js
new file mode 100644
index 0000000..a4d310a
--- /dev/null
+++ b/sources/2048originel/js/application.js
@@ -0,0 +1,4 @@
+// Wait till the browser is ready to render the game (avoids glitches)
+window.requestAnimationFrame(function () {
+ new GameManager(4, KeyboardInputManager, HTMLActuator, LocalScoreManager);
+});
diff --git a/sources/2048originel/js/game_manager.js b/sources/2048originel/js/game_manager.js
new file mode 100644
index 0000000..b36aea3
--- /dev/null
+++ b/sources/2048originel/js/game_manager.js
@@ -0,0 +1,245 @@
+function GameManager(size, InputManager, Actuator, ScoreManager) {
+ this.size = size; // Size of the grid
+ this.inputManager = new InputManager;
+ this.scoreManager = new ScoreManager;
+ this.actuator = new Actuator;
+
+ this.startTiles = 2;
+
+ this.inputManager.on("move", this.move.bind(this));
+ this.inputManager.on("restart", this.restart.bind(this));
+ this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
+
+ this.setup();
+}
+
+// Restart the game
+GameManager.prototype.restart = function () {
+ this.actuator.continue();
+ 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
+GameManager.prototype.setup = function () {
+ this.grid = new Grid(this.size);
+
+ this.score = 0;
+ this.over = false;
+ this.won = false;
+ this.keepPlaying = false;
+
+ // Add the initial tiles
+ this.addStartTiles();
+
+ // Update the actuator
+ this.actuate();
+};
+
+// Set up the initial tiles to start the game with
+GameManager.prototype.addStartTiles = function () {
+ for (var i = 0; i < this.startTiles; i++) {
+ this.addRandomTile();
+ }
+};
+
+// Adds a tile in a random position
+GameManager.prototype.addRandomTile = function () {
+ if (this.grid.cellsAvailable()) {
+ var value = Math.random() < 0.9 ? 2 : 4;
+ var tile = new Tile(this.grid.randomAvailableCell(), value);
+
+ this.grid.insertTile(tile);
+ }
+};
+
+// Sends the updated grid to the actuator
+GameManager.prototype.actuate = function () {
+ if (this.scoreManager.get() < this.score) {
+ this.scoreManager.set(this.score);
+ }
+
+ this.actuator.actuate(this.grid, {
+ score: this.score,
+ over: this.over,
+ won: this.won,
+ bestScore: this.scoreManager.get(),
+ terminated: this.isGameTerminated()
+ });
+
+};
+
+// Save all tile positions and remove merger info
+GameManager.prototype.prepareTiles = function () {
+ this.grid.eachCell(function (x, y, tile) {
+ if (tile) {
+ tile.mergedFrom = null;
+ tile.savePosition();
+ }
+ });
+};
+
+// Move a tile and its representation
+GameManager.prototype.moveTile = function (tile, cell) {
+ this.grid.cells[tile.x][tile.y] = null;
+ this.grid.cells[cell.x][cell.y] = tile;
+ tile.updatePosition(cell);
+};
+
+// Move tiles on the grid in the specified direction
+GameManager.prototype.move = function (direction) {
+ // 0: up, 1: right, 2:down, 3: left
+ var self = this;
+
+ if (this.isGameTerminated()) return; // Don't do anything if the game's over
+
+ var cell, tile;
+
+ var vector = this.getVector(direction);
+ var traversals = this.buildTraversals(vector);
+ var moved = false;
+
+ // Save the current tile positions and remove merger information
+ this.prepareTiles();
+
+ // Traverse the grid in the right direction and move tiles
+ traversals.x.forEach(function (x) {
+ traversals.y.forEach(function (y) {
+ cell = { x: x, y: y };
+ tile = self.grid.cellContent(cell);
+
+ if (tile) {
+ var positions = self.findFarthestPosition(cell, vector);
+ var next = self.grid.cellContent(positions.next);
+
+ // Only one merger per row traversal?
+ if (next && next.value === tile.value && !next.mergedFrom) {
+ var merged = new Tile(positions.next, tile.value * 2);
+ merged.mergedFrom = [tile, next];
+
+ self.grid.insertTile(merged);
+ self.grid.removeTile(tile);
+
+ // Converge the two tiles' positions
+ tile.updatePosition(positions.next);
+
+ // Update the score
+ self.score += merged.value;
+
+ // The mighty 2048 tile
+ if (merged.value === 2048) self.won = true;
+ } else {
+ self.moveTile(tile, positions.farthest);
+ }
+
+ if (!self.positionsEqual(cell, tile)) {
+ moved = true; // The tile moved from its original cell!
+ }
+ }
+ });
+ });
+
+ if (moved) {
+ this.addRandomTile();
+
+ if (!this.movesAvailable()) {
+ this.over = true; // Game over!
+ }
+
+ this.actuate();
+ }
+};
+
+// Get the vector representing the chosen direction
+GameManager.prototype.getVector = function (direction) {
+ // Vectors representing tile movement
+ var map = {
+ 0: { x: 0, y: -1 }, // up
+ 1: { x: 1, y: 0 }, // right
+ 2: { x: 0, y: 1 }, // down
+ 3: { x: -1, y: 0 } // left
+ };
+
+ return map[direction];
+};
+
+// Build a list of positions to traverse in the right order
+GameManager.prototype.buildTraversals = function (vector) {
+ var traversals = { x: [], y: [] };
+
+ for (var pos = 0; pos < this.size; pos++) {
+ traversals.x.push(pos);
+ traversals.y.push(pos);
+ }
+
+ // Always traverse from the farthest cell in the chosen direction
+ if (vector.x === 1) traversals.x = traversals.x.reverse();
+ if (vector.y === 1) traversals.y = traversals.y.reverse();
+
+ return traversals;
+};
+
+GameManager.prototype.findFarthestPosition = function (cell, vector) {
+ var previous;
+
+ // Progress towards the vector direction until an obstacle is found
+ do {
+ previous = cell;
+ cell = { x: previous.x + vector.x, y: previous.y + vector.y };
+ } while (this.grid.withinBounds(cell) &&
+ this.grid.cellAvailable(cell));
+
+ return {
+ farthest: previous,
+ next: cell // Used to check if a merge is required
+ };
+};
+
+GameManager.prototype.movesAvailable = function () {
+ return this.grid.cellsAvailable() || this.tileMatchesAvailable();
+};
+
+// Check for available matches between tiles (more expensive check)
+GameManager.prototype.tileMatchesAvailable = function () {
+ var self = this;
+
+ var tile;
+
+ for (var x = 0; x < this.size; x++) {
+ for (var y = 0; y < this.size; y++) {
+ tile = this.grid.cellContent({ x: x, y: y });
+
+ if (tile) {
+ for (var direction = 0; direction < 4; direction++) {
+ var vector = self.getVector(direction);
+ var cell = { x: x + vector.x, y: y + vector.y };
+
+ var other = self.grid.cellContent(cell);
+
+ if (other && other.value === tile.value) {
+ return true; // These two tiles can be merged
+ }
+ }
+ }
+ }
+ }
+
+ return false;
+};
+
+GameManager.prototype.positionsEqual = function (first, second) {
+ return first.x === second.x && first.y === second.y;
+};
diff --git a/sources/2048originel/js/grid.js b/sources/2048originel/js/grid.js
new file mode 100644
index 0000000..05fe057
--- /dev/null
+++ b/sources/2048originel/js/grid.js
@@ -0,0 +1,84 @@
+function Grid(size) {
+ this.size = size;
+
+ this.cells = [];
+
+ this.build();
+}
+
+// Build a grid of the specified size
+Grid.prototype.build = function () {
+ for (var x = 0; x < this.size; x++) {
+ var row = this.cells[x] = [];
+
+ for (var y = 0; y < this.size; y++) {
+ row.push(null);
+ }
+ }
+};
+
+// Find the first available random position
+Grid.prototype.randomAvailableCell = function () {
+ var cells = this.availableCells();
+
+ if (cells.length) {
+ return cells[Math.floor(Math.random() * cells.length)];
+ }
+};
+
+Grid.prototype.availableCells = function () {
+ var cells = [];
+
+ this.eachCell(function (x, y, tile) {
+ if (!tile) {
+ cells.push({ x: x, y: y });
+ }
+ });
+
+ return cells;
+};
+
+// Call callback for every cell
+Grid.prototype.eachCell = function (callback) {
+ for (var x = 0; x < this.size; x++) {
+ for (var y = 0; y < this.size; y++) {
+ callback(x, y, this.cells[x][y]);
+ }
+ }
+};
+
+// Check if there are any cells available
+Grid.prototype.cellsAvailable = function () {
+ return !!this.availableCells().length;
+};
+
+// Check if the specified cell is taken
+Grid.prototype.cellAvailable = function (cell) {
+ return !this.cellOccupied(cell);
+};
+
+Grid.prototype.cellOccupied = function (cell) {
+ return !!this.cellContent(cell);
+};
+
+Grid.prototype.cellContent = function (cell) {
+ if (this.withinBounds(cell)) {
+ return this.cells[cell.x][cell.y];
+ } else {
+ return null;
+ }
+};
+
+// Inserts a tile at its position
+Grid.prototype.insertTile = function (tile) {
+ this.cells[tile.x][tile.y] = tile;
+};
+
+Grid.prototype.removeTile = function (tile) {
+ this.cells[tile.x][tile.y] = null;
+};
+
+Grid.prototype.withinBounds = function (position) {
+ return position.x >= 0 && position.x < this.size &&
+ position.y >= 0 && position.y < this.size;
+};
diff --git a/sources/2048originel/js/html_actuator.js b/sources/2048originel/js/html_actuator.js
new file mode 100644
index 0000000..d840068
--- /dev/null
+++ b/sources/2048originel/js/html_actuator.js
@@ -0,0 +1,139 @@
+function HTMLActuator() {
+ this.tileContainer = document.querySelector(".tile-container");
+ this.scoreContainer = document.querySelector(".score-container");
+ this.bestContainer = document.querySelector(".best-container");
+ this.messageContainer = document.querySelector(".game-message");
+
+ this.score = 0;
+}
+
+HTMLActuator.prototype.actuate = function (grid, metadata) {
+ var self = this;
+
+ window.requestAnimationFrame(function () {
+ self.clearContainer(self.tileContainer);
+
+ grid.cells.forEach(function (column) {
+ column.forEach(function (cell) {
+ if (cell) {
+ self.addTile(cell);
+ }
+ });
+ });
+
+ self.updateScore(metadata.score);
+ self.updateBestScore(metadata.bestScore);
+
+ if (metadata.terminated) {
+ if (metadata.over) {
+ self.message(false); // You lose
+ } else if (metadata.won) {
+ self.message(true); // You win!
+ }
+ }
+
+ });
+};
+
+// Continues the game (both restart and keep playing)
+HTMLActuator.prototype.continue = function () {
+ this.clearMessage();
+};
+
+HTMLActuator.prototype.clearContainer = function (container) {
+ while (container.firstChild) {
+ container.removeChild(container.firstChild);
+ }
+};
+
+HTMLActuator.prototype.addTile = function (tile) {
+ var self = this;
+
+ var wrapper = document.createElement("div");
+ var inner = document.createElement("div");
+ var position = tile.previousPosition || { x: tile.x, y: tile.y };
+ var positionClass = this.positionClass(position);
+
+ // We can't use classlist because it somehow glitches when replacing classes
+ var classes = ["tile", "tile-" + tile.value, positionClass];
+
+ if (tile.value > 2048) classes.push("tile-super");
+
+ this.applyClasses(wrapper, classes);
+
+ inner.classList.add("tile-inner");
+ inner.textContent = tile.value;
+
+ if (tile.previousPosition) {
+ // Make sure that the tile gets rendered in the previous position first
+ window.requestAnimationFrame(function () {
+ classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+ self.applyClasses(wrapper, classes); // Update the position
+ });
+ } else if (tile.mergedFrom) {
+ classes.push("tile-merged");
+ this.applyClasses(wrapper, classes);
+
+ // Render the tiles that merged
+ tile.mergedFrom.forEach(function (merged) {
+ self.addTile(merged);
+ });
+ } else {
+ classes.push("tile-new");
+ this.applyClasses(wrapper, classes);
+ }
+
+ // Add the inner part of the tile to the wrapper
+ wrapper.appendChild(inner);
+
+ // Put the tile on the board
+ this.tileContainer.appendChild(wrapper);
+};
+
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+ element.setAttribute("class", classes.join(" "));
+};
+
+HTMLActuator.prototype.normalizePosition = function (position) {
+ return { x: position.x + 1, y: position.y + 1 };
+};
+
+HTMLActuator.prototype.positionClass = function (position) {
+ position = this.normalizePosition(position);
+ return "tile-position-" + position.x + "-" + position.y;
+};
+
+HTMLActuator.prototype.updateScore = function (score) {
+ this.clearContainer(this.scoreContainer);
+
+ var difference = score - this.score;
+ this.score = score;
+
+ this.scoreContainer.textContent = this.score;
+
+ if (difference > 0) {
+ var addition = document.createElement("div");
+ addition.classList.add("score-addition");
+ addition.textContent = "+" + difference;
+
+ this.scoreContainer.appendChild(addition);
+ }
+};
+
+HTMLActuator.prototype.updateBestScore = function (bestScore) {
+ this.bestContainer.textContent = bestScore;
+};
+
+HTMLActuator.prototype.message = function (won) {
+ var type = won ? "game-won" : "game-over";
+ var message = won ? "You win!" : "Game over!";
+
+ this.messageContainer.classList.add(type);
+ this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+};
+
+HTMLActuator.prototype.clearMessage = function () {
+ // IE only takes one value to remove at a time.
+ this.messageContainer.classList.remove("game-won");
+ this.messageContainer.classList.remove("game-over");
+};
diff --git a/sources/2048originel/js/keyboard_input_manager.js b/sources/2048originel/js/keyboard_input_manager.js
new file mode 100644
index 0000000..a29744c
--- /dev/null
+++ b/sources/2048originel/js/keyboard_input_manager.js
@@ -0,0 +1,130 @@
+function KeyboardInputManager() {
+ 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();
+}
+
+KeyboardInputManager.prototype.on = function (event, callback) {
+ if (!this.events[event]) {
+ this.events[event] = [];
+ }
+ this.events[event].push(callback);
+};
+
+KeyboardInputManager.prototype.emit = function (event, data) {
+ var callbacks = this.events[event];
+ if (callbacks) {
+ callbacks.forEach(function (callback) {
+ callback(data);
+ });
+ }
+};
+
+KeyboardInputManager.prototype.listen = function () {
+ var self = this;
+
+ var map = {
+ 38: 0, // Up
+ 39: 1, // Right
+ 40: 2, // Down
+ 37: 3, // Left
+ 75: 0, // vim keybindings
+ 76: 1,
+ 74: 2,
+ 72: 3,
+ 87: 0, // W
+ 68: 1, // D
+ 83: 2, // S
+ 65: 3 // A
+ };
+
+ document.addEventListener("keydown", function (event) {
+ var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
+ event.shiftKey;
+ var mapped = map[event.which];
+
+ if (!modifiers) {
+ if (mapped !== undefined) {
+ event.preventDefault();
+ self.emit("move", mapped);
+ }
+
+ if (event.which === 32) self.restart.bind(self)(event);
+ }
+ });
+
+ var retry = document.querySelector(".retry-button");
+ retry.addEventListener("click", 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
+ var touchStartClientX, touchStartClientY;
+ var gameContainer = document.getElementsByClassName("game-container")[0];
+
+ gameContainer.addEventListener(this.eventTouchstart, function (event) {
+ if (( !window.navigator.msPointerEnabled && event.touches.length > 1) || event.targetTouches > 1) return;
+
+ if(window.navigator.msPointerEnabled){
+ touchStartClientX = event.pageX;
+ touchStartClientY = event.pageY;
+ } else {
+ touchStartClientX = event.touches[0].clientX;
+ touchStartClientY = event.touches[0].clientY;
+ }
+
+ event.preventDefault();
+ });
+
+ gameContainer.addEventListener(this.eventTouchmove, function (event) {
+ event.preventDefault();
+ });
+
+ gameContainer.addEventListener(this.eventTouchend, function (event) {
+ if (( !window.navigator.msPointerEnabled && event.touches.length > 0) || event.targetTouches > 0) return;
+
+ 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 dy = touchEndClientY - touchStartClientY;
+ var absDy = Math.abs(dy);
+
+ if (Math.max(absDx, absDy) > 10) {
+ // (right : left) : (down : up)
+ self.emit("move", absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0));
+ }
+ });
+};
+
+KeyboardInputManager.prototype.restart = function (event) {
+ event.preventDefault();
+ this.emit("restart");
+};
+
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+ event.preventDefault();
+ this.emit("keepPlaying");
+};
diff --git a/sources/2048originel/js/local_score_manager.js b/sources/2048originel/js/local_score_manager.js
new file mode 100644
index 0000000..ec4575d
--- /dev/null
+++ b/sources/2048originel/js/local_score_manager.js
@@ -0,0 +1,48 @@
+window.fakeStorage = {
+ _data: {},
+
+ setItem: function (id, val) {
+ return this._data[id] = String(val);
+ },
+
+ getItem: function (id) {
+ return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+ },
+
+ removeItem: function (id) {
+ return delete this._data[id];
+ },
+
+ clear: function () {
+ return this._data = {};
+ }
+};
+
+function LocalScoreManager() {
+ this.key = "bestScore";
+
+ var supported = this.localStorageSupported();
+ 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 () {
+ return this.storage.getItem(this.key) || 0;
+};
+
+LocalScoreManager.prototype.set = function (score) {
+ this.storage.setItem(this.key, score);
+};
+
diff --git a/sources/2048originel/js/tile.js b/sources/2048originel/js/tile.js
new file mode 100644
index 0000000..de08333
--- /dev/null
+++ b/sources/2048originel/js/tile.js
@@ -0,0 +1,17 @@
+function Tile(position, value) {
+ this.x = position.x;
+ this.y = position.y;
+ this.value = value || 2;
+
+ this.previousPosition = null;
+ this.mergedFrom = null; // Tracks tiles that merged together
+}
+
+Tile.prototype.savePosition = function () {
+ this.previousPosition = { x: this.x, y: this.y };
+};
+
+Tile.prototype.updatePosition = function (position) {
+ this.x = position.x;
+ this.y = position.y;
+};
diff --git a/sources/2048originel/meta/apple-touch-icon.png b/sources/2048originel/meta/apple-touch-icon.png
new file mode 100644
index 0000000..3fd20f6
Binary files /dev/null and b/sources/2048originel/meta/apple-touch-icon.png differ
diff --git a/sources/2048originel/style/fonts/ClearSans-Bold-webfont.eot b/sources/2048originel/style/fonts/ClearSans-Bold-webfont.eot
new file mode 100644
index 0000000..3678ef2
Binary files /dev/null and b/sources/2048originel/style/fonts/ClearSans-Bold-webfont.eot differ
diff --git a/sources/2048originel/style/fonts/ClearSans-Bold-webfont.svg b/sources/2048originel/style/fonts/ClearSans-Bold-webfont.svg
new file mode 100644
index 0000000..aa985ae
--- /dev/null
+++ b/sources/2048originel/style/fonts/ClearSans-Bold-webfont.svg
@@ -0,0 +1,640 @@
+
+
+
\ No newline at end of file
diff --git a/sources/2048originel/style/fonts/ClearSans-Bold-webfont.woff b/sources/2048originel/style/fonts/ClearSans-Bold-webfont.woff
new file mode 100644
index 0000000..184a945
Binary files /dev/null and b/sources/2048originel/style/fonts/ClearSans-Bold-webfont.woff differ
diff --git a/sources/2048originel/style/fonts/ClearSans-Light-webfont.eot b/sources/2048originel/style/fonts/ClearSans-Light-webfont.eot
new file mode 100644
index 0000000..0dc609d
Binary files /dev/null and b/sources/2048originel/style/fonts/ClearSans-Light-webfont.eot differ
diff --git a/sources/2048originel/style/fonts/ClearSans-Light-webfont.svg b/sources/2048originel/style/fonts/ClearSans-Light-webfont.svg
new file mode 100644
index 0000000..1d5d2ec
--- /dev/null
+++ b/sources/2048originel/style/fonts/ClearSans-Light-webfont.svg
@@ -0,0 +1,670 @@
+
+
+
\ No newline at end of file
diff --git a/sources/2048originel/style/fonts/ClearSans-Light-webfont.woff b/sources/2048originel/style/fonts/ClearSans-Light-webfont.woff
new file mode 100644
index 0000000..44555e0
Binary files /dev/null and b/sources/2048originel/style/fonts/ClearSans-Light-webfont.woff differ
diff --git a/sources/2048originel/style/fonts/ClearSans-Regular-webfont.eot b/sources/2048originel/style/fonts/ClearSans-Regular-webfont.eot
new file mode 100644
index 0000000..b020e05
Binary files /dev/null and b/sources/2048originel/style/fonts/ClearSans-Regular-webfont.eot differ
diff --git a/sources/2048originel/style/fonts/ClearSans-Regular-webfont.svg b/sources/2048originel/style/fonts/ClearSans-Regular-webfont.svg
new file mode 100644
index 0000000..1e2cffd
--- /dev/null
+++ b/sources/2048originel/style/fonts/ClearSans-Regular-webfont.svg
@@ -0,0 +1,669 @@
+
+
+
\ No newline at end of file
diff --git a/sources/2048originel/style/fonts/ClearSans-Regular-webfont.woff b/sources/2048originel/style/fonts/ClearSans-Regular-webfont.woff
new file mode 100644
index 0000000..9d58858
Binary files /dev/null and b/sources/2048originel/style/fonts/ClearSans-Regular-webfont.woff differ
diff --git a/sources/2048originel/style/fonts/clear-sans.css b/sources/2048originel/style/fonts/clear-sans.css
new file mode 100644
index 0000000..de2811d
--- /dev/null
+++ b/sources/2048originel/style/fonts/clear-sans.css
@@ -0,0 +1,30 @@
+@font-face {
+ font-family: "Clear Sans";
+ src: url("ClearSans-Light-webfont.eot");
+ src: url("ClearSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
+ url("ClearSans-Light-webfont.svg#clear_sans_lightregular") format("svg"),
+ url("ClearSans-Light-webfont.woff") format("woff");
+ font-weight: 200;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Clear Sans";
+ src: url("ClearSans-Regular-webfont.eot");
+ src: url("ClearSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
+ url("ClearSans-Regular-webfont.svg#clear_sansregular") format("svg"),
+ url("ClearSans-Regular-webfont.woff") format("woff");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Clear Sans";
+ src: url("ClearSans-Bold-webfont.eot");
+ src: url("ClearSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
+ url("ClearSans-Bold-webfont.svg#clear_sansbold") format("svg"),
+ url("ClearSans-Bold-webfont.woff") format("woff");
+ font-weight: 700;
+ font-style: normal;
+}
+
diff --git a/sources/2048originel/style/helpers.scss b/sources/2048originel/style/helpers.scss
new file mode 100644
index 0000000..53b9dc1
--- /dev/null
+++ b/sources/2048originel/style/helpers.scss
@@ -0,0 +1,72 @@
+// Exponent
+// From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
+
+@function exponent($base, $exponent) {
+ // reset value
+ $value: $base;
+ // positive intergers get multiplied
+ @if $exponent > 1 {
+ @for $i from 2 through $exponent {
+ $value: $value * $base; } }
+ // negitive intergers get divided. A number divided by itself is 1
+ @if $exponent < 1 {
+ @for $i from 0 through -$exponent {
+ $value: $value / $base; } }
+ // return the last value written
+ @return $value;
+}
+
+@function pow($base, $exponent) {
+ @return exponent($base, $exponent);
+}
+
+// Transition mixins
+@mixin transition($args...) {
+ -webkit-transition: $args;
+ -moz-transition: $args;
+ transition: $args;
+}
+
+@mixin transition-property($args...) {
+ -webkit-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
+@mixin keyframes($animation-name) {
+ @-webkit-keyframes $animation-name {
+ @content;
+ }
+ @-moz-keyframes $animation-name {
+ @content;
+ }
+ @keyframes $animation-name {
+ @content;
+ }
+}
+
+// Media queries
+@mixin smaller($width) {
+ @media screen and (max-width: $width) {
+ @content;
+ }
+}
diff --git a/sources/2048originel/style/main.css b/sources/2048originel/style/main.css
new file mode 100644
index 0000000..515e881
--- /dev/null
+++ b/sources/2048originel/style/main.css
@@ -0,0 +1,687 @@
+@import url(fonts/clear-sans.css);
+html, body {
+ margin: 0;
+ padding: 0;
+ background: #faf8ef;
+ color: #776e65;
+ font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
+ font-size: 18px; }
+
+body {
+ margin: 80px 0; }
+
+.heading:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+h1.title {
+ font-size: 80px;
+ font-weight: bold;
+ margin: 0;
+ display: block;
+ float: left; }
+
+@-webkit-keyframes move-up {
+ 0% {
+ top: 25px;
+ opacity: 1; }
+
+ 100% {
+ top: -50px;
+ opacity: 0; } }
+
+@-moz-keyframes move-up {
+ 0% {
+ top: 25px;
+ opacity: 1; }
+
+ 100% {
+ top: -50px;
+ opacity: 0; } }
+
+@keyframes move-up {
+ 0% {
+ top: 25px;
+ opacity: 1; }
+
+ 100% {
+ top: -50px;
+ opacity: 0; } }
+
+.scores-container {
+ float: right;
+ text-align: right; }
+
+.score-container, .best-container {
+ position: relative;
+ display: inline-block;
+ background: #bbada0;
+ padding: 15px 25px;
+ font-size: 25px;
+ height: 25px;
+ line-height: 47px;
+ font-weight: bold;
+ border-radius: 3px;
+ color: white;
+ margin-top: 8px;
+ text-align: center; }
+ .score-container:after, .best-container:after {
+ position: absolute;
+ width: 100%;
+ top: 10px;
+ left: 0;
+ text-transform: uppercase;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ color: #eee4da; }
+ .score-container .score-addition, .best-container .score-addition {
+ position: absolute;
+ right: 30px;
+ color: red;
+ font-size: 25px;
+ line-height: 25px;
+ font-weight: bold;
+ color: rgba(119, 110, 101, 0.9);
+ z-index: 100;
+ -webkit-animation: move-up 600ms ease-in;
+ -moz-animation: move-up 600ms ease-in;
+ animation: move-up 600ms ease-in;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both; }
+
+.score-container:after {
+ content: "Score"; }
+
+.best-container:after {
+ content: "Record"; }
+
+p {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.65; }
+
+a {
+ color: #776e65;
+ font-weight: bold;
+ text-decoration: underline;
+ cursor: pointer; }
+
+strong.important {
+ text-transform: uppercase; }
+
+hr {
+ border: none;
+ border-bottom: 1px solid #d8d4d0;
+ margin-top: 20px;
+ margin-bottom: 30px; }
+
+.container {
+ width: 500px;
+ margin: 0 auto; }
+
+@-webkit-keyframes fade-in {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+@-moz-keyframes fade-in {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+@keyframes fade-in {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+.game-container {
+ margin-top: 40px;
+ position: relative;
+ padding: 15px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ background: #bbada0;
+ border-radius: 6px;
+ width: 500px;
+ height: 500px;
+ -ms-touch-action: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .game-container .game-message {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(238, 228, 218, 0.5);
+ z-index: 100;
+ text-align: center;
+ -webkit-animation: fade-in 800ms ease 1200ms;
+ -moz-animation: fade-in 800ms ease 1200ms;
+ animation: fade-in 800ms ease 1200ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both; }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px; }
+ .game-container .game-message .lower {
+ display: block;
+ margin-top: 59px; }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #8f7a66;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 9px; }
+ .game-container .game-message a.keep-playing-button {
+ display: none; }
+ .game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ 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 {
+ display: block; }
+
+.grid-container {
+ position: absolute;
+ z-index: 1; }
+
+.grid-row {
+ margin-bottom: 15px; }
+ .grid-row:last-child {
+ margin-bottom: 0; }
+ .grid-row:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+.grid-cell {
+ width: 106.25px;
+ height: 106.25px;
+ margin-right: 15px;
+ float: left;
+ border-radius: 3px;
+ background: rgba(238, 228, 218, 0.35); }
+ .grid-cell:last-child {
+ margin-right: 0; }
+
+.tile-container {
+ position: absolute;
+ 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 {
+ position: absolute;
+ -webkit-transition: 100ms ease-in-out;
+ -moz-transition: 100ms ease-in-out;
+ transition: 100ms ease-in-out;
+ -webkit-transition-property: -webkit-transform;
+ -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;
+ 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-inner {
+ background: #ede0c8;
+ 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-inner {
+ color: #f9f6f2;
+ background: #f2b179; }
+ .tile.tile-16 .tile-inner {
+ color: #f9f6f2;
+ background: #f59563; }
+ .tile.tile-32 .tile-inner {
+ color: #f9f6f2;
+ background: #f67c5f; }
+ .tile.tile-64 .tile-inner {
+ color: #f9f6f2;
+ background: #f65e3b; }
+ .tile.tile-128 .tile-inner {
+ color: #f9f6f2;
+ 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);
+ font-size: 45px; }
+ @media screen and (max-width: 520px) {
+ .tile.tile-128 .tile-inner {
+ font-size: 25px; } }
+ .tile.tile-256 .tile-inner {
+ color: #f9f6f2;
+ 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);
+ font-size: 45px; }
+ @media screen and (max-width: 520px) {
+ .tile.tile-256 .tile-inner {
+ font-size: 25px; } }
+ .tile.tile-512 .tile-inner {
+ color: #f9f6f2;
+ 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);
+ font-size: 45px; }
+ @media screen and (max-width: 520px) {
+ .tile.tile-512 .tile-inner {
+ font-size: 25px; } }
+ .tile.tile-1024 .tile-inner {
+ color: #f9f6f2;
+ 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);
+ font-size: 35px; }
+ @media screen and (max-width: 520px) {
+ .tile.tile-1024 .tile-inner {
+ font-size: 15px; } }
+ .tile.tile-2048 .tile-inner {
+ color: #f9f6f2;
+ 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);
+ font-size: 35px; }
+ @media screen and (max-width: 520px) {
+ .tile.tile-2048 .tile-inner {
+ 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 {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@-moz-keyframes appear {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@keyframes appear {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+.tile-new .tile-inner {
+ -webkit-animation: appear 200ms ease 100ms;
+ -moz-animation: appear 200ms ease 100ms;
+ animation: appear 200ms ease 100ms;
+ -webkit-animation-fill-mode: backwards;
+ -moz-animation-fill-mode: backwards;
+ animation-fill-mode: backwards; }
+
+@-webkit-keyframes pop {
+ 0% {
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@-moz-keyframes pop {
+ 0% {
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+@keyframes pop {
+ 0% {
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0);
+ transform: scale(0); }
+
+ 50% {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ transform: scale(1); } }
+
+.tile-merged .tile-inner {
+ z-index: 20;
+ -webkit-animation: pop 200ms ease 100ms;
+ -moz-animation: pop 200ms ease 100ms;
+ animation: pop 200ms ease 100ms;
+ -webkit-animation-fill-mode: backwards;
+ -moz-animation-fill-mode: backwards;
+ animation-fill-mode: backwards; }
+
+.game-intro {
+ margin-bottom: 0; }
+
+.game-explanation {
+ margin-top: 50px; }
+
+@media screen and (max-width: 520px) {
+ html, body {
+ font-size: 15px; }
+
+ body {
+ margin: 20px 0;
+ padding: 0 20px; }
+
+ h1.title {
+ font-size: 27px;
+ margin-top: 15px; }
+
+ .container {
+ width: 280px;
+ margin: 0 auto; }
+
+ .score-container, .best-container {
+ margin-top: 0;
+ padding: 15px 10px;
+ min-width: 40px; }
+
+ .heading {
+ margin-bottom: 10px; }
+
+ .game-container {
+ margin-top: 40px;
+ position: relative;
+ padding: 10px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ background: #bbada0;
+ border-radius: 6px;
+ width: 280px;
+ height: 280px;
+ -ms-touch-action: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .game-container .game-message {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(238, 228, 218, 0.5);
+ z-index: 100;
+ text-align: center;
+ -webkit-animation: fade-in 800ms ease 1200ms;
+ -moz-animation: fade-in 800ms ease 1200ms;
+ animation: fade-in 800ms ease 1200ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both; }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px; }
+ .game-container .game-message .lower {
+ display: block;
+ margin-top: 59px; }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #8f7a66;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 9px; }
+ .game-container .game-message a.keep-playing-button {
+ display: none; }
+ .game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ 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 {
+ display: block; }
+
+ .grid-container {
+ position: absolute;
+ z-index: 1; }
+
+ .grid-row {
+ margin-bottom: 10px; }
+ .grid-row:last-child {
+ margin-bottom: 0; }
+ .grid-row:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+ .grid-cell {
+ width: 57.5px;
+ height: 57.5px;
+ margin-right: 10px;
+ float: left;
+ border-radius: 3px;
+ background: rgba(238, 228, 218, 0.35); }
+ .grid-cell:last-child {
+ margin-right: 0; }
+
+ .tile-container {
+ position: absolute;
+ z-index: 2; }
+
+ .tile, .tile .tile-inner {
+ width: 58px;
+ height: 58px;
+ line-height: 67.5px; }
+ .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, 67px);
+ -moz-transform: translate(0px, 67px);
+ transform: translate(0px, 67px); }
+ .tile.tile-position-1-3 {
+ -webkit-transform: translate(0px, 135px);
+ -moz-transform: translate(0px, 135px);
+ transform: translate(0px, 135px); }
+ .tile.tile-position-1-4 {
+ -webkit-transform: translate(0px, 202px);
+ -moz-transform: translate(0px, 202px);
+ transform: translate(0px, 202px); }
+ .tile.tile-position-2-1 {
+ -webkit-transform: translate(67px, 0px);
+ -moz-transform: translate(67px, 0px);
+ transform: translate(67px, 0px); }
+ .tile.tile-position-2-2 {
+ -webkit-transform: translate(67px, 67px);
+ -moz-transform: translate(67px, 67px);
+ transform: translate(67px, 67px); }
+ .tile.tile-position-2-3 {
+ -webkit-transform: translate(67px, 135px);
+ -moz-transform: translate(67px, 135px);
+ transform: translate(67px, 135px); }
+ .tile.tile-position-2-4 {
+ -webkit-transform: translate(67px, 202px);
+ -moz-transform: translate(67px, 202px);
+ transform: translate(67px, 202px); }
+ .tile.tile-position-3-1 {
+ -webkit-transform: translate(135px, 0px);
+ -moz-transform: translate(135px, 0px);
+ transform: translate(135px, 0px); }
+ .tile.tile-position-3-2 {
+ -webkit-transform: translate(135px, 67px);
+ -moz-transform: translate(135px, 67px);
+ transform: translate(135px, 67px); }
+ .tile.tile-position-3-3 {
+ -webkit-transform: translate(135px, 135px);
+ -moz-transform: translate(135px, 135px);
+ transform: translate(135px, 135px); }
+ .tile.tile-position-3-4 {
+ -webkit-transform: translate(135px, 202px);
+ -moz-transform: translate(135px, 202px);
+ transform: translate(135px, 202px); }
+ .tile.tile-position-4-1 {
+ -webkit-transform: translate(202px, 0px);
+ -moz-transform: translate(202px, 0px);
+ transform: translate(202px, 0px); }
+ .tile.tile-position-4-2 {
+ -webkit-transform: translate(202px, 67px);
+ -moz-transform: translate(202px, 67px);
+ transform: translate(202px, 67px); }
+ .tile.tile-position-4-3 {
+ -webkit-transform: translate(202px, 135px);
+ -moz-transform: translate(202px, 135px);
+ transform: translate(202px, 135px); }
+ .tile.tile-position-4-4 {
+ -webkit-transform: translate(202px, 202px);
+ -moz-transform: translate(202px, 202px);
+ transform: translate(202px, 202px); }
+
+ .game-container {
+ margin-top: 20px; }
+
+ .tile .tile-inner {
+ font-size: 35px; }
+
+ .game-message p {
+ font-size: 30px !important;
+ height: 30px !important;
+ line-height: 30px !important;
+ margin-top: 90px !important; }
+ .game-message .lower {
+ margin-top: 30px !important; } }
diff --git a/sources/2048originel/style/main.scss b/sources/2048originel/style/main.scss
new file mode 100644
index 0000000..00b6acc
--- /dev/null
+++ b/sources/2048originel/style/main.scss
@@ -0,0 +1,519 @@
+@import "helpers";
+@import "fonts/clear-sans.css";
+
+$field-width: 500px;
+$grid-spacing: 15px;
+$grid-row-cells: 4;
+$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+$tile-border-radius: 3px;
+
+$mobile-threshold: $field-width + 20px;
+
+$text-color: #776E65;
+$bright-text-color: #f9f6f2;
+
+$tile-color: #eee4da;
+$tile-gold-color: #edc22e;
+$tile-gold-glow-color: lighten($tile-gold-color, 15%);
+
+$game-container-background: #bbada0;
+
+$transition-speed: 100ms;
+
+html, body {
+ margin: 0;
+ padding: 0;
+
+ background: #faf8ef;
+ color: $text-color;
+ font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
+ font-size: 18px;
+}
+
+body {
+ margin: 80px 0;
+}
+
+.heading:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+h1.title {
+ font-size: 80px;
+ font-weight: bold;
+ margin: 0;
+ display: block;
+ float: left;
+}
+
+@include keyframes(move-up) {
+ 0% {
+ top: 25px;
+ opacity: 1;
+ }
+
+ 100% {
+ top: -50px;
+ opacity: 0;
+ }
+}
+
+.scores-container {
+ float: right;
+ text-align: right;
+}
+
+.score-container, .best-container {
+ $height: 25px;
+
+ position: relative;
+ display: inline-block;
+ background: $game-container-background;
+ padding: 15px 25px;
+ font-size: $height;
+ height: $height;
+ line-height: $height + 22px;
+ font-weight: bold;
+ border-radius: 3px;
+ color: white;
+ margin-top: 8px;
+ text-align: center;
+
+ &:after {
+ position: absolute;
+ width: 100%;
+ top: 10px;
+ left: 0;
+ text-transform: uppercase;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ color: $tile-color;
+ }
+
+ .score-addition {
+ position: absolute;
+ right: 30px;
+ color: red;
+ font-size: $height;
+ line-height: $height;
+ font-weight: bold;
+ color: rgba($text-color, .9);
+ z-index: 100;
+ @include animation(move-up 600ms ease-in);
+ @include animation-fill-mode(both);
+ }
+}
+
+.score-container:after {
+ content: "Score";
+}
+
+.best-container:after {
+ content: "Best"
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.65;
+}
+
+a {
+ color: $text-color;
+ font-weight: bold;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+strong {
+ &.important {
+ text-transform: uppercase;
+ }
+}
+
+hr {
+ border: none;
+ border-bottom: 1px solid lighten($text-color, 40%);
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+
+.container {
+ width: $field-width;
+ margin: 0 auto;
+}
+
+@include keyframes(fade-in) {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+// Styles for buttons
+@mixin button {
+ display: inline-block;
+ background: darken($game-container-background, 20%);
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: $bright-text-color;
+ height: 40px;
+ line-height: 42px;
+}
+
+// Game field mixin used to render CSS at different width
+@mixin game-field {
+ .game-container {
+ margin-top: 40px;
+ position: relative;
+ padding: $grid-spacing;
+
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+
+ background: $game-container-background;
+ border-radius: $tile-border-radius * 2;
+ width: $field-width;
+ height: $field-width;
+ -ms-touch-action: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ .game-message {
+ display: none;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba($tile-color, .5);
+ z-index: 100;
+
+ text-align: center;
+
+ p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px;
+ // height: $field-width;
+ // line-height: $field-width;
+ }
+
+ .lower {
+ display: block;
+ margin-top: 59px;
+ }
+
+ a {
+ @include button;
+ margin-left: 9px;
+ // margin-top: 59px;
+
+ &.keep-playing-button {
+ display: none;
+ }
+ }
+
+ @include animation(fade-in 800ms ease $transition-speed * 12);
+ @include animation-fill-mode(both);
+
+ &.game-won {
+ background: rgba($tile-gold-color, .5);
+ color: $bright-text-color;
+
+ a.keep-playing-button {
+ display: inline-block;
+ }
+ }
+
+ &.game-won, &.game-over {
+ display: block;
+ }
+ }
+ }
+
+ .grid-container {
+ position: absolute;
+ z-index: 1;
+ }
+
+ .grid-row {
+ margin-bottom: $grid-spacing;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+ }
+
+ .grid-cell {
+ width: $tile-size;
+ height: $tile-size;
+ margin-right: $grid-spacing;
+ float: left;
+
+ border-radius: $tile-border-radius;
+
+ background: rgba($tile-color, .35);
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ .tile-container {
+ position: absolute;
+ z-index: 2;
+ }
+
+ .tile {
+ &, .tile-inner {
+ width: ceil($tile-size);
+ height: ceil($tile-size);
+ line-height: $tile-size + 10px;
+ }
+
+ // Build position classes
+ @for $x from 1 through $grid-row-cells {
+ @for $y from 1 through $grid-row-cells {
+ &.tile-position-#{$x}-#{$y} {
+ $xPos: floor(($tile-size + $grid-spacing) * ($x - 1));
+ $yPos: floor(($tile-size + $grid-spacing) * ($y - 1));
+ @include transform(translate($xPos, $yPos));
+ }
+ }
+ }
+ }
+}
+
+// End of game-field mixin
+@include game-field;
+
+.tile {
+ position: absolute; // Makes transforms relative to the top-left corner
+
+ .tile-inner {
+ border-radius: $tile-border-radius;
+
+ background: $tile-color;
+ text-align: center;
+ font-weight: bold;
+ z-index: 10;
+
+ font-size: 55px;
+ }
+
+ // Movement transition
+ @include transition($transition-speed ease-in-out);
+ -webkit-transition-property: -webkit-transform;
+ -moz-transition-property: -moz-transform;
+ transition-property: transform;
+
+ $base: 2;
+ $exponent: 1;
+ $limit: 11;
+
+ // Colors for all 11 states, false = no special color
+ $special-colors: false false, // 2
+ false false, // 4
+ #f78e48 true, // 8
+ #fc5e2e true, // 16
+ #ff3333 true, // 32
+ #ff0000 true, // 64
+ false true, // 128
+ false true, // 256
+ false true, // 512
+ false true, // 1024
+ false true; // 2048
+
+ // Build tile colors
+ @while $exponent <= $limit {
+ $power: pow($base, $exponent);
+
+ &.tile-#{$power} .tile-inner {
+ // Calculate base background color
+ $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
+ $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);
+
+ $nth-color: nth($special-colors, $exponent);
+
+ $special-background: nth($nth-color, 1);
+ $bright-color: nth($nth-color, 2);
+
+ @if $special-background {
+ $mixed-background: mix($special-background, $mixed-background, 55%);
+ }
+
+ @if $bright-color {
+ color: $bright-text-color;
+ }
+
+ // Set background
+ background: $mixed-background;
+
+ // Add glow
+ $glow-opacity: max($exponent - 4, 0) / ($limit - 4);
+
+ @if not $special-background {
+ 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);
+ }
+
+ // Adjust font size for bigger numbers
+ @if $power >= 100 and $power < 1000 {
+ font-size: 45px;
+
+ // Media queries placed here to avoid carrying over the rest of the logic
+ @include smaller($mobile-threshold) {
+ font-size: 25px;
+ }
+ } @else if $power >= 1000 {
+ font-size: 35px;
+
+ @include smaller($mobile-threshold) {
+ font-size: 15px;
+ }
+ }
+ }
+
+ $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) {
+ 0% {
+ opacity: 0;
+ @include transform(scale(0));
+ }
+
+ 100% {
+ opacity: 1;
+ @include transform(scale(1));
+ }
+}
+
+.tile-new .tile-inner {
+ @include animation(appear 200ms ease $transition-speed);
+ @include animation-fill-mode(backwards);
+}
+
+@include keyframes(pop) {
+ 0% {
+ @include transform(scale(0));
+ }
+
+ 50% {
+ @include transform(scale(1.2));
+ }
+
+ 100% {
+ @include transform(scale(1));
+ }
+}
+
+.tile-merged .tile-inner {
+ z-index: 20;
+ @include animation(pop 200ms ease $transition-speed);
+ @include animation-fill-mode(backwards);
+}
+
+.game-intro {
+ margin-bottom: 0;
+}
+
+.game-explanation {
+ margin-top: 50px;
+}
+
+@include smaller($mobile-threshold) {
+ // Redefine variables for smaller screens
+ $field-width: 280px;
+ $grid-spacing: 10px;
+ $grid-row-cells: 4;
+ $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+ $tile-border-radius: 3px;
+
+ html, body {
+ font-size: 15px;
+ }
+
+ body {
+ margin: 20px 0;
+ padding: 0 20px;
+ }
+
+ h1.title {
+ font-size: 27px;
+ margin-top: 15px;
+ }
+
+ .container {
+ width: $field-width;
+ margin: 0 auto;
+ }
+
+ .score-container, .best-container {
+ margin-top: 0;
+ padding: 15px 10px;
+ min-width: 40px;
+ }
+
+ .heading {
+ margin-bottom: 10px;
+ }
+
+ // Render the game field at the right width
+ @include game-field;
+
+ .game-container {
+ margin-top: 20px;
+ }
+
+ // Rest of the font-size adjustments in the tile class
+ .tile .tile-inner {
+ font-size: 35px;
+ }
+
+ .game-message {
+ p {
+ font-size: 30px !important;
+ height: 30px !important;
+ line-height: 30px !important;
+ margin-top: 90px !important;
+ }
+
+ .lower {
+ margin-top: 30px !important;
+ }
+ }
+}
diff --git a/sources/README.md b/sources/README.md
new file mode 100644
index 0000000..94a75fc
--- /dev/null
+++ b/sources/README.md
@@ -0,0 +1,13 @@
+[](https://git.framasoft.org)
+
+ **Framasoft uses GitLab** for the development of its free softwares. Our Github repositories are only mirrors.
+If you want to work with us, **fork us on [git.framasoft.org](https://git.framasoft.org)**. (no registration needed, you can sign in with your Github account)
+
+ **Framasoft utilise GitLab** pour le développement de ses logiciels libres. Nos dépôts Github ne sont que des miroirs.
+Si vous souhaitez travailler avec nous, **forkez-nous sur [git.framasoft.org](https://git.framasoft.org)**. (l'inscription n'est pas nécessaire, vous pouvez vous connecter avec votre compte Github)
+* * *
+
+Framagames est une compilation de jeux libres qui se jouent en ligne ou déconnectés que Framasoft propose sur le site : http://framagames.org
+La page d'accueil s'appuie sur la librairie Bootstrap dont les fichiers se trouvent dans la [Framanav](https://git.framasoft.org/framasoft/framanav).
+
+* * *
diff --git a/sources/back.js b/sources/back.js
new file mode 100644
index 0000000..4f9e734
--- /dev/null
+++ b/sources/back.js
@@ -0,0 +1,39 @@
+// Lien retour Framagames
+document.addEventListener('DOMContentLoaded', function() {
+ var framagames = document.createElement('a');
+ framagames.style = "position: absolute;z-index:100;background:#fff;top:0px;left:0px;padding:5px 10px;border-radius:0 0 5px 0;font-family: DejaVu Sans !important;color: #333;font-size:14px;text-decoration:none;font-weight:normal;";
+ framagames.href="/";
+ framagames.target="_top";
+ framagames.id="framagames"
+ document.getElementsByTagName('body')[0].appendChild(framagames);
+ document.getElementsByTagName('body')[0].style.paddingTop = "25px";
+ document.getElementById("framagames").innerHTML = '← Retour sur Framagames';
+});
+
+// Script Piwik
+var _paq = _paq || [];
+
+_paq.push([function() {
+ var self = this;
+ function getOriginalVisitorCookieTimeout() {
+ var now = new Date(),
+ nowTs = Math.round(now.getTime() / 1000),
+ visitorInfo = self.getVisitorInfo();
+ var createTs = parseInt(visitorInfo[2]);
+ var cookieTimeout = 33696000; // 13 mois en secondes
+ var originalTimeout = createTs + cookieTimeout - nowTs;
+ return originalTimeout;
+ }
+ this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
+}]);
+
+_paq.push(["trackPageView"]);
+_paq.push(["enableLinkTracking"]);
+
+(function() {
+ var u="https://stats.framasoft.org/";
+ _paq.push(["setTrackerUrl", u+"piwik.php"]);
+ _paq.push(["setSiteId", 28]);
+ var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+ g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+})();
diff --git a/sources/css/style.css b/sources/css/style.css
new file mode 100644
index 0000000..6d346d8
--- /dev/null
+++ b/sources/css/style.css
@@ -0,0 +1,136 @@
+body {
+ background:#eee;
+ font-size:14px !important;
+}
+
+.container.ombre {
+ margin-top: 30px;
+ margin-bottom: 30px;
+ padding: 20px 30px;
+}
+
+/* Header style */
+header h1 {
+ font-family: "DejaVu Sans",Verdana,Geneva,sans-serif !important;
+ font-size: 48px;
+ font-weight: bold;
+}
+
+header .lead {
+ color: #666;
+ font: italic 1.3em/1.35 "PT Sans",Arial,sans-serif;
+}
+/* End header style */
+
+/* Tips */
+.tips {
+ list-style: none;
+ padding: 0px;
+ margin:0 auto;
+}
+
+.tips > li {
+ position: relative;
+ overflow: hidden;
+ width: 320px;
+ height: 235px;
+ float:left;
+ background-color: white;
+ border-top: 1px solid #EEE;
+ box-shadow: 0px 9px 15px -10px rgba(0, 0, 0, 0.7);
+ margin: 12px 10px 25px 10px;
+}
+
+/* gris */
+.tips > li .front,
+.tips > li .back {
+ border-bottom: 4px solid #C4C4C4;
+ background:#F3F3F3;
+}
+
+.tips h3 {
+ margin-top: 0px;
+ margin-bottom: 12px;
+ font-size:20px;
+ font-weight: bold;
+ text-align:center
+}
+
+.tips .description {
+ font-size:16px;
+ margin-top:20px;
+}
+.play, .credits {
+ position:absolute;
+ width:300px;
+}
+.play {
+ bottom: 90px;
+}
+.credits {
+ bottom: 10px;
+}
+
+.tip-content {
+ position: absolute;
+ width: 320px;
+ height: 470px;
+ top: 0px;
+
+ -webkit-transition: all 400ms ease 0s;
+ -moz-transition: all 400ms ease 0s;
+ -o-transition: all 400ms ease 0s;
+ transition: all 400ms ease 0s;
+}
+
+.front, .back {
+ padding: 10px;
+ height: 235px;
+}
+
+.tips > li:hover .tip-content {
+ top: -235px;
+}
+
+.show-back {
+ top: -235px;
+}
+
+h1 a, h3 a, h4 a,
+h1 a:hover, h3 a:hover, h4 a:hover,
+h1 a:focus, h3 a:focus, h4 a:focus {
+ text-decoration:none;
+}
+
+.tips .popover h3 {
+ font-size: 14px;
+ margin-bottom:0;
+}
+.tips .popover {
+ font-size: 14px;
+ left: 10px !important;
+ width: 300px;
+ height: 120px;
+}
+.tips .popover-content {
+ padding:9px 5px;
+}
+.tips .popover > .arrow {
+ left:80%;
+}
+
+@media (max-width: 740px) {
+ .tips {
+ width:340px;
+ }
+}
+@media (min-width: 992px) {
+ .tips {
+ width:680px;
+ }
+}
+@media (min-width: 1200px) {
+ .tips {
+ width:1020px;
+ }
+}
diff --git a/sources/data.php b/sources/data.php
new file mode 100644
index 0000000..7f6e46c
--- /dev/null
+++ b/sources/data.php
@@ -0,0 +1,126 @@
+ [
+ 'title' => '1597',
+ 'ctitle' => '1597',
+ 'img' => 'images/1.png',
+ 'description' => 'Fork de 2048 avec la suite de Fibonacci',
+ 'url' => '1597-master/index.html',
+ 'dl' => 'telechargement/1597-master.zip',
+ 'auteur' => 'Jeremy Hummel',
+ 'licence' => 'MIT',
+ 'src' => 'https://jmhummel.github.io/1597/'
+ ],
+ '2048frama' => [
+ 'title' => '2048 Frama',
+ 'img' => 'images/2.png',
+ 'description' => '2048 aux couleurs de Framasoft',
+ 'url' => '2048frama/index.html',
+ 'dl' => 'telechargement/2048frama.zip',
+ 'auteur' => 'Cyrille Largillier',
+ 'licence' => 'MIT',
+ 'src' => 'http://framagames.org'
+ ],
+ '2048originel' => [
+ 'title' => '2048',
+ 'img' => 'images/3.png',
+ 'description' => 'On ne présente plus 2048 !',
+ 'url' => '2048originel/index.html',
+ 'dl' => 'telechargement/2048originel.zip',
+ 'auteur' => 'Gabriele Cirulli',
+ 'licence' => 'MIT',
+ 'src' => 'http://gabrielecirulli.github.io/2048/'
+ ],
+ 'e-tris' => [
+ 'title' => 'e-Tris',
+ 'img' => 'images/4.png',
+ 'description' => 'Classique et indémodable Tétris',
+ 'url' => 'e-tris/index.htm',
+ 'dl' => 'telechargement/e-tris.zip',
+ 'auteur' => '',
+ 'licence' => 'BSD',
+ 'src' => 'https://code.google.com/p/e-tris/'
+ ],
+ 'pappu-pakia' => [
+ 'title' => 'Pappu Pakia',
+ 'img' => 'images/5.png',
+ 'description' => 'Un flappy bird like',
+ 'url' => 'pappu-pakia/index.htm',
+ 'dl' => 'telechargement/pappu-pakia.zip',
+ 'auteur' => 'Rishabh, Kushagra',
+ 'licence' => 'MIT',
+ 'src' => 'https://github.com/rishabhp/pappu-pakia'
+ ],
+ 'esviji' => [
+ 'title' => 'Esviji',
+ 'img' => 'images/6.png',
+ 'description' => 'Dégommez des chiffres',
+ 'url' => 'esviji/index.html',
+ 'dl' => 'telechargement/esviji.zip',
+ 'auteur' => 'Nicolas Hoizey',
+ 'licence' => 'MIT',
+ 'src' => 'http://esviji.com'
+ ],
+ 'orbium' => [
+ 'title' => 'Orbium',
+ 'img' => 'images/7.png',
+ 'description' => 'Un jeu de boules pour tous les âges',
+ 'url' => 'orbium/index.html',
+ 'dl' => 'telechargement/orbium.zip',
+ 'auteur' => 'Björn Nilsson',
+ 'licence' => 'GNU GPL',
+ 'src' => 'https://github.com/bni/orbium'
+ ],
+ 'roundball' => [
+ 'title' => 'Roundball',
+ 'img' => 'images/8.png',
+ 'description' => 'Intervertissez des boules pour les aligner',
+ 'url' => 'roundball/roundball.html',
+ 'dl' => 'telechargement/roundball.zip',
+ 'auteur' => 'Digital Fruit',
+ 'licence' => 'Apache',
+ 'src' => 'https://github.com/digitalfruit/limejs'
+ ],
+ 'sokojs' => [
+ 'title' => 'SokoJS',
+ 'img' => 'images/9.png',
+ 'description' => 'Rangez des caisses',
+ 'url' => 'sokojs/main.htm',
+ 'dl' => 'telechargement/sokojs.zip',
+ 'auteur' => 'Michel Buze',
+ 'licence' => 'GNU GPL',
+ 'src' => 'https://github.com/michbuze/sokojs'
+ ],
+ 'solitaire' => [
+ 'title' => 'Solitaire',
+ 'img' => 'images/10.png',
+ 'description' => 'Du très classique',
+ 'url' => 'solitaire/index.html',
+ 'dl' => 'telechargement/solitaire.zip',
+ 'auteur' => 'Emin KURA',
+ 'licence' => 'MIT',
+ 'src' => 'https://code.google.com/p/simple-puzzle-game/'
+ ],
+ 'sudoku_js' => [
+ 'title' => 'SudokuJS',
+ 'img' => 'images/11.png',
+ 'description' => 'Placez les nombres de 1 à 9',
+ 'url' => 'sudoku_js/index.html',
+ 'dl' => 'telechargement/sudoku_js.zip',
+ 'auteur' => 'Michael Loesler',
+ 'licence' => 'GNU GPL',
+ 'src' => 'http://derletztekick.com/javascript/sudoku'
+ ],
+ 'zlizer' => [
+ 'title' => 'Zlizer',
+ 'img' => 'images/12.png',
+ 'description' => 'Ajoutez ou séparez des bulles',
+ 'url' => 'zlizer/zlizer.html',
+ 'dl' => 'telechargement/zlizer.zip',
+ 'auteur' => 'Digital Fruit',
+ 'licence' => 'Apache',
+ 'src' => 'https://github.com/digitalfruit/limejs'
+ ]
+];
+
+?>
diff --git a/sources/e-tris/.hg/00changelog.i b/sources/e-tris/.hg/00changelog.i
new file mode 100644
index 0000000..d3a8311
Binary files /dev/null and b/sources/e-tris/.hg/00changelog.i differ
diff --git a/sources/e-tris/.hg/branch b/sources/e-tris/.hg/branch
new file mode 100644
index 0000000..4ad96d5
--- /dev/null
+++ b/sources/e-tris/.hg/branch
@@ -0,0 +1 @@
+default
diff --git a/sources/e-tris/.hg/cache/branchheads-served b/sources/e-tris/.hg/cache/branchheads-served
new file mode 100644
index 0000000..4bc25b1
--- /dev/null
+++ b/sources/e-tris/.hg/cache/branchheads-served
@@ -0,0 +1,4 @@
+03c4ce7c3b47243246f1f153bd5224ff6efae2fd 5
+03c4ce7c3b47243246f1f153bd5224ff6efae2fd default
+b4630f45f59c3e0ceed3c227152d90119e12137b jslint
+36c00ea64d1d7359e356cd61ececdb89fa56e13c restructure
diff --git a/sources/e-tris/.hg/dirstate b/sources/e-tris/.hg/dirstate
new file mode 100644
index 0000000..96e7203
Binary files /dev/null and b/sources/e-tris/.hg/dirstate differ
diff --git a/sources/e-tris/.hg/hgrc b/sources/e-tris/.hg/hgrc
new file mode 100644
index 0000000..8cfd3af
--- /dev/null
+++ b/sources/e-tris/.hg/hgrc
@@ -0,0 +1,2 @@
+[paths]
+default = https://code.google.com/p/e-tris/
diff --git a/sources/e-tris/.hg/requires b/sources/e-tris/.hg/requires
new file mode 100644
index 0000000..f634f66
--- /dev/null
+++ b/sources/e-tris/.hg/requires
@@ -0,0 +1,4 @@
+dotencode
+fncache
+revlogv1
+store
diff --git a/sources/e-tris/.hg/store/00changelog.i b/sources/e-tris/.hg/store/00changelog.i
new file mode 100644
index 0000000..931337b
Binary files /dev/null and b/sources/e-tris/.hg/store/00changelog.i differ
diff --git a/sources/e-tris/.hg/store/00manifest.i b/sources/e-tris/.hg/store/00manifest.i
new file mode 100644
index 0000000..c6a7901
Binary files /dev/null and b/sources/e-tris/.hg/store/00manifest.i differ
diff --git a/sources/e-tris/.hg/store/data/index.htm.i b/sources/e-tris/.hg/store/data/index.htm.i
new file mode 100644
index 0000000..499f715
Binary files /dev/null and b/sources/e-tris/.hg/store/data/index.htm.i differ
diff --git a/sources/e-tris/.hg/store/data/script.js.i b/sources/e-tris/.hg/store/data/script.js.i
new file mode 100644
index 0000000..1827fd6
Binary files /dev/null and b/sources/e-tris/.hg/store/data/script.js.i differ
diff --git a/sources/e-tris/.hg/store/data/styles.css.i b/sources/e-tris/.hg/store/data/styles.css.i
new file mode 100644
index 0000000..ecc5d92
Binary files /dev/null and b/sources/e-tris/.hg/store/data/styles.css.i differ
diff --git a/sources/e-tris/.hg/store/fncache b/sources/e-tris/.hg/store/fncache
new file mode 100644
index 0000000..d6c71c0
--- /dev/null
+++ b/sources/e-tris/.hg/store/fncache
@@ -0,0 +1,3 @@
+data/styles.css.i
+data/index.htm.i
+data/script.js.i
diff --git a/sources/e-tris/.hg/store/phaseroots b/sources/e-tris/.hg/store/phaseroots
new file mode 100644
index 0000000..e69de29
diff --git a/sources/e-tris/.hg/store/undo b/sources/e-tris/.hg/store/undo
new file mode 100644
index 0000000..348538b
Binary files /dev/null and b/sources/e-tris/.hg/store/undo differ
diff --git a/sources/e-tris/.hg/store/undo.phaseroots b/sources/e-tris/.hg/store/undo.phaseroots
new file mode 100644
index 0000000..e69de29
diff --git a/sources/e-tris/.hg/undo.bookmarks b/sources/e-tris/.hg/undo.bookmarks
new file mode 100644
index 0000000..e69de29
diff --git a/sources/e-tris/.hg/undo.branch b/sources/e-tris/.hg/undo.branch
new file mode 100644
index 0000000..331d858
--- /dev/null
+++ b/sources/e-tris/.hg/undo.branch
@@ -0,0 +1 @@
+default
\ No newline at end of file
diff --git a/sources/e-tris/.hg/undo.desc b/sources/e-tris/.hg/undo.desc
new file mode 100644
index 0000000..3145fd0
--- /dev/null
+++ b/sources/e-tris/.hg/undo.desc
@@ -0,0 +1,3 @@
+0
+pull
+https://code.google.com/p/e-tris/
diff --git a/sources/e-tris/.hg/undo.dirstate b/sources/e-tris/.hg/undo.dirstate
new file mode 100644
index 0000000..e69de29
diff --git a/sources/e-tris/index.htm b/sources/e-tris/index.htm
new file mode 100644
index 0000000..2c812ef
--- /dev/null
+++ b/sources/e-tris/index.htm
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ 2048
+
+
+ 0
+ 0
+ Reliez les nombres et obtenez la tuile 2048 !
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Comment jouer : Utilisez les flèches du clavier pour déplacer les tuiles. Quand deux tuiles avec le même nombre se touchent, elles fusionnent ! +
++
+ Note : Framasoft héberge une instance du jeu créé par Gabriele Cirulli. sous licence libre MIT. +
+esviji
+%DESCRIPTION%
+
Your browser doesn\'t seem to support inline SVG. Learn about this game on esviji.com.
'); + $('svg').hide(); + return; + } + if (Modernizr.touch) { + // TODO: Should not be necessary, devices can have both mouse and touch + clickType = 'touchstart'; + } + if (!Modernizr.testProp('vibrate')) { + $('.prefsVibration,.label.vibration').hide(); + } + + if (!ESVIJI.settings.version.match(/VERSION/)) { + if ($('.version') === ESVIJI.settings.version) { + // Send version to Google Analitycs only if it is set in the source + offlineAnalytics.push({name: 'version', value: ESVIJI.settings.version }); + } + } + + if (!store.disabled) { + highScores = store.get('highScores') || [ ]; + gameStatus = store.get('gameStatus') || { + currentBalls: [], + currentBall: 0, + level: 0, + score: 0, + lives: 0, + playing: false, + levelReplay: { + lostLives: 0, + level: 0, + balls: [], + sequence: [] + }, + preferences: { + sound: true, + vibration: true, + difficulty: 'Beginner' + } + }; + } + + viewportOptimize(); + cursorMinY = yToSvg(1); + cursorMaxY = yToSvg(ESVIJI.settings.board.yMax); + maxAvailableBalls = ESVIJI.settings.balls.length; + + // Deal with localStore content that has been set when there was less data + if (undefined === gameStatus.levelReplay) { + // v1.6.7 + gameStatus.levelReplay = { + 'lostLives': 0, + 'level': 0, + 'balls': [], + 'sequence': [] + }; + } + if (undefined === gameStatus.preferences) { + // v1.6.8 + gameStatus.preferences = { + 'sound': true + }; + } + if (undefined === gameStatus.preferences.difficulty) { + // v1.8.0 + gameStatus.preferences.difficulty = 'Beginner'; + } + if (highScores.length === 0 || (highScores.length > 0 && undefined === highScores.Beginner)) { + // v1.8.1 + oldHighScores = highScores; + highScores = { + Beginner: [], + Easy: [], + Hard: oldHighScores, + Crazy: [] + }; + storeSet('highScores', highScores); + } + if (undefined === gameStatus.preferences.vibration) { + // v1.13.0 + gameStatus.preferences.vibration = true; + } + + // Available sounds + sounds = new Howl({ + "urls": ["sounds/sprite.ogg", "sounds/sprite.mp3"], + "sprite": { + "fall": [0, 204.05895691609976], + "hit-floor": [2000, 2000], + "hit-other-ball-ko": [5000, 468.7528344671206], + "hit-other-ball-ok": [7000, 500], + "hit-same-ball": [9000, 1000], + "hit-wall": [11000, 1835.941043083901], + "level": [14000, 2947.0068027210878], + "life-down": [18000, 1000], + "life-up": [20000, 1000], + "throw": [22000, 797.1201814058943] + }, + buffer: true + }); + + run(); + } + + function storeSet(item, value) { + if (!store.disabled) { + store.set(item, value); + } + } + + function viewportOptimize() { + if (viewportWidth != document.body.clientWidth || viewportHeight != document.body.clientHeight) { + viewportWidth = document.body.clientWidth; + viewportHeight = document.body.clientHeight; + if (viewportHeight / viewportWidth > ESVIJI.settings.board.height / ESVIJI.settings.board.width) { + // tall + boardWidth = viewportWidth; + boardHeight = ESVIJI.settings.board.height / ESVIJI.settings.board.width * boardWidth; + boardOffsetY = viewportHeight - boardHeight; // top empty area height + } else { + // large + boardHeight = viewportHeight; + boardWidth = ESVIJI.settings.board.width / ESVIJI.settings.board.height * boardHeight; + boardOffsetY = 0; + } + } + } + + function run() { + if (typeof gameStatus.playing === 'undefined' || gameStatus.playing === false) { + showPanel('main'); + startMain(); + } else { + useStored = true; + startPlaying(); + } + } + + function startMain(difficulty) { + $('#pulse')[0].beginElement(); + $('#main .start').one(clickType, startDifficulty); + $('#main .scores').one(clickType, startScores); + $('#main .settings').one(clickType, startSettings); + } + + function startDifficulty() { + hidePanel('main'); + showPanel('difficulty'); + $('#difficulty .beginner').one(clickType, function (event) { + event.preventDefault(); + gameStatus.preferences.difficulty = 'Beginner'; + hidePanel('difficulty'); + startPlaying(); + }); + $('#difficulty .easy').one(clickType, function (event) { + event.preventDefault(); + gameStatus.preferences.difficulty = 'Easy'; + hidePanel('difficulty'); + startPlaying(); + }); + $('#difficulty .hard').one(clickType, function (event) { + event.preventDefault(); + gameStatus.preferences.difficulty = 'Hard'; + hidePanel('difficulty'); + startPlaying(); + }); + $('#difficulty .crazy').one(clickType, function (event) { + event.preventDefault(); + gameStatus.preferences.difficulty = 'Crazy'; + hidePanel('difficulty'); + startPlaying(); + }); + $('#difficulty .exit').one(clickType, endDifficulty); + } + + function endDifficulty(event) { + event.preventDefault(); + hidePanel('difficulty'); + showPanel('main'); + startMain(); + } + + function startPlaying(event) { + if (undefined !== event) { + event.preventDefault(); + } + if (!useStored) { + gameStatus.level = ESVIJI.settings.launch.level; + gameStatus.score = ESVIJI.settings.launch.score; + gameStatus.lives = ESVIJI.settings.launch.lives; + hidePanel('play'); + if (null !== drawnCurrentBall) { + drawnCurrentBall.remove(); + } + drawnCurrentBall = null; + } + showPanel('play'); + drawLevel(); + drawScore(); + drawLives(); + $('#play .pauseButton').one(clickType, startPause); + nextLevel(); + } + + function stopPlaying() { + gameStatus.playing = false; + gameStatus.level = 0; + gameStatus.score = 0; + gameStatus.lives = 0; + eraseBalls(); + if (null !== drawnCurrentBall) { + drawnCurrentBall.remove(); + } + hidePanel('play'); + storeSet('gameStatus', { + 'playing': false + }); + run(); + } + + function startTutorial() { + hidePanel('settings'); + showPanel('tutorial'); + $('#tutorial .pauseButton').one(clickType, endTutorial); + $('#tutoAnimEnd')[0].addEventListener('endEvent', endTutorial, false); + $('#tutoAnimStart')[0].beginElement(); + } + + function endTutorial(event) { + event.preventDefault(); + hidePanel('tutorial'); + showPanel('settings'); + startSettings(); + } + + function startScores() { + var difficulty = gameStatus.preferences.difficulty; + + hidePanel('main'); + showPanel('scores'); + + $('#scores .difficulty text').text(difficulty); + $('#scores .difficulty').bind(clickType, function() { + var nextDifficulty = { + Beginner: 'Easy', + Easy: 'Hard', + Hard: 'Crazy', + Crazy: 'Beginner' + }, + difficulty = nextDifficulty[$(this).find('text').text()]; + + $('#scores .difficulty text').text(difficulty); + writeScores(difficulty); + }); + + writeScores(difficulty); + + $('#scores .exit').one(clickType, endScores); + } + + function writeScores(difficulty) { + for (i = 0; i < 10; i++) { + if (undefined !== highScores[difficulty][i]) { + $('#scores .highscores text').eq(i).text(highScores[difficulty][i].score); + if (difficulty === gameStatus.preferences.difficulty && lastGameDate === highScores[difficulty][i].date) { + $('#scores .highscores text').eq(i).attr('class', 'thisone'); + } + } else { + $('#scores .highscores text').eq(i).text('-').attr('class', ''); + } + } + } + + function endScores(event) { + event.preventDefault(); + hidePanel('scores'); + showPanel('main'); + startMain(); + } + + function startSettings() { + hidePanel('main'); + showPanel('settings'); + + $('#settings .prefsSound text').text(gameStatus.preferences.sound ? 'On' : 'Off'); + $('#settings .prefsSound').bind(clickType, function() { + gameStatus.preferences.sound = !gameStatus.preferences.sound; + storeSet('gameStatus', gameStatus); + $('#settings .prefsSound text').text(gameStatus.preferences.sound ? 'On' : 'Off'); + }); + + $('#settings .prefsVibration text').text(gameStatus.preferences.vibration ? 'On' : 'Off'); + $('#settings .prefsVibration').bind(clickType, function() { + gameStatus.preferences.vibration = !gameStatus.preferences.vibration; + storeSet('gameStatus', gameStatus); + $('#settings .prefsVibration text').text(gameStatus.preferences.vibration ? 'On' : 'Off'); + }); + + $('#settings .tutorial').one(clickType, startTutorial); + + $('#settings .exit').one(clickType, endSettings); + + showInstall(); + } + + function endSettings(event) { + event.preventDefault(); + hidePanel('settings'); + showPanel('main'); + startMain(); + } + + function startPause() { + showPanel('pause'); + $('#pause .resume').one(clickType, function(e) { + e.preventDefault(); + hidePanel('pause'); + $('#play .pauseButton').one(clickType, startPause); + }); + + $('#pause .restart').one(clickType, function(e) { + e.preventDefault(); + hidePanel('pause'); + storeSet('gameStatus', { + 'playing': false + }); + startPlaying(); + }); + + $('#pause .prefsSound text').text(gameStatus.preferences.sound ? 'On' : 'Off'); + $('#pause .prefsSound').bind(clickType, function() { + gameStatus.preferences.sound = !gameStatus.preferences.sound; + storeSet('gameStatus', gameStatus); + $('#pause .prefsSound text').text(gameStatus.preferences.sound ? 'On' : 'Off'); + }); + + $('#pause .prefsVibration text').text(gameStatus.preferences.vibration ? 'On' : 'Off'); + $('#pause .prefsVibration').bind(clickType, function() { + gameStatus.preferences.vibration = !gameStatus.preferences.vibration; + storeSet('gameStatus', gameStatus); + $('#pause .prefsVibration text').text(gameStatus.preferences.vibration ? 'On' : 'Off'); + }); + + $('#pause .exit').one(clickType, function(e) { + e.preventDefault(); + hidePanel('pause'); + stopPlaying(); + }); + } + + // There is no z-index in SVG, so we need to "create" panel we want on top of all others + function showPanel(panel) { + if ( $('#' + panel).length === 0 && $('#' + panel + 'Panel').length === 1) { + $('#' + panel + 'Panel').clone().attr('id', panel).appendTo('#board'); + $('#' + panel + 'Panel').remove(); + if (panel === 'pause' || panel === 'gameOver') { + $('#play').css('opacity', 0.3); + } + // Google Analytics tracking of activated panel + offlineAnalytics.push({ name: 'view', value: '/' + (panel === 'main' ? '' : panel + '/') }); + } + } + + function hidePanel(panel) { + if ($('#' + panel).length === 1 && $('#' + panel + 'Panel').length === 0) { + $('#' + panel).clone().attr('id', panel + 'Panel').appendTo('#board defs'); + $('#' + panel).remove(); + if (panel === 'pause' || panel === 'gameOver') { + $('#play').css('opacity', 1); + } + } + } + + function nextLevel() { + gameStatus.playing = true; + eraseBalls(); + if (useStored) { + drawBalls(); + } else { + gameStatus.level++; + drawLevel(); + $('#play .level').attr('class', 'level changeUp'); + window.setTimeout(function() { $('#play .level').attr('class', 'level'); }, 2000); + initBalls(); + drawBalls(); + getValidBalls(); + gameStatus.currentBall = validBalls[Math.floor(Math.random() * validBalls.length)]; + } + + // TODO: remove "null" values from gameStatus.currentBalls + gameStatus.levelReplay = { + 'lostLives': 0, + 'level': gameStatus.level, + 'balls': gameStatus.currentBalls.map(function(a) { return a === null ? null : a.slice(); }), // clone the array (https://twitter.com/naholyr/status/311112698421198848) + 'sequence': [] + }; + + playSound('level'); + startNewTurn(); + } + + function startNewTurn() { + currentPosX = ESVIJI.settings.turn.posX; + currentDirX = ESVIJI.settings.turn.dirX; + currentPosY = ESVIJI.settings.turn.posY; + currentDirY = ESVIJI.settings.turn.dirY; + scoreThisTurn = 0; + lastHitBall = ESVIJI.settings.rockId; + getValidBalls(); + + stackedAnimationToStart = 1; + lastStackedAnimation = 0; + + if (validBalls.length === 0) { + // no more valid ball, end of the turn + if (null !== drawnCurrentBall) { + drawnCurrentBall.remove(); // TODO: animate + drawnCurrentBall = null; + } + + if (ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].extraLifeLevel > 0) { + gameStatus.lives += ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].extraLifeLevel; + drawLives(); + $('#play .lives').attr('class', 'lives changeUp'); + window.setTimeout(function() { $('#play .lives').attr('class', 'lives'); }, 2000); + } + + // Push to the server levels completed without any lost life + if (gameStatus.levelReplay.lostLives === 0) { + // TODO + // call the API + //console.log(JSON.stringify(gameStatus.levelReplay)); + } + + makeEverythingFall(); + } else { + if (validBalls.indexOf(gameStatus.currentBall) == -1) { + var notPlayableAnimMain = svgAnimate({ + "attributeName": "opacity", + "from": "0", + "to": "1", + "begin": "indefinite", + "dur": "0.5s", + "repeatCount": "4", + "fill": "freeze", + "id": "notPlayableAnim" + }); + notPlayableAnimMain.addEventListener('beginEvent', function () { playSound('error'); }, false); + notPlayableAnimMain.addEventListener('endEvent', notPlayable, false); + if (null !== drawnCurrentBall) { + drawnCurrentBall.append(notPlayableAnimMain); + } + $('[data-valid=true]').each(function() { + that = $(this); + var notPlayableAnim = svgAnimate({ + "attributeName": "opacity", + "from": "0", + "to": "1", + "begin": "notPlayableAnim.begin", + "dur": "0.5s", + "repeatCount": "4", + "fill": "freeze" + }); + that.append(notPlayableAnim); + }); + notPlayableAnimMain.beginElement(); + } else { + storeSet('gameStatus', gameStatus); + useStored = false; + if (gameStatus.playing) { + if (null !== drawnCurrentBall && undefined !== drawnCurrentBall) { + drawnCurrentBall.remove(); + } + drawnCurrentBall = drawBall(xToSvg(currentPosX), yToSvg(currentPosY), ESVIJI.settings.balls[gameStatus.currentBall - 1], 'playable'); + $('#play .playzone').on('mousedown touchstart', cursorStart); + $('#play .playzone').on('mousemove touchmove', cursorMove); + $('#play .playzone').on('mouseup touchend', cursorEnd); + $('#play .playzone').on('touchcancel', startNewTurn); + Mousetrap.bind('up', keyUp); + Mousetrap.bind('down', keyDown); + Mousetrap.bind(['enter', 'space'], keyEnter); + Mousetrap.bind('esc', function() { console.log('esc'); startNewTurn(); }); + } + } + } + } + + function notPlayable() { + if (null !== drawnCurrentBall) { + drawnCurrentBall.remove(); + } + drawnCurrentBall = null; + removeLife(); + gameStatus.currentBall = validBalls[Math.floor(Math.random() * validBalls.length)]; + startNewTurn(); + } + + function keyUp(event) { + cursorY = Math.min(Math.max(yToSvg(currentPosY + 1), cursorMaxY), cursorMinY); + currentPosY = svgToY(cursorY); + drawnCurrentBall.attr({ + y: cursorY + }); + } + + function keyDown(event) { + cursorY = Math.min(Math.max(yToSvg(currentPosY - 1), cursorMaxY), cursorMinY); + currentPosY = svgToY(cursorY); + drawnCurrentBall.attr({ + y: cursorY + }); + } + + function keyEnter(event) { + Mousetrap.unbind('up'); + Mousetrap.unbind('down'); + Mousetrap.unbind(['enter', 'space']); + $('#play .playzone').off('mousedown touchstart'); + $('#play .playzone').off('mousemove touchmove'); + $('#play .playzone').off('mouseup touchend'); + drawnCurrentBall.attr({ + 'class': '' + }); + moveCount = 0; + oldPosX = currentPosX; + oldPosY = currentPosY; + + cursorY = yToSvg(currentPosY); + drawnCurrentBall.attr({ + y: cursorY + }); + currentPosY = svgToY(cursorY); + + gameStatus.levelReplay.sequence.push({ + 'ball': gameStatus.currentBall, + 'position': currentPosY + }); + + playSound('throw'); + playUserChoice(); + } + + function cursorStart(event) { + event.preventDefault(); + dragged = true; + if (event.originalEvent.touches && event.originalEvent.touches.length) { + event = event.originalEvent.touches[0]; + } else if (event.originalEvent.changedTouches && event.originalEvent.changedTouches.length) { + event = event.originalEvent.changedTouches[0]; + } + cursorY = Math.min(Math.max(pixelsToSvgY(event.pageY) - 16, cursorMaxY), cursorMinY); + drawnCurrentBall.attr({ + y: cursorY + }); + } + + function cursorMove(event) { + event.preventDefault(); + if (event.originalEvent.touches && event.originalEvent.touches.length) { + event = event.originalEvent.touches[0]; + } else if (event.originalEvent.changedTouches && event.originalEvent.changedTouches.length) { + event = event.originalEvent.changedTouches[0]; + } + // event.pageY seems to be returning weird values when movement starts + cursorY = Math.min(Math.max(pixelsToSvgY(event.pageY) - 16, cursorMaxY), cursorMinY); + currentPosY = svgToY(cursorY); + drawnCurrentBall.attr({ + y: cursorY + }); + } + + function cursorEnd(event) { + event.preventDefault(); + if (dragged) { + if (event.originalEvent.touches && event.originalEvent.touches.length) { + event = event.originalEvent.touches[0]; + } else if (event.originalEvent.changedTouches && event.originalEvent.changedTouches.length) { + event = event.originalEvent.changedTouches[0]; + } + dragged = false; + Mousetrap.unbind('up'); + Mousetrap.unbind('down'); + Mousetrap.unbind(['enter', 'space']); + $('#play .playzone').off('mousedown touchstart'); + $('#play .playzone').off('mousemove touchmove'); + $('#play .playzone').off('mouseup touchend'); + cursorY = Math.min(Math.max(pixelsToSvgY(event.pageY) - 16, cursorMaxY), cursorMinY); + currentPosY = svgToY(cursorY); + drawnCurrentBall.attr({ + y: yToSvg(currentPosY) + }); + moveCount = 0; + oldPosX = currentPosX; + oldPosY = currentPosY; + + gameStatus.levelReplay.sequence.push({ + 'ball': gameStatus.currentBall, + 'position': currentPosY + }); + + playSound('throw'); + playUserChoice(); + } + } + + function playUserChoice() { + moveCount++; + if (currentPosY == 1 && currentDirY == -1) { + // Against the floor, no more possible move + if (oldPosY != 1) { + animStackMove(drawnCurrentBall, (oldPosY - currentPosY) * ESVIJI.settings.durationMove, 'y', yToSvg(oldPosY), yToSvg(currentPosY)); + } + $('#anim' + lastStackedAnimation)[0].addEventListener('beginEvent', function(event) { + playSound('hit-floor'); + }); + endOfMove(); + } else { + if (currentPosX == 1 && currentDirX == -1) { + // Against the left wall, should now go down + currentDirX = 0; + currentDirY = -1; + animStackMove(drawnCurrentBall, (oldPosX - currentPosX) * ESVIJI.settings.durationMove, 'x', xToSvg(oldPosX), xToSvg(currentPosX)); + $('#anim' + lastStackedAnimation)[0].addEventListener('endEvent', function(event) { + playSound('hit-wall'); + }, false); + oldPosX = currentPosX; + playUserChoice(); + } else { + // Neither floor nor wall, so what is it? + nextBall = gameStatus.currentBalls[currentPosX + currentDirX][currentPosY + currentDirY]; + switch (nextBall) { + case ESVIJI.settings.rockId: + // A rock... + if (currentDirX == -1) { + // ...at our left, should now go down + currentDirX = 0; + currentDirY = -1; + animStackMove(drawnCurrentBall, (oldPosX - currentPosX) * ESVIJI.settings.durationMove, 'x', xToSvg(oldPosX), xToSvg(currentPosX)); + oldPosX = currentPosX; + $('#anim' + lastStackedAnimation)[0].addEventListener('endEvent', function(event) { + playSound('hit-wall'); + }, false); + playUserChoice(); + } else { + // ...under us, no more possible move + if (oldPosY != currentPosY) { + animStackMove(drawnCurrentBall, (oldPosY - currentPosY) * ESVIJI.settings.durationMove, 'y', yToSvg(oldPosY), yToSvg(currentPosY)); + } + $('#anim' + lastStackedAnimation)[0].addEventListener('endEvent', function(event) { + playSound('hit-floor'); + }, false); + endOfMove(); + } + break; + case ESVIJI.settings.emptyId: + // Nothing can stop us + currentPosX += currentDirX; + currentPosY += currentDirY; + playUserChoice(); + break; + case gameStatus.currentBall: + // Same ball, let's destroy it! + currentPosXBefore = currentPosX; + currentPosYBefore = currentPosY; + currentPosX += currentDirX; + currentPosY += currentDirY; + gameStatus.currentBalls[currentPosX][currentPosY] = ESVIJI.settings.emptyId; + if (currentPosXBefore != oldPosX) { + animStackMove(drawnCurrentBall, (oldPosX - currentPosXBefore) * ESVIJI.settings.durationMove, 'x', xToSvg(oldPosX), xToSvg(currentPosXBefore)); + oldPosX = currentPosXBefore; + } else if (currentPosYBefore != oldPosY) { + animStackMove(drawnCurrentBall, (oldPosY - currentPosYBefore) * ESVIJI.settings.durationMove, 'y', yToSvg(oldPosY), yToSvg(currentPosYBefore)); + oldPosY = currentPosYBefore; + } + animStackDestroy(drawnCurrentBalls[currentPosX][currentPosY]); + scoreThisTurn++; + playSound('hit-same-ball'); + playUserChoice(); + break; + default: + lastHitBall = nextBall; + if (currentPosX != oldPosX) { + animStackMove(drawnCurrentBall, (oldPosX - currentPosX) * ESVIJI.settings.durationMove, 'x', xToSvg(oldPosX), xToSvg(currentPosX)); + } else if (currentPosY != oldPosY) { + animStackMove(drawnCurrentBall, (oldPosY - currentPosY) * ESVIJI.settings.durationMove, 'y', yToSvg(oldPosY), yToSvg(currentPosY)); + } + if (scoreThisTurn > 0) { + gameStatus.currentBall = nextBall; + if (currentPosX != oldPosX) { + animStackMorph(drawnCurrentBall, nextBall, xToSvg(currentPosX), yToSvg(currentPosY), 'x', xToSvg(currentPosX), xToSvg(currentPosX + currentDirX)); + } else { + animStackMorph(drawnCurrentBall, nextBall, xToSvg(currentPosX), yToSvg(currentPosY), 'y', yToSvg(currentPosY), yToSvg(currentPosY + currentDirY)); + } + } + endOfMove(); + } + } + } + } + + function endOfTurn() { + if (scoreThisTurn === 0) { + if (lastHitBall != ESVIJI.settings.rockId) { + removeLife(); + } + } else { + addScore(scoreThisTurn); + } + stackedAnimationToStart = lastStackedAnimation + 1; + startNewTurn(); + } + + function svgAnimate(settings, type) { + var anim = document.createElementNS("http://www.w3.org/2000/svg", type || "animate"); + anim.setAttributeNS(null, "attributeType", "xml"); + for (var key in settings) { + anim.setAttributeNS(null, key, settings[key]); + } + return anim; + } + + function svgAnimateTransform(settings) { + return svgAnimate(settings, 'animateTransform'); + } + + function animStackMove(ball, duration, attribute, from, to, begin) { + if (begin === undefined) { + if (lastStackedAnimation === (stackedAnimationToStart - 1)) { + begin = 'indefinite'; + } else { + begin = 'anim' + lastStackedAnimation + '.end'; + } + } + + lastStackedAnimation++; + + anim = svgAnimate({ + "attributeName": attribute, + "from": from, + "to": to, + "begin": begin, + "dur": duration + "s", + "fill": "freeze", + "id": "anim" + lastStackedAnimation + }); + anim.attribute = attribute; + anim.attributeTo = to; + anim.addEventListener('endEvent', function (event) { + // Set new attribute value at the end of the animation + $(event.currentTarget.parentElement).attr(event.currentTarget.attribute, event.currentTarget.attributeTo); + // Remove the animation + $(event.currentTarget).remove(); + }, false); + ball.append(anim); + } + + function animStackMorph(ballFrom, ballToId, x, y, attribute, from, to) { + var ballTo = svgUse("ball" + ballToId, "morph"); + ballTo.attr({ + x: x, + y: y, + opacity: 0 + }); + $("#play").append(ballTo); + + // opacity from + animOpacityFrom = svgAnimate({ + "attributeName": "opacity", + "to": "0", + "begin": "anim" + lastStackedAnimation + ".end", + "dur": ESVIJI.settings.durationMorph + "s", + "fill": "freeze", + "id": "anim" + (lastStackedAnimation + 1) + }); + ballFrom.append(animOpacityFrom); + + // move + animMoveFrom = svgAnimate({ + "attributeName": attribute, + "from": from, + "to": to, + "begin": "anim" + lastStackedAnimation + ".end", + "dur": ESVIJI.settings.durationMorph + "s", + "fill": "freeze", + "id": "anim" + (lastStackedAnimation + 2) + }); + ballFrom.append(animMoveFrom); + + // opacity to + animOpacityTo = svgAnimate({ + "attributeName": "opacity", + "to": "1", + "begin": "anim" + lastStackedAnimation + ".end", + "dur": ESVIJI.settings.durationMorph + "s", + "fill": "freeze", + "id": "anim" + (lastStackedAnimation + 3) + }); + ballTo.append(animOpacityTo); + + // move + animMoveTo = svgAnimate({ + "attributeName": attribute, + "from": from, + "to": to, + "begin": "anim" + lastStackedAnimation + ".end", + "dur": ESVIJI.settings.durationMorph + "s", + "fill": "freeze", + "id": "anim" + (lastStackedAnimation + 4) + }); + animMoveTo.addEventListener('beginEvent', function(event) { + playSound('hit-other-ball-ok'); + }, false); + ballTo.append(animMoveTo); + + lastStackedAnimation += 4; + } + + function animStackDestroy(ball, begin) { + begin = begin || ((lastStackedAnimation === 0) ? "indefinite" : ("anim" + lastStackedAnimation + ".end")); + + // rotate + var centerX = parseInt(ball.attr('x'), 10) + 16, + centerY = parseInt(ball.attr('y'), 10) + 16, + animRotate = svgAnimateTransform({ + "attributeName": "transform", + "type": "rotate", + "from": "0 " + centerX + " " + centerY, + "to": "360 " + centerX + " " + centerY, + "begin": begin, + "dur": ESVIJI.settings.durationMove * 2 + "s", + "fill": "freeze", + "id": "anim" + (lastStackedAnimation + 1) + }); + animRotate.addEventListener('beginEvent', function(event) { + playSound('hit-same-ball'); + }, false); + ball.append(animRotate); + + // opacity + var animOpacity = svgAnimate({ + "attributeName": "opacity", + "to": "0", + "begin": "anim" + (lastStackedAnimation + 1) + ".begin", + "dur": ESVIJI.settings.durationMove * 2 + "s", + "fill": "freeze", + "id": "anim" + (lastStackedAnimation + 2) + }); + animOpacity.addEventListener('endEvent', function(event) { + // Remove the ball after the animation + $(event.currentTarget.parentElement).remove(); + }, false); + ball.append(animOpacity); + + lastStackedAnimation += 2; + } + + function endOfMove() { + $('#anim' + lastStackedAnimation)[0].addEventListener('endEvent', function(event) { + drawnCurrentBall.remove(); + $('#morph').remove(); + if (scoreThisTurn === 0) { + playSound('hit-other-ball-ko'); + } + drawnCurrentBall = drawBall(xToSvg(ESVIJI.settings.turn.posX), yToSvg(ESVIJI.settings.turn.posY), ESVIJI.settings.balls[gameStatus.currentBall - 1], 'playable'); + }); + + makeBallsFall(); + } + + function makeBallsFall() { + var aboveBalls; + + lastStackedAnimationBeforeFall = lastStackedAnimation; + for (var x = 1; x <= 7; x++) { + aboveBalls = 0; + for (var y = 1; y <= 6; y++) { + // No need to check if there is a hole in the top line, no ball upper to make fall + if (gameStatus.currentBalls[x][y] === ESVIJI.settings.emptyId) { + // There's a hole, let's see if there are balls above + for (var z = y + 1; z <= 7; z++) { + switch (gameStatus.currentBalls[x][z]) { + case ESVIJI.settings.rockId: + // It's a rock, we can bypass it + y = z; + z = 8; + break; + case ESVIJI.settings.emptyId: + // It's empty + if (z === 7) { + // Only empty places, no need to test further this column + y = 7; + } + break; + default: + // Neither rock nor empty, so there's a ball + aboveBalls++; + gameStatus.currentBalls[x][y] = gameStatus.currentBalls[x][z]; + drawnCurrentBalls[x][y] = drawnCurrentBalls[x][z]; + for (var a = y + 1; a <= z; a++) { + gameStatus.currentBalls[x][a] = ESVIJI.settings.emptyId; + drawnCurrentBalls[x][a] = null; + } + dur = ESVIJI.settings.durationMove * (z - y); + // Follow through and overlapping action: http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/ + dur = dur * (1 + aboveBalls / 3); + // TODO: add an easing to the fall animation + animStackMove(drawnCurrentBalls[x][y], dur, 'y', yToSvg(z), yToSvg(y), 'anim' + lastStackedAnimationBeforeFall + '.end'); + // TODO: make the sound later as for piles of falling balls + $('#anim' + lastStackedAnimation)[0].addEventListener('beginEvent', function(event) { + playSound('fall'); + }); + // Let's try again to see if there are new balls above that have to fall + y = 1; + z = 8; + } + } + } + } + } + + if (lastStackedAnimation >= stackedAnimationToStart) { + $('#anim' + lastStackedAnimation)[0].addEventListener('endEvent', function(event) { + endOfTurn(); + }, false); + // Launch the animation + $('#anim' + stackedAnimationToStart)[0].beginElement(); + } else { + endOfTurn(); + } + } + + function makeEverythingFall() { + var ballsUnder; + + stackedAnimationToStart = 1; + lastStackedAnimation = 0; + + for (x = 1; x <= 7; x++) { + ballsUnder = 0; + for (y = 1; y <= 7; y++) { + if (gameStatus.currentBalls[x][y] != ESVIJI.settings.emptyId) { + dur = ESVIJI.settings.durationMove * (1 + ballsUnder / 3); + if (lastStackedAnimation === 0) { + animStackMove(drawnCurrentBalls[x][y], dur * 7, 'y', yToSvg(y), yToSvg(y - 7)); + } else { + animStackMove(drawnCurrentBalls[x][y], dur * 7, 'y', yToSvg(y), yToSvg(y - 7), 'anim' + stackedAnimationToStart + '.begin'); + } + drawnCurrentBalls[x][y] = ESVIJI.settings.emptyId; + ballsUnder++; + } else { + ballsUnder = 0; + } + } + } + + if (lastStackedAnimation >= stackedAnimationToStart) { + $('#anim' + lastStackedAnimation)[0].addEventListener('endEvent', function(event) { + nextLevel(); + }, false); + $('#anim' + stackedAnimationToStart)[0].beginElement(); + } else { + nextLevel(); + } + } + + function initBalls(thisLevel) { + thisLevel = thisLevel || gameStatus.level; + nbBalls = ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].balls(thisLevel); + gameStatus.currentBalls = []; + + for (x = 1; x <= ESVIJI.settings.board.xMax; x++) { + gameStatus.currentBalls[x] = []; + for (y = 1; y <= ESVIJI.settings.board.yMax; y++) { + if (y - 7 > x) { + // put the "stair" rocks + gameStatus.currentBalls[x][y] = ESVIJI.settings.rockId; + } else { + if ((x <= ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].columns(thisLevel)) && (y <= ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].rows(thisLevel))) { + // a ball + gameStatus.currentBalls[x][y] = 1 + Math.floor(Math.random() * nbBalls); + } else { + // empty + gameStatus.currentBalls[x][y] = ESVIJI.settings.emptyId; + } + } + } + } + // add rocks + nbRocks = ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].rocks(thisLevel); + positionedRocks = 0; + while (positionedRocks < nbRocks) { + rock_x = 1 + Math.floor(Math.random() * ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].rows(thisLevel)); + rock_y = 1 + Math.floor(Math.random() * ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].columns(thisLevel)); + if (gameStatus.currentBalls[rock_x][rock_y] !== ESVIJI.settings.rockId) { + gameStatus.currentBalls[rock_x][rock_y] = ESVIJI.settings.rockId; + positionedRocks++; + } + } + } + + function drawBall(x, y, ballType, ballId) { + var ball = svgUse(ballType, ballId); + ball.attr({ + x: x, + y: y + }); + $("#play").append(ball); + return ball; + } + + function svgUse(refId, useId) { + var use = $(document.createElementNS("http://www.w3.org/2000/svg", "use")); + if (useId !== undefined) { + use.attr({ + id: useId + }); + } + use.get(0).setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + refId); + return use; + } + + function drawBalls() { + drawnCurrentBalls = []; + for (x = 1; x <= 7; x++) { + drawnCurrentBalls[x] = []; + for (y = 1; y <= 7; y++) { + if (gameStatus.currentBalls[x][y] == ESVIJI.settings.emptyId) { + drawnCurrentBalls[x][y] = null; + } else { + ball_x = xToSvg(x); + ball_y = yToSvg(y); + if (gameStatus.currentBalls[x][y] == ESVIJI.settings.rockId) { + rockId = 1 + Math.floor(Math.random() * ESVIJI.settings.rocks.length); + drawnCurrentBalls[x][y] = drawBall(ball_x, ball_y, ESVIJI.settings.rocks[rockId - 1]); + } else { + drawnCurrentBalls[x][y] = drawBall(ball_x, ball_y, ESVIJI.settings.balls[gameStatus.currentBalls[x][y] - 1]); + } + } + } + } + } + + function eraseBalls() { + $('#play use').remove(); + } + + function getValidBalls() { + var x, y, dir_x, dir_y, found; + + validBalls = []; + + for (y_start = 1; y_start <= 13; y_start++) { + x = 10; + y = y_start; + dir_x = -1; + dir_y = 0; + found = false; + while (!found) { + if (y == 1 && dir_y == -1) { + found = true; + } else { + if (x == 1 && dir_x == -1) { + dir_x = 0; + dir_y = -1; + } else { + nextBall = gameStatus.currentBalls[x + dir_x][y + dir_y]; + if (nextBall == ESVIJI.settings.rockId) { + if (dir_x == -1) { + dir_x = 0; + dir_y = -1; + } else { + found = true; + } + } else { + if (nextBall == ESVIJI.settings.emptyId) { + x += dir_x; + y += dir_y; + } else { + drawnCurrentBalls[x + dir_x][y + dir_y].attr('data-valid', 'true'); + if (validBalls.indexOf(nextBall) == -1) { + validBalls.push(nextBall); + } + found = true; + } + } + } + } + } + } + } + + function gameOver() { + var l = highScores[gameStatus.preferences.difficulty].length, + positioned = false; + + // Google Analytics tracking of level and score at the end of the game + offlineAnalytics.push({ name: 'level', value: gameStatus.level }); + offlineAnalytics.push({ name: 'score', value: gameStatus.score }); + + lastGameDate = Date(); + showPanel('gameOver'); + + $('#gameOver').find('.score').text('Score: ' + gameStatus.score); + for (i = 0; i < l; i++) { + if (!positioned && (highScores[gameStatus.preferences.difficulty][i] === undefined || highScores[gameStatus.preferences.difficulty][i].score <= gameStatus.score)) { + for (j = l; j > i; j--) { + highScores[gameStatus.preferences.difficulty][j] = highScores[gameStatus.preferences.difficulty][j - 1]; + } + highScores[gameStatus.preferences.difficulty][i] = { 'score': gameStatus.score, 'date': lastGameDate}; + positioned = true; + } + } + if (!positioned) { + highScores[gameStatus.preferences.difficulty][l] = { 'score': gameStatus.score, 'date': lastGameDate}; + } + storeSet('highScores', highScores); + gameStatus.playing = false; + storeSet('gameStatus', { + 'playing': false + }); + + // buttons + $('#gameOver .scores').one(clickType, function() { + hidePanel('gameOver'); + hidePanel('play'); + showPanel('main'); + startScores(); + }); + $('#gameOver .playagain').one(clickType, function() { + hidePanel('gameOver'); + startPlaying(); + }); + $('#gameOver .exit').one(clickType, function() { + hidePanel('gameOver'); + stopPlaying(); + }); + } + + function removeLife() { + gameStatus.lives--; + gameStatus.levelLostLives++; + playSound('life-down'); + vibrate(500); + drawLives(); + $('#play .lives').attr('class', 'lives changeDown'); + window.setTimeout(function() { $('#play .lives').attr('class', 'lives'); }, 2000); + if (gameStatus.lives === 0) { + gameOver(); + } + } + + function addLives(nbLives) { + gameStatus.lives += nbLives; + playSound('life-up'); + drawLives(); + $('#play .lives').attr('class', 'lives changeUp'); + window.setTimeout(function() { $('#play .lives').attr('class', 'lives'); }, 2000); + } + + function addScore(scoreToAdd) { + oldScore = gameStatus.score; + gameStatus.score += ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].points(scoreToAdd); + increaseScore(); + $('#play .score').attr('class', 'score changeUp'); + window.setTimeout(function() { $('#play .score').attr('class', 'score'); }, 2000); + hundreds = Math.floor(gameStatus.score / ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].extraLifePoints) - Math.floor(oldScore / ESVIJI.settings.difficulties[gameStatus.preferences.difficulty].extraLifePoints); + if (hundreds > 0) { + addLives(hundreds); + } + } + + function increaseScore() { + currentDrawnScore = parseInt($('#play .score').text(), 10); + if (currentDrawnScore < gameStatus.score) { + $('#play .score').text(currentDrawnScore + Math.ceil((gameStatus.score - currentDrawnScore) / 3)); + window.setTimeout(increaseScore, 100); + } + } + + function drawScore() { + $('#play .score').text(gameStatus.score); + } + + function drawLevel() { + $('#play .level').text(gameStatus.level); + } + + function drawLives() { + $('#play .lives').text(gameStatus.lives); + } + + function xToSvg(x) { + return (x - 1) * 32; + } + + function yToSvg(y) { + return ESVIJI.settings.board.height - 32 * y; + } + + function svgToX(coordX) { + return coordX / 32 + 1; + } + + function svgToY(coordY) { + return Math.round((ESVIJI.settings.board.height - coordY) / 32); + } + + function pixelsToSvgY(coordY) { + return (coordY - boardOffsetY) * ESVIJI.settings.board.height / boardHeight; + } + + function playSound(type) { + if (gameStatus.preferences.sound && sounds._loaded) { + sounds.play(type); + } + } + + function vibrate(duration) { + if (Modernizr.testProp('vibrate') && gameStatus.preferences.vibration) { + navigator.vibrate = navigator.vibrate || navigator.mozVibrate || navigator.webkitVibrate; + navigator.vibrate(duration); + } + } + + function install() { + var manifestUrl = location.href.substring(0, location.href.lastIndexOf('/')) + '/manifest.webapp'; + var request = window.navigator.mozApps.install(manifestUrl); + request.onsuccess = function() { + // var appRecord = this.result; + alert('Installation successful!'); + $('#installButton').css('display', 'none'); + }; + request.onerror = function() { + // Display the error information from the DOMError object + console.error('Install failed, error: ' + this.error.name); + }; + } + + function showInstall() { + if (undefined !== navigator.mozApps) { + var request = navigator.mozApps.getSelf(); + request.onsuccess = function() { + if (request.result) { + // we're installed, nothing to do + } else { + $('#installButton').css('display', 'block').one(clickType, install); + } + }; + request.onerror = function() { + console.error('Error checking installation status: ' + this.error.message); + }; + } + } + + return { + init: init, + viewportOptimize: viewportOptimize + }; +})(); + +document.addEventListener('DOMContentLoaded', function() { + ESVIJI.game.init(); +}); + +window.addEventListener('resize', ESVIJI.game.viewportOptimize); +window.addEventListener('orientationchange', ESVIJI.game.viewportOptimize); + +/*************************************************************************************** + * appcache + ***************************************************************************************/ + +// Check if a new cache is available +if (window.applicationCache) { + window.applicationCache.addEventListener('updateready', function(e) { + if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { + // Browser downloaded a new app cache + // Swap it in and reload the page to get the new version + window.applicationCache.swapCache(); + window.location.reload(); + } + }, false); +} diff --git a/sources/esviji/js/offlineGoogleAnalytics.js b/sources/esviji/js/offlineGoogleAnalytics.js new file mode 100644 index 0000000..74a0d47 --- /dev/null +++ b/sources/esviji/js/offlineGoogleAnalytics.js @@ -0,0 +1,54 @@ +// Put Google Analytics events in localStorage when offline, sync when back online + +var offlineAnalytics = { + isOnline: function () { + return (navigator.onLine || !('onLine' in navigator)) && (typeof window.ga === "function"); + }, + + push: function(arr) { + if(this.isOnline()) { + var l = arr.length; + for (var i = 0; i < l; i++) { + var elt = arr[i]; + switch (elt.name) { + case 'version': + ga('set', 'dimension1', elt.value); + break; + case 'level': + ga('set', 'dimension2', elt.value); + break; + case 'score': + ga('set', 'dimension3', elt.value); + break; + case 'view': + console.log(elt.value); + ga('send', 'pageview', elt.value); + break; + } + } + } else { + this.store(arr); + } + }, + + store: function(arr) { + var stored = store.get('offlineAnalytics') || []; + stored.push(arr); + store.set('offlineAnalytics', stored); + this.sync(); + }, + + sync: function() { + if(this.isOnline()) { + var stored = store.get('offlineAnalytics') || []; + store.remove('offlineAnalytics'); + this.push(stored); + } else { + window.setTimeout(offlineAnalytics.sync, 1000 * 60); + } + } +}; + +$(window).bind('online', function() { + offlineAnalytics.sync(); +}); diff --git a/sources/esviji/js/vendor/SVGEventListener-0.2.3.js b/sources/esviji/js/vendor/SVGEventListener-0.2.3.js new file mode 100644 index 0000000..82d737f --- /dev/null +++ b/sources/esviji/js/vendor/SVGEventListener-0.2.3.js @@ -0,0 +1,294 @@ +// SVGEventListener.js +// Version - 0.2.3 +// +// by MAD - @madsgraphics - ecrire[at]madsgraphics[dot]com +// +// https://github.com/madsgraphics/SVGEventListener/ +// +// Tri-license - WTFPL | MIT | BSD +// +// Please minify before use. + +( function ( undefined ) { + + 'use strict'; + + var legacy, + svgns, + isArray, + supportedEvents; + + legacy = { + addEventListener : Element.prototype.addEventListener, + svgAnimateBeginElement : SVGAnimateElement.prototype.beginElement, + svgAnimateTransformBeginElement : SVGAnimateTransformElement.prototype.beginElement + }; + + svgns = 'http://www.w3.org/2000/svg'; + + // helper functions + function isString( s ) { + return typeof s === 'string'; + }; + isArray = Array.isArray || function ( obj ) { + return {}.toString.call( obj ) === '[object Array]'; + }; + function isUndefined( obj ) { + return obj === undefined; + }; + // String prototyping to add `contains` + String.prototype.contains = function(pattern) { + return (this.indexOf(pattern) !== -1); + }; + + // Cache events support + supportedEvents = {}; + function isEventSupported( eventName ) { + // early return if the event is in cache + if ( supportedEvents[eventName] !== undefined ) { + return supportedEvents[eventName]; + } + + // initiliaze the support at false for detection + supportedEvents[eventName] = false; + // create svg (and childs) nodes + var svg = document.createElementNS( svgns, 'svg' ), + element = document.createElementNS( svgns, 'rect'), + animate = document.createElementNS( svgns, 'animate' ); + + // set duration to 1ms to detect endEvent + animate.setAttributeNS(null, 'dur', '1ms'); + animate.setAttributeNS(null, 'attributeName', 'x'); + // append elements + element.appendChild(animate); + svg.appendChild(element); + + // attach a listener to the event that update the events cache + legacy.addEventListener.call(animate, eventName + 'Event', function() { + supportedEvents[eventName] = true; + }, false); + + // attach svg to the DOM (else it doesn't detect anything) but cache it + svg.setAttributeNS(null, 'style', 'display:none'); + document.body.appendChild(svg); + // Set a timeout to remove the dummy SVG element + // It is setted to 50 to leave the DOM breath and get the SVG event + // result before removing it :) + setTimeout(function() { document.body.removeChild(svg); }, 50); + + // Return the current event support status + return supportedEvents[eventName]; + }; + + ////////////////////////////////////////////////////////////////////////////// + // Clocker.js + // Convert a legal clock string value (in SMIL definition) to milliseconds + // + // Originaly released here: https://github.com/madsgraphics/clocker.js + function clocker( timestr ) { + var time, + times = timestr.split( ':' ); + + // Timecount-value + // = Formats without ':' + if ( times.length === 1 ) { + time = times[0]; + // Time already given in milliseconds (250ms) + if ( time.lastIndexOf('ms') !== -1 ) { + return +(time); + } + // Othermetrics + else { + // minutes + if( time.lastIndexOf('min') !== -1 ) { + time = parseFloat(time) * 60; + } + // hours + else if( time.lastIndexOf('h') !== -1 ) { + time = parseFloat(time) * 3600; + } + // Time is now in seconds. + // If time is without metric, then assume in seconds, + // maybe float (2.05 == 2050ms) + // So convert in ms… + return parseFloat(time) * 1000; + } + } + // Full-clock-value || Partial-clock-value + else { + // Reverse order to iterate from seconds to hours + times.reverse(); + // Init time + time = 0; + for ( var t in times ) { + // Value * 60^t (hours / minutes to seconds) * 1000 (s to ms) + time += times[t]*Math.pow(60, t)*1000; + } + + return time; + } + } + + ////////////////////////////////////////////////////////////////////////////// + // Event Listener + // + // Custom Event listener + // Implements Observer pattern + + // Create custom listener object with private property to store listeners + // + // initially inspired by: + // http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/ + function EventListener( element ) { + // store SVG node + this.el = element; + // Initialize events stack + this._listeners = {}; + // constructs stack + this._init(); + } + + // Extends it to add and fire events + EventListener.prototype = { + constructor: EventListener, + _delayEvent: function (eventName, duration) { + var that = this, + dur = clocker( duration ); + return function () { + window.setTimeout( function () { + that.fire( eventName + 'Event' ); + }, dur); + }; + }, + + _attachEvent: function (eventName, id) { + var that = this, + previousAnimate = document.getElementById( id ); + // Early exit if there is no previousAnimate element available + if (previousAnimate == null) { return; } + // Add an endEvent that launch the next animation + previousAnimate.addEventListener( eventName + 'Event', function () { + that.fire( 'beginEvent' ); + }); + }, + // initializer + _init: function () { + var that = this, + begin = this.el.getAttribute('begin'), + dur = this.el.getAttribute('dur'), + index; + + // End event + // --------- + // Add a delayed at duration time + this.add('beginEvent', this._delayEvent('end', dur)); + + // Begin event + // ----------- + // Begin event delayed + if ( begin !== 'indefinite' && !begin.contains('.end') && !begin.contains('.begin') ) { + this._delayEvent('begin', begin); + } + // if the launch depends of the **end** of another animation + else if ( begin.contains('.end') ) { + this._attachEvent('end', begin.replace('.end', '')); + } + // if the launch depends of the **begin** of another animation + else if ( begin.contains('.begin') ) { + this._attachEvent('begin', begin.replace('.begin', '')); + } + }, + // add new event to listeners + add: function addListener( type, listener ) { + // if there is no triggers already defined for this events, + // init an a-empty array + if ( isUndefined( this._listeners[type] ) ) { + this._listeners[type] = []; + } + // add trigger to the event + this._listeners[type].push( listener ); + }, + // fire the event + fire: function fireListeners( event ) { + var name; + + // if called only by event name (useful), build a correct object + if ( isString( event ) ) { + event = { + type: event, + bubbles: false, + cancelable: false, + defaultPrevented: false, + currentTarget : null, + }; + } + + // Early return at fire if the event is already supported + name = event.type.substr(0, event.type.indexOf('Event')); + if (isEventSupported( name )) { return; } + + // set target if unavailable + if ( !event.target ) { + event.target = event.currentTarget = this.el; + } + // if there is no event given, throw an error + if ( !event.type ) { + throw new Error( 'Event object missing "type" property.' ); + } + // If the type has associated triggers, then launch them + if ( isArray( this._listeners[event.type] ) ) { + var listeners = this._listeners[event.type]; + for ( var l in listeners ) { + listeners[l].call( this.el, event ); + } + } + } + }; + + // Overwrite Element.addEventListener method for transparency fallback + // + // Inpired by: + // http://stackoverflow.com/questions/7220515/extending-node-addeventlistener-method-with-the-same-name#7220628 + Element.prototype.addEventListener = function ( type, listener, useCapture ) { + if ( this instanceof SVGAnimateElement + || this instanceof SVGAnimateTransformElement ) { + // *** + // Attach a new event listeners stack if it doesn't exists + if ( isUndefined( this.listeners ) ) + { + this.listeners = new EventListener( this ); + } + // *** + // check event name and support for endEvent + if ( type === 'endEvent' && !isEventSupported( 'end' ) ) { + // Add listener to the endEvent stack + this.listeners.add( type, listener ); + } + // *** + // check event name and suport for beginEvent + if ( type === 'beginEvent' && !isEventSupported( 'begin' ) ) { + // Add listener to the endEvent stack + this.listeners.add( type, listener ); + } + } + // *** + // call the original method for fallback + return legacy.addEventListener.call( this, type, listener, useCapture ); + }; + + // Overwrite Element.beginElement method to trigger begin event + SVGAnimateElement.prototype.beginElement = function() { + if ( !isEventSupported( 'begin' ) && this.listeners !== undefined) { + this.listeners.fire('beginEvent'); + } + return legacy.svgAnimateBeginElement.call(this); + }; + + SVGAnimateTransformElement.prototype.beginElement = function() { + if ( !isEventSupported( 'begin' ) && this.listeners !== undefined) { + this.listeners.fire('beginEvent'); + } + return legacy.svgAnimateTransformBeginElement.call(this); + }; + +})(); diff --git a/sources/esviji/js/vendor/analytics.js b/sources/esviji/js/vendor/analytics.js new file mode 100644 index 0000000..8c52758 --- /dev/null +++ b/sources/esviji/js/vendor/analytics.js @@ -0,0 +1,39 @@ +(function(){var aa=encodeURIComponent,f=window,ba=setTimeout,n=Math,ea=RegExp;function fa(a,b){return a.name=b}function Pc(a,b){return a.href=b} +var p="push",h="hash",ha="slice",Qc="replace",q="data",r="cookie",t="indexOf",m="match",ia="defaultValue",xc="send",ja="port",u="createElement",id="setAttribute",v="name",da="getTime",x="host",y="length",z="prototype",la="clientWidth",A="split",B="location",ma="hostname",ga="search",jd="target",C="call",E="protocol",na="clientHeight",Ab="href",F="substring",kd="action",G="apply",oa="navigator",Ub="parentNode",H="join",I="toLowerCase";var pa=new function(){var a=[];this.set=function(b){a[b]=!0};this.M=function(){for(var b=[],c=0;c| t |