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

Tidy health card text overlays

Browse Source
This commit is contained in:
Admin 2026-09-19 00:12:09 +00:00
parent b352faf5f5
commit 7c2b81d4fc
2 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/mobile-hud.js
View File

@ -117,39 +117,38 @@ if (!isDesktopPointer.matches) {
.steam-card-value {
position: absolute;
z-index: 2;
transform: translate(-50%, -50%);
transform: translateY(-50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
pointer-events: none;
line-height: 1;
}
.steam-card-name {
top: 28%;
top: 31%;
color: #f6d58e;
font-size: clamp(8px, 2.2vw, 11px);
letter-spacing: .06em;
}
.steam-player-card .steam-card-name {
left: 61%;
}
.steam-enemy-card .steam-card-name {
left: 39%;
font-size: clamp(8px, 2.05vw, 11px);
letter-spacing: .04em;
}
.steam-card-value {
top: 67%;
top: 69%;
color: #fff0bd;
font-size: clamp(8px, 2.4vw, 12px);
font-size: clamp(8px, 2.25vw, 12px);
}
.steam-player-card .steam-card-name,
.steam-player-card .steam-card-value {
left: 61%;
left: 29%;
right: 9%;
}
.steam-enemy-card .steam-card-name,
.steam-enemy-card .steam-card-value {
left: 39%;
left: 9%;
right: 29%;
}
.steam-radar-wrap {

12
tests/wiring.test.mjs
View File

@ -138,6 +138,18 @@ test('player health card uses the fresh high-resolution sprite sheet', async ()
assert.doesNotMatch(source, /scaleX\(-1\)/);
});
test('health card text overlays stay inside their plaque and bar bounds', async () => {
const source = await read('src/mobile-hud.js');
assert.match(source, /\.steam-card-name,[\s\S]*?\.steam-card-value \{[\s\S]*?transform: translateY\(-50%\)/);
assert.match(source, /overflow: hidden/);
assert.match(source, /text-overflow: ellipsis/);
assert.match(source, /\.steam-player-card \.steam-card-name,[\s\S]*?\.steam-player-card \.steam-card-value \{[\s\S]*?left: 29%;[\s\S]*?right: 9%/);
assert.match(source, /\.steam-enemy-card \.steam-card-name,[\s\S]*?\.steam-enemy-card \.steam-card-value \{[\s\S]*?left: 9%;[\s\S]*?right: 29%/);
assert.match(source, /\.steam-card-name \{[\s\S]*?top: 31%/);
assert.match(source, /\.steam-card-value \{[\s\S]*?top: 69%/);
});
test('uploaded top HUD uses its new aspect ratio', async () => {
const source = await read('src/mobile-hud.js');