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

Render player health at native resolution

Browse Source
This commit is contained in:
Admin 2026-09-18 05:25:37 +00:00
parent caaffe4ec8
commit ea12250556
1 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/mobile-hud.js
View File

@ -78,9 +78,8 @@ if (!isDesktopPointer.matches) {
.steam-player-card,
.steam-enemy-card {
top: clamp(80px, 10.3vh, 90px);
aspect-ratio: 300 / 108;
aspect-ratio: 360 / 130;
background-repeat: no-repeat;
background-size: 400% 300%;
background-position: 0 0;
background-color: transparent;
overflow: visible;
@ -89,11 +88,40 @@ if (!isDesktopPointer.matches) {
.steam-player-card {
left: -1%;
width: 53%;
background-size: 100% 100%;
}
.steam-enemy-card {
right: -1%;
width: 46%;
background-size: 400% 300%;
}
.steam-player-health-tint,
.steam-player-health-cover {
position: absolute;
pointer-events: none;
border-radius: 999px;
}
.steam-player-health-tint {
left: 39.5%;
top: 56.5%;
width: 49%;
height: 19%;
transform-origin: left center;
background: transparent;
mix-blend-mode: color;
z-index: 1;
}
.steam-player-health-cover {
right: 11.5%;
top: 56.5%;
width: 0;
height: 19%;
background: #111416;
z-index: 2;
}
.steam-card-name,
@ -531,6 +559,8 @@ if (!isDesktopPointer.matches) {
};
const playerHealthPiece = addHealthPiece('steam-player-card', playerHealthSrc, `
<span class="steam-player-health-tint" data-steam="player-health-tint"></span>
<span class="steam-player-health-cover" data-steam="player-health-cover"></span>
<span class="steam-card-name">SPARROW</span>
<span class="steam-card-value" data-steam="player-hull">100/100</span>
`);
@ -692,7 +722,14 @@ if (!isDesktopPointer.matches) {
fields.range.textContent = Number.isFinite(range) ? `${Math.round(range)}m` : '--';
fields['player-hull'].textContent = `${playerHull}/100`;
fields['enemy-hull'].textContent = pirate ? `${enemyHull}/120` : 'CLEAR';
setHealthFrame(playerHealthPiece, healthFrame(playerHull, 100));
const playerPct = clamp01(playerHull / 100);
fields['player-health-cover'].style.width = `${(1 - playerPct) * 49}%`;
fields['player-health-tint'].style.transform = `scaleX(${playerPct})`;
fields['player-health-tint'].style.background = playerPct > 0.66
? 'transparent'
: playerPct > 0.33
? 'rgba(255, 210, 0, .58)'
: 'rgba(255, 45, 18, .72)';
setHealthFrame(enemyHealthPiece, pirate ? healthFrame(enemyHull, 120) : 11);
const statusText = scene.status?.text?.trim?.() || '';