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

Show reload state and pirate classes in HUD

Browse Source
This commit is contained in:
Admin 2026-09-18 05:46:33 +00:00
parent 6e7f0b28a4
commit bb959832c4
1 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/mobile-hud.js
View File

@ -263,6 +263,29 @@ if (!isDesktopPointer.matches) {
clip-path: circle(49% at 50% 50%); clip-path: circle(49% at 50% 50%);
} }
.steam-reload-track {
position: absolute;
left: 12%;
right: 12%;
bottom: -7%;
height: 5px;
border: 1px solid rgba(232, 184, 91, .42);
border-radius: 999px;
background: rgba(8, 25, 31, .72);
overflow: hidden;
pointer-events: none;
}
.steam-reload-fill {
display: block;
width: 100%;
height: 100%;
transform: scaleX(1);
transform-origin: left center;
background: rgba(255, 224, 140, .92);
transition: transform 60ms linear;
}
.steam-action-label { .steam-action-label {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -566,7 +589,7 @@ if (!isDesktopPointer.matches) {
`); `);
const enemyHealthPiece = addHealthPiece('steam-enemy-card', enemyHealthSrc, ` const enemyHealthPiece = addHealthPiece('steam-enemy-card', enemyHealthSrc, `
<span class="steam-card-name">PIRATE</span> <span class="steam-card-name" data-steam="enemy-name">PIRATE</span>
<span class="steam-card-value" data-steam="enemy-hull">CLEAR</span> <span class="steam-card-value" data-steam="enemy-hull">CLEAR</span>
`); `);
@ -601,10 +624,12 @@ if (!isDesktopPointer.matches) {
addPiece('steam-cannon-port', cannonRoundelSrc, ` addPiece('steam-cannon-port', cannonRoundelSrc, `
<span class="steam-action-label">PORT</span> <span class="steam-action-label">PORT</span>
<span class="steam-reload-track"><span class="steam-reload-fill" data-steam="port-reload"></span></span>
`); `);
addPiece('steam-cannon-starboard', cannonRoundelSrc, ` addPiece('steam-cannon-starboard', cannonRoundelSrc, `
<span class="steam-action-label">STBD</span> <span class="steam-action-label">STBD</span>
<span class="steam-reload-track"><span class="steam-reload-fill" data-steam="starboard-reload"></span></span>
`); `);
const status = document.createElement('div'); const status = document.createElement('div');
@ -713,6 +738,8 @@ if (!isDesktopPointer.matches) {
const range = nearest.range; const range = nearest.range;
const playerHull = Math.max(0, scene.playerHull ?? 100); const playerHull = Math.max(0, scene.playerHull ?? 100);
const enemyHull = pirate ? Math.max(0, pirate.getData?.('hull') ?? 0) : 0; const enemyHull = pirate ? Math.max(0, pirate.getData?.('hull') ?? 0) : 0;
const enemyMaxHull = pirate ? Math.max(1, pirate.getData?.('maxHull') ?? 120) : 120;
const enemyName = pirate ? (pirate.getData?.('classLabel') || 'PIRATE') : 'PIRATE';
fields.speed.textContent = `${Math.abs(scene.playerSpeed || 0).toFixed(0)}${scene.playerSpeed < 0 ? 'R' : ''}`; fields.speed.textContent = `${Math.abs(scene.playerSpeed || 0).toFixed(0)}${scene.playerSpeed < 0 ? 'R' : ''}`;
fields.heading.textContent = `${heading.toFixed(0).padStart(3, '0')}°`; fields.heading.textContent = `${heading.toFixed(0).padStart(3, '0')}°`;
@ -721,7 +748,8 @@ if (!isDesktopPointer.matches) {
fields.kills.textContent = String(scene.defeated || 0); fields.kills.textContent = String(scene.defeated || 0);
fields.range.textContent = Number.isFinite(range) ? `${Math.round(range)}m` : '--'; fields.range.textContent = Number.isFinite(range) ? `${Math.round(range)}m` : '--';
fields['player-hull'].textContent = `${playerHull}/100`; fields['player-hull'].textContent = `${playerHull}/100`;
fields['enemy-hull'].textContent = pirate ? `${enemyHull}/120` : 'CLEAR'; fields['enemy-name'].textContent = enemyName;
fields['enemy-hull'].textContent = pirate ? `${enemyHull}/${enemyMaxHull}` : 'CLEAR';
const playerPct = clamp01(playerHull / 100); const playerPct = clamp01(playerHull / 100);
fields['player-health-cover'].style.width = `${(1 - playerPct) * 49}%`; fields['player-health-cover'].style.width = `${(1 - playerPct) * 49}%`;
fields['player-health-tint'].style.transform = `scaleX(${playerPct})`; fields['player-health-tint'].style.transform = `scaleX(${playerPct})`;
@ -730,7 +758,14 @@ if (!isDesktopPointer.matches) {
: playerPct > 0.33 : playerPct > 0.33
? 'rgba(255, 210, 0, .58)' ? 'rgba(255, 210, 0, .58)'
: 'rgba(255, 45, 18, .72)'; : 'rgba(255, 45, 18, .72)';
setHealthFrame(enemyHealthPiece, pirate ? healthFrame(enemyHull, 120) : 11); setHealthFrame(enemyHealthPiece, pirate ? healthFrame(enemyHull, enemyMaxHull) : 11);
const reloadMs = Math.max(1, scene.playerBroadsideReloadMs || 850);
const now = scene.time?.now ?? 0;
const portReady = clamp01((now - (scene.lastPlayerShot?.port ?? -Infinity)) / reloadMs);
const starboardReady = clamp01((now - (scene.lastPlayerShot?.starboard ?? -Infinity)) / reloadMs);
fields['port-reload'].style.transform = `scaleX(${portReady})`;
fields['starboard-reload'].style.transform = `scaleX(${starboardReady})`;
const statusText = scene.status?.text?.trim?.() || ''; const statusText = scene.status?.text?.trim?.() || '';
fields.status.textContent = statusText; fields.status.textContent = statusText;