From c6633992cc20b704421efd17dfd8e8c3955fc161 Mon Sep 17 00:00:00 2001
From: Admin <dmparrow@gmail.com>
Date: Thu, 17 Sep 2026 23:17:04 +0000
Subject: [PATCH] Lower and stabilise mobile helm

---
 src/mobile-hud.js | 69 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 61 insertions(+), 8 deletions(-)

diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index 9878233..f1b60ab 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -156,7 +156,7 @@ if (!isDesktopPointer.matches) {
 
       .steam-radar-wrap {
         left: 1%;
-        bottom: clamp(88px, 11.5vh, 106px);
+        bottom: max(8px, env(safe-area-inset-bottom));
         width: min(39vw, 174px);
         aspect-ratio: 1;
       }
@@ -283,7 +283,7 @@ if (!isDesktopPointer.matches) {
 
       #mobile-controls.controller-active #drag-stick {
         left: 1%;
-        bottom: clamp(88px, 11.5vh, 106px);
+        bottom: max(8px, env(safe-area-inset-bottom));
         top: auto;
         width: min(39vw, 174px);
         height: auto;
@@ -362,12 +362,12 @@ if (!isDesktopPointer.matches) {
 
         .steam-radar-wrap {
           width: 34vw;
-          bottom: 78px;
+          bottom: max(6px, env(safe-area-inset-bottom));
         }
 
         #mobile-controls.controller-active #drag-stick {
           width: 34vw;
-          bottom: 78px;
+          bottom: max(6px, env(safe-area-inset-bottom));
         }
 
         .steam-cannon-port,
@@ -460,12 +460,65 @@ if (!isDesktopPointer.matches) {
     const radarContacts = radarPiece.querySelector('#steam-radar-contacts');
     const stick = document.querySelector('#drag-stick');
 
-    const setHelmFrame = (x, y) => {
-      const column = x < -0.22 ? 0 : x > 0.22 ? 2 : 1;
-      const row = y < -0.22 ? 0 : y > 0.22 ? 2 : 1;
+    let helmFrame = '1:1';
+    let pendingHelmFrame = null;
+    let helmFrameTimer = null;
+
+    const applyHelmFrame = (column, row) => {
+      const key = `${column}:${row}`;
+      if (key === helmFrame) return;
+      helmFrame = key;
       helmSprite.style.backgroundPosition = `${column * 50}% ${row * 50}%`;
     };
 
+    const resolveHelmFrame = (x, y) => {
+      const magnitude = Math.hypot(x, y);
+      if (magnitude < 0.28) return [1, 1];
+
+      const sector = Math.round(Math.atan2(y, x) / (Math.PI / 4));
+      const frames = {
+        0: [2, 1],
+        1: [2, 2],
+        2: [1, 2],
+        3: [0, 2],
+        4: [0, 1],
+        '-4': [0, 1],
+        '-3': [0, 0],
+        '-2': [1, 0],
+        '-1': [2, 0],
+      };
+      return frames[sector] || [1, 1];
+    };
+
+    const setHelmFrame = (x, y, immediate = false) => {
+      const [column, row] = resolveHelmFrame(x, y);
+      const key = `${column}:${row}`;
+
+      if (key === helmFrame) {
+        pendingHelmFrame = null;
+        if (helmFrameTimer) clearTimeout(helmFrameTimer);
+        helmFrameTimer = null;
+        return;
+      }
+
+      if (immediate) {
+        pendingHelmFrame = null;
+        if (helmFrameTimer) clearTimeout(helmFrameTimer);
+        helmFrameTimer = null;
+        applyHelmFrame(column, row);
+        return;
+      }
+
+      if (pendingHelmFrame === key) return;
+      pendingHelmFrame = key;
+      if (helmFrameTimer) clearTimeout(helmFrameTimer);
+      helmFrameTimer = setTimeout(() => {
+        if (pendingHelmFrame === key) applyHelmFrame(column, row);
+        pendingHelmFrame = null;
+        helmFrameTimer = null;
+      }, 70);
+    };
+
     let helmPointer = null;
     const updateHelmFrame = (event) => {
       if (!stick) return;
@@ -486,7 +539,7 @@ if (!isDesktopPointer.matches) {
     const resetHelmFrame = (event) => {
       if (helmPointer !== null && event?.pointerId !== undefined && event.pointerId !== helmPointer) return;
       helmPointer = null;
-      setHelmFrame(0, 0);
+      setHelmFrame(0, 0, true);
     };
 
     stick?.addEventListener('pointerup', resetHelmFrame);