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