diff --git a/src/components/virtual-gamepad-controls.css b/src/components/virtual-gamepad-controls.css index 38bcd026383327e9bfff841c37c194ed75136d4a..4270c36ad7be261997f7ab77218e9ea817269620 100644 --- a/src/components/virtual-gamepad-controls.css +++ b/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; } diff --git a/src/components/virtual-gamepad-controls.js b/src/components/virtual-gamepad-controls.js index 50197fb438bb98557c124a105728420f50ffd67d..87433f427c00fc64054405e5efea91f841dc579a 100644 --- a/src/components/virtual-gamepad-controls.js +++ b/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) {