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 () => {