9. Сцена уровня: нижняя панель вертикально, левая панель горизонтально

Сцена игрового процесса — самая важная часть.

В LevelPanelComponent панель использует такие размеры:

• вертикальная ориентация: полная ширина и 33% высоты;
• горизонтальная ориентация: 33% ширины и полная высота.

const panelHeight = orientation === 'port'
  ? Math.max(1, Math.round(screen.height * LevelPanelLayoutMetrics.PANEL_HEIGHT_RATIO))
  : Math.max(1, Math.round(screen.height));

const panelWidth = orientation === 'port'
  ? Math.max(1, Math.round(screen.width))
  : Math.max(1, Math.round(screen.width * LevelPanelLayoutMetrics.PANEL_WIDTH_RATIO));

Это не просто изменение размера. Меняется модель компоновки.

Почему:

• на вертикальном мобильном экране нижнюю панель альбома проще читать и использовать;
• на компьютере и широком горизонтальном экране левая вертикальная панель лучше использует ширину;
• игровое поле получает больше полезного пространства;
• предпросмотр альбома остаётся достаточно крупным.

Размерные параметры хранятся отдельно:

export class LevelPanelLayoutMetrics {
  static readonly PANEL_HEIGHT_RATIO = 0.33;
  static readonly PANEL_WIDTH_RATIO = 0.33;
  static readonly ARTWORK_HEIGHT_RATIO = 0.9;
  static readonly ARTWORK_WIDTH_RATIO = 0.9;
}

Так пропорции UX удобно настраивать.

10. У графики внутри панели свои правила

LevelPanelArtworkComponent вписывает изображение альбома в панель.

В вертикальной ориентации размер зависит от высоты панели:

const artworkWidth = orientation === 'port'
  ? Math.max(
      1,
      Math.round(textureWidth * ((panelHeight * LevelPanelLayoutMetrics.ARTWORK_HEIGHT_RATIO) / textureHeight)),
    )
  : Math.max(1, Math.round(panelWidth * LevelPanelLayoutMetrics.ARTWORK_WIDTH_RATIO));

В горизонтальной ориентации размер зависит от ширины панели.

Поэтому «просто масштабировать по ширине экрана» недостаточно. Изображение находится внутри UI-контейнера, а форма этого контейнера меняется.