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

Use round cannon controls on mobile

Browse Source
This commit is contained in:
Admin 2026-09-17 23:27:48 +00:00
parent 3b93798e5b
commit 461ce2cca3
1 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/mobile-hud.js
View File

@ -2,7 +2,7 @@ import Phaser from 'phaser';
import topHudSrc from './assets/controller/top-hud.js';
import leftStatusSrc from './assets/controller/left-status.js';
import rightControlsSrc from './assets/controller/right-controls.js';
import cannonActionSrc from './assets/controller/cannon-action.js';
import cannonRoundelSrc from './assets/controller/cannon-roundel.js';
import helmActionSrc from './assets/controller/helm-action.js';
const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
@ -217,46 +217,44 @@ if (!isDesktopPointer.matches) {
.steam-cannon-port,
.steam-cannon-starboard {
right: -1%;
width: 45%;
aspect-ratio: 359 / 165;
overflow: hidden;
right: 3%;
width: min(22vw, 104px);
aspect-ratio: 1;
overflow: visible;
}
.steam-cannon-port {
bottom: max(clamp(88px, 11.8vh, 108px), calc(env(safe-area-inset-bottom) + 86px));
bottom: max(116px, calc(env(safe-area-inset-bottom) + 112px));
}
.steam-cannon-starboard {
bottom: max(2px, env(safe-area-inset-bottom));
bottom: max(8px, env(safe-area-inset-bottom));
}
.steam-cannon-port > img,
.steam-cannon-starboard > img {
transform: scaleX(-1);
width: 100%;
height: 100%;
object-fit: contain;
}
.steam-action-label {
position: absolute;
left: 62%;
top: 43%;
transform: translate(-50%, -50%);
width: 58%;
left: 50%;
bottom: 7%;
transform: translateX(-50%);
min-width: 48%;
padding: 2px 7px;
border: 1px solid rgba(232, 184, 91, .55);
border-radius: 999px;
background: rgba(8, 25, 31, .82);
text-align: center;
color: #ffe5a0;
font-size: clamp(10px, 3vw, 14px);
letter-spacing: .08em;
}
.steam-action-sub {
position: absolute;
left: 62%;
top: 62%;
transform: translate(-50%, -50%);
width: 58%;
text-align: center;
color: #ceb47b;
font-size: clamp(6px, 1.65vw, 8px);
letter-spacing: .06em;
font-size: clamp(8px, 2.3vw, 11px);
line-height: 1.1;
letter-spacing: .1em;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.steam-status {
@ -328,19 +326,20 @@ if (!isDesktopPointer.matches) {
#mobile-controls.controller-active .mobile-control.port,
#mobile-controls.controller-active .mobile-control.starboard {
left: auto;
right: 0;
width: 45%;
aspect-ratio: 359 / 165;
right: 3%;
width: min(22vw, 104px);
aspect-ratio: 1;
border-radius: 50%;
}
#mobile-controls.controller-active .mobile-control.port {
top: auto;
bottom: max(clamp(88px, 11.8vh, 108px), calc(env(safe-area-inset-bottom) + 86px));
bottom: max(116px, calc(env(safe-area-inset-bottom) + 112px));
}
#mobile-controls.controller-active .mobile-control.starboard {
top: auto;
bottom: max(2px, env(safe-area-inset-bottom));
bottom: max(8px, env(safe-area-inset-bottom));
}
#mobile-controls.controller-active .mobile-control.restart {
@ -374,7 +373,12 @@ if (!isDesktopPointer.matches) {
.steam-cannon-starboard,
#mobile-controls.controller-active .mobile-control.port,
#mobile-controls.controller-active .mobile-control.starboard {
width: 41%;
width: min(20vw, 90px);
}
.steam-cannon-port,
#mobile-controls.controller-active .mobile-control.port {
bottom: max(106px, calc(env(safe-area-inset-bottom) + 102px));
}
}
`;
@ -438,14 +442,12 @@ if (!isDesktopPointer.matches) {
`);
hud.appendChild(radarPiece);
addPiece('steam-cannon-port', cannonActionSrc, `
<span class="steam-action-label">PORT FIRE</span>
<span class="steam-action-sub">BROADSIDE</span>
addPiece('steam-cannon-port', cannonRoundelSrc, `
<span class="steam-action-label">PORT</span>
`);
addPiece('steam-cannon-starboard', cannonActionSrc, `
<span class="steam-action-label">STBD FIRE</span>
<span class="steam-action-sub">BROADSIDE</span>
addPiece('steam-cannon-starboard', cannonRoundelSrc, `
<span class="steam-action-label">STBD</span>
`);
const status = document.createElement('div');