/**
 * 大屏按 21:9 设计基准做等比缩放，使整页在任意窗口内「完整塞进一屏」。
 * 设计宽固定为 1920，设计高 = 宽 × 9 ÷ 21。
 */

/** 设计稿宽度（像素） */
export const DESIGN_WIDTH = 1920

/** 设计稿高度：21:9 即 高 = 宽 × 9 / 21 */
export const DESIGN_HEIGHT = (DESIGN_WIDTH * 9) / 21

/**
 * 根据当前窗口算出缩放比例，写进根元素的 CSS 变量 --screen-scale
 * @param {HTMLElement} root 包住舞台的节点（一般占满视口）
 * @returns {function} 取消监听用的函数，在组件卸载时调用
 */
export function bindScreenScale(root, onScaleChange) {
  function update() {
    if (!root) {
      return
    }
    const sx = window.innerWidth / DESIGN_WIDTH
    const sy = window.innerHeight / DESIGN_HEIGHT
    const scale = Math.min(sx, sy)
    root.style.setProperty("--screen-scale", String(scale))
    if (typeof onScaleChange === "function") {
      requestAnimationFrame(() => onScaleChange(scale))
    }
  }
  update()
  window.addEventListener("resize", update)
  return function unbind() {
    window.removeEventListener("resize", update)
  }
}
