diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index 3aeda4d..19575c6 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -1,4 +1,5 @@
import topHudSrc from './assets/controller/top-hud.js';
+import playerHealthSrc from './assets/controller/player-health-fresh-sheet.png';
import enemyHealthSrc from './assets/controller/enemy-health.js';
import cannonRoundelSrc from './assets/controller/cannon-roundel.js';
import helmFrameSrc from './assets/controller/helm-frame.js';
@@ -97,35 +98,6 @@ if (!isDesktopPointer.matches) {
left: 1%;
}
- .steam-player-card .steam-health-art {
- transform: scaleX(-1);
- }
-
- .steam-player-badge {
- position: absolute;
- left: 16.5%;
- top: 51%;
- width: 27%;
- aspect-ratio: 1;
- transform: translate(-50%, -50%);
- z-index: 1;
- display: grid;
- place-items: center;
- border: 1px solid rgba(235, 190, 92, .92);
- border-radius: 50%;
- background:
- radial-gradient(circle at 42% 35%, rgba(31, 128, 126, .96) 0 34%, rgba(7, 61, 67, .98) 65% 100%);
- box-shadow:
- inset 0 0 0 2px rgba(94, 47, 9, .72),
- 0 1px 3px rgba(0, 0, 0, .5);
- color: #f1c86c;
- font-family: Georgia, 'Times New Roman', serif;
- font-size: clamp(11px, 4vw, 18px);
- line-height: 1;
- text-shadow: 0 1px 2px #2b1303;
- pointer-events: none;
- }
-
.steam-player-card.steam-hit {
animation: steam-player-hit 220ms ease-out;
}
@@ -603,8 +575,7 @@ if (!isDesktopPointer.matches) {
return piece;
};
- const playerHealthPiece = addHealthPiece('steam-player-card', enemyHealthSrc, `
- ⚓
+ const playerHealthPiece = addHealthPiece('steam-player-card', playerHealthSrc, `
SPARROW
100/100
`);
diff --git a/tests/wiring.test.mjs b/tests/wiring.test.mjs
index ac30e31..8644b1f 100644
--- a/tests/wiring.test.mjs
+++ b/tests/wiring.test.mjs
@@ -125,18 +125,17 @@ test('portrait health sprites sit tightly beneath the top HUD', async () => {
assert.match(source, /@media \(min-width: 700px\)[\s\S]*?\.steam-player-card,[\s\S]*?\.steam-enemy-card \{[\s\S]*?top: clamp\(70px, 20vh, 104px\)/);
});
-test('player and enemy health cards share one visual family', async () => {
+test('player health card uses the fresh high-resolution sprite sheet', async () => {
const source = await read('src/mobile-hud.js');
+ assert.match(source, /import playerHealthSrc from '.\/assets\/controller\/player-health-fresh-sheet\.png'/);
assert.match(source, /import enemyHealthSrc from '.\/assets\/controller\/enemy-health\.js'/);
- assert.match(source, /addHealthPiece\('steam-player-card', enemyHealthSrc/);
+ assert.match(source, /addHealthPiece\('steam-player-card', playerHealthSrc/);
assert.match(source, /addHealthPiece\('steam-enemy-card', enemyHealthSrc/);
- assert.match(source, /\.steam-player-card \.steam-health-art \{[\s\S]*?transform: scaleX\(-1\)/);
- assert.match(source, /class="steam-player-badge"/);
assert.match(source, /\.steam-health-art \{[\s\S]*?background-size: 400% 300%/);
assert.match(source, /setHealthFrame\(\s*playerHealthPiece,\s*healthFrame\(playerHull, playerMaxHull\)/);
- assert.doesNotMatch(source, /playerHealthSrc/);
- assert.doesNotMatch(source, /player-health-hq-frame\.js/);
+ assert.doesNotMatch(source, /steam-player-badge/);
+ assert.doesNotMatch(source, /scaleX\(-1\)/);
});
test('uploaded top HUD uses its new aspect ratio', async () => {