@al8b/screen 0.1.0

package/dist/drawing/text-screen.mjs

@@ -0,0 +1,884 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/drawing/sprite-screen.ts
+import { APIErrorCode as APIErrorCode3, reportRuntimeError as reportRuntimeError3 } from "@al8b/diagnostics";
+
+// src/drawing/primitives-screen.ts
+import { APIErrorCode as APIErrorCode2, reportRuntimeError as reportRuntimeError2 } from "@al8b/diagnostics";
+
+// src/core/base-screen.ts
+import { APIErrorCode, createDiagnostic, formatForBrowser, reportRuntimeError } from "@al8b/diagnostics";
+
+// src/tri/ttri.ts
+var ZBuffer = class {
+  static {
+    __name(this, "ZBuffer");
+  }
+  buffer;
+  width;
+  height;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.buffer = new Float32Array(width * height);
+  }
+  clear() {
+    this.buffer.fill(0);
+  }
+  get(x, y) {
+    return this.buffer[y * this.width + x] || 0;
+  }
+  set(x, y, z) {
+    this.buffer[y * this.width + x] = z;
+  }
+  resize(width, height) {
+    if (this.width !== width || this.height !== height) {
+      this.width = width;
+      this.height = height;
+      this.buffer = new Float32Array(width * height);
+    }
+  }
+};
+
+// src/core/base-screen.ts
+var BaseScreen = class {
+  static {
+    __name(this, "BaseScreen");
+  }
+  canvas;
+  context;
+  runtime;
+  width;
+  height;
+  // Drawing state
+  alpha = 1;
+  pixelated = 1;
+  line_width = 1;
+  font = "BitCell";
+  // Transformations
+  translation_x = 0;
+  translation_y = 0;
+  rotation = 0;
+  scale_x = 1;
+  scale_y = 1;
+  screen_transform = false;
+  // Object transformations
+  object_rotation = 0;
+  object_scale_x = 1;
+  object_scale_y = 1;
+  anchor_x = 0;
+  anchor_y = 0;
+  // Blending + font caches
+  blending = {};
+  font_load_requested = {};
+  font_loaded = {};
+  // Interface cache
+  interfaceCache = null;
+  // Cursor management
+  cursor = "default";
+  cursor_visibility = "auto";
+  last_mouse_move = Date.now();
+  // 3D helper
+  zBuffer;
+  constructor(options = {}) {
+    this.runtime = options.runtime;
+    if (options.canvas) {
+      this.canvas = options.canvas;
+      if (this.canvas.width === 0 || this.canvas.height === 0) {
+        this.canvas.width = options.width || 1080;
+        this.canvas.height = options.height || 1920;
+      }
+    } else {
+      this.canvas = document.createElement("canvas");
+      this.canvas.width = options.width || 1080;
+      this.canvas.height = options.height || 1920;
+    }
+    this.initContext();
+    this.blending = {
+      normal: "source-over",
+      additive: "lighter"
+    };
+    const blendModes = [
+      "source-over",
+      "source-in",
+      "source-out",
+      "source-atop",
+      "destination-over",
+      "destination-in",
+      "destination-out",
+      "destination-atop",
+      "lighter",
+      "copy",
+      "xor",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity"
+    ];
+    for (const mode of blendModes) {
+      this.blending[mode] = mode;
+    }
+    this.loadFont(this.font);
+    this.zBuffer = new ZBuffer(this.canvas.width, this.canvas.height);
+    this.cursor = "default";
+    this.canvas.addEventListener("mousemove", () => {
+      this.last_mouse_move = Date.now();
+      if (this.cursor !== "default" && this.cursor_visibility === "auto") {
+        this.cursor = "default";
+        this.canvas.style.cursor = "default";
+      }
+    });
+    this.canvas.addEventListener("contextrestored", () => {
+      this.initContext();
+    });
+    setInterval(() => this.checkMouseCursor(), 1e3);
+    this.cursor_visibility = "auto";
+  }
+  initContext() {
+    const ctx = this.canvas.getContext("2d", {
+      alpha: false
+    });
+    if (!ctx) {
+      const diagnostic = createDiagnostic(APIErrorCode.E7001);
+      const formatted = formatForBrowser(diagnostic);
+      reportRuntimeError(this.runtime?.listener, APIErrorCode.E7001, {});
+      throw new Error(formatted);
+    }
+    if (ctx !== this.context) {
+      this.context = ctx;
+    } else {
+      this.context.restore();
+    }
+    this.context.save();
+    this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
+    const ratio = Math.min(this.canvas.width / 200, this.canvas.height / 200);
+    this.context.scale(ratio, ratio);
+    this.width = this.canvas.width / ratio;
+    this.height = this.canvas.height / ratio;
+    this.context.lineCap = "round";
+  }
+  /**
+  * Initialize draw state (called before each draw frame)
+  */
+  initDraw() {
+    this.alpha = 1;
+    this.line_width = 1;
+  }
+  /**
+  * Update interface dimensions (called before each draw frame)
+  */
+  updateInterface() {
+    if (this.interfaceCache) {
+      this.interfaceCache.width = this.width;
+      this.interfaceCache.height = this.height;
+    }
+  }
+  clear(color) {
+    this.context.globalAlpha = 1;
+    this.context.globalCompositeOperation = "source-over";
+    this.context.fillStyle = color || "#000";
+    this.context.strokeStyle = color || "#000";
+    this.context.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
+    this.zBuffer.clear();
+  }
+  setColor(color) {
+    if (!color) return;
+    if (!Number.isNaN(Number.parseInt(String(color)))) {
+      const num = Number.parseInt(String(color));
+      const r = Math.floor(num / 100) % 10 / 9 * 255;
+      const g = Math.floor(num / 10) % 10 / 9 * 255;
+      const b = num % 10 / 9 * 255;
+      const c = 4278190080 + (r << 16) + (g << 8) + b;
+      const hex = "#" + c.toString(16).substring(2, 8);
+      this.context.fillStyle = hex;
+      this.context.strokeStyle = hex;
+    } else if (typeof color === "string") {
+      const isValidColor = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color) || /^rgb\(|^rgba\(|^hsl\(|^hsla\(/.test(color) || /^(red|green|blue|yellow|cyan|magenta|black|white|gray|grey|orange|pink|purple|brown|transparent)$/i.test(color);
+      if (!isValidColor) {
+        reportRuntimeError(this.runtime?.listener, APIErrorCode.E7003, {
+          color
+        });
+        return;
+      }
+      this.context.fillStyle = color;
+      this.context.strokeStyle = color;
+    }
+  }
+  setAlpha(alpha) {
+    this.alpha = alpha;
+  }
+  setPixelated(pixelated) {
+    this.pixelated = pixelated;
+  }
+  setBlending(blending) {
+    const blend = this.blending[blending || "normal"];
+    if (!blend) {
+      reportRuntimeError(this.runtime?.listener, APIErrorCode.E7007, {
+        blendMode: blending
+      });
+      this.context.globalCompositeOperation = "source-over";
+      return;
+    }
+    this.context.globalCompositeOperation = blend;
+  }
+  setLineWidth(width) {
+    this.line_width = width;
+  }
+  setLineDash(dash) {
+    if (!Array.isArray(dash)) {
+      this.context.setLineDash([]);
+    } else {
+      this.context.setLineDash(dash);
+    }
+  }
+  setLinearGradient(x1, y1, x2, y2, c1, c2) {
+    const grd = this.context.createLinearGradient(x1, -y1, x2, -y2);
+    grd.addColorStop(0, c1);
+    grd.addColorStop(1, c2);
+    this.context.fillStyle = grd;
+    this.context.strokeStyle = grd;
+  }
+  setRadialGradient(x, y, radius, c1, c2) {
+    const grd = this.context.createRadialGradient(x, -y, 0, x, -y, radius);
+    grd.addColorStop(0, c1);
+    grd.addColorStop(1, c2);
+    this.context.fillStyle = grd;
+    this.context.strokeStyle = grd;
+  }
+  setFont(font) {
+    this.font = font || "Verdana";
+    this.loadFont(this.font);
+  }
+  loadFont(font = "BitCell") {
+    if (this.font_load_requested[font]) {
+      return;
+    }
+    this.font_load_requested[font] = true;
+    try {
+      document.fonts?.load?.(`16pt ${font}`).catch(() => {
+        reportRuntimeError(this.runtime?.listener, APIErrorCode.E7006, {
+          font
+        });
+      });
+    } catch {
+      reportRuntimeError(this.runtime?.listener, APIErrorCode.E7006, {
+        font
+      });
+    }
+  }
+  isFontReady(font = this.font) {
+    if (this.font_loaded[font]) {
+      return 1;
+    }
+    try {
+      const ready = document.fonts?.check?.(`16pt ${font}`) ?? true;
+      if (ready) {
+        this.font_loaded[font] = true;
+      }
+      return ready ? 1 : 0;
+    } catch {
+      return 1;
+    }
+  }
+  setTranslation(tx, ty) {
+    this.translation_x = isFinite(tx) ? tx : 0;
+    this.translation_y = isFinite(ty) ? ty : 0;
+    this.updateScreenTransform();
+  }
+  setScale(x, y) {
+    this.scale_x = isFinite(x) && x !== 0 ? x : 1;
+    this.scale_y = isFinite(y) && y !== 0 ? y : 1;
+    this.updateScreenTransform();
+  }
+  setRotation(rotation) {
+    this.rotation = isFinite(rotation) ? rotation : 0;
+    this.updateScreenTransform();
+  }
+  updateScreenTransform() {
+    this.screen_transform = this.translation_x !== 0 || this.translation_y !== 0 || this.scale_x !== 1 || this.scale_y !== 1 || this.rotation !== 0;
+  }
+  setDrawAnchor(ax, ay) {
+    this.anchor_x = typeof ax === "number" ? ax : 0;
+    this.anchor_y = typeof ay === "number" ? ay : 0;
+  }
+  setDrawRotation(rotation) {
+    this.object_rotation = rotation;
+  }
+  setDrawScale(x, y = x) {
+    this.object_scale_x = x;
+    this.object_scale_y = y;
+  }
+  initDrawOp(x, y, object_transform = true) {
+    let res = false;
+    if (this.screen_transform) {
+      this.context.save();
+      res = true;
+      this.context.translate(this.translation_x, -this.translation_y);
+      this.context.scale(this.scale_x, this.scale_y);
+      this.context.rotate(-this.rotation / 180 * Math.PI);
+      this.context.translate(x, y);
+    }
+    if (object_transform && (this.object_rotation !== 0 || this.object_scale_x !== 1 || this.object_scale_y !== 1)) {
+      if (!res) {
+        this.context.save();
+        res = true;
+        this.context.translate(x, y);
+      }
+      if (this.object_rotation !== 0) {
+        this.context.rotate(-this.object_rotation / 180 * Math.PI);
+      }
+      if (this.object_scale_x !== 1 || this.object_scale_y !== 1) {
+        this.context.scale(this.object_scale_x, this.object_scale_y);
+      }
+    }
+    return res;
+  }
+  closeDrawOp() {
+    this.context.restore();
+  }
+  /**
+  * Check mouse cursor visibility
+  * Auto-hides cursor after 4 seconds of inactivity
+  */
+  checkMouseCursor() {
+    if (Date.now() > this.last_mouse_move + 4e3 && this.cursor_visibility === "auto") {
+      if (this.cursor !== "none") {
+        this.cursor = "none";
+        this.canvas.style.cursor = "none";
+      }
+    }
+  }
+  /**
+  * Set cursor visibility
+  */
+  setCursorVisible(visible) {
+    this.cursor_visibility = visible ? "default" : "none";
+    if (visible) {
+      this.cursor = "default";
+      this.canvas.style.cursor = "default";
+    } else {
+      this.cursor = "none";
+      this.canvas.style.cursor = "none";
+    }
+  }
+  getCanvas() {
+    return this.canvas;
+  }
+  getContext() {
+    return this.context;
+  }
+  resize(width, height) {
+    if (width && height) {
+      if (width <= 0 || height <= 0 || !isFinite(width) || !isFinite(height)) {
+        reportRuntimeError(this.runtime?.listener, APIErrorCode.E7002, {
+          width,
+          height
+        });
+        return;
+      }
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.initContext();
+      this.zBuffer.resize(width, height);
+      this.updateInterface();
+    }
+  }
+};
+
+// src/drawing/primitives-screen.ts
+var PrimitiveScreen = class extends BaseScreen {
+  static {
+    __name(this, "PrimitiveScreen");
+  }
+  fillRect(x, y, w, h, color) {
+    if (!this.context) {
+      reportRuntimeError2(this.runtime?.listener, APIErrorCode2.E7092, {});
+      return;
+    }
+    if (!isFinite(x) || !isFinite(y) || !isFinite(w) || !isFinite(h) || w <= 0 || h <= 0) {
+      reportRuntimeError2(this.runtime?.listener, APIErrorCode2.E7093, {
+        error: `Invalid parameters: x=${x}, y=${y}, w=${w}, h=${h}`
+      });
+      return;
+    }
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    if (this.initDrawOp(x, -y)) {
+      this.context.fillRect(-w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      this.context.fillRect(x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+  fillRoundRect(x, y, w, h, round = 10, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    const transform = this.initDrawOp(x, -y);
+    const rx = (transform ? -w / 2 : x - w / 2) - this.anchor_x * w / 2;
+    const ry = (transform ? -h / 2 : -y - h / 2) + this.anchor_y * h / 2;
+    this.context.beginPath();
+    if (this.context.roundRect) {
+      this.context.roundRect(rx, ry, w, h, round);
+    } else {
+      const r = Math.min(round, w / 2, h / 2);
+      this.context.moveTo(rx + r, ry);
+      this.context.lineTo(rx + w - r, ry);
+      this.context.quadraticCurveTo(rx + w, ry, rx + w, ry + r);
+      this.context.lineTo(rx + w, ry + h - r);
+      this.context.quadraticCurveTo(rx + w, ry + h, rx + w - r, ry + h);
+      this.context.lineTo(rx + r, ry + h);
+      this.context.quadraticCurveTo(rx, ry + h, rx, ry + h - r);
+      this.context.lineTo(rx, ry + r);
+      this.context.quadraticCurveTo(rx, ry, rx + r, ry);
+      this.context.closePath();
+    }
+    this.context.fill();
+    if (transform) this.closeDrawOp();
+  }
+  fillRound(x, y, w, h, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    w = Math.abs(w);
+    h = Math.abs(h);
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.ellipse(-this.anchor_x * w / 2, this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.fill();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.ellipse(x - this.anchor_x * w / 2, -y + this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.fill();
+    }
+  }
+  drawRect(x, y, w, h, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    if (this.initDrawOp(x, -y)) {
+      this.context.strokeRect(-w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      this.context.strokeRect(x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+  drawRoundRect(x, y, w, h, round = 10, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(x, -y);
+    const rx = (transform ? -w / 2 : x - w / 2) - this.anchor_x * w / 2;
+    const ry = (transform ? -h / 2 : -y - h / 2) + this.anchor_y * h / 2;
+    this.context.beginPath();
+    if (this.context.roundRect) {
+      this.context.roundRect(rx, ry, w, h, round);
+    } else {
+      const r = Math.min(round, w / 2, h / 2);
+      this.context.moveTo(rx + r, ry);
+      this.context.lineTo(rx + w - r, ry);
+      this.context.quadraticCurveTo(rx + w, ry, rx + w, ry + r);
+      this.context.lineTo(rx + w, ry + h - r);
+      this.context.quadraticCurveTo(rx + w, ry + h, rx + w - r, ry + h);
+      this.context.lineTo(rx + r, ry + h);
+      this.context.quadraticCurveTo(rx, ry + h, rx, ry + h - r);
+      this.context.lineTo(rx, ry + r);
+      this.context.quadraticCurveTo(rx, ry, rx + r, ry);
+      this.context.closePath();
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawRound(x, y, w, h, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    w = Math.abs(w);
+    h = Math.abs(h);
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.ellipse(-this.anchor_x * w / 2, this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.stroke();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.ellipse(x - this.anchor_x * w / 2, -y + this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.stroke();
+    }
+  }
+  drawLine(x1, y1, x2, y2, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(x1, -y1);
+    this.context.lineTo(x2, -y2);
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawPolygon(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const len = Math.floor(points.length / 2);
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    for (let i = 1; i < len; i++) {
+      this.context.lineTo(points[i * 2], -points[i * 2 + 1]);
+    }
+    this.context.closePath();
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawPolyline(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const len = Math.floor(points.length / 2);
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    for (let i = 1; i < len; i++) {
+      this.context.lineTo(points[i * 2], -points[i * 2 + 1]);
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  fillPolygon(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    const len = Math.floor(points.length / 2);
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    for (let i = 1; i < len; i++) {
+      this.context.lineTo(points[i * 2], -points[i * 2 + 1]);
+    }
+    this.context.fill();
+    if (transform) this.closeDrawOp();
+  }
+  drawQuadCurve(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    let index = 2;
+    while (index <= points.length - 4) {
+      this.context.quadraticCurveTo(points[index], -points[index + 1], points[index + 2], -points[index + 3]);
+      index += 4;
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawBezierCurve(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    let index = 2;
+    while (index <= points.length - 6) {
+      this.context.bezierCurveTo(points[index], -points[index + 1], points[index + 2], -points[index + 3], points[index + 4], -points[index + 5]);
+      index += 6;
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawArc(x, y, radius, angle1, angle2, ccw, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.arc(0, 0, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.stroke();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.arc(x, -y, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.stroke();
+    }
+  }
+  fillArc(x, y, radius, angle1, angle2, ccw, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.arc(0, 0, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.fill();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.arc(x, -y, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.fill();
+    }
+  }
+  extractPoints(args) {
+    let color;
+    let points;
+    if (args.length > 0 && args.length % 2 === 1 && typeof args[args.length - 1] === "string") {
+      color = args[args.length - 1];
+      points = args.slice(0, -1);
+    } else if (Array.isArray(args[0])) {
+      if (args[1] && typeof args[1] === "string") {
+        color = args[1];
+      }
+      points = args[0];
+    } else {
+      points = args;
+    }
+    return {
+      color,
+      points
+    };
+  }
+};
+
+// src/drawing/sprite-screen.ts
+var SpriteScreen = class extends PrimitiveScreen {
+  static {
+    __name(this, "SpriteScreen");
+  }
+  // Cache imageSmoothingEnabled — only set when pixelated flag changes
+  _lastImageSmoothing = true;
+  // Cache frame time once per draw frame instead of per-sprite
+  _frameTime = 0;
+  /**
+  * Initialize draw state (called before each draw frame)
+  */
+  initDraw() {
+    super.initDraw();
+    this._frameTime = performance.now();
+  }
+  /**
+  * Set imageSmoothingEnabled only when it actually changes
+  */
+  setImageSmoothing() {
+    const smooth = !this.pixelated;
+    if (smooth !== this._lastImageSmoothing) {
+      this.context.imageSmoothingEnabled = smooth;
+      this._lastImageSmoothing = smooth;
+    }
+  }
+  /**
+  * Get the canvas for the current sprite frame
+  */
+  getSpriteFrame(sprite) {
+    let frame = null;
+    if (typeof sprite === "string") {
+      const spriteName = sprite;
+      let spriteObj2 = null;
+      if (this.runtime && this.runtime.sprites) {
+        spriteObj2 = this.runtime.sprites[sprite];
+      }
+      if (!spriteObj2) {
+        const parts = sprite.split(".");
+        if (parts.length > 1 && this.runtime && this.runtime.sprites) {
+          spriteObj2 = this.runtime.sprites[parts[0]];
+          frame = Number.parseInt(parts[1]) || 0;
+        }
+      }
+      if (!spriteObj2) {
+        reportRuntimeError3(this.runtime?.listener, APIErrorCode3.E7004, {
+          spriteName
+        });
+        return null;
+      }
+      sprite = spriteObj2;
+    } else if (sprite && typeof sprite === "object" && sprite.canvas && !sprite.frames) {
+      return sprite.canvas || sprite.image || null;
+    }
+    if (!sprite || !sprite.ready) {
+      const spriteName = typeof sprite === "string" ? sprite : "unknown";
+      reportRuntimeError3(this.runtime?.listener, APIErrorCode3.E7005, {
+        spriteName
+      });
+      return null;
+    }
+    const spriteObj = sprite;
+    if (spriteObj.frames && spriteObj.frames.length > 1) {
+      if (frame === null) {
+        if (spriteObj.animation_start === 0) {
+          spriteObj.animation_start = this._frameTime;
+        }
+        const dt = 1e3 / spriteObj.fps;
+        frame = Math.floor((this._frameTime - spriteObj.animation_start) / dt) % spriteObj.frames.length;
+      }
+      if (frame >= 0 && frame < spriteObj.frames.length) {
+        return spriteObj.frames[frame].canvas;
+      }
+      return spriteObj.frames[0].canvas;
+    } else if (spriteObj.frames && spriteObj.frames[0]) {
+      return spriteObj.frames[0].canvas;
+    }
+    return null;
+  }
+  /**
+  * Draw a sprite
+  */
+  drawSprite(sprite, x, y, w, h) {
+    const canvas = this.getSpriteFrame(sprite);
+    if (!canvas) return;
+    if (w == null) {
+      w = canvas.width;
+    }
+    if (!h) {
+      h = w / canvas.width * canvas.height;
+    }
+    if (!this.screen_transform && this.object_rotation === 0 && this.object_scale_x === 1 && this.object_scale_y === 1) {
+      const drawX = x - w / 2 - this.anchor_x * w / 2;
+      const drawY = -y - h / 2 + this.anchor_y * h / 2;
+      const halfW = this.width / 2;
+      const halfH = this.height / 2;
+      if (drawX > halfW || drawX + w < -halfW || drawY > halfH || drawY + h < -halfH) {
+        return;
+      }
+    }
+    this.context.globalAlpha = this.alpha;
+    this.setImageSmoothing();
+    if (this.initDrawOp(x, -y)) {
+      this.context.drawImage(canvas, -w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      this.context.drawImage(canvas, x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+  /**
+  * Draw a portion of a sprite
+  */
+  drawSpritePart(sprite, sx, sy, sw, sh, x, y, w, h) {
+    const canvas = this.getSpriteFrame(sprite);
+    if (!canvas) return;
+    if (w == null) {
+      w = sw;
+    }
+    if (!h) {
+      h = w / sw * sh;
+    }
+    if (!this.screen_transform && this.object_rotation === 0 && this.object_scale_x === 1 && this.object_scale_y === 1) {
+      const drawX = x - w / 2 - this.anchor_x * w / 2;
+      const drawY = -y - h / 2 + this.anchor_y * h / 2;
+      const halfW = this.width / 2;
+      const halfH = this.height / 2;
+      if (drawX > halfW || drawX + w < -halfW || drawY > halfH || drawY + h < -halfH) {
+        return;
+      }
+    }
+    this.context.globalAlpha = this.alpha;
+    this.setImageSmoothing();
+    if (this.initDrawOp(x, -y)) {
+      this.context.drawImage(canvas, sx, sy, sw, sh, -w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      this.context.drawImage(canvas, sx, sy, sw, sh, x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+  /**
+  * Draw a map
+  */
+  drawMap(map, x, y, w, h) {
+    let mapObj = null;
+    if (typeof map === "string") {
+      if (this.runtime && this.runtime.maps) {
+        mapObj = this.runtime.maps[map];
+      }
+    } else {
+      mapObj = map;
+    }
+    if (!(mapObj && mapObj.ready)) {
+      return;
+    }
+    this.context.globalAlpha = this.alpha;
+    this.setImageSmoothing();
+    if (this.initDrawOp(x, -y)) {
+      mapObj.draw(this.context, -w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      mapObj.draw(this.context, x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+};
+
+// src/drawing/text-screen.ts
+var TextScreen = class extends SpriteScreen {
+  static {
+    __name(this, "TextScreen");
+  }
+  // Font string cache — avoid rebuilding template string every draw call
+  _cachedFontSize = -1;
+  _cachedFontName = "";
+  _cachedFontString = "";
+  getFontString(size) {
+    if (size !== this._cachedFontSize || this.font !== this._cachedFontName) {
+      this._cachedFontSize = size;
+      this._cachedFontName = this.font;
+      this._cachedFontString = `${size}pt ${this.font}`;
+    }
+    return this._cachedFontString;
+  }
+  textWidth(text, size) {
+    this.context.font = this.getFontString(size);
+    return this.context.measureText(text).width;
+  }
+  drawText(text, x, y, size, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.font = this.getFontString(size);
+    this.context.textAlign = "center";
+    this.context.textBaseline = "middle";
+    const w = this.context.measureText(text).width;
+    const h = size;
+    if (this.initDrawOp(x, -y)) {
+      this.context.fillText(text, 0 - this.anchor_x * w / 2, 0 + this.anchor_y * h / 2);
+      this.closeDrawOp();
+    } else {
+      this.context.fillText(text, x - this.anchor_x * w / 2, -y + this.anchor_y * h / 2);
+    }
+  }
+  drawTextOutline(text, x, y, size, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.font = this.getFontString(size);
+    this.context.lineWidth = this.line_width;
+    this.context.textAlign = "center";
+    this.context.textBaseline = "middle";
+    const w = this.context.measureText(text).width;
+    const h = size;
+    if (this.initDrawOp(x, -y)) {
+      this.context.strokeText(text, 0 - this.anchor_x * w / 2, 0 + this.anchor_y * h / 2);
+      this.closeDrawOp();
+    } else {
+      this.context.strokeText(text, x - this.anchor_x * w / 2, -y + this.anchor_y * h / 2);
+    }
+  }
+};
+export {
+  TextScreen
+};
+//# sourceMappingURL=text-screen.mjs.map