import * as Phaser from "phaser";
import { computeUiLayout } from "../../utils/UiLayout";
import { GameConfig } from "../../GameConfig";

/**
 * 底部 UI 区设计高度（dp），与 `GameConfig.GAME_BOTTOM_UI_BAR_HEIGHT` 同源，
 * 供棋盘布局、输入边界与本条同时引用，避免魔法数漂移。
 */
export const GAME_BOTTOM_UI_BAR_HEIGHT = GameConfig.GAME_BOTTOM_UI_BAR_HEIGHT;

/**
 * 底部 UI 条占位容器：保留与 `GameConfig` 一致的垂直占位，便于与 `BoardLayout` 扣减对齐。
 * 可扩展为品牌条、次要 CTA；默认仅透明占位（不占视觉焦点）。
 */
export class GameBottomUI extends Phaser.GameObjects.Container {
  constructor(scene: Phaser.Scene) {
    super(scene);
    scene.add.existing(this);
    this.setDepth(500);

    const { width, height, vScale } = computeUiLayout(scene);
    const barH = GAME_BOTTOM_UI_BAR_HEIGHT * vScale;
    const cy = height - barH / 2;
    const bg = scene.add.rectangle(width / 2, cy, width, barH, 0x000000, 0);
    this.add(bg);
  }
}