832 lines
24 KiB
JavaScript
832 lines
24 KiB
JavaScript
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';
|
|
import helmKnobSrc from './assets/controller/helm-knob.js';
|
|
import { airshipLog } from './diagnostics.js';
|
|
|
|
const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
|
|
|
|
if (!isDesktopPointer.matches) {
|
|
const root = document.querySelector('#mobile-controls');
|
|
|
|
if (root) {
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
#mobile-controls.controller-active {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#controller-hud {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
color: #f8e8b7;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-weight: 700;
|
|
text-shadow: 0 1px 2px #000, 0 0 5px rgba(47, 22, 2, .95);
|
|
}
|
|
|
|
.steam-piece {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.steam-piece > img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.steam-top {
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 960 / 246;
|
|
overflow: visible;
|
|
}
|
|
|
|
.steam-top-value {
|
|
position: absolute;
|
|
top: 63%;
|
|
transform: translate(-50%, -50%);
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 0;
|
|
height: 15%;
|
|
padding: 0 2px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #f7dfa1;
|
|
font-size: clamp(9px, 2.45vw, 12px);
|
|
font-variant-numeric: tabular-nums;
|
|
font-feature-settings: 'tnum' 1;
|
|
letter-spacing: .015em;
|
|
line-height: 1;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, .95), 0 0 3px rgba(42, 19, 2, .78);
|
|
}
|
|
|
|
.steam-speed { left: 9.3%; width: 7%; }
|
|
.steam-heading { left: 21.2%; width: 12%; }
|
|
.steam-wave { left: 50%; top: 67%; width: 8%; }
|
|
.steam-hostiles { left: 65.4%; width: 7%; }
|
|
.steam-kills { left: 78.2%; width: 7%; }
|
|
.steam-range { left: 91.1%; width: 12%; }
|
|
|
|
.steam-player-card,
|
|
.steam-enemy-card {
|
|
top: clamp(80px, 10.3vh, 90px);
|
|
aspect-ratio: 360 / 130;
|
|
width: min(31vw, 120px);
|
|
overflow: visible;
|
|
}
|
|
|
|
.steam-health-art {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 400% 300%;
|
|
background-position: 0 0;
|
|
background-color: transparent;
|
|
image-rendering: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.steam-player-card {
|
|
left: 1%;
|
|
}
|
|
|
|
.steam-player-card.steam-hit {
|
|
animation: steam-player-hit 220ms ease-out;
|
|
}
|
|
|
|
@keyframes steam-player-hit {
|
|
0% { filter: brightness(1); transform: translateX(0); }
|
|
25% { filter: brightness(1.9); transform: translateX(-4px); }
|
|
55% { filter: brightness(1.35); transform: translateX(4px); }
|
|
100% { filter: brightness(1); transform: translateX(0); }
|
|
}
|
|
|
|
.steam-enemy-card {
|
|
right: 1%;
|
|
}
|
|
|
|
.steam-card-name,
|
|
.steam-card-value {
|
|
position: absolute;
|
|
z-index: 2;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.steam-card-name {
|
|
top: 28%;
|
|
color: #f6d58e;
|
|
font-size: clamp(8px, 2.2vw, 11px);
|
|
letter-spacing: .06em;
|
|
}
|
|
|
|
.steam-player-card .steam-card-name {
|
|
left: 61%;
|
|
}
|
|
|
|
.steam-enemy-card .steam-card-name {
|
|
left: 39%;
|
|
}
|
|
|
|
.steam-card-value {
|
|
top: 67%;
|
|
color: #fff0bd;
|
|
font-size: clamp(8px, 2.4vw, 12px);
|
|
}
|
|
|
|
.steam-player-card .steam-card-value {
|
|
left: 61%;
|
|
}
|
|
|
|
.steam-enemy-card .steam-card-value {
|
|
left: 39%;
|
|
}
|
|
|
|
.steam-radar-wrap {
|
|
left: 1%;
|
|
bottom: max(8px, env(safe-area-inset-bottom));
|
|
width: min(39vw, 174px);
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.steam-helm-frame {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.steam-piece > img.steam-helm-knob {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 46%;
|
|
width: 16%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
will-change: transform;
|
|
}
|
|
|
|
.steam-helm-label {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 5%;
|
|
transform: translateX(-50%);
|
|
width: 55%;
|
|
text-align: center;
|
|
color: #ffe5a0;
|
|
font-size: clamp(8px, 2.5vw, 12px);
|
|
letter-spacing: .12em;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#steam-radar-contacts {
|
|
position: absolute;
|
|
left: 17%;
|
|
top: 14%;
|
|
width: 66%;
|
|
height: 69%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
z-index: 2;
|
|
}
|
|
|
|
.steam-radar-player,
|
|
.steam-radar-dot {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: -3px 0 0 -3px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 6px currentColor;
|
|
}
|
|
|
|
.steam-radar-player {
|
|
left: 50%;
|
|
top: 50%;
|
|
color: #ffe08c;
|
|
background: currentColor;
|
|
}
|
|
|
|
.steam-radar-dot {
|
|
color: #ff5c42;
|
|
background: currentColor;
|
|
}
|
|
|
|
.steam-cannon-port,
|
|
.steam-cannon-starboard {
|
|
right: 3%;
|
|
width: min(22vw, 104px);
|
|
aspect-ratio: 1;
|
|
overflow: visible;
|
|
}
|
|
|
|
.steam-cannon-port {
|
|
bottom: max(116px, calc(env(safe-area-inset-bottom) + 112px));
|
|
}
|
|
|
|
.steam-cannon-starboard {
|
|
bottom: max(8px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.steam-cannon-port > img,
|
|
.steam-cannon-starboard > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
clip-path: circle(49% at 50% 50%);
|
|
}
|
|
|
|
.steam-reload-track {
|
|
position: absolute;
|
|
left: 12%;
|
|
right: 12%;
|
|
bottom: -7%;
|
|
height: 5px;
|
|
border: 1px solid rgba(232, 184, 91, .42);
|
|
border-radius: 999px;
|
|
background: rgba(8, 25, 31, .72);
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.steam-reload-fill {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: scaleX(1);
|
|
transform-origin: left center;
|
|
background: rgba(255, 224, 140, .92);
|
|
transition: transform 60ms linear;
|
|
}
|
|
|
|
.steam-action-label {
|
|
position: absolute;
|
|
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(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 {
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 27%;
|
|
transform: translateX(-50%);
|
|
max-width: 72%;
|
|
padding: 7px 12px;
|
|
border: 1px solid rgba(201, 146, 60, .7);
|
|
border-radius: 8px;
|
|
background: rgba(8, 20, 24, .82);
|
|
color: #fff0c3;
|
|
font-size: clamp(10px, 3vw, 14px);
|
|
text-align: center;
|
|
white-space: pre-line;
|
|
box-shadow: 0 4px 18px rgba(0,0,0,.35);
|
|
}
|
|
|
|
.steam-status.visible {
|
|
display: block;
|
|
}
|
|
|
|
#mobile-controls.controller-active #drag-stick {
|
|
left: 1%;
|
|
bottom: max(8px, env(safe-area-inset-bottom));
|
|
top: auto;
|
|
width: min(39vw, 174px);
|
|
height: auto;
|
|
aspect-ratio: 1;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
#mobile-controls.controller-active #drag-stick::before,
|
|
#mobile-controls.controller-active #drag-stick::after,
|
|
#mobile-controls.controller-active #drag-thumb {
|
|
opacity: 0;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control {
|
|
min-width: 0;
|
|
height: auto;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: transparent;
|
|
font-size: 0;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
transform: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.active,
|
|
#mobile-controls.controller-active .mobile-control:active {
|
|
background: rgba(255, 210, 112, .08);
|
|
transform: none;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.port,
|
|
#mobile-controls.controller-active .mobile-control.starboard {
|
|
left: auto;
|
|
right: 3%;
|
|
width: min(22vw, 104px);
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.port {
|
|
top: auto;
|
|
bottom: max(116px, calc(env(safe-area-inset-bottom) + 112px));
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.starboard {
|
|
top: auto;
|
|
bottom: max(8px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.ship-action {
|
|
display: grid;
|
|
place-items: center;
|
|
left: 50%;
|
|
right: auto;
|
|
bottom: max(10px, env(safe-area-inset-bottom));
|
|
width: min(28vw, 126px);
|
|
min-width: 92px;
|
|
height: 48px;
|
|
padding: 5px 9px;
|
|
border: 1px solid rgba(232, 184, 91, .65);
|
|
border-radius: 12px;
|
|
background: rgba(8, 25, 31, .88);
|
|
color: #ffe5a0;
|
|
font: 700 clamp(9px, 2.7vw, 12px)/1.05 Georgia, 'Times New Roman', serif;
|
|
text-align: center;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, .38);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.ship-action:disabled {
|
|
opacity: .34;
|
|
filter: grayscale(.7);
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.ship-action[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.ship-action.active,
|
|
#mobile-controls.controller-active .mobile-control.ship-action:active {
|
|
background: rgba(117, 78, 31, .9);
|
|
transform: translateX(-50%) scale(.96);
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.buy {
|
|
margin-left: 0;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.fit {
|
|
margin-left: 16%;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.restart {
|
|
left: auto;
|
|
right: 1%;
|
|
top: clamp(147px, 20.5vh, 179px);
|
|
bottom: auto;
|
|
width: 14%;
|
|
height: auto;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@media (max-height: 700px) and (max-width: 699px) {
|
|
.steam-player-card,
|
|
.steam-enemy-card {
|
|
top: 76px;
|
|
}
|
|
|
|
.steam-radar-wrap {
|
|
width: 34vw;
|
|
bottom: max(6px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
#mobile-controls.controller-active #drag-stick {
|
|
width: 34vw;
|
|
bottom: max(6px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.steam-cannon-port,
|
|
.steam-cannon-starboard,
|
|
#mobile-controls.controller-active .mobile-control.port,
|
|
#mobile-controls.controller-active .mobile-control.starboard {
|
|
width: min(20vw, 90px);
|
|
}
|
|
|
|
.steam-cannon-port,
|
|
#mobile-controls.controller-active .mobile-control.port {
|
|
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: 960 / 246;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.steam-top-value {
|
|
font-size: clamp(9px, 1.15vw, 13px);
|
|
}
|
|
|
|
.steam-player-card,
|
|
.steam-enemy-card {
|
|
top: clamp(70px, 20vh, 104px);
|
|
}
|
|
|
|
.steam-player-card {
|
|
left: max(12px, env(safe-area-inset-left));
|
|
width: min(18vw, 180px);
|
|
}
|
|
|
|
.steam-enemy-card {
|
|
right: max(12px, env(safe-area-inset-right));
|
|
width: min(18vw, 180px);
|
|
}
|
|
|
|
.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.ship-action {
|
|
bottom: var(--steam-wide-bottom);
|
|
width: clamp(100px, 15vw, 142px);
|
|
height: 50px;
|
|
min-width: 100px;
|
|
font-size: clamp(9px, 1.15vw, 12px);
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.buy {
|
|
margin-left: 0;
|
|
}
|
|
|
|
#mobile-controls.controller-active .mobile-control.fit {
|
|
margin-left: 86px;
|
|
}
|
|
|
|
#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);
|
|
|
|
root.classList.add('controller-active');
|
|
|
|
const hud = document.createElement('div');
|
|
hud.id = 'controller-hud';
|
|
root.prepend(hud);
|
|
|
|
|
|
const addPiece = (className, src, inner = '') => {
|
|
const piece = document.createElement('div');
|
|
piece.className = `steam-piece ${className}`;
|
|
|
|
const image = document.createElement('img');
|
|
image.src = src;
|
|
image.alt = '';
|
|
image.draggable = false;
|
|
image.addEventListener('error', () => {
|
|
airshipLog('hud:image-error', {
|
|
component: className,
|
|
srcType: src?.slice?.(0, 32) || 'unknown',
|
|
}, 'error');
|
|
});
|
|
piece.appendChild(image);
|
|
|
|
if (inner) piece.insertAdjacentHTML('beforeend', inner);
|
|
hud.appendChild(piece);
|
|
return piece;
|
|
};
|
|
|
|
addPiece('steam-top', topHudSrc, `
|
|
<span class="steam-top-value steam-speed" data-steam="speed">0</span>
|
|
<span class="steam-top-value steam-heading" data-steam="heading">000°</span>
|
|
<span class="steam-top-value steam-wave" data-steam="wave">1</span>
|
|
<span class="steam-top-value steam-hostiles" data-steam="hostiles">0</span>
|
|
<span class="steam-top-value steam-kills" data-steam="kills">0</span>
|
|
<span class="steam-top-value steam-range" data-steam="range">--</span>
|
|
`);
|
|
|
|
const addHealthPiece = (className, src, inner = '') => {
|
|
const piece = document.createElement('div');
|
|
piece.className = `steam-piece ${className}`;
|
|
|
|
const art = document.createElement('span');
|
|
art.className = 'steam-health-art';
|
|
art.style.backgroundImage = `url("${src}")`;
|
|
piece.appendChild(art);
|
|
|
|
const probe = new Image();
|
|
probe.addEventListener('load', () => airshipLog('hud:health-sheet-loaded', { component: className }));
|
|
probe.addEventListener('error', () => airshipLog('hud:health-sheet-error', { component: className }, 'error'));
|
|
probe.src = src;
|
|
|
|
if (inner) piece.insertAdjacentHTML('beforeend', inner);
|
|
hud.appendChild(piece);
|
|
return piece;
|
|
};
|
|
|
|
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>
|
|
`);
|
|
|
|
const enemyHealthPiece = addHealthPiece('steam-enemy-card', enemyHealthSrc, `
|
|
<span class="steam-card-name" data-steam="enemy-name">PIRATE</span>
|
|
<span class="steam-card-value" data-steam="enemy-hull">CLEAR</span>
|
|
`);
|
|
|
|
const radarPiece = document.createElement('div');
|
|
radarPiece.className = 'steam-piece steam-radar-wrap';
|
|
|
|
const helmFrame = document.createElement('img');
|
|
helmFrame.className = 'steam-helm-frame';
|
|
helmFrame.src = helmFrameSrc;
|
|
helmFrame.alt = '';
|
|
helmFrame.draggable = false;
|
|
helmFrame.addEventListener('load', () => airshipLog('hud:helm-frame-loaded'));
|
|
helmFrame.addEventListener('error', () => airshipLog('hud:helm-frame-error', {}, 'error'));
|
|
radarPiece.appendChild(helmFrame);
|
|
|
|
const helmKnob = document.createElement('img');
|
|
helmKnob.className = 'steam-helm-knob';
|
|
helmKnob.src = helmKnobSrc;
|
|
helmKnob.alt = '';
|
|
helmKnob.draggable = false;
|
|
helmKnob.addEventListener('load', () => airshipLog('hud:helm-knob-loaded'));
|
|
helmKnob.addEventListener('error', () => airshipLog('hud:helm-knob-error', {}, 'error'));
|
|
radarPiece.appendChild(helmKnob);
|
|
|
|
radarPiece.insertAdjacentHTML('beforeend', `
|
|
<div id="steam-radar-contacts">
|
|
<span class="steam-radar-player"></span>
|
|
</div>
|
|
<span class="steam-helm-label">HELM</span>
|
|
`);
|
|
hud.appendChild(radarPiece);
|
|
|
|
addPiece('steam-cannon-port', cannonRoundelSrc, `
|
|
<span class="steam-action-label">PORT</span>
|
|
<span class="steam-reload-track"><span class="steam-reload-fill" data-steam="port-reload"></span></span>
|
|
`);
|
|
|
|
addPiece('steam-cannon-starboard', cannonRoundelSrc, `
|
|
<span class="steam-action-label">STBD</span>
|
|
<span class="steam-reload-track"><span class="steam-reload-fill" data-steam="starboard-reload"></span></span>
|
|
`);
|
|
|
|
const status = document.createElement('div');
|
|
status.className = 'steam-status';
|
|
status.dataset.steam = 'status';
|
|
hud.appendChild(status);
|
|
|
|
const fields = Object.fromEntries(
|
|
[...hud.querySelectorAll('[data-steam]')].map((el) => [el.dataset.steam, el]),
|
|
);
|
|
const buyButton = root.querySelector('.mobile-control.buy');
|
|
|
|
const radarContacts = radarPiece.querySelector('#steam-radar-contacts');
|
|
|
|
const setHelmKnob = (x = 0, y = 0) => {
|
|
const maxOffset = Math.min(radarPiece.clientWidth * 0.16, 24);
|
|
const px = Math.max(-1, Math.min(1, x)) * maxOffset;
|
|
const py = Math.max(-1, Math.min(1, y)) * maxOffset;
|
|
helmKnob.style.transform = `translate(-50%, -50%) translate(${px}px, ${py}px)`;
|
|
};
|
|
|
|
window.addEventListener('airship:helm-vector', (event) => {
|
|
setHelmKnob(event.detail?.x ?? 0, event.detail?.y ?? 0);
|
|
});
|
|
|
|
window.addEventListener('blur', () => setHelmKnob(0, 0));
|
|
const radarDots = Array.from({ length: 10 }, () => {
|
|
const dot = document.createElement('span');
|
|
dot.className = 'steam-radar-dot';
|
|
dot.hidden = true;
|
|
radarContacts.appendChild(dot);
|
|
return dot;
|
|
});
|
|
|
|
const clamp01 = (value) => Math.max(0, Math.min(1, value));
|
|
|
|
const healthFrame = (current, max) => {
|
|
const pct = max > 0 ? clamp01(current / max) : 0;
|
|
return Math.max(0, Math.min(11, Math.round((1 - pct) * 11)));
|
|
};
|
|
|
|
const setHealthFrame = (piece, frame) => {
|
|
const col = frame % 4;
|
|
const row = Math.floor(frame / 4);
|
|
const art = piece.querySelector('.steam-health-art');
|
|
if (!art) return;
|
|
art.style.backgroundPosition = `${(col / 3) * 100}% ${(row / 2) * 100}%`;
|
|
};
|
|
|
|
const updateRadar = (contacts = []) => {
|
|
radarDots.forEach((dot, index) => {
|
|
const contact = contacts[index];
|
|
if (!contact) {
|
|
dot.hidden = true;
|
|
return;
|
|
}
|
|
|
|
let dx = Number(contact.dx) || 0;
|
|
let dy = Number(contact.dy) || 0;
|
|
const distance = Math.hypot(dx, dy);
|
|
if (distance > 1) {
|
|
dx /= distance;
|
|
dy /= distance;
|
|
}
|
|
|
|
dot.style.left = `${50 + dx * 36}%`;
|
|
dot.style.top = `${50 + dy * 36}%`;
|
|
dot.hidden = false;
|
|
});
|
|
};
|
|
|
|
let lastPlayerHitSequence = 0;
|
|
|
|
const pulsePlayerHit = (sequence) => {
|
|
if (!Number.isFinite(sequence) || sequence <= lastPlayerHitSequence) return;
|
|
lastPlayerHitSequence = sequence;
|
|
playerHealthPiece.classList.remove('steam-hit');
|
|
void playerHealthPiece.offsetWidth;
|
|
playerHealthPiece.classList.add('steam-hit');
|
|
};
|
|
|
|
const renderHudState = (state) => {
|
|
if (!state?.player) return;
|
|
|
|
const playerHull = Math.max(0, state.player.hull ?? 100);
|
|
const playerMaxHull = Math.max(1, state.player.maxHull ?? 100);
|
|
const target = state.target || null;
|
|
|
|
fields.speed.textContent = `${Math.abs(state.speed || 0).toFixed(0)}${state.speed < 0 ? 'R' : ''}`;
|
|
fields.heading.textContent = `${(state.heading || 0).toFixed(0).padStart(3, '0')}°`;
|
|
fields.wave.textContent = String(state.wave || 1);
|
|
fields.hostiles.textContent = String(state.hostiles || 0);
|
|
fields.kills.textContent = String(state.kills || 0);
|
|
fields.range.textContent = target && Number.isFinite(target.range) ? `${Math.round(target.range)}m` : '--';
|
|
fields['player-hull'].textContent = `${playerHull}/${playerMaxHull}`;
|
|
fields['enemy-name'].textContent = target?.name || 'PIRATE';
|
|
fields['enemy-hull'].textContent = target ? `${Math.max(0, target.hull || 0)}/${Math.max(1, target.maxHull || 120)}` : 'CLEAR';
|
|
|
|
setHealthFrame(
|
|
playerHealthPiece,
|
|
healthFrame(playerHull, playerMaxHull),
|
|
);
|
|
setHealthFrame(
|
|
enemyHealthPiece,
|
|
target ? healthFrame(target.hull || 0, target.maxHull || 120) : 11,
|
|
);
|
|
|
|
fields['port-reload'].style.transform = `scaleX(${clamp01(state.reload?.port ?? 1)})`;
|
|
fields['starboard-reload'].style.transform = `scaleX(${clamp01(state.reload?.starboard ?? 1)})`;
|
|
|
|
const progression = state.progression || {};
|
|
if (buyButton) {
|
|
buyButton.hidden = !progression.docked;
|
|
buyButton.disabled = !progression.docked;
|
|
const salvageCount = progression.inventoryCount || 0;
|
|
buyButton.textContent = salvageCount > 0
|
|
? `SHIPYARD\nSALVAGE ${salvageCount}`
|
|
: 'SHIPYARD';
|
|
}
|
|
|
|
const statusText = String(state.status || '').trim();
|
|
fields.status.textContent = statusText;
|
|
fields.status.classList.toggle('visible', Boolean(statusText));
|
|
|
|
pulsePlayerHit(state.player.hitSequence ?? 0);
|
|
updateRadar(state.radar || []);
|
|
};
|
|
|
|
window.addEventListener('airship:hud-state', (event) => {
|
|
renderHudState(event.detail);
|
|
});
|
|
|
|
airshipLog('hud:mounted', {
|
|
mobile: true,
|
|
pieces: hud.querySelectorAll('.steam-piece').length,
|
|
});
|
|
|
|
}
|
|
}
|