Admin/airship-phaser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lower and stabilise mobile helm

Browse Source
This commit is contained in:
Admin 2026-09-17 23:17:04 +00:00
parent 6555caca58
commit c6633992cc
1 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/mobile-hud.js
View File

@ -156,7 +156,7 @@ if (!isDesktopPointer.matches) {
.steam-radar-wrap { .steam-radar-wrap {
left: 1%; left: 1%;
bottom: clamp(88px, 11.5vh, 106px); bottom: max(8px, env(safe-area-inset-bottom));
width: min(39vw, 174px); width: min(39vw, 174px);
aspect-ratio: 1; aspect-ratio: 1;
} }
@ -283,7 +283,7 @@ if (!isDesktopPointer.matches) {
#mobile-controls.controller-active #drag-stick { #mobile-controls.controller-active #drag-stick {
left: 1%; left: 1%;
bottom: clamp(88px, 11.5vh, 106px); bottom: max(8px, env(safe-area-inset-bottom));
top: auto; top: auto;
width: min(39vw, 174px); width: min(39vw, 174px);
height: auto; height: auto;
@ -362,12 +362,12 @@ if (!isDesktopPointer.matches) {
.steam-radar-wrap { .steam-radar-wrap {
width: 34vw; width: 34vw;
bottom: 78px; bottom: max(6px, env(safe-area-inset-bottom));
} }
#mobile-controls.controller-active #drag-stick { #mobile-controls.controller-active #drag-stick {
width: 34vw; width: 34vw;
bottom: 78px; bottom: max(6px, env(safe-area-inset-bottom));
} }
.steam-cannon-port, .steam-cannon-port,
@ -460,12 +460,65 @@ if (!isDesktopPointer.matches) {
const radarContacts = radarPiece.querySelector('#steam-radar-contacts'); const radarContacts = radarPiece.querySelector('#steam-radar-contacts');
const stick = document.querySelector('#drag-stick'); const stick = document.querySelector('#drag-stick');
const setHelmFrame = (x, y) => { let helmFrame = '1:1';
const column = x < -0.22 ? 0 : x > 0.22 ? 2 : 1; let pendingHelmFrame = null;
const row = y < -0.22 ? 0 : y > 0.22 ? 2 : 1; let helmFrameTimer = null;
const applyHelmFrame = (column, row) => {
const key = `${column}:${row}`;
if (key === helmFrame) return;
helmFrame = key;
helmSprite.style.backgroundPosition = `${column * 50}% ${row * 50}%`; 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; let helmPointer = null;
const updateHelmFrame = (event) => { const updateHelmFrame = (event) => {
if (!stick) return; if (!stick) return;
@ -486,7 +539,7 @@ if (!isDesktopPointer.matches) {
const resetHelmFrame = (event) => { const resetHelmFrame = (event) => {
if (helmPointer !== null && event?.pointerId !== undefined && event.pointerId !== helmPointer) return; if (helmPointer !== null && event?.pointerId !== undefined && event.pointerId !== helmPointer) return;
helmPointer = null; helmPointer = null;
setHelmFrame(0, 0); setHelmFrame(0, 0, true);
}; };
stick?.addEventListener('pointerup', resetHelmFrame); stick?.addEventListener('pointerup', resetHelmFrame);