From 7f187251a87ce0e34ce7055b1eeb3a71a2072aea Mon Sep 17 00:00:00 2001
From: Marcin Gajda <elektryk91@gmail.com>
Date: Thu, 13 Mar 2014 20:27:09 +0100
Subject: [PATCH] Windows Phone touch events

---
 js/keyboard_input_manager.js | 48 +++++++++++++++++++++++++++---------
 style/main.css               |  1 +
 style/main.scss              |  1 +
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js
index b85c8c2..cf49fa7 100644
--- a/js/keyboard_input_manager.js
+++ b/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,31 +66,46 @@ KeyboardInputManager.prototype.listen = function () {
 
   var retry = document.getElementsByClassName("retry-button")[0];
   retry.addEventListener("click", this.restart.bind(this));
-  retry.addEventListener("touchend", this.restart.bind(this));
+  retry.addEventListener(this.eventTouchend, this.restart.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 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 = event.changedTouches[0].clientX - touchStartClientX;
+    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) {
diff --git a/style/main.css b/style/main.css
index c28f9be..14bb258 100644
--- a/style/main.css
+++ b/style/main.css
@@ -153,6 +153,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; }
diff --git a/style/main.scss b/style/main.scss
index b5e2609..095e4bd 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -182,6 +182,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;
-- 
GitLab