From 8d7c3b3d37673c6e9133ccf7ab8524910ead427e Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 11 Apr 2018 16:52:05 -0700
Subject: [PATCH] Reduce gamepad trigger area. Move to dynamic vs static
 joysticks. Fix movement lag bug.

---
 src/components/virtual-gamepad-controls.css |  8 +-
 src/components/virtual-gamepad-controls.js  | 91 ++++++++++++++-------
 2 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/src/components/virtual-gamepad-controls.css b/src/components/virtual-gamepad-controls.css
index d3e36e2fa..71107b2cf 100644
--- a/src/components/virtual-gamepad-controls.css
+++ b/src/components/virtual-gamepad-controls.css
@@ -1,19 +1,17 @@
 :local(.touchZone) {
   position: absolute;
-  top: 0;
+  height: 20vh;
   bottom: 0;
 }
 
 :local(.touchZone.left) {
   left: 0;
   right: 50%;
+  background-color: rgba(255, 0, 0, 0.5);
 }
 
 :local(.touchZone.right) {
   left: 50%;
   right: 0;
-}
-
-:local(.touchZone) .nipple {
-  margin: 5vh 5vw;
+  background-color: rgba(0, 0, 255, 0.5);
 }
diff --git a/src/components/virtual-gamepad-controls.js b/src/components/virtual-gamepad-controls.js
index d70219bf1..265dc9276 100644
--- a/src/components/virtual-gamepad-controls.js
+++ b/src/components/virtual-gamepad-controls.js
@@ -16,29 +16,40 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
 
     const leftStick = nipplejs.create({
       zone: leftTouchZone,
-      mode: "static",
-      color: "white",
-      position: { left: "50px", bottom: "50px" }
+      color: "white"
     });
 
     const rightStick = nipplejs.create({
       zone: rightTouchZone,
-      mode: "static",
-      color: "white",
-      position: { right: "50px", bottom: "50px" }
+      color: "white"
     });
 
-    this.onJoystickChanged = this.onJoystickChanged.bind(this);
+    this.onMoveJoystickChanged = this.onMoveJoystickChanged.bind(this);
+    this.onMoveJoystickEnd = this.onMoveJoystickEnd.bind(this);
+    this.onLookJoystickChanged = this.onLookJoystickChanged.bind(this);
+    this.onLookJoystickEnd = this.onLookJoystickEnd.bind(this);
 
-    rightStick.on("move end", this.onJoystickChanged);
-    leftStick.on("move end", this.onJoystickChanged);
+    leftStick.on("move", this.onMoveJoystickChanged);
+    leftStick.on("end", this.onMoveJoystickEnd);
+
+    rightStick.on("move", this.onLookJoystickChanged);
+    rightStick.on("end", this.onLookJoystickEnd);
 
     this.leftTouchZone = leftTouchZone;
     this.rightTouchZone = rightTouchZone;
     this.leftStick = leftStick;
     this.rightStick = rightStick;
 
-    this.yaw = 0;
+    this.inVr = false;
+    this.moving = false;
+    this.rotating = false;
+
+    this.moveEvent = {
+      axis: [0, 0]
+    };
+    this.rotateYEvent = {
+      value: 0
+    };
 
     this.onEnterVr = this.onEnterVr.bind(this);
     this.onExitVr = this.onExitVr.bind(this);
@@ -46,39 +57,59 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
     this.el.sceneEl.addEventListener("exit-vr", this.onExitVr);
   },
 
-  onJoystickChanged(event, joystick) {
-    if (event.target.id === this.leftStick.id) {
-      if (event.type === "move") {
-        const angle = joystick.angle.radian;
-        const force = joystick.force < 1 ? joystick.force : 1;
-        const x = Math.cos(angle) * force;
-        const z = Math.sin(angle) * force;
-        this.el.sceneEl.emit("move", { axis: [x, z] });
-      } else {
-        this.el.sceneEl.emit("move", { axis: [0, 0] });
+  onMoveJoystickChanged(event, joystick) {
+    const angle = joystick.angle.radian;
+    const force = joystick.force < 1 ? joystick.force : 1;
+    const x = Math.cos(angle) * force;
+    const z = Math.sin(angle) * force;
+    this.moving = true;
+    this.moveEvent.axis[0] = x;
+    this.moveEvent.axis[1] = z;
+  },
+
+  onMoveJoystickEnd(event, joystick) {
+    this.moving = false;
+    this.moveEvent.axis[0] = 0;
+    this.moveEvent.axis[1] = 0;
+    this.el.sceneEl.emit("move", this.moveEvent);
+  },
+
+  onLookJoystickChanged(event, joystick) {
+    // Set pitch and yaw angles on right stick move
+    const angle = joystick.angle.radian;
+    const force = joystick.force < 1 ? joystick.force : 1;
+    this.rotating = true;
+    this.rotateYEvent.value = Math.cos(angle) * force;
+  },
+
+  onLookJoystickEnd(event, joystick) {
+    this.rotating = false;
+    this.rotateYEvent.value = 0;
+    this.el.sceneEl.emit("rotateY", this.rotateYEvent);
+  },
+
+  tick() {
+    if (!this.inVr) {
+      if (this.moving) {
+        this.el.sceneEl.emit("move", this.moveEvent);
       }
-    } else {
-      if (event.type === "move") {
-        // Set pitch and yaw angles on right stick move
-        const angle = joystick.angle.radian;
-        const force = joystick.force < 1 ? joystick.force : 1;
-        this.yaw = Math.cos(angle) * force;
-        this.el.sceneEl.emit("rotateY", { value: this.yaw });
-      } else {
-        this.yaw = 0;
-        this.el.sceneEl.emit("rotateY", { value: this.yaw });
+
+      if (this.rotating) {
+        this.el.sceneEl.emit("rotateY", this.rotateYEvent);
       }
     }
   },
 
   onEnterVr() {
     // Hide the joystick controls
+    this.inVr = true;
     this.leftTouchZone.style.display = "none";
     this.rightTouchZone.style.display = "none";
   },
 
   onExitVr() {
     // Show the joystick controls
+    this.inVr = false;
     this.leftTouchZone.style.display = "block";
     this.rightTouchZone.style.display = "block";
   },
-- 
GitLab