more touch controls stuff

index.html

@@ -72,47 +72,6 @@
     <div id="enter-fullscreen" class="hidden"></div>
     <div id="pointercontainer" tabindex="0"></div>
     <script type="text/javascript" src="marblegame.js"></script>
-    <script>
-        let dislikesFullscreen = false;
-        const fullscreenEnforcer = document.querySelector('#fullscreen-enforcer');
-
-        fullscreenEnforcer.addEventListener('click', () => {
-            document.documentElement.requestFullscreen();
-        });
-
-        const enterFullscreenButton = document.querySelector('#enter-fullscreen');
-        enterFullscreenButton.addEventListener('click', () => {
-            document.documentElement.requestFullscreen();
-            dislikesFullscreen = false; // They changed their mind, yay
-        });
-
-        let fullscreenButtonVisibility = true;
-
-        const setEnterFullscreenButtonVisibility = (state) => {
-            fullscreenButtonVisibility = state;
-
-            let isInFullscreen = (/*window.innerWidth === screen.width && */window.innerHeight === screen.height || (screen.orientation?.type?.includes('portrait') && window.innerHeight === screen.width)) || !!document.fullscreenElement;
-            if (state && !isInFullscreen) enterFullscreenButton.classList.remove('hidden');
-            else enterFullscreenButton.classList.add('hidden');
-        };
-
-        // Periodically, check if the mobile user has left fullscreen and if so, remind them to re-enter it.
-        let lastImmunityTime = -Infinity;
-        setInterval(() => {
-            if (document.activeElement?.tagName === 'INPUT') lastImmunityTime = performance.now();
-
-            let isInFullscreen = (/*window.innerWidth === screen.width && */window.innerHeight === screen.height || (screen.orientation?.type?.includes('portrait') && window.innerHeight === screen.width)) || !!document.fullscreenElement;
-            if (isInFullscreen) {
-                // They're in fullscreen, hide the overlay
-                fullscreenEnforcer.classList.add('hidden');
-            } else if (!dislikesFullscreen && document.activeElement?.tagName !== 'INPUT' && performance.now() - lastImmunityTime > 666) {
-                // They're not in fullscreen, show the overlay
-                fullscreenEnforcer.classList.remove('hidden');
-            }
-
-            setEnterFullscreenButtonVisibility(fullscreenButtonVisibility);
-        }, 250);
-    </script>
 </body>
 
 </html>

src/CameraController.hx

@@ -118,7 +118,7 @@ class CameraController extends Object {
 			deltaposY = 0;
 		}
 
-		var factor = isTouch ? Util.lerp(1 / 1500, 1 / 50,
+		var factor = isTouch ? Util.lerp(1 / 250, 1 / 10,
 			Settings.controlsSettings.cameraSensitivity) : Util.lerp(1 / 2500, 1 / 100, Settings.controlsSettings.cameraSensitivity);
 
 		CameraPitch += deltaposY * factor;

src/Marble.hx

@@ -1347,7 +1347,7 @@ class Marble extends GameObject {
 			if (Key.isDown(Settings.controlsSettings.jump) || MarbleGame.instance.touchInput.jumpButton.pressed) {
 				move.jump = true;
 			}
-			if (Key.isDown(Settings.controlsSettings.powerup) || MarbleGame.instance.touchInput.powerupButton.pressed) {
+			if (Util.isTouchDevice() ? MarbleGame.instance.touchInput.powerupButton.pressed : Key.isDown(Settings.controlsSettings.powerup)) {
 				move.powerup = true;
 			}
 			if (MarbleGame.instance.touchInput.movementInput.pressed) {

src/MarbleWorld.hx

@@ -1009,8 +1009,11 @@ class MarbleWorld extends Scheduler {
 		var egg:EndGameGui = null;
 		#if js
 		var pointercontainer = js.Browser.document.querySelector("#pointercontainer");
+		pointercontainer.hidden = false;
 		#end
+		MarbleGame.instance.touchInput.setControlsEnabled(false);
 		egg = new EndGameGui((sender) -> {
+			MarbleGame.instance.touchInput.hideControls(@:privateAccess this.playGui.playGuiCtrl);
 			this.dispose();
 			var pmg = new PlayMissionGui();
 			PlayMissionGui.currentSelectionStatic = mission.index + 1;
@@ -1022,12 +1025,14 @@ class MarbleWorld extends Scheduler {
 			MarbleGame.canvas.popDialog(egg);
 			this.setCursorLock(true);
 			this.restart();
+			#if js
+			pointercontainer.hidden = true;
+			#end
+			MarbleGame.instance.touchInput.setControlsEnabled(true);
+			// @:privateAccess playGui.playGuiCtrl.render(scene2d);
 		}, mission, finishTime);
 		MarbleGame.canvas.pushDialog(egg);
 		this.setCursorLock(false);
-		#if js
-		pointercontainer.hidden = true;
-		#end
 		return 0;
 	}
 

src/touch/CameraInput.hx

@@ -9,9 +9,13 @@ class CameraInput {
 
 	var doing = false;
 
+	public var enabled = false;
+
 	public function new() {}
 
-	public function update(touchState:TouchEventState) {
+	public function update(touchState:TouchEventState, joycam:Bool) {
+		if (!enabled)
+			return;
 		if (!doing) {
 			// Check for touches on the right half of the screen
 			for (touch in touchState.changedTouches) {
@@ -35,6 +39,9 @@ class CameraInput {
 							#if js
 							scaleFactor = js.Browser.window.devicePixelRatio / Settings.zoomRatio;
 							#end
+							if (joycam) {
+								scaleFactor /= 2.5;
+							}
 							MarbleGame.instance.world.marble.camera.orbit(touch.deltaPosition.x / scaleFactor, touch.deltaPosition.y / scaleFactor, true);
 							return;
 
@@ -43,6 +50,8 @@ class CameraInput {
 					}
 				}
 			}
+
+			doing = false;
 		}
 	}
 }

src/touch/MovementInput.hx

@@ -56,34 +56,43 @@ class MovementInput {
 
 				this.touchId = e.touchId;
 
-				var xPos = Util.clamp(e.relX - this.area.graphics.x, 50, 250);
+				// var xPos = Util.clamp(e.relX - this.area.graphics.x, 50, 250);
-				var yPos = Util.clamp(e.relY - this.area.graphics.x, 50, 250);
+				// var yPos = Util.clamp(e.relY - this.area.graphics.x, 50, 250);
 
-				this.value.x = (xPos - 150) / 150;
+				// this.value.x = (xPos - 150) / 100;
-				this.value.y = (yPos - 150) / 150;
+				// this.value.y = (yPos - 150) / 100;
 
-				this.joystick.graphics.setPosition(this.area.graphics.x + xPos, this.area.graphics.y + yPos);
+				// this.joystick.graphics.setPosition(this.area.graphics.x + xPos, this.area.graphics.y + yPos);
+
+				var stopped = false;
 
 				collider.startCapture((emove) -> {
+					if (e.touchId != emove.touchId) {
+						emove.propagate = true;
+						return;
+					}
 					if (emove.kind == EMove) {
 						var xPos = Util.clamp(emove.relX, 50, 250);
 						var yPos = Util.clamp(emove.relY, 50, 250);
 
-						this.value.x = (xPos - 150) / 150;
+						this.value.x = (xPos - 150) / 100;
-						this.value.y = (yPos - 150) / 150;
+						this.value.y = (yPos - 150) / 100;
 
 						this.joystick.graphics.setPosition(this.area.graphics.x + xPos, this.area.graphics.y + yPos);
 					}
 					if (emove.kind == ERelease || emove.kind == EReleaseOutside) {
+						stopped = true;
 						collider.stopCapture();
 					}
 				}, () -> {
-					this.area.graphics.alpha = 0;
+					if (stopped) {
-					this.joystick.graphics.alpha = 0;
+						this.area.graphics.alpha = 0;
+						this.joystick.graphics.alpha = 0;
 
-					pressed = false;
+						pressed = false;
 
-					this.value = new Vector(0, 0);
+						this.value = new Vector(0, 0);
+					}
 				}, e.touchId);
 			}
 		}
@@ -101,4 +110,12 @@ class MovementInput {
 		parentGui.removeChild(this.area);
 		added = false;
 	}
+
+	public function setVisible(enabled:Bool) {
+		this.area.graphics.visible = enabled;
+	}
+
+	public function dispose() {
+		this.area.dispose();
+	}
 }

src/touch/PauseButton.hx

@@ -0,0 +1,21 @@
+package touch;
+
+import src.MarbleGame;
+import h3d.Vector;
+import src.ResourceLoader;
+
+class PauseButton extends TouchButton {
+	public function new() {
+		var offset = MarbleGame.instance.world != null ? (MarbleGame.instance.world.totalGems > 0 ? 30 : 0) : 0;
+		super(ResourceLoader.getImage("data/ui/touch/pause-button.png").resource, new Vector(55, 55 + offset), 35);
+		this.guiElement.horizSizing = Right;
+		this.guiElement.vertSizing = Bottom;
+
+		this.onClick = () -> {
+			if (MarbleGame.instance.world != null) {
+				@:privateAccess MarbleGame.instance.paused = true;
+				MarbleGame.instance.handlePauseGame();
+			}
+		}
+	}
+}

src/touch/TouchButton.hx

@@ -59,8 +59,13 @@ class TouchButton {
 			} else {
 				g.alpha = 0.5;
 			}
+			this.identifier = e.touchId;
 		}
 		this.collider.onRelease = (e) -> {
+			if (e.touchId != this.identifier)
+				return;
+
+			this.identifier = -1;
 			onRelease();
 
 			if (this.enabled) {
@@ -103,6 +108,10 @@ class TouchButton {
 		}
 	}
 
+	public function setVisible(enabled:Bool) {
+		this.guiElement.graphics.visible = enabled;
+	}
+
 	public dynamic function onClick() {
 		pressed = true;
 	}
@@ -110,4 +119,8 @@ class TouchButton {
 	public dynamic function onRelease() {
 		pressed = false;
 	}
+
+	public function dispose() {
+		this.guiElement.dispose();
+	}
 }

src/touch/TouchInput.hx

@@ -42,6 +42,8 @@ class TouchInput {
 
 	public var powerupButton:PowerupButton;
 
+	public var pauseButton:PauseButton;
+
 	public var currentTouchState:TouchEventState;
 
 	public var previousTouchState:TouchEventState;
@@ -53,6 +55,7 @@ class TouchInput {
 		this.movementInput = new MovementInput();
 		this.jumpButton = new JumpButton();
 		this.powerupButton = new PowerupButton();
+		this.pauseButton = new PauseButton();
 		this.currentTouchState = new TouchEventState();
 		this.previousTouchState = new TouchEventState();
 	}
@@ -94,20 +97,43 @@ class TouchInput {
 	}
 
 	public function update() {
-		this.cameraInput.update(currentTouchState);
+		this.cameraInput.update(currentTouchState, jumpButton.pressed || powerupButton.pressed);
 		previousTouchState = currentTouchState;
 		currentTouchState = new TouchEventState();
 	}
 
 	public function showControls(parentGui:GuiControl) {
+		jumpButton.dispose();
+		powerupButton.dispose();
+		movementInput.dispose();
+		pauseButton.dispose();
+		this.cameraInput.enabled = true;
+		this.movementInput = new MovementInput();
+		this.jumpButton = new JumpButton();
+		this.powerupButton = new PowerupButton();
+		this.pauseButton = new PauseButton();
+		pauseButton.add(parentGui);
 		jumpButton.add(parentGui);
 		powerupButton.add(parentGui);
 		movementInput.add(parentGui);
 	}
 
+	public function setControlsEnabled(enabled:Bool) {
+		this.jumpButton.setVisible(enabled);
+		this.powerupButton.setVisible(enabled);
+		this.movementInput.setVisible(enabled);
+		this.pauseButton.setVisible(enabled);
+	}
+
 	public function hideControls(parentGui:GuiControl) {
 		jumpButton.remove(parentGui);
 		powerupButton.remove(parentGui);
 		movementInput.remove(parentGui);
+		pauseButton.remove(parentGui);
+		jumpButton.dispose();
+		powerupButton.dispose();
+		movementInput.dispose();
+		pauseButton.dispose();
+		this.cameraInput.enabled = false;
 	}
 }