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

Use static HUD assets and fixed compass frame

Browse Source
This commit is contained in:
Admin 2026-09-17 23:56:47 +00:00
parent 6fc5227f6e
commit fbf5791845
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/mobile-hud.js
View File

@ -1,9 +1,10 @@
import Phaser from 'phaser';
import topHudSrc from './assets/controller/top-hud.js';
import leftStatusSrc from './assets/controller/left-status.js';
import rightControlsSrc from './assets/controller/right-controls.js';
import cannonRoundelBase64 from './assets/controller/cannon-roundel.js';
import helmSpriteSheetSrc from './assets/controller/helm-action.js';
const topHudSrc = '/assets/controller/top-hud.webp';
const helmSpriteSheetSrc = '/assets/controller/helm-sheet.webp';
const cannonRoundelSrc = '/assets/controller/cannon-roundel.jpg';
const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
@ -161,15 +162,24 @@ if (!isDesktopPointer.matches) {
aspect-ratio: 1;
}
.steam-helm-sprite {
.steam-helm-frame,
.steam-helm-inner {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: 300% 300%;
background-position: 50% 50%;
pointer-events: none;
}
.steam-helm-frame {
background-position: 50% 50%;
}
.steam-helm-inner {
background-position: 50% 50%;
clip-path: circle(36% at 50% 48%);
}
.steam-helm-label {
position: absolute;
left: 50%;
@ -392,8 +402,6 @@ if (!isDesktopPointer.matches) {
hud.id = 'controller-hud';
root.prepend(hud);
const cannonBytes = Uint8Array.from(atob(cannonRoundelBase64), (char) => char.charCodeAt(0));
const cannonRoundelSrc = URL.createObjectURL(new Blob([cannonBytes], { type: 'image/jpeg' }));
const addPiece = (className, src, inner = '') => {
const piece = document.createElement('div');
@ -434,10 +442,15 @@ if (!isDesktopPointer.matches) {
const radarPiece = document.createElement('div');
radarPiece.className = 'steam-piece steam-radar-wrap';
const helmSprite = document.createElement('div');
helmSprite.className = 'steam-helm-sprite';
helmSprite.style.backgroundImage = `url("${helmSpriteSheetSrc}")`;
radarPiece.appendChild(helmSprite);
const helmFrame = document.createElement('div');
helmFrame.className = 'steam-helm-frame';
helmFrame.style.backgroundImage = `url("${helmSpriteSheetSrc}")`;
radarPiece.appendChild(helmFrame);
const helmInner = document.createElement('div');
helmInner.className = 'steam-helm-inner';
helmInner.style.backgroundImage = `url("${helmSpriteSheetSrc}")`;
radarPiece.appendChild(helmInner);
radarPiece.insertAdjacentHTML('beforeend', `
<div id="steam-radar-contacts">
@ -470,13 +483,13 @@ if (!isDesktopPointer.matches) {
// mobile drag control. This keeps the visual frame exactly in sync with
// movement and avoids a second, jitter-prone pointer-direction calculation.
const helmKeys = new Set();
let helmFrame = '1:1';
let activeHelmFrame = '1:1';
const applyHelmFrame = (column, row) => {
const key = `${column}:${row}`;
if (key === helmFrame) return;
helmFrame = key;
helmSprite.style.backgroundPosition = `${column * 50}% ${row * 50}%`;
if (key === activeHelmFrame) return;
activeHelmFrame = key;
helmInner.style.backgroundPosition = `${column * 50}% ${row * 50}%`;
};
const updateHelmFromKeys = () => {