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

Tidy top stats text overlays

Browse Source
This commit is contained in:
Admin 2026-09-19 01:05:41 +00:00
parent 7c2b81d4fc
commit 63edc13268
2 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/mobile-hud.js
View File

@ -57,22 +57,31 @@ if (!isDesktopPointer.matches) {
.steam-top-value { .steam-top-value {
position: absolute; position: absolute;
top: 68%; top: 69%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
min-width: 32px; display: grid;
place-items: center;
min-width: 0;
height: 15%;
padding: 0 2px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
color: #ffe6a1; overflow: hidden;
font-size: clamp(9px, 2.7vw, 13px); color: #f7dfa1;
font-size: clamp(9px, 2.45vw, 12px);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
letter-spacing: .015em;
line-height: 1; line-height: 1;
text-shadow: 0 1px 1px rgba(0, 0, 0, .95), 0 0 3px rgba(42, 19, 2, .78);
} }
.steam-speed { left: 9.3%; } .steam-speed { left: 9.3%; width: 7%; }
.steam-heading { left: 21.2%; } .steam-heading { left: 21.2%; width: 12%; }
.steam-wave { left: 50%; top: 72%; } .steam-wave { left: 50%; top: 73%; width: 8%; }
.steam-hostiles { left: 65.4%; } .steam-hostiles { left: 65.4%; width: 7%; }
.steam-kills { left: 78.2%; } .steam-kills { left: 78.2%; width: 7%; }
.steam-range { left: 91.1%; } .steam-range { left: 91.1%; width: 12%; }
.steam-player-card, .steam-player-card,
.steam-enemy-card { .steam-enemy-card {
@ -117,38 +126,39 @@ if (!isDesktopPointer.matches) {
.steam-card-value { .steam-card-value {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
transform: translateY(-50%); transform: translate(-50%, -50%);
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
line-height: 1;
} }
.steam-card-name { .steam-card-name {
top: 31%; top: 28%;
color: #f6d58e; color: #f6d58e;
font-size: clamp(8px, 2.05vw, 11px); font-size: clamp(8px, 2.2vw, 11px);
letter-spacing: .04em; letter-spacing: .06em;
}
.steam-player-card .steam-card-name {
left: 61%;
}
.steam-enemy-card .steam-card-name {
left: 39%;
} }
.steam-card-value { .steam-card-value {
top: 69%; top: 67%;
color: #fff0bd; color: #fff0bd;
font-size: clamp(8px, 2.25vw, 12px); font-size: clamp(8px, 2.4vw, 12px);
} }
.steam-player-card .steam-card-name,
.steam-player-card .steam-card-value { .steam-player-card .steam-card-value {
left: 29%; left: 61%;
right: 9%;
} }
.steam-enemy-card .steam-card-name,
.steam-enemy-card .steam-card-value { .steam-enemy-card .steam-card-value {
left: 9%; left: 39%;
right: 29%;
} }
.steam-radar-wrap { .steam-radar-wrap {
@ -437,7 +447,7 @@ if (!isDesktopPointer.matches) {
} }
.steam-top-value { .steam-top-value {
font-size: clamp(10px, 1.35vw, 14px); font-size: clamp(9px, 1.15vw, 13px);
} }
.steam-player-card, .steam-player-card,

24
tests/wiring.test.mjs
View File

@ -138,18 +138,6 @@ test('player health card uses the fresh high-resolution sprite sheet', async ()
assert.doesNotMatch(source, /scaleX\(-1\)/); 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 () => { test('uploaded top HUD uses its new aspect ratio', async () => {
const source = await read('src/mobile-hud.js'); const source = await read('src/mobile-hud.js');
@ -157,6 +145,18 @@ test('uploaded top HUD uses its new aspect ratio', async () => {
assert.match(source, /@media \(min-width: 700px\)[\s\S]*?\.steam-top \{[\s\S]*?aspect-ratio: 960 \/ 246/); assert.match(source, /@media \(min-width: 700px\)[\s\S]*?\.steam-top \{[\s\S]*?aspect-ratio: 960 \/ 246/);
}); });
test('top HUD stat overlays use bounded tabular value slots', async () => {
const source = await read('src/mobile-hud.js');
assert.match(source, /\.steam-top-value \{[\s\S]*?font-variant-numeric: tabular-nums/);
assert.match(source, /\.steam-top-value \{[\s\S]*?font-feature-settings: 'tnum' 1/);
assert.match(source, /\.steam-speed \{ left: 9\.3%; width: 7%; \}/);
assert.match(source, /\.steam-heading \{ left: 21\.2%; width: 12%; \}/);
assert.match(source, /\.steam-range \{ left: 91\.1%; width: 12%; \}/);
assert.match(source, /\.steam-wave \{ left: 50%; top: 73%; width: 8%; \}/);
assert.match(source, /@media \(min-width: 700px\)[\s\S]*?\.steam-top-value \{[\s\S]*?font-size: clamp\(9px, 1\.15vw, 13px\)/);
});
test('game consumes analog helm vector and keeps broadside cooldowns independent', async () => { test('game consumes analog helm vector and keeps broadside cooldowns independent', async () => {
const source = await read('src/game-v4.js'); const source = await read('src/game-v4.js');