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 topHudSrc from './assets/controller/top-hud.js';
import leftStatusSrc from './assets/controller/left-status.js'; import leftStatusSrc from './assets/controller/left-status.js';
import rightControlsSrc from './assets/controller/right-controls.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'; import helmActionSrc from './assets/controller/helm-action.js';
const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)'); const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
@ -217,46 +217,44 @@ if (!isDesktopPointer.matches) {
.steam-cannon-port, .steam-cannon-port,
.steam-cannon-starboard { .steam-cannon-starboard {
right: -1%; right: 3%;
width: 45%; width: min(22vw, 104px);
aspect-ratio: 359 / 165; aspect-ratio: 1;
overflow: hidden; overflow: visible;
} }
.steam-cannon-port { .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 { .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 { .steam-cannon-starboard > img {
transform: scaleX(-1); width: 100%;
height: 100%;
object-fit: contain;
} }
.steam-action-label { .steam-action-label {
position: absolute; position: absolute;
left: 62%; left: 50%;
top: 43%; bottom: 7%;
transform: translate(-50%, -50%); transform: translateX(-50%);
width: 58%; 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; text-align: center;
color: #ffe5a0; color: #ffe5a0;
font-size: clamp(10px, 3vw, 14px); font-size: clamp(8px, 2.3vw, 11px);
letter-spacing: .08em; line-height: 1.1;
} letter-spacing: .1em;
white-space: nowrap;
.steam-action-sub { box-shadow: 0 1px 4px rgba(0,0,0,.5);
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;
} }
.steam-status { .steam-status {
@ -328,19 +326,20 @@ if (!isDesktopPointer.matches) {
#mobile-controls.controller-active .mobile-control.port, #mobile-controls.controller-active .mobile-control.port,
#mobile-controls.controller-active .mobile-control.starboard { #mobile-controls.controller-active .mobile-control.starboard {
left: auto; left: auto;
right: 0; right: 3%;
width: 45%; width: min(22vw, 104px);
aspect-ratio: 359 / 165; aspect-ratio: 1;
border-radius: 50%;
} }
#mobile-controls.controller-active .mobile-control.port { #mobile-controls.controller-active .mobile-control.port {
top: auto; 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 { #mobile-controls.controller-active .mobile-control.starboard {
top: auto; 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 { #mobile-controls.controller-active .mobile-control.restart {
@ -374,7 +373,12 @@ if (!isDesktopPointer.matches) {
.steam-cannon-starboard, .steam-cannon-starboard,
#mobile-controls.controller-active .mobile-control.port, #mobile-controls.controller-active .mobile-control.port,
#mobile-controls.controller-active .mobile-control.starboard { #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); hud.appendChild(radarPiece);
addPiece('steam-cannon-port', cannonActionSrc, ` addPiece('steam-cannon-port', cannonRoundelSrc, `
<span class="steam-action-label">PORT FIRE</span> <span class="steam-action-label">PORT</span>
<span class="steam-action-sub">BROADSIDE</span>
`); `);
addPiece('steam-cannon-starboard', cannonActionSrc, ` addPiece('steam-cannon-starboard', cannonRoundelSrc, `
<span class="steam-action-label">STBD FIRE</span> <span class="steam-action-label">STBD</span>
<span class="steam-action-sub">BROADSIDE</span>
`); `);
const status = document.createElement('div'); const status = document.createElement('div');