Update README.md
Update README.md

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -7,12 +7,15 @@
 
  - [TimPetricola](https://github.com/TimPetricola) added best score storage
  - [chrisprice](https://github.com/chrisprice) added custom code for swipe handling on mobile
+ - [elektryk](https://github.com/elektryk) made swipes work on Windows Phone
 
 Many thanks to [rayhaanj](https://github.com/rayhaanj), [Mechazawa](https://github.com/Mechazawa), [grant](https://github.com/grant), [remram44](https://github.com/remram44) and [ghoullier](https://github.com/ghoullier) for the many other good contributions.
 
 ### Screenshot
 
-[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
+<p align="center">
+  <img src="http://pictures.gabrielecirulli.com/2048-20140309-234100.png" alt="Screenshot"/>
+</p>
 
 That screenshot is fake, by the way. I never reached 2048 :smile:
 

file:b/Rakefile (new)
--- /dev/null
+++ b/Rakefile
@@ -1,1 +1,12 @@
+require "date"
 
+namespace :appcache do
+  desc "update the date in the appcache file (in the gh-pages branch)"
+  task :update do
+    appcache = File.read("cache.appcache")
+    updated  = "# Updated: #{DateTime.now}"
+
+    File.write("cache.appcache", appcache.sub(/^# Updated:.*$/, updated))
+  end
+end
+

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 
   <meta name="HandheldFriendly" content="True">
   <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, minimal-ui">
 </head>
 <body>
   <div class="container">
@@ -28,6 +28,7 @@
       <div class="game-message">
         <p></p>
         <div class="lower">
+	        <a class="keep-playing-button">Keep going</a>
           <a class="retry-button">Try again</a>
         </div>
       </div>

--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -8,23 +8,39 @@
 
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
+  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
 
   this.setup();
 }
 
 // Restart the game
 GameManager.prototype.restart = function () {
-  this.actuator.restart();
+  this.actuator.continue();
   this.setup();
+};
+
+// Keep playing after winning
+GameManager.prototype.keepPlaying = function () {
+  this.keepPlaying = true;
+  this.actuator.continue();
+};
+
+GameManager.prototype.isGameTerminated = function () {
+  if (this.over || (this.won && !this.keepPlaying)) {
+    return true;
+  } else {
+    return false;
+  }
 };
 
 // Set up the game
 GameManager.prototype.setup = function () {
-  this.grid         = new Grid(this.size);
-
-  this.score        = 0;
-  this.over         = false;
-  this.won          = false;
+  this.grid        = new Grid(this.size);
+
+  this.score       = 0;
+  this.over        = false;
+  this.won         = false;
+  this.keepPlaying = false;
 
   // Add the initial tiles
   this.addStartTiles();
@@ -57,10 +73,11 @@
   }
 
   this.actuator.actuate(this.grid, {
-    score:     this.score,
-    over:      this.over,
-    won:       this.won,
-    bestScore: this.scoreManager.get()
+    score:      this.score,
+    over:       this.over,
+    won:        this.won,
+    bestScore:  this.scoreManager.get(),
+    terminated: this.isGameTerminated()
   });
 
 };
@@ -87,7 +104,7 @@
   // 0: up, 1: right, 2:down, 3: left
   var self = this;
 
-  if (this.over || this.won) return; // Don't do anything if the game's over
+  if (this.isGameTerminated()) return; // Don't do anything if the game's over
 
   var cell, tile;
 

--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -24,12 +24,19 @@
     self.updateScore(metadata.score);
     self.updateBestScore(metadata.bestScore);
 
-    if (metadata.over) self.message(false); // You lose
-    if (metadata.won) self.message(true); // You win!
+    if (metadata.terminated) {
+      if (metadata.over) {
+        self.message(false); // You lose
+      } else if (metadata.won) {
+        self.message(true); // You win!
+      }
+    }
+
   });
 };
 
-HTMLActuator.prototype.restart = function () {
+// Continues the game (both restart and keep playing)
+HTMLActuator.prototype.continue = function () {
   this.clearMessage();
 };
 
@@ -45,10 +52,13 @@
   var wrapper   = document.createElement("div");
   var inner     = document.createElement("div");
   var position  = tile.previousPosition || { x: tile.x, y: tile.y };
-  positionClass = this.positionClass(position);
+  var positionClass = this.positionClass(position);
 
   // We can't use classlist because it somehow glitches when replacing classes
   var classes = ["tile", "tile-" + tile.value, positionClass];
+
+  if (tile.value > 2048) classes.push("tile-super");
+
   this.applyClasses(wrapper, classes);
 
   inner.classList.add("tile-inner");
@@ -123,6 +133,8 @@
 };
 
 HTMLActuator.prototype.clearMessage = function () {
-  this.messageContainer.classList.remove("game-won", "game-over");
+  // IE only takes one value to remove at a time.
+  this.messageContainer.classList.remove("game-won");
+  this.messageContainer.classList.remove("game-over");
 };
 

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -1,5 +1,16 @@
 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();
 }
@@ -53,33 +64,52 @@
     }
   });
 
-  var retry = document.getElementsByClassName("retry-button")[0];
+  var retry = document.querySelector(".retry-button");
   retry.addEventListener("click", this.restart.bind(this));
-  retry.addEventListener("touchend", this.restart.bind(this));
+  retry.addEventListener(this.eventTouchend, this.restart.bind(this));
+
+  var keepPlaying = document.querySelector(".keep-playing-button");
+  keepPlaying.addEventListener("click", this.keepPlaying.bind(this));
+  keepPlaying.addEventListener("touchend", this.keepPlaying.bind(this));
 
   // Listen to swipe events
   var touchStartClientX, touchStartClientY;
   var gameContainer = document.getElementsByClassName("game-container")[0];
 
-  gameContainer.addEventListener("touchstart", function (event) {
-    if (event.touches.length > 1) return;
-
-    touchStartClientX = event.touches[0].clientX;
-    touchStartClientY = event.touches[0].clientY;
+  gameContainer.addEventListener(this.eventTouchstart, function (event) {
+    if (( !window.navigator.msPointerEnabled && event.touches.length > 1) || event.targetTouches > 1) return;
+    
+    if(window.navigator.msPointerEnabled){
+        touchStartClientX = event.pageX;
+        touchStartClientY = event.pageY;
+    } else {
+        touchStartClientX = event.touches[0].clientX;
+        touchStartClientY = event.touches[0].clientY;
+    }
+    
     event.preventDefault();
   });
 
-  gameContainer.addEventListener("touchmove", function (event) {
+  gameContainer.addEventListener(this.eventTouchmove, function (event) {
     event.preventDefault();
   });
 
-  gameContainer.addEventListener("touchend", function (event) {
-    if (event.touches.length > 0) return;
+  gameContainer.addEventListener(this.eventTouchend, function (event) {
+    if (( !window.navigator.msPointerEnabled && event.touches.length > 0) || event.targetTouches > 0) return;
 
-    var dx = event.changedTouches[0].clientX - touchStartClientX;
+    var touchEndClientX, touchEndClientY;
+    if(window.navigator.msPointerEnabled){
+        touchEndClientX = event.pageX;
+        touchEndClientY = event.pageY;
+    } else {
+        touchEndClientX = event.changedTouches[0].clientX;
+        touchEndClientY = event.changedTouches[0].clientY;
+    }
+
+    var dx = touchEndClientX - touchStartClientX;
     var absDx = Math.abs(dx);
 
-    var dy = event.changedTouches[0].clientY - touchStartClientY;
+    var dy = touchEndClientY - touchStartClientY;
     var absDy = Math.abs(dy);
 
     if (Math.max(absDx, absDy) > 10) {
@@ -94,3 +124,8 @@
   this.emit("restart");
 };
 
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+  event.preventDefault();
+  this.emit("keepPlaying");
+};
+

--- a/js/local_score_manager.js
+++ b/js/local_score_manager.js
@@ -19,11 +19,24 @@
 };
 
 function LocalScoreManager() {
-  var localSupported = !!window.localStorage;
+  this.key     = "bestScore";
 
-  this.key     = "bestScore";
-  this.storage = localSupported ? window.localStorage : window.fakeStorage;
+  var supported = this.localStorageSupported();
+  this.storage = supported ? window.localStorage : window.fakeStorage;
 }
+
+LocalScoreManager.prototype.localStorageSupported = function () {
+  var testKey = "test";
+  var storage = window.localStorage;
+
+  try {
+    storage.setItem(testKey, "1");
+    storage.removeItem(testKey);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
 
 LocalScoreManager.prototype.get = function () {
   return this.storage.getItem(this.key) || 0;

--- a/style/helpers.scss
+++ b/style/helpers.scss
@@ -42,7 +42,7 @@
 @mixin animation-fill-mode($args...) {
   -webkit-animation-fill-mode: $args;
   -moz-animation-fill-mode: $args;
-  animation: $args;
+  animation-fill-mode: $args;
 }
 
 @mixin transform($args...) {

--- a/style/main.css
+++ b/style/main.css
@@ -90,7 +90,7 @@
     animation: move-up 600ms ease-in;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
-    animation: both; }
+    animation-fill-mode: both; }
 
 .score-container:after {
   content: "Score"; }
@@ -155,6 +155,7 @@
   border-radius: 6px;
   width: 500px;
   height: 500px;
+  -ms-touch-action: none;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
@@ -173,7 +174,7 @@
     animation: fade-in 800ms ease 1200ms;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
-    animation: both; }
+    animation-fill-mode: both; }
     .game-container .game-message p {
       font-size: 60px;
       font-weight: bold;
@@ -193,9 +194,13 @@
       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; }
 
@@ -333,7 +338,7 @@
     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: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-128 .tile-inner {
         font-size: 25px; } }
   .tile.tile-256 .tile-inner {
@@ -341,7 +346,7 @@
     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: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-256 .tile-inner {
         font-size: 25px; } }
   .tile.tile-512 .tile-inner {
@@ -349,7 +354,7 @@
     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: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-512 .tile-inner {
         font-size: 25px; } }
   .tile.tile-1024 .tile-inner {
@@ -357,7 +362,7 @@
     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: 480px) {
+    @media screen and (max-width: 520px) {
       .tile.tile-1024 .tile-inner {
         font-size: 15px; } }
   .tile.tile-2048 .tile-inner {
@@ -365,9 +370,16 @@
     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: 480px) {
+    @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% {
@@ -414,7 +426,7 @@
   animation: appear 200ms ease 100ms;
   -webkit-animation-fill-mode: backwards;
   -moz-animation-fill-mode: backwards;
-  animation: backwards; }
+  animation-fill-mode: backwards; }
 
 @-webkit-keyframes pop {
   0% {
@@ -471,7 +483,7 @@
   animation: pop 200ms ease 100ms;
   -webkit-animation-fill-mode: backwards;
   -moz-animation-fill-mode: backwards;
-  animation: backwards; }
+  animation-fill-mode: backwards; }
 
 .game-intro {
   margin-bottom: 0; }
@@ -479,7 +491,7 @@
 .game-explanation {
   margin-top: 50px; }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 520px) {
   html, body {
     font-size: 15px; }
 
@@ -515,6 +527,7 @@
     border-radius: 6px;
     width: 280px;
     height: 280px;
+    -ms-touch-action: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }
@@ -533,7 +546,7 @@
       animation: fade-in 800ms ease 1200ms;
       -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
-      animation: both; }
+      animation-fill-mode: both; }
       .game-container .game-message p {
         font-size: 60px;
         font-weight: bold;
@@ -553,9 +566,13 @@
         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; }
 

--- a/style/main.scss
+++ b/style/main.scss
@@ -6,6 +6,8 @@
 $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;
@@ -182,6 +184,7 @@
     border-radius: $tile-border-radius * 2;
     width: $field-width;
     height: $field-width;
+    -ms-touch-action: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -218,6 +221,10 @@
         @include button;
         margin-left: 9px;
         // margin-top: 59px;
+
+	&.keep-playing-button {
+	  display: none;
+	}
       }
 
       @include animation(fade-in 800ms ease $transition-speed * 12);
@@ -226,6 +233,10 @@
       &.game-won {
         background: rgba($tile-gold-color, .5);
         color: $bright-text-color;
+
+	a.keep-playing-button {
+	  display: inline-block;
+	}
       }
 
       &.game-won, &.game-over {
@@ -371,19 +382,31 @@
         font-size: 45px;
 
         // Media queries placed here to avoid carrying over the rest of the logic
-        @include smaller(480px) {
+        @include smaller($mobile-threshold) {
           font-size: 25px;
         }
       } @else if $power >= 1000 {
         font-size: 35px;
 
-        @include smaller(480px) {
+        @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;
+    }
   }
 }
 
@@ -432,7 +455,7 @@
   margin-top: 50px;
 }
 
-@include smaller(480px) {
+@include smaller($mobile-threshold) {
   // Redefine variables for smaller screens
   $field-width: 280px;
   $grid-spacing: 10px;

comments