Add metadata images to meta folder for consistency
Add metadata images to meta folder for consistency

file:a/README.md -> file:b/README.md
# 2048 # 2048
A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone). A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone).
   
Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/) Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/)
   
[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png) [![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
   
That screenshot is fake by, the way. I never reached 2048 :smile: That screenshot is fake, by the way. I never reached 2048 :smile:
   
## Contributing ## Contributing
Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a 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. Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specific branch and request to pull into `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
   
You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md) You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md)
   
## License ## License
2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt) 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt)
   
## Donations ## Donations
I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i` BTC address. Thank you very much! I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like buying me coffee, you can donate at my BTC address: `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i`. Thank you very much!
   
file:a/index.html -> file:b/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>2048</title> <title>2048</title>
   
<link href="style/main.css" rel="stylesheet" type="text/css"> <link href="style/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="/meta/apple-touch-icon.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
   
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="heading"> <div class="heading">
<h1 class="title">2048</h1> <h1 class="title">2048</h1>
<div class="score-container">0</div> <div class="score-container">0</div>
</div> </div>
<p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p> <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
   
<div class="game-container"> <div class="game-container">
<div class="game-message"> <div class="game-message">
<p></p> <p></p>
<div class="lower"> <div class="lower">
<a class="retry-button">Try again</a> <a class="retry-button">Try again</a>
</div> </div>
</div> </div>
   
<div class="grid-container"> <div class="grid-container">
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
<div class="grid-row"> <div class="grid-row">
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
<div class="grid-cell"></div> <div class="grid-cell"></div>
</div> </div>
</div> </div>
   
<div class="tile-container"> <div class="tile-container">
   
</div> </div>
</div> </div>
   
<p class="game-explanation"> <p class="game-explanation">
<strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong> <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
</p> </p>
<hr> <hr>
<p> <p>
Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a> Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
</p> </p>
</div> </div>
   
<script src="js/animframe_polyfill.js"></script> <script src="js/animframe_polyfill.js"></script>
<script src="js/hammer.min.js"></script>  
<script src="js/keyboard_input_manager.js"></script> <script src="js/keyboard_input_manager.js"></script>
<script src="js/html_actuator.js"></script> <script src="js/html_actuator.js"></script>
<script src="js/grid.js"></script> <script src="js/grid.js"></script>
<script src="js/tile.js"></script> <script src="js/tile.js"></script>
<script src="js/game_manager.js"></script> <script src="js/game_manager.js"></script>
<script src="js/application.js"></script> <script src="js/application.js"></script>
</body> </body>
</html> </html>
   
file:a/js/hammer.min.js (deleted)
/*! Hammer.JS - v1.0.6 - 2014-01-02  
* http://eightmedia.github.com/hammer.js  
*  
* Copyright (c) 2014 Jorik Tangelder <j.tangelder@gmail.com>;  
* Licensed under the MIT license */  
 
 
!function(a,b){"use strict";function c(){d.READY||(d.event.determineEventTypes(),d.utils.each(d.gestures,function(a){d.detection.register(a)}),d.event.onTouch(d.DOCUMENT,d.EVENT_MOVE,d.detection.detect),d.event.onTouch(d.DOCUMENT,d.EVENT_END,d.detection.detect),d.READY=!0)}var d=function(a,b){return new d.Instance(a,b||{})};d.defaults={stop_browser_behavior:{userSelect:"none",touchAction:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},d.HAS_POINTEREVENTS=a.navigator.pointerEnabled||a.navigator.msPointerEnabled,d.HAS_TOUCHEVENTS="ontouchstart"in a,d.MOBILE_REGEX=/mobile|tablet|ip(ad|hone|od)|android|silk/i,d.NO_MOUSEEVENTS=d.HAS_TOUCHEVENTS&&a.navigator.userAgent.match(d.MOBILE_REGEX),d.EVENT_TYPES={},d.DIRECTION_DOWN="down",d.DIRECTION_LEFT="left",d.DIRECTION_UP="up",d.DIRECTION_RIGHT="right",d.POINTER_MOUSE="mouse",d.POINTER_TOUCH="touch",d.POINTER_PEN="pen",d.EVENT_START="start",d.EVENT_MOVE="move",d.EVENT_END="end",d.DOCUMENT=a.document,d.plugins=d.plugins||{},d.gestures=d.gestures||{},d.READY=!1,d.utils={extend:function(a,c,d){for(var e in c)a[e]!==b&&d||(a[e]=c[e]);return a},each:function(a,c,d){var e,f;if("forEach"in a)a.forEach(c,d);else if(a.length!==b){for(e=0,f=a.length;f>e;e++)if(c.call(d,a[e],e,a)===!1)return}else for(e in a)if(a.hasOwnProperty(e)&&c.call(d,a[e],e,a)===!1)return},hasParent:function(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1},getCenter:function(a){var b=[],c=[];return d.utils.each(a,function(a){b.push("undefined"!=typeof a.clientX?a.clientX:a.pageX),c.push("undefined"!=typeof a.clientY?a.clientY:a.pageY)}),{pageX:(Math.min.apply(Math,b)+Math.max.apply(Math,b))/2,pageY:(Math.min.apply(Math,c)+Math.max.apply(Math,c))/2}},getVelocity:function(a,b,c){return{x:Math.abs(b/a)||0,y:Math.abs(c/a)||0}},getAngle:function(a,b){var c=b.pageY-a.pageY,d=b.pageX-a.pageX;return 180*Math.atan2(c,d)/Math.PI},getDirection:function(a,b){var c=Math.abs(a.pageX-b.pageX),e=Math.abs(a.pageY-b.pageY);return c>=e?a.pageX-b.pageX>0?d.DIRECTION_LEFT:d.DIRECTION_RIGHT:a.pageY-b.pageY>0?d.DIRECTION_UP:d.DIRECTION_DOWN},getDistance:function(a,b){var c=b.pageX-a.pageX,d=b.pageY-a.pageY;return Math.sqrt(c*c+d*d)},getScale:function(a,b){return a.length>=2&&b.length>=2?this.getDistance(b[0],b[1])/this.getDistance(a[0],a[1]):1},getRotation:function(a,b){return a.length>=2&&b.length>=2?this.getAngle(b[1],b[0])-this.getAngle(a[1],a[0]):0},isVertical:function(a){return a==d.DIRECTION_UP||a==d.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(a,b){b&&a&&a.style&&(d.utils.each(["webkit","khtml","moz","Moz","ms","o",""],function(c){d.utils.each(b,function(b){c&&(b=c+b.substring(0,1).toUpperCase()+b.substring(1)),b in a.style&&(a.style[b]=b)})}),"none"==b.userSelect&&(a.onselectstart=function(){return!1}),"none"==b.userDrag&&(a.ondragstart=function(){return!1}))}},d.Instance=function(a,b){var e=this;return c(),this.element=a,this.enabled=!0,this.options=d.utils.extend(d.utils.extend({},d.defaults),b||{}),this.options.stop_browser_behavior&&d.utils.stopDefaultBrowserBehavior(this.element,this.options.stop_browser_behavior),d.event.onTouch(a,d.EVENT_START,function(a){e.enabled&&d.detection.startDetect(e,a)}),this},d.Instance.prototype={on:function(a,b){var c=a.split(" ");return d.utils.each(c,function(a){this.element.addEventListener(a,b,!1)},this),this},off:function(a,b){var c=a.split(" ");return d.utils.each(c,function(a){this.element.removeEventListener(a,b,!1)},this),this},trigger:function(a,b){b||(b={});var c=d.DOCUMENT.createEvent("Event");c.initEvent(a,!0,!0),c.gesture=b;var e=this.element;return d.utils.hasParent(b.target,e)&&(e=b.target),e.dispatchEvent(c),this},enable:function(a){return this.enabled=a,this}};var e=null,f=!1,g=!1;d.event={bindDom:function(a,b,c){var e=b.split(" ");d.utils.each(e,function(b){a.addEventListener(b,c,!1)})},onTouch:function(a,b,c){var h=this;this.bindDom(a,d.EVENT_TYPES[b],function(i){var j=i.type.toLowerCase();if(!j.match(/mouse/)||!g){j.match(/touch/)||j.match(/pointerdown/)||j.match(/mouse/)&&1===i.which?f=!0:j.match(/mouse/)&&!i.which&&(f=!1),j.match(/touch|pointer/)&&(g=!0);var k=0;f&&(d.HAS_POINTEREVENTS&&b!=d.EVENT_END?k=d.PointerEvent.updatePointer(b,i):j.match(/touch/)?k=i.touches.length:g||(k=j.match(/up/)?0:1),k>0&&b==d.EVENT_END?b=d.EVENT_MOVE:k||(b=d.EVENT_END),(k||null===e)&&(e=i),c.call(d.detection,h.collectEventData(a,b,h.getTouchList(e,b),i)),d.HAS_POINTEREVENTS&&b==d.EVENT_END&&(k=d.PointerEvent.updatePointer(b,i))),k||(e=null,f=!1,g=!1,d.PointerEvent.reset())}})},determineEventTypes:function(){var a;a=d.HAS_POINTEREVENTS?d.PointerEvent.getEvents():d.NO_MOUSEEVENTS?["touchstart","touchmove","touchend touchcancel"]:["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],d.EVENT_TYPES[d.EVENT_START]=a[0],d.EVENT_TYPES[d.EVENT_MOVE]=a[1],d.EVENT_TYPES[d.EVENT_END]=a[2]},getTouchList:function(a){return d.HAS_POINTEREVENTS?d.PointerEvent.getTouchList():a.touches?a.touches:(a.identifier=1,[a])},collectEventData:function(a,b,c,e){var f=d.POINTER_TOUCH;return(e.type.match(/mouse/)||d.PointerEvent.matchType(d.POINTER_MOUSE,e))&&(f=d.POINTER_MOUSE),{center:d.utils.getCenter(c),timeStamp:(new Date).getTime(),target:e.target,touches:c,eventType:b,pointerType:f,srcEvent:e,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return d.detection.stopDetect()}}}},d.PointerEvent={pointers:{},getTouchList:function(){var a=this,b=[];return d.utils.each(a.pointers,function(a){b.push(a)}),b},updatePointer:function(a,b){return a==d.EVENT_END?this.pointers={}:(b.identifier=b.pointerId,this.pointers[b.pointerId]=b),Object.keys(this.pointers).length},matchType:function(a,b){if(!b.pointerType)return!1;var c=b.pointerType,e={};return e[d.POINTER_MOUSE]=c===b.MSPOINTER_TYPE_MOUSE||c===d.POINTER_MOUSE,e[d.POINTER_TOUCH]=c===b.MSPOINTER_TYPE_TOUCH||c===d.POINTER_TOUCH,e[d.POINTER_PEN]=c===b.MSPOINTER_TYPE_PEN||c===d.POINTER_PEN,e[a]},getEvents:function(){return["pointerdown MSPointerDown","pointermove MSPointerMove","pointerup pointercancel MSPointerUp MSPointerCancel"]},reset:function(){this.pointers={}}},d.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(a,b){this.current||(this.stopped=!1,this.current={inst:a,startEvent:d.utils.extend({},b),lastEvent:!1,name:""},this.detect(b))},detect:function(a){if(this.current&&!this.stopped){a=this.extendEventData(a);var b=this.current.inst.options;return d.utils.each(this.gestures,function(c){return this.stopped||b[c.name]===!1||c.handler.call(c,a,this.current.inst)!==!1?void 0:(this.stopDetect(),!1)},this),this.current&&(this.current.lastEvent=a),a.eventType==d.EVENT_END&&!a.touches.length-1&&this.stopDetect(),a}},stopDetect:function(){this.previous=d.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(a){var b=this.current.startEvent;!b||a.touches.length==b.touches.length&&a.touches!==b.touches||(b.touches=[],d.utils.each(a.touches,function(a){b.touches.push(d.utils.extend({},a))}));var c,e,f=a.timeStamp-b.timeStamp,g=a.center.pageX-b.center.pageX,h=a.center.pageY-b.center.pageY,i=d.utils.getVelocity(f,g,h);return"end"===a.eventType?(c=this.current.lastEvent&&this.current.lastEvent.interimAngle,e=this.current.lastEvent&&this.current.lastEvent.interimDirection):(c=this.current.lastEvent&&d.utils.getAngle(this.current.lastEvent.center,a.center),e=this.current.lastEvent&&d.utils.getDirection(this.current.lastEvent.center,a.center)),d.utils.extend(a,{deltaTime:f,deltaX:g,deltaY:h,velocityX:i.x,velocityY:i.y,distance:d.utils.getDistance(b.center,a.center),angle:d.utils.getAngle(b.center,a.center),interimAngle:c,direction:d.utils.getDirection(b.center,a.center),interimDirection:e,scale:d.utils.getScale(b.touches,a.touches),rotation:d.utils.getRotation(b.touches,a.touches),startEvent:b}),a},register:function(a){var c=a.defaults||{};return c[a.name]===b&&(c[a.name]=!0),d.utils.extend(d.defaults,c,!0),a.index=a.index||1e3,this.gestures.push(a),this.gestures.sort(function(a,b){return a.index<b.index?-1:a.index>b.index?1:0}),this.gestures}},d.gestures.Drag={name:"drag",index:50,defaults:{drag_min_distance:10,correct_for_drag_min_distance:!0,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1,drag_lock_min_distance:25},triggered:!1,handler:function(a,b){if(d.detection.current.name!=this.name&&this.triggered)return b.trigger(this.name+"end",a),this.triggered=!1,void 0;if(!(b.options.drag_max_touches>0&&a.touches.length>b.options.drag_max_touches))switch(a.eventType){case d.EVENT_START:this.triggered=!1;break;case d.EVENT_MOVE:if(a.distance<b.options.drag_min_distance&&d.detection.current.name!=this.name)return;if(d.detection.current.name!=this.name&&(d.detection.current.name=this.name,b.options.correct_for_drag_min_distance&&a.distance>0)){var c=Math.abs(b.options.drag_min_distance/a.distance);d.detection.current.startEvent.center.pageX+=a.deltaX*c,d.detection.current.startEvent.center.pageY+=a.deltaY*c,a=d.detection.extendEventData(a)}(d.detection.current.lastEvent.drag_locked_to_axis||b.options.drag_lock_to_axis&&b.options.drag_lock_min_distance<=a.distance)&&(a.drag_locked_to_axis=!0);var e=d.detection.current.lastEvent.direction;a.drag_locked_to_axis&&e!==a.direction&&(a.direction=d.utils.isVertical(e)?a.deltaY<0?d.DIRECTION_UP:d.DIRECTION_DOWN:a.deltaX<0?d.DIRECTION_LEFT:d.DIRECTION_RIGHT),this.triggered||(b.trigger(this.name+"start",a),this.triggered=!0),b.trigger(this.name,a),b.trigger(this.name+a.direction,a),(b.options.drag_block_vertical&&d.utils.isVertical(a.direction)||b.options.drag_block_horizontal&&!d.utils.isVertical(a.direction))&&a.preventDefault();break;case d.EVENT_END:this.triggered&&b.trigger(this.name+"end",a),this.triggered=!1}}},d.gestures.Hold={name:"hold",index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(a,b){switch(a.eventType){case d.EVENT_START:clearTimeout(this.timer),d.detection.current.name=this.name,this.timer=setTimeout(function(){"hold"==d.detection.current.name&&b.trigger("hold",a)},b.options.hold_timeout);break;case d.EVENT_MOVE:a.distance>b.options.hold_threshold&&clearTimeout(this.timer);break;case d.EVENT_END:clearTimeout(this.timer)}}},d.gestures.Release={name:"release",index:1/0,handler:function(a,b){a.eventType==d.EVENT_END&&b.trigger(this.name,a)}},d.gestures.Swipe={name:"swipe",index:40,defaults:{swipe_min_touches:1,swipe_max_touches:1,swipe_velocity:.7},handler:function(a,b){if(a.eventType==d.EVENT_END){if(b.options.swipe_max_touches>0&&a.touches.length<b.options.swipe_min_touches&&a.touches.length>b.options.swipe_max_touches)return;(a.velocityX>b.options.swipe_velocity||a.velocityY>b.options.swipe_velocity)&&(b.trigger(this.name,a),b.trigger(this.name+a.direction,a))}}},d.gestures.Tap={name:"tap",index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,tap_always:!0,doubletap_distance:20,doubletap_interval:300},handler:function(a,b){if(a.eventType==d.EVENT_END&&"touchcancel"!=a.srcEvent.type){var c=d.detection.previous,e=!1;if(a.deltaTime>b.options.tap_max_touchtime||a.distance>b.options.tap_max_distance)return;c&&"tap"==c.name&&a.timeStamp-c.lastEvent.timeStamp<b.options.doubletap_interval&&a.distance<b.options.doubletap_distance&&(b.trigger("doubletap",a),e=!0),(!e||b.options.tap_always)&&(d.detection.current.name="tap",b.trigger(d.detection.current.name,a))}}},d.gestures.Touch={name:"touch",index:-1/0,defaults:{prevent_default:!1,prevent_mouseevents:!1},handler:function(a,b){return b.options.prevent_mouseevents&&a.pointerType==d.POINTER_MOUSE?(a.stopDetect(),void 0):(b.options.prevent_default&&a.preventDefault(),a.eventType==d.EVENT_START&&b.trigger(this.name,a),void 0)}},d.gestures.Transform={name:"transform",index:45,defaults:{transform_min_scale:.01,transform_min_rotation:1,transform_always_block:!1},triggered:!1,handler:function(a,b){if(d.detection.current.name!=this.name&&this.triggered)return b.trigger(this.name+"end",a),this.triggered=!1,void 0;if(!(a.touches.length<2))switch(b.options.transform_always_block&&a.preventDefault(),a.eventType){case d.EVENT_START:this.triggered=!1;break;case d.EVENT_MOVE:var c=Math.abs(1-a.scale),e=Math.abs(a.rotation);if(c<b.options.transform_min_scale&&e<b.options.transform_min_rotation)return;d.detection.current.name=this.name,this.triggered||(b.trigger(this.name+"start",a),this.triggered=!0),b.trigger(this.name,a),e>b.options.transform_min_rotation&&b.trigger("rotate",a),c>b.options.transform_min_scale&&(b.trigger("pinch",a),b.trigger("pinch"+(a.scale<1?"in":"out"),a));break;case d.EVENT_END:this.triggered&&b.trigger(this.name+"end",a),this.triggered=!1}}},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return d}):"object"==typeof module&&"object"==typeof module.exports?module.exports=d:a.Hammer=d}(this);  
//# sourceMappingURL=hammer.min.map  
function KeyboardInputManager() { function KeyboardInputManager() {
this.events = {}; this.events = {};
   
this.listen(); this.listen();
} }
   
KeyboardInputManager.prototype.on = function (event, callback) { KeyboardInputManager.prototype.on = function (event, callback) {
if (!this.events[event]) { if (!this.events[event]) {
this.events[event] = []; this.events[event] = [];
} }
this.events[event].push(callback); this.events[event].push(callback);
}; };
   
KeyboardInputManager.prototype.emit = function (event, data) { KeyboardInputManager.prototype.emit = function (event, data) {
var callbacks = this.events[event]; var callbacks = this.events[event];
if (callbacks) { if (callbacks) {
callbacks.forEach(function (callback) { callbacks.forEach(function (callback) {
callback(data); callback(data);
}); });
} }
}; };
   
KeyboardInputManager.prototype.listen = function () { KeyboardInputManager.prototype.listen = function () {
var self = this; var self = this;
   
var map = { var map = {
38: 0, // Up 38: 0, // Up
39: 1, // Right 39: 1, // Right
40: 2, // Down 40: 2, // Down
37: 3, // Left 37: 3, // Left
75: 0, // vim keybindings 75: 0, // vim keybindings
76: 1, 76: 1,
74: 2, 74: 2,
72: 3 72: 3,
  87: 0, // W
  68: 1, // D
  83: 2, // S
  65: 3 // A
}; };
   
document.addEventListener("keydown", function (event) { document.addEventListener("keydown", function (event) {
var modifiers = event.altKey || event.ctrlKey || event.metaKey || var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
event.shiftKey; event.shiftKey;
var mapped = map[event.which]; var mapped = map[event.which];
   
if (!modifiers) { if (!modifiers) {
if (mapped !== undefined) { if (mapped !== undefined) {
event.preventDefault(); event.preventDefault();
self.emit("move", mapped); self.emit("move", mapped);
} }
   
if (event.which === 32) self.restart.bind(self)(event); if (event.which === 32) self.restart.bind(self)(event);
} }
}); });
   
var retry = document.getElementsByClassName("retry-button")[0]; var retry = document.getElementsByClassName("retry-button")[0];
retry.addEventListener("click", this.restart.bind(this)); retry.addEventListener("click", this.restart.bind(this));
   
// Listen to swipe events // Listen to swipe events
var gestures = [Hammer.DIRECTION_UP, Hammer.DIRECTION_RIGHT, var touchStartClientX, touchStartClientY;
Hammer.DIRECTION_DOWN, Hammer.DIRECTION_LEFT]; var gameContainer = document.getElementsByClassName("game-container")[0];
  gameContainer.addEventListener("touchstart", function(event) {
  if (event.touches.length > 1) return;
   
var gameContainer = document.getElementsByClassName("game-container")[0]; touchStartClientX = event.touches[0].clientX;
var handler = Hammer(gameContainer, { touchStartClientY = event.touches[0].clientY;
drag_block_horizontal: true, event.preventDefault();
drag_block_vertical: true  
}); });
  gameContainer.addEventListener("touchmove", function(event) {
handler.on("swipe", function (event) { event.preventDefault();
event.gesture.preventDefault(); });
mapped = gestures.indexOf(event.gesture.direction); gameContainer.addEventListener("touchend", function(event) {
  if (event.touches.length > 0) {
  return;
  }
  var dx = event.changedTouches[0].clientX - touchStartClientX;
  var absDx = Math.abs(dx);
   
if (mapped !== -1) self.emit("move", mapped); var dy = event.changedTouches[0].clientY - 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) { KeyboardInputManager.prototype.restart = function (event) {
event.preventDefault(); event.preventDefault();
this.emit("restart"); this.emit("restart");
}; };
   
 Binary files /dev/null and b/meta/apple-touch-icon.png differ
@import url(fonts/clear-sans.css); @import url(fonts/clear-sans.css);
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #faf8ef; background: #faf8ef;
color: #776e65; color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; } font-size: 18px; }
   
body { body {
margin: 80px 0; } margin: 80px 0; }
   
.heading:after { .heading:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
h1.title { h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: block; display: block;
float: left; } float: left; }
   
@-webkit-keyframes move-up { @-webkit-keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
@-moz-keyframes move-up { @-moz-keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
@keyframes move-up { @keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
.score-container { .score-container {
position: relative; position: relative;
float: right; float: right;
background: #bbada0; background: #bbada0;
padding: 15px 25px; padding: 15px 25px;
font-size: 25px; font-size: 25px;
height: 25px; height: 25px;
line-height: 47px; line-height: 47px;
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
color: white; color: white;
margin-top: 8px; } margin-top: 8px; }
.score-container:after { .score-container:after {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 10px; top: 10px;
left: 0; left: 0;
content: "Score"; content: "Score";
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
text-align: center; text-align: center;
color: #eee4da; } color: #eee4da; }
.score-container .score-addition { .score-container .score-addition {
position: absolute; position: absolute;
right: 30px; right: 30px;
color: red; color: red;
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
font-weight: bold; font-weight: bold;
color: rgba(119, 110, 101, 0.9); color: rgba(119, 110, 101, 0.9);
z-index: 100; z-index: 100;
-webkit-animation: move-up 600ms ease-in; -webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in; -moz-animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
   
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.65; } line-height: 1.65; }
   
a { a {
color: #776e65; color: #776e65;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
cursor: pointer; } cursor: pointer; }
   
strong.important { strong.important {
text-transform: uppercase; } text-transform: uppercase; }
   
hr { hr {
border: none; border: none;
border-bottom: 1px solid #d8d4d0; border-bottom: 1px solid #d8d4d0;
margin-top: 20px; margin-top: 20px;
margin-bottom: 30px; } margin-bottom: 30px; }
   
.container { .container {
width: 500px; width: 500px;
margin: 0 auto; } margin: 0 auto; }
   
@-webkit-keyframes fade-in { @-webkit-keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
@-moz-keyframes fade-in { @-moz-keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
.game-container .game-message a {  
display: inline-block;  
background: #8f7a66;  
border-radius: 3px;  
padding: 0 20px;  
text-decoration: none;  
color: #f9f6f2;  
height: 40px;  
line-height: 42px; }  
   
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: 15px; padding: 15px;
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 500px; width: 500px;
height: 500px; height: 500px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.game-container .game-message { .game-container .game-message {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(238, 228, 218, 0.5); background: rgba(238, 228, 218, 0.5);
z-index: 100; z-index: 100;
text-align: center; text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
.game-container .game-message p { .game-container .game-message p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
margin-top: 222px; } margin-top: 222px; }
.game-container .game-message .lower { .game-container .game-message .lower {
display: block; display: block;
margin-top: 59px; } margin-top: 59px; }
.game-container .game-message a { .game-container .game-message a {
  display: inline-block;
  background: #8f7a66;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
margin-left: 9px; } margin-left: 9px; }
.game-container .game-message.game-won { .game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5); background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; } color: #f9f6f2; }
.game-container .game-message.game-won, .game-container .game-message.game-over { .game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; } display: block; }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
   
.grid-row { .grid-row {
margin-bottom: 15px; } margin-bottom: 15px; }
.grid-row:last-child { .grid-row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.grid-row:after { .grid-row:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
.grid-cell { .grid-cell {
width: 106.25px; width: 106.25px;
height: 106.25px; height: 106.25px;
margin-right: 15px; margin-right: 15px;
float: left; float: left;
border-radius: 3px; border-radius: 3px;
background: rgba(238, 228, 218, 0.35); } background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { .grid-cell:last-child {
margin-right: 0; } margin-right: 0; }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
   
.tile { .tile {
width: 106.25px; width: 106.25px;
height: 106.25px; height: 106.25px;
line-height: 116.25px; } line-height: 116.25px; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; } top: 0px; }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 121px; } top: 121px; }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 243px; } top: 243px; }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 364px; } top: 364px; }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 0px; } top: 0px; }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 121px; } top: 121px; }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 243px; } top: 243px; }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 364px; } top: 364px; }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 0px; } top: 0px; }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 121px; } top: 121px; }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 243px; } top: 243px; }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 364px; } top: 364px; }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 0px; } top: 0px; }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 121px; } top: 121px; }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 243px; } top: 243px; }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 364px; } top: 364px; }
   
.tile { .tile {
border-radius: 3px; border-radius: 3px;
background: #eee4da; background: #eee4da;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
z-index: 10; z-index: 10;
font-size: 55px; font-size: 55px;
-webkit-transition: 100ms ease-in-out; -webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out; -moz-transition: 100ms ease-in-out;
-webkit-transition-property: top, left; -webkit-transition-property: top, left;
-moz-transition-property: top, left; } -moz-transition-property: top, left; }
.tile.tile-2 { .tile.tile-2 {
background: #eee4da; background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-4 { .tile.tile-4 {
background: #ede0c8; background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-8 { .tile.tile-8 {
color: #f9f6f2; color: #f9f6f2;
background: #f2b179; } background: #f2b179; }
.tile.tile-16 { .tile.tile-16 {
color: #f9f6f2; color: #f9f6f2;
background: #f59563; } background: #f59563; }
.tile.tile-32 { .tile.tile-32 {
color: #f9f6f2; color: #f9f6f2;
background: #f67c5f; } background: #f67c5f; }
.tile.tile-64 { .tile.tile-64 {
color: #f9f6f2; color: #f9f6f2;
background: #f65e3b; } background: #f65e3b; }
.tile.tile-128 { .tile.tile-128 {
color: #f9f6f2; color: #f9f6f2;
background: #edcf72; background: #edcf72;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-128 { .tile.tile-128 {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-256 { .tile.tile-256 {
color: #f9f6f2; color: #f9f6f2;
background: #edcc61; background: #edcc61;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-256 { .tile.tile-256 {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-512 { .tile.tile-512 {
color: #f9f6f2; color: #f9f6f2;
background: #edc850; background: #edc850;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-512 { .tile.tile-512 {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-1024 { .tile.tile-1024 {
color: #f9f6f2; color: #f9f6f2;
background: #edc53f; background: #edc53f;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-1024 { .tile.tile-1024 {
font-size: 15px; } } font-size: 15px; } }
.tile.tile-2048 { .tile.tile-2048 {
color: #f9f6f2; color: #f9f6f2;
background: #edc22e; background: #edc22e;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
font-size: 35px; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-2048 { .tile.tile-2048 {
font-size: 15px; } } font-size: 15px; } }
   
@-webkit-keyframes appear { @-webkit-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1); } }
   
@-moz-keyframes appear { @-moz-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1); } }
   
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1); } }
   
.tile-new { .tile-new {
-webkit-animation: appear 200ms ease 100ms; -webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms; -moz-animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
   
@-webkit-keyframes pop { @-webkit-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1); } }
   
@-moz-keyframes pop { @-moz-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1); } }
   
@keyframes pop { @keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1); } }
   
.tile-merged { .tile-merged {
z-index: 20; z-index: 20;
-webkit-animation: pop 200ms ease 100ms; -webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms; -moz-animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
   
.game-intro { .game-intro {
margin-bottom: 0; } margin-bottom: 0; }
   
.game-explanation { .game-explanation {
margin-top: 50px; } margin-top: 50px; }
   
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
html, body { html, body {
font-size: 15px; } font-size: 15px; }
   
body { body {
margin: 20px 0; margin: 20px 0;
padding: 0 20px; } padding: 0 20px; }
   
h1.title { h1.title {
font-size: 50px; } font-size: 50px; }
   
.container { .container {
width: 280px; width: 280px;
margin: 0 auto; } margin: 0 auto; }
   
.score-container { .score-container {
margin-top: 0; } margin-top: 0; }
   
.heading { .heading {
margin-bottom: 10px; } margin-bottom: 10px; }
   
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: 10px; padding: 10px;
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 280px; width: 280px;
height: 280px; height: 280px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.game-container .game-message { .game-container .game-message {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(238, 228, 218, 0.5); background: rgba(238, 228, 218, 0.5);
z-index: 100; z-index: 100;
text-align: center; text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
.game-container .game-message p { .game-container .game-message p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
margin-top: 222px; } margin-top: 222px; }
.game-container .game-message .lower { .game-container .game-message .lower {
display: block; display: block;
margin-top: 59px; } margin-top: 59px; }
.game-container .game-message a { .game-container .game-message a {
  display: inline-block;
  background: #8f7a66;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
margin-left: 9px; } margin-left: 9px; }
.game-container .game-message.game-won { .game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5); background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; } color: #f9f6f2; }
.game-container .game-message.game-won, .game-container .game-message.game-over { .game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; } display: block; }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
   
.grid-row { .grid-row {
margin-bottom: 10px; } margin-bottom: 10px; }
.grid-row:last-child { .grid-row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.grid-row:after { .grid-row:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
.grid-cell { .grid-cell {
width: 57.5px; width: 57.5px;
height: 57.5px; height: 57.5px;
margin-right: 10px; margin-right: 10px;
float: left; float: left;
border-radius: 3px; border-radius: 3px;
background: rgba(238, 228, 218, 0.35); } background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { .grid-cell:last-child {
margin-right: 0; } margin-right: 0; }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
   
.tile { .tile {
width: 57.5px; width: 57.5px;
height: 57.5px; height: 57.5px;
line-height: 67.5px; } line-height: 67.5px; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; } top: 0px; }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 68px; } top: 68px; }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 135px; } top: 135px; }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 203px; } top: 203px; }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
position: absolute; position: absolute;
left: 68px; left: 68px;
top: 0px; } top: 0px; }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
position: absolute; position: absolute;
left: 68px; left: 68px;
top: 68px; } top: 68px; }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
position: absolute; position: absolute;
left: 68px; left: 68px;
top: 135px; } top: 135px; }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
position: absolute; position: absolute;
left: 68px; left: 68px;
top: 203px; } top: 203px; }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
position: absolute; position: absolute;
left: 135px; left: 135px;
top: 0px; } top: 0px; }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
position: absolute; position: absolute;
left: 135px; left: 135px;
top: 68px; } top: 68px; }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
position: absolute; position: absolute;
left: 135px; left: 135px;
top: 135px; } top: 135px; }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
position: absolute; position: absolute;
left: 135px; left: 135px;
top: 203px; } top: 203px; }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
position: absolute; position: absolute;
left: 203px; left: 203px;
top: 0px; } top: 0px; }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
position: absolute; position: absolute;
left: 203px; left: 203px;
top: 68px; } top: 68px; }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
position: absolute; position: absolute;
left: 203px; left: 203px;
top: 135px; } top: 135px; }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
position: absolute; position: absolute;
left: 203px; left: 203px;
top: 203px; } top: 203px; }
   
.game-container { .game-container {
margin-top: 20px; } margin-top: 20px; }
   
.tile { .tile {
font-size: 35px; } font-size: 35px; }
   
.game-message p { .game-message p {
font-size: 30px !important; font-size: 30px !important;
height: 30px !important; height: 30px !important;
line-height: 30px !important; line-height: 30px !important;
margin-top: 90px !important; } margin-top: 90px !important; }
.game-message .lower { .game-message .lower {
margin-top: 30px !important; } } margin-top: 30px !important; } }
   
comments