Wire fresh player health sprite sheet
This commit is contained in:
parent
3ef3c721c4
commit
b352faf5f5
@ -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, `
|
||||
<span class="steam-player-badge" aria-hidden="true">⚓</span>
|
||||
const playerHealthPiece = addHealthPiece('steam-player-card', playerHealthSrc, `
|
||||
<span class="steam-card-name">SPARROW</span>
|
||||
<span class="steam-card-value" data-steam="player-hull">100/100</span>
|
||||
`);
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user