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

Add wide-screen responsive HUD layout

Browse Source
This commit is contained in:
Admin 2026-09-18 00:47:35 +00:00
parent e2263ec3a1
commit ebeb5e0d1b
1 changed files with 98 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/mobile-hud.js
View File

@ -372,7 +372,7 @@ if (!isDesktopPointer.matches) {
border-radius: 50%;
}
@media (max-height: 700px) {
@media (max-height: 700px) and (max-width: 699px) {
.steam-player-card,
.steam-enemy-card {
top: 76px;
@ -400,6 +400,103 @@ if (!isDesktopPointer.matches) {
bottom: max(106px, calc(env(safe-area-inset-bottom) + 102px));
}
}
@media (min-width: 700px) {
:root {
--steam-wide-helm-size: clamp(118px, 28vh, 180px);
--steam-wide-cannon-size: clamp(72px, 18vh, 100px);
--steam-wide-edge-right: max(18px, env(safe-area-inset-right));
--steam-wide-edge-left: max(18px, env(safe-area-inset-left));
--steam-wide-bottom: max(12px, env(safe-area-inset-bottom));
}
.steam-top {
left: 50%;
width: min(64vw, 560px);
height: auto;
aspect-ratio: 4.74 / 1;
transform: translateX(-50%);
}
.steam-top-value {
font-size: clamp(10px, 1.35vw, 14px);
}
.steam-player-card,
.steam-enemy-card {
top: clamp(70px, 20vh, 104px);
}
.steam-player-card {
left: max(12px, env(safe-area-inset-left));
width: min(34vw, 360px);
}
.steam-enemy-card {
right: max(12px, env(safe-area-inset-right));
width: min(30vw, 330px);
}
.steam-card-name {
font-size: clamp(8px, 1.15vw, 12px);
}
.steam-card-value {
font-size: clamp(8px, 1.25vw, 12px);
}
.steam-radar-wrap,
#mobile-controls.controller-active #drag-stick {
left: var(--steam-wide-edge-left);
bottom: var(--steam-wide-bottom);
width: var(--steam-wide-helm-size);
}
.steam-cannon-port,
.steam-cannon-starboard,
#mobile-controls.controller-active .mobile-control.port,
#mobile-controls.controller-active .mobile-control.starboard {
top: auto;
bottom: var(--steam-wide-bottom);
width: var(--steam-wide-cannon-size);
}
.steam-cannon-starboard,
#mobile-controls.controller-active .mobile-control.starboard {
right: var(--steam-wide-edge-right);
}
.steam-cannon-port,
#mobile-controls.controller-active .mobile-control.port {
right: calc(var(--steam-wide-edge-right) + var(--steam-wide-cannon-size) + 14px);
}
#mobile-controls.controller-active .mobile-control.restart {
right: max(12px, env(safe-area-inset-right));
top: clamp(118px, 30vh, 168px);
width: clamp(52px, 8vw, 76px);
}
.steam-status {
top: clamp(92px, 24vh, 144px);
max-width: min(44%, 430px);
font-size: clamp(10px, 1.25vw, 14px);
}
}
@media (min-width: 1100px) {
.steam-top {
width: min(52vw, 560px);
}
.steam-player-card {
width: min(28vw, 360px);
}
.steam-enemy-card {
width: min(25vw, 330px);
}
}
`;
document.head.appendChild(style);