Merge branch 'WP_touch_events' of github.com:elektryk/2048 into elektryk-WP_touch_events
--- 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();
}
@@ -55,7 +66,7 @@
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 @@
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) {
--- a/style/main.css
+++ b/style/main.css
@@ -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; }
--- a/style/main.scss
+++ b/style/main.scss
@@ -184,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;