// Scales a fixed 1920x1080 canvas to fit viewport, centered, letterboxed.

function ScaleStage({ children, w = 1920, h = 1080, bg = "#000" }) {
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const onR = () => {
      const s = Math.min(window.innerWidth / w, window.innerHeight / h);
      setScale(s);
    };
    onR();
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, [w, h]);
  return (
    <div style={{
      position: "fixed", inset: 0, background: bg, overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: "50%", left: "50%",
        width: w, height: h,
        transform: `translate(-50%, -50%) scale(${scale})`,
        transformOrigin: "center center",
      }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { ScaleStage });