diff --git a/src/mobile-hud.js b/src/mobile-hud.js index d549d7b..8e68c94 100644 --- a/src/mobile-hud.js +++ b/src/mobile-hud.js @@ -5,6 +5,7 @@ import rightControlsSrc from './assets/controller/right-controls.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)'); @@ -417,6 +418,12 @@ if (!isDesktopPointer.matches) { 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); @@ -453,6 +460,8 @@ if (!isDesktopPointer.matches) { 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'); @@ -460,6 +469,8 @@ if (!isDesktopPointer.matches) { 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', ` @@ -595,6 +606,11 @@ if (!isDesktopPointer.matches) { requestAnimationFrame(update); }; + airshipLog('hud:mounted', { + mobile: true, + pieces: hud.querySelectorAll('.steam-piece').length, + }); + requestAnimationFrame(update); } }