fix touch gesture

static/css/main.css

@@ -1,3 +1,8 @@
+body {
+    background-image: url('https://t3.ftcdn.net/jpg/02/41/14/36/500_F_241143639_RW6VdHbqYRM0yfNpDxDlWpj0uXWglAC2.jpg');
+    background-repeat: repeat;
+}
+
 #gamebody {
     display: block;
     width: 556px;

static/gameboy2.html

@@ -77,54 +77,6 @@
     <script src="/static/js/gesture_joystick.js"></script>
     <script src="/static/js/ws.js"></script>
     
-    <script>
-        function fixScreen() {
-            target = $(document);
-            child = $("#gamebody");
-
-            width = child.width();
-            height = child.height();
-
-            // should have maximum for desktop
-            if (["win", "mac", "linux"].indexOf(getOS()) != -1) {
-                targetWidth = Math.min(800, target.width());
-                targetHeight = Math.min(600, target.height());
-            } else {
-                targetWidth = target.width();
-                targetHeight = target.height();
-            }
-            console.log(targetHeight);
-            console.log(targetWidth);
-
-            screenWidth = targetWidth;
-            screenHeight = targetHeight;
-
-            st = "translate(-50%, -50%) ";
-            // rotate ?
-            if (isPortrait()) {
-                st += `rotate(90deg) `;
-                screenWidth = targetHeight;
-                screenHeight = targetWidth;
-            }
-
-            // zoom in/out ?
-            st += `scale(${Math.min(screenWidth / width, screenHeight / height)}) `;
-
-            child.css("transform", st);
-            child.css("-webkit-transform", st);
-            child.css("-moz-transform", st);
-            child.css("-ms-transform", st);
-        }
-        // fixScreen();
-
-        // $(window).on("resize", fixScreen);
-        // $(window).on("orientationchange", fixScreen);
-
-    </script>
-
-
-
-
 </body>
 
 </html>

static/js/gesture_touch.js

@@ -1,29 +1,75 @@
+// Window rerender / rotate screen if needed
+var isSwitch = false;
 
-// VIRTUAL JOYSTICK
+function fixScreen() {
+    target = $(document);
+    child = $("#gamebody");
+
+    width = child.width();
+    height = child.height();
+
+    // Should have maximum box for desktop
+    if (["win", "mac", "linux"].indexOf(getOS()) != -1) {
+        targetWidth = Math.min(800, target.width());
+        targetHeight = Math.min(600, target.height());
+    } else {
+        targetWidth = target.width();
+        targetHeight = target.height();
+    }
+
+    screenWidth = targetWidth;
+    screenHeight = targetHeight;
+
+    st = "translate(-50%, -50%) ";
+    // rotate ?
+    if (isPortrait()) {
+        st += `rotate(90deg) `;
+        screenWidth = targetHeight;
+        screenHeight = targetWidth;
+        isSwitch = true;
+    } else {
+        isSwitch = false;
+    }
+
+    // zoom in/out ?
+    st += `scale(${Math.min(screenWidth / width, screenHeight / height)}) `;
+
+    child.css("transform", st);
+    child.css("-webkit-transform", st);
+    child.css("-moz-transform", st);
+    child.css("-ms-transform", st);
+}
+fixScreen();
+
+$(window).on("resize", fixScreen);
+$(window).on("orientationchange", fixScreen);
+
+
+
+
+// Virtual Joystick
 // Ref: https://jsfiddle.net/aa0et7tr/5/
+
 var dpadState = {};
 var touchIdx = null;
 const maxDiff = 20; // pixel
 var dragStart = null;
-var currentPos = { x: 0, y: 0 };
 var padHolder = $("#circle-pad-holder");
 var padCircle = $("#circle-pad");
 
 
-function imAlive() {
-    $("#room-txt").val(Math.random());
-}
-
-function resetTouchState() {
-    checkDPadAxis(false, "up");
-    checkDPadAxis(false, "down");
-    checkDPadAxis(false, "left");
-    checkDPadAxis(false, "right");
-    
+function resetJoystickState() {
+    // trigger up event?
+    checkDPadAxis("up", false);
+    checkDPadAxis("down", false);
+    checkDPadAxis("left", false);
+    checkDPadAxis("right", false);
+    dragStart = null;
+    touchIdx = null;
     $(".dpad").removeClass("pressed");
 }
 
-function checkDPadAxis(bo, axis) {
+function checkDPadAxis(axis, bo) {
     if (bo != dpadState[axis]) {
         dpadState[axis] = bo;
 
@@ -36,20 +82,19 @@ function checkDPadAxis(bo, axis) {
 }
 
 
-function handleMouseDown(event) {
-    // event.preventDefault();
-    
+function handleJoystickDown(event) {
     padCircle.css("transition", "0s");
     padCircle.css("-moz-transition", "0s");
     padCircle.css("-webkit-transition", "0s");
     if (event.changedTouches) {
+        resetJoystickState();
+
         touchIdx = event.changedTouches[0].identifier;
-        
         dragStart = {
-            x: event.changedTouches[0].screenX,
-            y: event.changedTouches[0].screenY,
+            x: event.changedTouches[0].clientX,
+            y: event.changedTouches[0].clientY,
         };
-        resetTouchState();
+
         return;
     }
     dragStart = {
@@ -59,40 +104,52 @@ function handleMouseDown(event) {
 
 }
 
-function handleMouseMove(event) {
-    // event.preventDefault();
+function handleJoystickMove(event) {
+    // stop other events
+    event.preventDefault();
     if (dragStart === null) return;
+
     if (event.changedTouches) {
-        // check if move source is from other touch?
-        event.clientX = event.changedTouches[touchIdx].screenX;
-        event.clientY = event.changedTouches[touchIdx].screenY;
-        imAlive();
+        // check if moving source is from other touch?
+        for (var i = 0; i < event.changedTouches.length; i++) {
+            if (event.changedTouches[i].identifier === touchIdx) {
+                event.clientX = event.changedTouches[i].clientX;
+                event.clientY = event.changedTouches[i].clientY;
+            }
+        }
+        if (event.clientX == undefined || event.clientY == undefined)
+            return;
     }
-    
+
     const xDiff = event.clientX - dragStart.x;
     const yDiff = event.clientY - dragStart.y;
     const angle = Math.atan2(yDiff, xDiff);
     const distance = Math.min(maxDiff, Math.hypot(xDiff, yDiff));
-    const xNew = distance * Math.cos(angle);
-    const yNew = distance * Math.sin(angle);
+    xNew = distance * Math.cos(angle);
+    yNew = distance * Math.sin(angle);
+
+    // check if screen is switched or not
+    if (isSwitch) {
+        tmp = xNew;
+        xNew = yNew;
+        yNew = -tmp;
+    }
+
     style = `translate(${xNew}px, ${yNew}px)`;
-    // $("#room-txt").val(style);
     padCircle.css("transform", style);
     padCircle.css("-webkit-transform", style);
     padCircle.css("-moz-transform", style);
-    currentPos = { x: xNew, y: yNew };
 
     const xRatio = xNew / maxDiff;
     const yRatio = yNew / maxDiff;
-    checkDPadAxis(xRatio <= -0.5, "left");
-    checkDPadAxis(xRatio >= 0.5, "right");
-    checkDPadAxis(yRatio <= -0.5, "up");
-    checkDPadAxis(yRatio >= 0.5, "down");
+    checkDPadAxis("left", xRatio <= -0.5);
+    checkDPadAxis("right", xRatio >= 0.5);
+    checkDPadAxis("up", yRatio <= -0.5);
+    checkDPadAxis("down", yRatio >= 0.5);
 }
 
 
-function handleMouseUp(event) {
-    event.preventDefault();
+function handleJoystickUp(event) {
     if (dragStart === null) return;
     padCircle.css("transition", ".2s");
     padCircle.css("-moz-transition", ".2s");
@@ -101,9 +158,7 @@ function handleMouseUp(event) {
     padCircle.css("-moz-transform", "translate3d(0px, 0px, 0px)");
     padCircle.css("-webkit-transform", "translate3d(0px, 0px, 0px)");
 
-    dragStart = null;
-    currentPos = { x: 0, y: 0 };
-    resetTouchState();
+    resetJoystickState();
 }
 
 
@@ -115,20 +170,19 @@ function handleButtonUp(event) {
     doButtonUp($(this).attr("value"));
 }
 
+// mouse events
+$(".btn, .btn-big").on("mousedown", handleButtonDown);
+$(".btn, .btn-big").on("mouseup", handleButtonUp);
 
-// $(".btn").on("mousedown", handleButtonDown);
-// $(".btn").on("mouseup", handleButtonUp);
-// $(".btn-big").on("mousedown", handleButtonDown);
-// $(".btn-big").on("mouseup", handleButtonUp);
-// $(".btn").on("touchstart", handleButtonDown);
-// $(".btn").on("touchend", handleButtonUp);
-// $(".btn-big").on("touchstart", handleButtonDown);
-// $(".btn-big").on("touchend", handleButtonUp);
+padHolder.on('mousedown', handleJoystickDown);
+$(window).on('mousemove', handleJoystickMove);
+$(window).on('mouseup', handleJoystickUp);
 
 
-// padHolder.on('mousedown', handleMouseDown);
-// $(document).on('mousemove', handleMouseMove);
-// $(document).on('mouseup', handleMouseUp);
-padHolder.on('touchstart', handleMouseDown);
-$(window).on('touchmove', handleMouseMove);
-padHolder.on('touchend', handleMouseUp);
+// touch events
+$(".btn, .btn-big").on("touchstart", handleButtonDown);
+$(".btn, .btn-big").on("touchend", handleButtonUp);
+
+padHolder.on('touchstart', handleJoystickDown);
+window.addEventListener("touchmove", handleJoystickMove, { passive: false });
+padHolder.on('touchend', handleJoystickUp);