Add mock joysticks

src/components/virtual-gamepad-controls.css

@@ -9,19 +9,36 @@
   right: 50%;
 }
 
-:local(.touchZone.tutorial) {
+:local(.touchZone.right) {
+  left: 50%;
+  right: 0;
+}
+
+:local(.mockJoystickContainer) {
+  position: absolute;
+  height: 20vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: rgba(255, 255, 255, 0.9);
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
 }
 
-:local(.touchZone.left.tutorial) {
-  border-right: 1px solid rgba(255, 255, 255, 0.2);
+:local(.mockJoystick) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  background-color: rgba(255,255,255,0.5);
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
 }
 
-:local(.touchZone.right) {
-  left: 50%;
-  right: 0;
+:local(.mockJoystick.inner) {
+  width: 50px;
+  height: 50px;
 }

src/components/virtual-gamepad-controls.js

@@ -13,16 +13,28 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
     this.onLookJoystickChanged = this.onLookJoystickChanged.bind(this);
     this.onLookJoystickEnd = this.onLookJoystickEnd.bind(this);
 
+    this.mockJoystickContainer = document.createElement("div");
+    this.mockJoystickContainer.classList.add(styles.mockJoystickContainer);
+    const leftMock = document.createElement("div");
+    leftMock.classList.add(styles.mockJoystick);
+    const leftMockSmall = document.createElement("div");
+    leftMockSmall.classList.add(styles.mockJoystick, styles.inner);
+    leftMock.appendChild(leftMockSmall);
+    this.mockJoystickContainer.appendChild(leftMock);
+    const rightMock = document.createElement("div");
+    rightMock.classList.add(styles.mockJoystick);
+    const rightMockSmall = document.createElement("div");
+    rightMockSmall.classList.add(styles.mockJoystick, styles.inner);
+    rightMock.appendChild(rightMockSmall);
+    this.mockJoystickContainer.appendChild(rightMock);
+    document.body.appendChild(this.mockJoystickContainer);
+
     // Setup gamepad elements
     const leftTouchZone = document.createElement("div");
-    leftTouchZone.classList.add(styles.touchZone, styles.left, styles.tutorial);
-    const leftTutorialEl = document.createElement("div");
-    leftTutorialEl.innerHTML = "Move";
-    leftTouchZone.appendChild(leftTutorialEl);
+    leftTouchZone.classList.add(styles.touchZone, styles.left);
     document.body.appendChild(leftTouchZone);
 
     this.leftTouchZone = leftTouchZone;
-    this.leftTutorialEl = leftTutorialEl;
 
     this.leftStick = nipplejs.create({
       zone: this.leftTouchZone,
@@ -35,14 +47,10 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
     this.leftStick.on("end", this.onMoveJoystickEnd);
 
     const rightTouchZone = document.createElement("div");
-    rightTouchZone.classList.add(styles.touchZone, styles.right, styles.tutorial);
-    const rightTutorialEl = document.createElement("div");
-    rightTutorialEl.innerHTML = "Look";
-    rightTouchZone.appendChild(rightTutorialEl);
+    rightTouchZone.classList.add(styles.touchZone, styles.right);
     document.body.appendChild(rightTouchZone);
 
     this.rightTouchZone = rightTouchZone;
-    this.rightTutorialEl = rightTutorialEl;
 
     this.rightStick = nipplejs.create({
       zone: this.rightTouchZone,
@@ -72,12 +80,7 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
   onFirstInteraction() {
     this.leftStick.off("start", this.onFirstInteraction);
     this.rightStick.off("start", this.onFirstInteraction);
-
-    this.leftTouchZone.classList.remove(styles.tutorial);
-    this.rightTouchZone.classList.remove(styles.tutorial);
-
-    this.leftTouchZone.removeChild(this.leftTutorialEl);
-    this.rightTouchZone.removeChild(this.rightTutorialEl);
+    document.body.removeChild(this.mockJoystickContainer);
   },
 
   onMoveJoystickChanged(event, joystick) {