commit f2501276e0a66248d405e4421bf39e485939bcf7 Author: EndMove Date: Mon Oct 17 09:24:21 2022 +0200 initial diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ec8ed4c --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode +# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode + +### webhook-secret ### +webhook/secret-key.secret + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +### VisualStudioCode Patch ### +# Ignore all local history of files +.history +.ionide + +# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode \ No newline at end of file diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..87dbf9a --- /dev/null +++ b/.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/LICENSE b/LICENSE new file mode 100644 index 0000000..a5b6aa6 --- /dev/null +++ b/LICENSE @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [2022] [Jérémi Nihart ´EndMove´] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..b0dbfa4 --- /dev/null +++ b/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/README.md b/README.md new file mode 100644 index 0000000..d15a513 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# 2048 + +This project is a refurbished clone of [gabrielecirulli](https://github.com/gabrielecirulli/2048)'s 2048 project. + +Its license [here](./LICENSE.txt) still applies with the addition of our Apache 2.0 [here](./LICENSE). + +## PLay + +La version de production est disponible à [https://2048.g.endmove.eu](https://2048.g.endmove.eu). \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..22109e0 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fc57125 --- /dev/null +++ b/index.html @@ -0,0 +1,94 @@ + + + + + 2048 + + + + + + + + + + + + + + +
+ +
+

2048

+
+
0
+
0
+
+
+ +
+

Join the numbers and get to the 2048 tile!

+ New Game +
+ +
+
+

+
+ Keep going + Try again +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

+ How to play: Use your arrow keys to move the tiles. When two tiles with the same number touch, they merge into one! +

+
+

+ Note: This site is the official version of 2048. You can play it on your phone via https://2048.g.endmove.eu. +

+
+ + + + + + + + + + + + + diff --git a/js/animframe_polyfill.js b/js/animframe_polyfill.js new file mode 100644 index 0000000..c524a99 --- /dev/null +++ b/js/animframe_polyfill.js @@ -0,0 +1,28 @@ +(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) { + 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/js/application.js b/js/application.js new file mode 100644 index 0000000..2c1108e --- /dev/null +++ b/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, LocalStorageManager); +}); diff --git a/js/bind_polyfill.js b/js/bind_polyfill.js new file mode 100644 index 0000000..8d9c4a4 --- /dev/null +++ b/js/bind_polyfill.js @@ -0,0 +1,9 @@ +Function.prototype.bind = Function.prototype.bind || function (target) { + var self = this; + return function (args) { + if (!(args instanceof Array)) { + args = [args]; + } + self.apply(target, args); + }; +}; diff --git a/js/classlist_polyfill.js b/js/classlist_polyfill.js new file mode 100644 index 0000000..1789ae7 --- /dev/null +++ b/js/classlist_polyfill.js @@ -0,0 +1,71 @@ +(function () { + if (typeof window.Element === "undefined" || + "classList" in document.documentElement) { + return; + } + + var prototype = Array.prototype, + push = prototype.push, + splice = prototype.splice, + join = prototype.join; + + function DOMTokenList(el) { + this.el = el; + // The className needs to be trimmed and split on whitespace + // to retrieve a list of classes. + var classes = el.className.replace(/^\s+|\s+$/g, '').split(/\s+/); + for (var i = 0; i < classes.length; i++) { + push.call(this, classes[i]); + } + } + + DOMTokenList.prototype = { + add: function (token) { + if (this.contains(token)) return; + push.call(this, token); + this.el.className = this.toString(); + }, + contains: function (token) { + return this.el.className.indexOf(token) != -1; + }, + item: function (index) { + return this[index] || null; + }, + remove: function (token) { + if (!this.contains(token)) return; + for (var i = 0; i < this.length; i++) { + if (this[i] == token) break; + } + splice.call(this, i, 1); + this.el.className = this.toString(); + }, + toString: function () { + return join.call(this, ' '); + }, + toggle: function (token) { + if (!this.contains(token)) { + this.add(token); + } else { + this.remove(token); + } + + return this.contains(token); + } + }; + + window.DOMTokenList = DOMTokenList; + + function defineElementGetter(obj, prop, getter) { + if (Object.defineProperty) { + Object.defineProperty(obj, prop, { + get: getter + }); + } else { + obj.__defineGetter__(prop, getter); + } + } + + defineElementGetter(HTMLElement.prototype, 'classList', function () { + return new DOMTokenList(this); + }); +})(); diff --git a/js/game_manager.js b/js/game_manager.js new file mode 100644 index 0000000..1c13d15 --- /dev/null +++ b/js/game_manager.js @@ -0,0 +1,272 @@ +function GameManager(size, InputManager, Actuator, StorageManager) { + this.size = size; // Size of the grid + this.inputManager = new InputManager; + this.storageManager = new StorageManager; + 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.storageManager.clearGameState(); + this.actuator.continueGame(); // Clear the game won/lost message + this.setup(); +}; + +// Keep playing after winning (allows going over 2048) +GameManager.prototype.keepPlaying = function () { + this.keepPlaying = true; + this.actuator.continueGame(); // Clear the game won/lost message +}; + +// Return true if the game is lost, or has won and the user hasn't kept playing +GameManager.prototype.isGameTerminated = function () { + return this.over || (this.won && !this.keepPlaying); +}; + +// Set up the game +GameManager.prototype.setup = function () { + var previousState = this.storageManager.getGameState(); + + // Reload the game from a previous game if present + if (previousState) { + this.grid = new Grid(previousState.grid.size, + previousState.grid.cells); // Reload grid + this.score = previousState.score; + this.over = previousState.over; + this.won = previousState.won; + this.keepPlaying = previousState.keepPlaying; + } else { + 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.storageManager.getBestScore() < this.score) { + this.storageManager.setBestScore(this.score); + } + + // Clear the state when the game is over (game over only, not win) + if (this.over) { + this.storageManager.clearGameState(); + } else { + this.storageManager.setGameState(this.serialize()); + } + + this.actuator.actuate(this.grid, { + score: this.score, + over: this.over, + won: this.won, + bestScore: this.storageManager.getBestScore(), + terminated: this.isGameTerminated() + }); + +}; + +// Represent the current game as an object +GameManager.prototype.serialize = function () { + return { + grid: this.grid.serialize(), + score: this.score, + over: this.over, + won: this.won, + keepPlaying: this.keepPlaying + }; +}; + +// 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/js/grid.js b/js/grid.js new file mode 100644 index 0000000..29f0821 --- /dev/null +++ b/js/grid.js @@ -0,0 +1,117 @@ +function Grid(size, previousState) { + this.size = size; + this.cells = previousState ? this.fromState(previousState) : this.empty(); +} + +// Build a grid of the specified size +Grid.prototype.empty = function () { + var cells = []; + + for (var x = 0; x < this.size; x++) { + var row = cells[x] = []; + + for (var y = 0; y < this.size; y++) { + row.push(null); + } + } + + return cells; +}; + +Grid.prototype.fromState = function (state) { + var cells = []; + + for (var x = 0; x < this.size; x++) { + var row = cells[x] = []; + + for (var y = 0; y < this.size; y++) { + var tile = state[x][y]; + row.push(tile ? new Tile(tile.position, tile.value) : null); + } + } + + return cells; +}; + +// 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; +}; + +Grid.prototype.serialize = function () { + var cellState = []; + + for (var x = 0; x < this.size; x++) { + var row = cellState[x] = []; + + for (var y = 0; y < this.size; y++) { + row.push(this.cells[x][y] ? this.cells[x][y].serialize() : null); + } + } + + return { + size: this.size, + cells: cellState + }; +}; diff --git a/js/html_actuator.js b/js/html_actuator.js new file mode 100644 index 0000000..6b31f2d --- /dev/null +++ b/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.continueGame = 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/js/keyboard_input_manager.js b/js/keyboard_input_manager.js new file mode 100644 index 0000000..ca01b3c --- /dev/null +++ b/js/keyboard_input_manager.js @@ -0,0 +1,144 @@ +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 up + 76: 1, // Vim right + 74: 2, // Vim down + 72: 3, // Vim left + 87: 0, // W + 68: 1, // D + 83: 2, // S + 65: 3 // A + }; + + // Respond to direction keys + 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); + } + } + + // R key restarts the game + if (!modifiers && event.which === 82) { + self.restart.call(self, event); + } + }); + + // Respond to button presses + this.bindButtonPress(".retry-button", this.restart); + this.bindButtonPress(".restart-button", this.restart); + this.bindButtonPress(".keep-playing-button", this.keepPlaying); + + // Respond 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.length > 1) { + return; // Ignore if touching with more than 1 finger + } + + 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.length > 0) { + return; // Ignore if still touching with one or more fingers + } + + 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"); +}; + +KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) { + var button = document.querySelector(selector); + button.addEventListener("click", fn.bind(this)); + button.addEventListener(this.eventTouchend, fn.bind(this)); +}; diff --git a/js/local_storage_manager.js b/js/local_storage_manager.js new file mode 100644 index 0000000..2ca9cc3 --- /dev/null +++ b/js/local_storage_manager.js @@ -0,0 +1,63 @@ +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 LocalStorageManager() { + this.bestScoreKey = "bestScore"; + this.gameStateKey = "gameState"; + + var supported = this.localStorageSupported(); + this.storage = supported ? window.localStorage : window.fakeStorage; +} + +LocalStorageManager.prototype.localStorageSupported = function () { + var testKey = "test"; + + try { + var storage = window.localStorage; + storage.setItem(testKey, "1"); + storage.removeItem(testKey); + return true; + } catch (error) { + return false; + } +}; + +// Best score getters/setters +LocalStorageManager.prototype.getBestScore = function () { + return this.storage.getItem(this.bestScoreKey) || 0; +}; + +LocalStorageManager.prototype.setBestScore = function (score) { + this.storage.setItem(this.bestScoreKey, score); +}; + +// Game state getters/setters and clearing +LocalStorageManager.prototype.getGameState = function () { + var stateJSON = this.storage.getItem(this.gameStateKey); + return stateJSON ? JSON.parse(stateJSON) : null; +}; + +LocalStorageManager.prototype.setGameState = function (gameState) { + this.storage.setItem(this.gameStateKey, JSON.stringify(gameState)); +}; + +LocalStorageManager.prototype.clearGameState = function () { + this.storage.removeItem(this.gameStateKey); +}; diff --git a/js/tile.js b/js/tile.js new file mode 100644 index 0000000..92a670a --- /dev/null +++ b/js/tile.js @@ -0,0 +1,27 @@ +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; +}; + +Tile.prototype.serialize = function () { + return { + position: { + x: this.x, + y: this.y + }, + value: this.value + }; +}; diff --git a/meta/apple-touch-icon.png b/meta/apple-touch-icon.png new file mode 100644 index 0000000..3fd20f6 Binary files /dev/null and b/meta/apple-touch-icon.png differ diff --git a/meta/apple-touch-startup-image-640x1096.png b/meta/apple-touch-startup-image-640x1096.png new file mode 100644 index 0000000..5a68ba0 Binary files /dev/null and b/meta/apple-touch-startup-image-640x1096.png differ diff --git a/meta/apple-touch-startup-image-640x920.png b/meta/apple-touch-startup-image-640x920.png new file mode 100644 index 0000000..17bc9d8 Binary files /dev/null and b/meta/apple-touch-startup-image-640x920.png differ diff --git a/style/fonts/ClearSans-Bold-webfont.eot b/style/fonts/ClearSans-Bold-webfont.eot new file mode 100644 index 0000000..3678ef2 Binary files /dev/null and b/style/fonts/ClearSans-Bold-webfont.eot differ diff --git a/style/fonts/ClearSans-Bold-webfont.svg b/style/fonts/ClearSans-Bold-webfont.svg new file mode 100644 index 0000000..aa985ae --- /dev/null +++ b/style/fonts/ClearSans-Bold-webfont.svg @@ -0,0 +1,640 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style/fonts/ClearSans-Bold-webfont.woff b/style/fonts/ClearSans-Bold-webfont.woff new file mode 100644 index 0000000..184a945 Binary files /dev/null and b/style/fonts/ClearSans-Bold-webfont.woff differ diff --git a/style/fonts/ClearSans-Light-webfont.eot b/style/fonts/ClearSans-Light-webfont.eot new file mode 100644 index 0000000..0dc609d Binary files /dev/null and b/style/fonts/ClearSans-Light-webfont.eot differ diff --git a/style/fonts/ClearSans-Light-webfont.svg b/style/fonts/ClearSans-Light-webfont.svg new file mode 100644 index 0000000..1d5d2ec --- /dev/null +++ b/style/fonts/ClearSans-Light-webfont.svg @@ -0,0 +1,670 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style/fonts/ClearSans-Light-webfont.woff b/style/fonts/ClearSans-Light-webfont.woff new file mode 100644 index 0000000..44555e0 Binary files /dev/null and b/style/fonts/ClearSans-Light-webfont.woff differ diff --git a/style/fonts/ClearSans-Regular-webfont.eot b/style/fonts/ClearSans-Regular-webfont.eot new file mode 100644 index 0000000..b020e05 Binary files /dev/null and b/style/fonts/ClearSans-Regular-webfont.eot differ diff --git a/style/fonts/ClearSans-Regular-webfont.svg b/style/fonts/ClearSans-Regular-webfont.svg new file mode 100644 index 0000000..1e2cffd --- /dev/null +++ b/style/fonts/ClearSans-Regular-webfont.svg @@ -0,0 +1,669 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style/fonts/ClearSans-Regular-webfont.woff b/style/fonts/ClearSans-Regular-webfont.woff new file mode 100644 index 0000000..9d58858 Binary files /dev/null and b/style/fonts/ClearSans-Regular-webfont.woff differ diff --git a/style/fonts/clear-sans.css b/style/fonts/clear-sans.css new file mode 100644 index 0000000..de2811d --- /dev/null +++ b/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/style/helpers.scss b/style/helpers.scss new file mode 100644 index 0000000..72693ee --- /dev/null +++ b/style/helpers.scss @@ -0,0 +1,82 @@ +// 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; + -ms-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; + } +} + +// Clearfix +@mixin clearfix { + &:after { + content: ""; + display: block; + clear: both; + } +} diff --git a/style/main.css b/style/main.css new file mode 100644 index 0000000..ea3cb19 --- /dev/null +++ b/style/main.css @@ -0,0 +1,758 @@ +@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: "Best"; } + +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; + -ms-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -ms-touch-action: none; + touch-action: none; + background: #bbada0; + border-radius: 6px; + width: 500px; + height: 500px; + -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: 107px; } +.tile.tile-position-1-1 { + -webkit-transform: translate(0px, 0px); + -moz-transform: translate(0px, 0px); + -ms-transform: translate(0px, 0px); + transform: translate(0px, 0px); } +.tile.tile-position-1-2 { + -webkit-transform: translate(0px, 121px); + -moz-transform: translate(0px, 121px); + -ms-transform: translate(0px, 121px); + transform: translate(0px, 121px); } +.tile.tile-position-1-3 { + -webkit-transform: translate(0px, 242px); + -moz-transform: translate(0px, 242px); + -ms-transform: translate(0px, 242px); + transform: translate(0px, 242px); } +.tile.tile-position-1-4 { + -webkit-transform: translate(0px, 363px); + -moz-transform: translate(0px, 363px); + -ms-transform: translate(0px, 363px); + transform: translate(0px, 363px); } +.tile.tile-position-2-1 { + -webkit-transform: translate(121px, 0px); + -moz-transform: translate(121px, 0px); + -ms-transform: translate(121px, 0px); + transform: translate(121px, 0px); } +.tile.tile-position-2-2 { + -webkit-transform: translate(121px, 121px); + -moz-transform: translate(121px, 121px); + -ms-transform: translate(121px, 121px); + transform: translate(121px, 121px); } +.tile.tile-position-2-3 { + -webkit-transform: translate(121px, 242px); + -moz-transform: translate(121px, 242px); + -ms-transform: translate(121px, 242px); + transform: translate(121px, 242px); } +.tile.tile-position-2-4 { + -webkit-transform: translate(121px, 363px); + -moz-transform: translate(121px, 363px); + -ms-transform: translate(121px, 363px); + transform: translate(121px, 363px); } +.tile.tile-position-3-1 { + -webkit-transform: translate(242px, 0px); + -moz-transform: translate(242px, 0px); + -ms-transform: translate(242px, 0px); + transform: translate(242px, 0px); } +.tile.tile-position-3-2 { + -webkit-transform: translate(242px, 121px); + -moz-transform: translate(242px, 121px); + -ms-transform: translate(242px, 121px); + transform: translate(242px, 121px); } +.tile.tile-position-3-3 { + -webkit-transform: translate(242px, 242px); + -moz-transform: translate(242px, 242px); + -ms-transform: translate(242px, 242px); + transform: translate(242px, 242px); } +.tile.tile-position-3-4 { + -webkit-transform: translate(242px, 363px); + -moz-transform: translate(242px, 363px); + -ms-transform: translate(242px, 363px); + transform: translate(242px, 363px); } +.tile.tile-position-4-1 { + -webkit-transform: translate(363px, 0px); + -moz-transform: translate(363px, 0px); + -ms-transform: translate(363px, 0px); + transform: translate(363px, 0px); } +.tile.tile-position-4-2 { + -webkit-transform: translate(363px, 121px); + -moz-transform: translate(363px, 121px); + -ms-transform: translate(363px, 121px); + transform: translate(363px, 121px); } +.tile.tile-position-4-3 { + -webkit-transform: translate(363px, 242px); + -moz-transform: translate(363px, 242px); + -ms-transform: translate(363px, 242px); + transform: translate(363px, 242px); } +.tile.tile-position-4-4 { + -webkit-transform: translate(363px, 363px); + -moz-transform: translate(363px, 363px); + -ms-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); + -ms-transform: scale(0); + transform: scale(0); } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } +@-moz-keyframes appear { + 0% { + opacity: 0; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } +@keyframes appear { + 0% { + opacity: 0; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-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); + -ms-transform: scale(0); + transform: scale(0); } + + 50% { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } +@-moz-keyframes pop { + 0% { + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); } + + 50% { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } +@keyframes pop { + 0% { + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); } + + 50% { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-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; } + +.above-game:after { + content: ""; + display: block; + clear: both; } + +.game-intro { + float: left; + line-height: 42px; + margin-bottom: 0; } + +.restart-button { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + display: block; + text-align: center; + float: right; } + +.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-intro { + width: 55%; + display: block; + box-sizing: border-box; + line-height: 1.65; } + + .restart-button { + width: 42%; + padding: 0; + display: block; + box-sizing: border-box; + margin-top: 2px; } + + .game-container { + margin-top: 17px; + position: relative; + padding: 10px; + cursor: default; + -webkit-touch-callout: none; + -ms-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -ms-touch-action: none; + touch-action: none; + background: #bbada0; + border-radius: 6px; + width: 280px; + height: 280px; + -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: 58px; } + .tile.tile-position-1-1 { + -webkit-transform: translate(0px, 0px); + -moz-transform: translate(0px, 0px); + -ms-transform: translate(0px, 0px); + transform: translate(0px, 0px); } + .tile.tile-position-1-2 { + -webkit-transform: translate(0px, 67px); + -moz-transform: translate(0px, 67px); + -ms-transform: translate(0px, 67px); + transform: translate(0px, 67px); } + .tile.tile-position-1-3 { + -webkit-transform: translate(0px, 135px); + -moz-transform: translate(0px, 135px); + -ms-transform: translate(0px, 135px); + transform: translate(0px, 135px); } + .tile.tile-position-1-4 { + -webkit-transform: translate(0px, 202px); + -moz-transform: translate(0px, 202px); + -ms-transform: translate(0px, 202px); + transform: translate(0px, 202px); } + .tile.tile-position-2-1 { + -webkit-transform: translate(67px, 0px); + -moz-transform: translate(67px, 0px); + -ms-transform: translate(67px, 0px); + transform: translate(67px, 0px); } + .tile.tile-position-2-2 { + -webkit-transform: translate(67px, 67px); + -moz-transform: translate(67px, 67px); + -ms-transform: translate(67px, 67px); + transform: translate(67px, 67px); } + .tile.tile-position-2-3 { + -webkit-transform: translate(67px, 135px); + -moz-transform: translate(67px, 135px); + -ms-transform: translate(67px, 135px); + transform: translate(67px, 135px); } + .tile.tile-position-2-4 { + -webkit-transform: translate(67px, 202px); + -moz-transform: translate(67px, 202px); + -ms-transform: translate(67px, 202px); + transform: translate(67px, 202px); } + .tile.tile-position-3-1 { + -webkit-transform: translate(135px, 0px); + -moz-transform: translate(135px, 0px); + -ms-transform: translate(135px, 0px); + transform: translate(135px, 0px); } + .tile.tile-position-3-2 { + -webkit-transform: translate(135px, 67px); + -moz-transform: translate(135px, 67px); + -ms-transform: translate(135px, 67px); + transform: translate(135px, 67px); } + .tile.tile-position-3-3 { + -webkit-transform: translate(135px, 135px); + -moz-transform: translate(135px, 135px); + -ms-transform: translate(135px, 135px); + transform: translate(135px, 135px); } + .tile.tile-position-3-4 { + -webkit-transform: translate(135px, 202px); + -moz-transform: translate(135px, 202px); + -ms-transform: translate(135px, 202px); + transform: translate(135px, 202px); } + .tile.tile-position-4-1 { + -webkit-transform: translate(202px, 0px); + -moz-transform: translate(202px, 0px); + -ms-transform: translate(202px, 0px); + transform: translate(202px, 0px); } + .tile.tile-position-4-2 { + -webkit-transform: translate(202px, 67px); + -moz-transform: translate(202px, 67px); + -ms-transform: translate(202px, 67px); + transform: translate(202px, 67px); } + .tile.tile-position-4-3 { + -webkit-transform: translate(202px, 135px); + -moz-transform: translate(202px, 135px); + -ms-transform: translate(202px, 135px); + transform: translate(202px, 135px); } + .tile.tile-position-4-4 { + -webkit-transform: translate(202px, 202px); + -moz-transform: translate(202px, 202px); + -ms-transform: translate(202px, 202px); + transform: translate(202px, 202px); } + + .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/style/main.scss b/style/main.scss new file mode 100644 index 0000000..b0ec8da --- /dev/null +++ b/style/main.scss @@ -0,0 +1,549 @@ +@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-margin-top: 40px; +$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 { + @include clearfix; +} + +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: $game-container-margin-top; + position: relative; + padding: $grid-spacing; + + cursor: default; + -webkit-touch-callout: none; + -ms-touch-callout: none; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + + -ms-touch-action: none; + touch-action: none; + + background: $game-container-background; + border-radius: $tile-border-radius * 2; + width: $field-width; + height: $field-width; + -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: ceil($tile-size); + } + + // 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); +} + +.above-game { + @include clearfix; +} + +.game-intro { + float: left; + line-height: 42px; + margin-bottom: 0; +} + +.restart-button { + @include button; + display: block; + text-align: center; + float: right; +} + +.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; + $game-container-margin-top: 17px; + + 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; + } + + // Show intro and restart button side by side + .game-intro { + width: 55%; + display: block; + box-sizing: border-box; + line-height: 1.65; + } + + .restart-button { + width: 42%; + padding: 0; + display: block; + box-sizing: border-box; + margin-top: 2px; + } + + // Render the game field at the right width + @include game-field; + + // 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/webhook/webhook.php b/webhook/webhook.php new file mode 100644 index 0000000..9bf16e5 --- /dev/null +++ b/webhook/webhook.php @@ -0,0 +1,82 @@ + RESPONSE (".htmlentities(trim($out)).")\n"; +} + +// display complete output if debug on, else show OK +echo($debug ? $full_output : "OK."); +?> \ No newline at end of file