@inventure71/paddockjs 1.0.0 → 2.0.0

package/src/app/banners/bannerFormatters.js

@@ -0,0 +1,55 @@
+export function formatPenaltyType(type) {
+  return String(type ?? 'penalty')
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+export function formatPenaltyHeadline(penalty) {
+  const serviceType = penalty?.serviceType;
+  if (serviceType === 'driveThrough') {
+    return penalty?.unserved ? 'unserved drive-through penalty' : 'drive-through penalty';
+  }
+  if (serviceType === 'stopGo') {
+    return penalty?.unserved ? 'unserved stop-go penalty' : 'stop-go penalty';
+  }
+  const positionDrop = Number(penalty?.positionDrop);
+  if (Number.isFinite(positionDrop) && positionDrop > 0) {
+    return `${positionDrop}-place position drop`;
+  }
+  const gridDrop = Number(penalty?.gridDrop);
+  if (Number.isFinite(gridDrop) && gridDrop > 0) {
+    return `${gridDrop}-place grid drop`;
+  }
+  if (penalty?.disqualified) return 'disqualification';
+  const seconds = Number(penalty?.penaltySeconds);
+  if (!Number.isFinite(seconds) || seconds <= 0) return 'Penalty decision';
+  const unit = seconds === 1 ? 'second' : 'seconds';
+  return `+${seconds} ${unit} time penalty`;
+}
+
+export function formatPenaltyChip(penalty) {
+  const serviceType = penalty?.serviceType;
+  if (serviceType === 'driveThrough') return 'DT';
+  if (serviceType === 'stopGo') return 'SG';
+  if (penalty?.disqualified) return 'DSQ';
+  const positionDrop = Number(penalty?.positionDrop);
+  if (Number.isFinite(positionDrop) && positionDrop > 0) return `-${positionDrop}P`;
+  const gridDrop = Number(penalty?.gridDrop);
+  if (Number.isFinite(gridDrop) && gridDrop > 0) return `-${gridDrop}G`;
+  const seconds = Number(penalty?.penaltySeconds);
+  return Number.isFinite(seconds) && seconds > 0 ? `+${seconds}s` : 'Penalty';
+}
+
+export function formatStewardMessageKey(message) {
+  if (!message) return '';
+  return [
+    message.kind,
+    message.type,
+    message.driverId,
+    message.penaltyId,
+    message.violationCount,
+    message.time,
+  ].join(':');
+}

package/src/app/banners/raceDataBannerController.js

@@ -0,0 +1,141 @@
+import { formatDriverNumber } from '../../data/championship.js';
+import { setText } from '../domBindings.js';
+
+export const RACE_DATA_SELECTED_VISIBLE_MS = 5200;
+export const RADIO_BREAK_MIN_MS = 4800;
+export const RADIO_BREAK_MAX_MS = 11800;
+export const RADIO_VISIBLE_MIN_MS = 6200;
+export const RADIO_VISIBLE_MAX_MS = 9200;
+export const RADIO_SCHEDULE_CATCHUP_LIMIT_MS = 30000;
+
+export function shouldAutoHideActiveRaceData({ activeRaceDataId, options, readouts }) {
+  return Boolean(
+    activeRaceDataId &&
+    !(
+      options.ui?.raceDataTelemetryDetail ||
+      readouts.raceDataPanel?.classList?.contains?.('race-data-panel--with-telemetry')
+    ),
+  );
+}
+
+export function renderRaceData({ car, drivers, readouts, options }) {
+  if (!car || !readouts.raceDataPanel) return false;
+  if (typeof options.isRaceDataBannerEnabled === 'function' && !options.isRaceDataBannerEnabled('project')) return false;
+  const driver = drivers.find((item) => item.id === car.id);
+  if (!driver) return false;
+
+  readouts.raceDataPanel.style.setProperty('--driver-color', driver.color);
+  readouts.raceDataPanel.classList.remove('is-hidden');
+  readouts.raceDataPanel.classList.add('is-project-mode');
+  readouts.raceDataPanel.classList.remove('is-radio-mode');
+  readouts.raceDataPanel.removeAttribute('data-idle-mode');
+  setText(readouts.raceDataKicker, 'Project');
+  setText(readouts.raceDataTitle, driver.name);
+  if (readouts.raceDataNumber) {
+    readouts.raceDataNumber.textContent = formatDriverNumber(car.driverNumber ?? driver.driverNumber);
+  }
+  if (readouts.raceDataSubtitle) {
+    readouts.raceDataSubtitle.textContent = `${car.code} - P${car.rank} - ${driver.raceData?.[0] ?? 'Project entry'}`;
+  }
+  if (readouts.raceDataOpen) {
+    readouts.raceDataOpen.hidden = typeof options.onDriverOpen !== 'function';
+  }
+  return true;
+}
+
+export function hideRaceDataPanel(readouts) {
+  if (!readouts.raceDataPanel) return;
+  readouts.raceDataPanel.classList.add('is-hidden');
+  readouts.raceDataPanel.classList.remove('is-project-mode', 'is-radio-mode');
+  readouts.raceDataPanel.removeAttribute('data-idle-mode');
+  if (readouts.raceDataOpen) readouts.raceDataOpen.hidden = true;
+}
+
+export function getProjectRadioQuote({ drivers, radioState }) {
+  const driver = drivers[radioState.driverIndex] ?? drivers[0];
+  const quote = driver.raceData?.[radioState.quoteIndex] ?? 'Project entry';
+
+  return {
+    color: driver.color,
+    title: driver.name,
+    subtitle: `${driver.code} - "${quote}"`,
+  };
+}
+
+export function renderProjectRadio({ readouts, radio }) {
+  if (!readouts.raceDataPanel) return;
+  readouts.raceDataPanel.style.setProperty('--driver-color', radio.color);
+  readouts.raceDataPanel.classList.remove('is-hidden');
+  readouts.raceDataPanel.classList.add('is-radio-mode');
+  readouts.raceDataPanel.classList.remove('is-project-mode');
+  readouts.raceDataPanel.dataset.idleMode = 'quote';
+  setText(readouts.raceDataKicker, 'Project radio');
+  setText(readouts.raceDataTitle, radio.title);
+  setText(readouts.raceDataNumber, '');
+  setText(readouts.raceDataSubtitle, radio.subtitle);
+  if (readouts.raceDataOpen) readouts.raceDataOpen.hidden = true;
+}
+
+export function randomRadioRange(nextRandom, min, max) {
+  return min + nextRandom() * (max - min);
+}
+
+export function getNextRadioBreakTime({ now, isEnabled, nextRandom }) {
+  return isEnabled('radio')
+    ? now + randomRadioRange(nextRandom, RADIO_BREAK_MIN_MS, RADIO_BREAK_MAX_MS)
+    : Number.POSITIVE_INFINITY;
+}
+
+export function scheduleRadioBreak({ radioState, now, isEnabled, nextRandom }) {
+  radioState.visible = false;
+  radioState.nextChangeAt = getNextRadioBreakTime({ now, isEnabled, nextRandom });
+}
+
+export function scheduleRadioPopup({ radioState, now, drivers, isEnabled, nextRandom }) {
+  if (!isEnabled('radio')) {
+    scheduleRadioBreak({ radioState, now, isEnabled, nextRandom });
+    return;
+  }
+  const driverIndex = Math.floor(nextRandom() * drivers.length);
+  const driver = drivers[driverIndex] ?? drivers[0];
+  const quoteCount = Math.max(1, driver.raceData?.length ?? 1);
+  radioState.visible = true;
+  radioState.driverIndex = driverIndex;
+  radioState.quoteIndex = Math.floor(nextRandom() * quoteCount);
+  radioState.nextChangeAt = now + randomRadioRange(nextRandom, RADIO_VISIBLE_MIN_MS, RADIO_VISIBLE_MAX_MS);
+}
+
+export function updateRadioSchedule({ radioState, now, drivers, isEnabled, nextRandom }) {
+  if (!isEnabled('radio')) {
+    radioState.visible = false;
+    radioState.nextChangeAt = Number.POSITIVE_INFINITY;
+    return;
+  }
+  if (
+    Number.isFinite(radioState.nextChangeAt) &&
+    now - radioState.nextChangeAt > RADIO_SCHEDULE_CATCHUP_LIMIT_MS
+  ) {
+    if (radioState.visible) scheduleRadioBreak({ radioState, now, isEnabled, nextRandom });
+    else scheduleRadioPopup({ radioState, now, drivers, isEnabled, nextRandom });
+    return;
+  }
+  while (now >= radioState.nextChangeAt) {
+    if (radioState.visible) {
+      scheduleRadioBreak({ radioState, now: radioState.nextChangeAt, isEnabled, nextRandom });
+    } else {
+      scheduleRadioPopup({ radioState, now: radioState.nextChangeAt, drivers, isEnabled, nextRandom });
+    }
+  }
+}
+
+export function resetRaceDataBannerState({ state, now, initialMode, selectedId, isEnabled, nextRandom }) {
+  state.activeRaceDataId = isEnabled('project') && initialMode === 'project' ? selectedId : null;
+  state.lastRaceDataInteraction = now;
+  const showInitialRadio = isEnabled('radio') && initialMode === 'radio';
+  state.radioState.visible = showInitialRadio;
+  state.radioState.nextChangeAt = showInitialRadio
+    ? now + randomRadioRange(nextRandom, RADIO_VISIBLE_MIN_MS, RADIO_VISIBLE_MAX_MS)
+    : getNextRadioBreakTime({ now, isEnabled, nextRandom });
+  state.radioState.driverIndex = 0;
+  state.radioState.quoteIndex = 0;
+}

package/src/app/banners/stewardMessageController.js

@@ -0,0 +1,99 @@
+import { setText } from '../domBindings.js';
+import {
+  formatPenaltyChip,
+  formatPenaltyHeadline,
+  formatPenaltyType,
+  formatStewardMessageKey,
+} from './bannerFormatters.js';
+
+export const PENALTY_BANNER_VISIBLE_MS = 12000;
+
+export function createPenaltyStewardMessage(penalty, driverById) {
+  if (!penalty) return null;
+  const driver = driverById.get(penalty.driverId);
+  const code = driver?.timingCode ?? driver?.code ?? penalty.driverId ?? 'CAR';
+  return {
+    kind: 'penalty',
+    type: penalty.type,
+    driverId: penalty.driverId,
+    penaltyId: penalty.id,
+    time: penalty.time,
+    color: driver?.color ?? 'var(--red)',
+    kicker: formatPenaltyChip(penalty),
+    title: `${code} ${formatPenaltyHeadline(penalty).replace(/^\+\d+ seconds? /u, '')}`,
+    detail: `${formatPenaltyType(penalty.type)} - ${penalty.reason ?? 'Steward decision'}`,
+  };
+}
+
+export function createWarningStewardMessage(event, driverById) {
+  if (!event) return null;
+  const driver = driverById.get(event.carId);
+  const code = driver?.timingCode ?? driver?.code ?? event.carId ?? 'CAR';
+  const warningLimit = Number(event.warningsBeforePenalty);
+  const warningProgress = Number.isFinite(warningLimit) && warningLimit > 0
+    ? ` ${event.violationCount}/${warningLimit}`
+    : '';
+  return {
+    kind: 'warning',
+    type: event.type,
+    driverId: event.carId,
+    violationCount: event.violationCount,
+    time: event.at,
+    color: driver?.color ?? 'var(--yellow)',
+    kicker: 'Warning',
+    title: `${code} ${formatPenaltyType(event.type).toLowerCase()}`,
+    detail: `${formatPenaltyType(event.type)}${warningProgress}`,
+  };
+}
+
+export function updateStewardMessageState({
+  snapshot,
+  now,
+  state,
+  driverById,
+  penaltyBannerEnabled,
+  stewardMessageNode,
+}) {
+  if (!penaltyBannerEnabled || !stewardMessageNode) {
+    state.activeStewardMessage = null;
+    return state;
+  }
+  if (state.activeStewardMessage && now < state.activeStewardMessage.visibleUntil) return state;
+  state.activeStewardMessage = null;
+
+  const warning = [...(snapshot.events ?? [])].reverse().find((event) => (
+    event?.type === 'track-limits' && event.decision === 'warning'
+  ));
+  const penalty = [...(snapshot.penalties ?? [])].reverse().find((entry) => (
+    entry?.id && entry.id !== state.lastPenaltyBannerId
+  ));
+  const message = penalty
+    ? createPenaltyStewardMessage(penalty, driverById)
+    : createWarningStewardMessage(warning, driverById);
+  const key = formatStewardMessageKey(message);
+  if (!message || !key || key === state.lastStewardMessageKey) return state;
+  state.lastStewardMessageKey = key;
+  if (message.penaltyId) state.lastPenaltyBannerId = message.penaltyId;
+  state.activeStewardMessage = {
+    message,
+    visibleUntil: now + PENALTY_BANNER_VISIBLE_MS,
+  };
+  return state;
+}
+
+export function renderActiveStewardMessage(readouts, activeStewardMessage) {
+  const message = activeStewardMessage?.message;
+  const panel = readouts.stewardMessage;
+  if (!panel) return;
+  if (!message) {
+    panel.classList.add('is-hidden');
+    panel.classList.remove('is-penalty', 'is-warning');
+    return;
+  }
+  panel.style.setProperty('--steward-color', message.color);
+  panel.classList.remove('is-hidden', 'is-penalty', 'is-warning');
+  panel.classList.add(message.kind === 'penalty' ? 'is-penalty' : 'is-warning');
+  setText(readouts.stewardMessageKicker, message.kicker);
+  setText(readouts.stewardMessageTitle, message.title);
+  setText(readouts.stewardMessageDetail, message.detail);
+}

package/src/app/camera/cameraConstants.js

@@ -0,0 +1,21 @@
+import { metersToSimUnits } from '../../simulation/units.js';
+import { VEHICLE_GEOMETRY } from '../../simulation/vehicleGeometry.js';
+
+export const CAMERA_TARGET_LERP = 0.12;
+export const CAMERA_SCALE_LERP = 0.12;
+export const CAMERA_PRESETS = {
+  overview: 1,
+  leader: 18,
+  selected: 24,
+  'show-all': 1,
+  pit: 2.35,
+};
+export const CAMERA_MIN_ZOOM = 0.55;
+export const CAMERA_MAX_ZOOM = 120;
+export const CAMERA_ZOOM_STEP = 1.4;
+export const TRACK_CAMERA_PADDING = metersToSimUnits(120);
+export const SHOW_ALL_PADDING = 520;
+export const SHOW_ALL_TOP_RESERVED = 92;
+export const SHOW_ALL_BOTTOM_RESERVED = 132;
+export const PIT_CAMERA_PADDING = metersToSimUnits(34);
+export const CAR_WORLD_LENGTH = VEHICLE_GEOMETRY.visualLength;

package/src/app/camera/cameraController.js

@@ -0,0 +1,265 @@
+import { WORLD } from '../../simulation/trackModel.js';
+import { clamp } from '../../simulation/simMath.js';
+import {
+  CAMERA_PRESETS,
+  CAMERA_SCALE_LERP,
+  CAMERA_TARGET_LERP,
+  CAMERA_ZOOM_STEP,
+  CAMERA_MIN_ZOOM,
+  CAMERA_MAX_ZOOM,
+} from './cameraConstants.js';
+import {
+  clampCameraScale,
+  getCameraBoundsFitScale,
+  getPitCameraBounds,
+  getPitCameraFrame,
+  getPitCameraTarget,
+  getShowAllCameraFrame,
+  getTrackCameraBounds,
+  getTrackCameraTarget,
+} from './cameraGeometry.js';
+
+export function createCameraState(initialCameraMode) {
+  return {
+    mode: initialCameraMode,
+    zoom: CAMERA_PRESETS[initialCameraMode] ?? CAMERA_PRESETS.leader,
+    scale: null,
+    initialized: false,
+    x: WORLD.width / 2,
+    y: WORLD.height / 2,
+    free: false,
+    freeTarget: null,
+  };
+}
+
+export class CameraController {
+  constructor({ canvasHost, readouts, initialMode }) {
+    this.canvasHost = canvasHost;
+    this.readouts = readouts;
+    this.camera = createCameraState(initialMode);
+    this.safeAreaCache = null;
+    this.pitBoundsCache = null;
+    this.trackBoundsCache = null;
+  }
+
+  setMode(mode, snapshot) {
+    if (!this.isModeAvailable(mode, snapshot)) return false;
+    this.camera.mode = mode;
+    this.camera.free = false;
+    this.camera.freeTarget = null;
+    if (CAMERA_PRESETS[this.camera.mode]) this.camera.zoom = CAMERA_PRESETS[this.camera.mode];
+    return true;
+  }
+
+  adjustZoom(direction) {
+    const steps = Number.isFinite(Number(direction)) ? Number(direction) : 0;
+    this.camera.zoom = clamp(this.camera.zoom + steps * CAMERA_ZOOM_STEP, CAMERA_MIN_ZOOM, CAMERA_MAX_ZOOM);
+    return this.camera.zoom;
+  }
+
+  invalidateSafeArea() {
+    this.safeAreaCache = null;
+  }
+
+  invalidateTrackCaches() {
+    this.pitBoundsCache = null;
+    this.trackBoundsCache = null;
+  }
+
+  getSafeArea(width) {
+    if (this.safeAreaCache?.width === width) {
+      return this.safeAreaCache.safeArea;
+    }
+
+    const canvasRect = this.canvasHost?.getBoundingClientRect?.();
+    const towerRect = this.readouts?.timingTower?.getBoundingClientRect?.();
+    if (!canvasRect || !towerRect) {
+      const safeArea = { left: 0, width };
+      this.safeAreaCache = { width, safeArea };
+      return safeArea;
+    }
+    const overlapsCanvasHorizontally = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
+    const hasVerticalBounds = Number.isFinite(canvasRect.top) &&
+      Number.isFinite(canvasRect.bottom) &&
+      Number.isFinite(towerRect.top) &&
+      Number.isFinite(towerRect.bottom);
+    const overlapsCanvasVertically = !hasVerticalBounds ||
+      (towerRect.bottom > canvasRect.top && towerRect.top < canvasRect.bottom);
+    const canvasWidth = Math.max(1, canvasRect.right - canvasRect.left || width);
+    const towerWidth = Math.max(0, towerRect.right - towerRect.left);
+    const isSideGutter = towerWidth < canvasWidth * 0.6;
+    if (!overlapsCanvasHorizontally || !overlapsCanvasVertically || !isSideGutter) {
+      const safeArea = { left: 0, width };
+      this.safeAreaCache = { width, safeArea };
+      return safeArea;
+    }
+
+    const overlayGap = 16;
+    const reservedLeft = clamp(towerRect.right - canvasRect.left + overlayGap, 0, width * 0.48);
+    const safeArea = {
+      left: reservedLeft,
+      width: Math.max(1, width - reservedLeft),
+    };
+    this.safeAreaCache = { width, safeArea };
+    return safeArea;
+  }
+
+  getTrackBounds(track) {
+    if (this.trackBoundsCache && this.trackBoundsCache.track === track) {
+      return this.trackBoundsCache.bounds;
+    }
+    const bounds = getTrackCameraBounds(track);
+    this.trackBoundsCache = { track, bounds };
+    return bounds;
+  }
+
+  getTrackTarget(track) {
+    return getTrackCameraTarget(this.getTrackBounds(track));
+  }
+
+  getBoundsFitScale(bounds, height, safeArea) {
+    return getCameraBoundsFitScale(bounds, height, safeArea);
+  }
+
+  getPitBounds(pitLane) {
+    if (this.pitBoundsCache && this.pitBoundsCache.pitLane === pitLane) return this.pitBoundsCache.bounds;
+    const bounds = getPitCameraBounds(pitLane);
+    this.pitBoundsCache = { pitLane, bounds };
+    return bounds;
+  }
+
+  getPitTarget(pitLane) {
+    return getPitCameraTarget(this.getPitBounds(pitLane));
+  }
+
+  getPitFrame(pitLane, height, baseScale, safeArea, screenCenterX, minimumScale = null) {
+    return getPitCameraFrame({
+      pitBounds: this.getPitBounds(pitLane),
+      cameraZoom: this.camera.zoom,
+      height,
+      baseScale,
+      safeArea,
+      screenCenterX,
+      minimumScale,
+    });
+  }
+
+  hasPitCamera(snapshot) {
+    return Boolean(snapshot?.track?.pitLane?.enabled);
+  }
+
+  isModeAvailable(mode, snapshot) {
+    return mode !== 'pit' || this.hasPitCamera(snapshot);
+  }
+
+  getFrame(snapshot, width, height, baseScale, safeArea = { left: 0, width }, selectedId = null) {
+    const screenCenterX = safeArea.left + safeArea.width / 2;
+    const trackBounds = this.getTrackBounds(snapshot.track);
+    const trackFitScale = this.getBoundsFitScale(trackBounds, height, safeArea);
+
+    if (this.camera.mode === 'overview') {
+      const target = trackBounds
+        ? {
+            x: (trackBounds.minX + trackBounds.maxX) / 2,
+            y: (trackBounds.minY + trackBounds.maxY) / 2,
+          }
+        : { x: WORLD.width / 2, y: WORLD.height / 2 };
+
+      const scale = trackFitScale
+        ? clampCameraScale(trackFitScale * this.camera.zoom, trackFitScale, trackFitScale)
+        : clampCameraScale(baseScale * this.camera.zoom, baseScale);
+
+      return this.applyFreeFrame({
+        target,
+        scale,
+        screenX: screenCenterX,
+        screenY: height / 2,
+      });
+    }
+
+    if (this.camera.mode === 'show-all') {
+      return this.applyFreeFrame(getShowAllCameraFrame({
+        cars: snapshot.cars,
+        cameraZoom: this.camera.zoom,
+        height,
+        safeArea,
+        screenCenterX,
+        trackFitScale,
+      }));
+    }
+
+    if (this.camera.mode === 'pit' && this.hasPitCamera(snapshot)) {
+      return this.applyFreeFrame(
+        this.getPitFrame(snapshot.track.pitLane, height, baseScale, safeArea, screenCenterX, trackFitScale),
+      );
+    }
+
+    return this.applyFreeFrame({
+      target: this.getTarget(snapshot, selectedId),
+      scale: clampCameraScale(baseScale * this.camera.zoom, baseScale, trackFitScale),
+      screenX: screenCenterX,
+      screenY: height / 2,
+    });
+  }
+
+  applyFreeFrame(frame) {
+    if (!this.camera.free || !this.camera.freeTarget) return frame;
+    return {
+      ...frame,
+      target: this.camera.freeTarget,
+    };
+  }
+
+  getTarget(snapshot, selectedId = null) {
+    if (this.camera.free && this.camera.freeTarget) return this.camera.freeTarget;
+    if (this.camera.mode === 'overview') return this.getTrackTarget(snapshot.track);
+
+    if (this.camera.mode === 'pit' && this.hasPitCamera(snapshot)) {
+      return this.getPitTarget(snapshot.track.pitLane);
+    }
+
+    if (this.camera.mode === 'selected') {
+      const selected = snapshot.cars.find((car) => car.id === selectedId);
+      if (selected) return selected;
+    }
+
+    const leader = snapshot.cars[0];
+    return leader ? { x: leader.x, y: leader.y } : { x: WORLD.width / 2, y: WORLD.height / 2 };
+  }
+
+  getBaseScale() {
+    const width = this.canvasHost.clientWidth || 900;
+    const height = this.canvasHost.clientHeight || 640;
+    const safeArea = this.getSafeArea(width);
+    return Math.min(safeArea.width / (WORLD.width + 260), height / (WORLD.height + 220));
+  }
+
+  applyToWorldLayer(worldLayer, snapshot, { immediate = false, selectedId = null } = {}) {
+    if (!worldLayer) return;
+
+    const width = this.canvasHost.clientWidth || 900;
+    const height = this.canvasHost.clientHeight || 640;
+    const safeArea = this.getSafeArea(width);
+    const baseScale = Math.min(safeArea.width / (WORLD.width + 260), height / (WORLD.height + 220));
+    const frame = this.getFrame(snapshot, width, height, baseScale, safeArea, selectedId);
+    const scale = frame.scale;
+    const target = frame.target;
+    const snapCamera = immediate || !this.camera.initialized;
+    this.camera.x = snapCamera
+      ? target.x
+      : this.camera.x + (target.x - this.camera.x) * CAMERA_TARGET_LERP;
+    this.camera.y = snapCamera
+      ? target.y
+      : this.camera.y + (target.y - this.camera.y) * CAMERA_TARGET_LERP;
+    const activeScale = snapCamera || this.camera.scale === null
+      ? scale
+      : this.camera.scale + (scale - this.camera.scale) * CAMERA_SCALE_LERP;
+    this.camera.initialized = true;
+    this.camera.scale = activeScale;
+    worldLayer.scale.set(activeScale);
+    worldLayer.position.set(
+      frame.screenX - this.camera.x * activeScale,
+      frame.screenY - this.camera.y * activeScale,
+    );
+  }
+}