Mobile fixes

walsh9 · walsh9 · commit 969f688e651e · 2015-03-21T23:12:12.000-04:00
diff --git a/README.md b/README.md
@@ -65,3 +65,6 @@ Special thanks goes to [rot.js](http://ondras.github.io/rot.js/hp/) and the [tut
 * Other touch improvements.
 * Prevent unwanted scrolling from arrow keys, spacebar, etc.
 * A few other UI tweaks.
+### 1.1.1
+* Touch buttons shouldn't fire twice on Dolphin browser anymore.
+* Game window scales wider on small screens now.
diff --git a/index.html b/index.html
@@ -3,11 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="msapplication-tap-highlight" content="no" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" type="text/css">
     <link rel="stylesheet" href="octicons/octicons.css" type="text/css">
     <script src="js/hammer.min.js"></script>
     <script src="js/rot.min.js"></script>
+    <script src="js/preventGhostClick.js"></script>
     <script src="js/sprintf.min.js"></script>
     <script src="js/array2d.js"></script>
     <script src="js/game.js"></script>
@@ -34,7 +35,8 @@
             touch-action: auto;
         }
         canvas {
-            width: 300px;
+            width: 100%;
+            max-width: 720px;
             display: block;
             margin: auto;
             border: 1px solid #333;
@@ -132,18 +134,10 @@
         }
         @media (min-width: 420px) {
             canvas {
-                width: 400px;
+                width: 90%;
             }
         } 
         @media (min-width: 620px) {
-            canvas {
-                width: 500px;
-            }
-        } 
-        @media (min-width: 620px) {
-            canvas {
-                width: 600px;
-            }
             button {
                 width: 48px;
                 height: 48px;
@@ -154,9 +148,6 @@
             }        
         } 
         @media (min-width: 670px) {
-            canvas {
-                width: 650px;
-            }
             button {
                 width: 52px;
                 height: 52px;
@@ -166,9 +157,6 @@
             }
         }
         @media (min-width: 740px) {
-            canvas {
-                width: 720px;
-            }
             button {
                 width: 64px;
                 height: 64px;
@@ -221,7 +209,7 @@ <h1>Chitinous Crooks</h1>
     </div>
     <p class="hint">Press [?] for help</p>
     <button class="keyboard"><span class="mega-octicon octicon-keyboard"></span>Show Touch Controls </button>
-    <p class="message">This is version 1.1, with some bugfixes and <a href="https://github.com/walsh9/7drl2015#11">other changes</a>.</p>
+    <p class="message">This is version 1.1.1, with some bugfixes and <a href="https://github.com/walsh9/7drl2015#11">other changes</a>.</p>
     <p class="message">For the original 7DRL release, <a href="7drl/">click here</a>.</p>
 
 
diff --git a/js/game.js b/js/game.js
@@ -9,7 +9,7 @@ var Game =  {
             width: this._screenWidth + 20,
             height: this._screenHeight,
             fontFamily: '"Droid Sans Mono", monospace',
-        }
+        };
 
         this._display = new ROT.Display(options);
         // Create a helper function for binding to an event
@@ -26,7 +26,7 @@ var Game =  {
                          e.keyCode === ROT.VK_DOWN ||
                          e.keyCode === ROT.VK_UP)
                         ) {
-                        e.preventDefault();
+                       e.preventDefault();
                     }
                     // Send the event type and data to the screen
                     game._currentScreen.handleInput(event, e);
@@ -104,7 +104,7 @@ var Game =  {
         var hammertime = new Hammer.Manager(document.querySelector('#game canvas'), {domEvents: true, preventDefault: true});
         hammertime.add( new Hammer.Swipe({ event: 'swipe', direction: Hammer.DIRECTION_ALL, velocity: 0.05 }) );
         var hammertime2 = new Hammer.Manager(document.body, {domEvents: true, preventDefault: true});
-        hammertime2.add( new Hammer.Tap({ event: 'tap', delay: 0, time: 400, threshold: 24}) );
+        hammertime2.add( new Hammer.Tap({ event: 'tap', delay: 0, time: 400, threshold: 25}) );
         // Prevent double tap causing scroll on ios safari
         var doubleTouchStartTimestamp = 0;
         document.body.addEventListener("touchstart", function (event) {
@@ -114,6 +114,10 @@ var Game =  {
             }
             doubleTouchStartTimestamp = now;
         });
+        var buttons = document.querySelectorAll('button');
+        for (var i = 0; i < buttons.length; i++) {
+            PreventGhostClick(buttons[i]);
+        }
     },
 	getDisplay: function() {
 		return this._display;
diff --git a/js/preventGhostClick.js b/js/preventGhostClick.js
@@ -0,0 +1,89 @@
+/**
+ * Prevent click events after a touchend.
+ * 
+ * Inspired/copy-paste from this article of Google by Ryan Fioravanti
+ * https://developers.google.com/mobile/articles/fast_buttons#ghost
+ * 
+ * USAGE: 
+ * Prevent the click event for an certain element
+ * ````
+ *  PreventGhostClick(myElement);
+ * ````
+ * 
+ * Prevent clicks on the whole document (not recommended!!) * 
+ * ````
+ *  PreventGhostClick(document);
+ * ````
+ * 
+ */
+(function(window, document, exportName) {
+    var coordinates = [];
+    var threshold = 25;
+    var timeout = 400;
+ 
+    // no touch support
+    if(!("ontouchstart" in window)) {
+        window[exportName] = function(){};
+        return;
+    }
+ 
+    /**
+     * prevent clicks if they're in a registered XY region
+     * @param {MouseEvent} ev
+     */
+    function preventGhostClick(ev) {
+        for (var i = 0; i < coordinates.length; i++) {
+            var x = coordinates[i][0];
+            var y = coordinates[i][1];
+ 
+            // within the range, so prevent the click
+            if (Math.abs(ev.clientX - x) < threshold && Math.abs(ev.clientY - y) < threshold) {
+                ev.stopPropagation();
+                ev.preventDefault();
+                break;
+            }
+        }
+    }
+ 
+    /**
+     * reset the coordinates array
+     */
+    function resetCoordinates() {
+        coordinates = [];
+    }
+ 
+    /**
+     * remove the first coordinates set from the array
+     */
+    function popCoordinates() {
+        coordinates.splice(0, 1);
+    }
+ 
+    /**
+     * if it is an final touchend, we want to register it's place
+     * @param {TouchEvent} ev
+     */
+    function registerCoordinates(ev) {
+        // touchend is triggered on every releasing finger
+        // changed touches always contain the removed touches on a touchend
+        // the touches object might contain these also at some browsers (firefox os)
+        // so touches - changedTouches will be 0 or lower, like -1, on the final touchend
+        if(ev.touches.length - ev.changedTouches.length <= 0) {
+            var touch = ev.changedTouches[0];
+            coordinates.push([touch.clientX, touch.clientY]);
+ 
+            setTimeout(popCoordinates, timeout);
+        }
+    }
+ 
+    /**
+     * prevent click events for the given element
+     * @param {EventTarget} el
+     */
+    window[exportName] = function(el) {
+        el.addEventListener("touchstart", resetCoordinates, true);
+        el.addEventListener("touchend", registerCoordinates, true);
+    };
+ 
+    document.addEventListener("mousedown", preventGhostClick, true);
+})(window, document, 'PreventGhostClick');
