Merge branch 'WP_touch_events' of github.com:elektryk/2048 into elektryk-WP_touch_events

js/keyboard_input_manager.js

@@ -1,6 +1,17 @@
 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();
 }
 
@@ -55,7 +66,7 @@ KeyboardInputManager.prototype.listen = function () {
 
   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));
@@ -65,25 +76,40 @@ KeyboardInputManager.prototype.listen = function () {
   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) {

style/main.css

@@ -155,6 +155,7 @@ hr {
   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; }

style/main.scss

@@ -184,6 +184,7 @@ hr {
     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;