@al8b/screen 0.1.0

package/dist/tri/triangle-screen.js

@@ -0,0 +1,1147 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tri/triangle-screen.ts
+var triangle_screen_exports = {};
+__export(triangle_screen_exports, {
+  TriangleScreen: () => TriangleScreen
+});
+module.exports = __toCommonJS(triangle_screen_exports);
+
+// src/drawing/sprite-screen.ts
+var import_diagnostics3 = require("@al8b/diagnostics");
+
+// src/drawing/primitives-screen.ts
+var import_diagnostics2 = require("@al8b/diagnostics");
+
+// src/core/base-screen.ts
+var import_diagnostics = require("@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);
+    }
+  }
+};
+function edgeFn(a, b, c) {
+  return (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+}
+__name(edgeFn, "edgeFn");
+function getSpritePixel(sprite, u, v, runtime) {
+  let canvas = null;
+  if (sprite && typeof sprite === "object" && sprite.canvas) {
+    canvas = sprite.canvas;
+  } else if (typeof sprite === "string" && runtime?.sprites) {
+    const spriteObj = runtime.sprites[sprite];
+    if (spriteObj?.frames?.[0]?.canvas) {
+      canvas = spriteObj.frames[0].canvas;
+    }
+  }
+  if (!canvas) return null;
+  const width = canvas.width;
+  const height = canvas.height;
+  const x = Math.floor(u) % width;
+  const y = Math.floor(v) % height;
+  const px = x < 0 ? x + width : x;
+  const py = y < 0 ? y + height : y;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  try {
+    const imageData = ctx.getImageData(px, py, 1, 1);
+    return {
+      r: imageData.data[0],
+      g: imageData.data[1],
+      b: imageData.data[2],
+      a: imageData.data[3]
+    };
+  } catch (e) {
+    return null;
+  }
+}
+__name(getSpritePixel, "getSpritePixel");
+function getMapPixel(map, u, v, runtime) {
+  let mapObj = null;
+  if (map && typeof map === "object" && map.getCanvas) {
+    mapObj = map;
+  } else if (typeof map === "string" && runtime?.maps) {
+    mapObj = runtime.maps[map];
+  }
+  if (!mapObj) return null;
+  const canvas = mapObj.getCanvas ? mapObj.getCanvas() : mapObj.canvas;
+  if (!canvas) return null;
+  const width = canvas.width;
+  const height = canvas.height;
+  const x = Math.floor(u) % width;
+  const y = Math.floor(v) % height;
+  const px = x < 0 ? x + width : x;
+  const py = y < 0 ? y + height : y;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  try {
+    const imageData = ctx.getImageData(px, py, 1, 1);
+    return {
+      r: imageData.data[0],
+      g: imageData.data[1],
+      b: imageData.data[2],
+      a: imageData.data[3]
+    };
+  } catch (e) {
+    return null;
+  }
+}
+__name(getMapPixel, "getMapPixel");
+function drawTexturedTriangle(data, v0, v1, v2, texture, textureSource = "tiles", zBuffer, useDepth = false) {
+  const { context, width, height, runtime, pixelated } = data;
+  const minX = Math.max(0, Math.floor(Math.min(v0.x, v1.x, v2.x)));
+  const minY = Math.max(0, Math.floor(Math.min(v0.y, v1.y, v2.y)));
+  const maxX = Math.min(width, Math.ceil(Math.max(v0.x, v1.x, v2.x)));
+  const maxY = Math.min(height, Math.ceil(Math.max(v0.y, v1.y, v2.y)));
+  if (minX >= maxX || minY >= maxY) return;
+  const area = edgeFn(v0, v1, v2);
+  if (Math.abs(area) < 1e-3) return;
+  if (area < 0) return;
+  const useZ = useDepth && v0.z > 0 && v1.z > 0 && v2.z > 0;
+  let w0 = 1, w1 = 1, w2 = 1;
+  let u0 = v0.u, u1 = v1.u, u2 = v2.u;
+  let v0v = v0.v, v1v = v1.v, v2v = v2.v;
+  if (useZ) {
+    w0 = 1 / v0.z;
+    w1 = 1 / v1.z;
+    w2 = 1 / v2.z;
+    u0 *= w0;
+    u1 *= w1;
+    u2 *= w2;
+    v0v *= w0;
+    v1v *= w1;
+    v2v *= w2;
+  }
+  const imageData = context.getImageData(minX, minY, maxX - minX, maxY - minY);
+  const pixels = imageData.data;
+  for (let y = minY; y < maxY; y++) {
+    for (let x = minX; x < maxX; x++) {
+      const p = {
+        x: x + 0.5,
+        y: y + 0.5
+      };
+      const w0b = edgeFn(v1, v2, p);
+      const w1b = edgeFn(v2, v0, p);
+      const w2b = edgeFn(v0, v1, p);
+      if (w0b >= 0 && w1b >= 0 && w2b >= 0) {
+        const bary0 = w0b / area;
+        const bary1 = w1b / area;
+        const bary2 = w2b / area;
+        if (useZ && zBuffer) {
+          const z = bary0 * v0.z + bary1 * v1.z + bary2 * v2.z;
+          const currentZ = zBuffer.get(x, y);
+          if (currentZ > 0 && currentZ >= z) continue;
+          zBuffer.set(x, y, z);
+        }
+        let u, v;
+        if (useZ) {
+          const w = bary0 * w0 + bary1 * w1 + bary2 * w2;
+          u = (bary0 * u0 + bary1 * u1 + bary2 * u2) / w;
+          v = (bary0 * v0v + bary1 * v1v + bary2 * v2v) / w;
+        } else {
+          u = bary0 * v0.u + bary1 * v1.u + bary2 * v2.u;
+          v = bary0 * v0.v + bary1 * v1.v + bary2 * v2.v;
+        }
+        let pixel = null;
+        if (textureSource === "map") {
+          pixel = getMapPixel(texture, u, v, runtime);
+        } else {
+          pixel = getSpritePixel(texture, u, v, runtime);
+        }
+        if (pixel && pixel.a > 0) {
+          const idx = ((y - minY) * (maxX - minX) + (x - minX)) * 4;
+          pixels[idx] = pixel.r;
+          pixels[idx + 1] = pixel.g;
+          pixels[idx + 2] = pixel.b;
+          pixels[idx + 3] = pixel.a;
+        }
+      }
+    }
+  }
+  context.imageSmoothingEnabled = !pixelated;
+  context.putImageData(imageData, minX, minY);
+}
+__name(drawTexturedTriangle, "drawTexturedTriangle");
+function drawTriangle(context, v0, v1, v2, color) {
+  context.fillStyle = color;
+  context.beginPath();
+  context.moveTo(v0.x, v0.y);
+  context.lineTo(v1.x, v1.y);
+  context.lineTo(v2.x, v2.y);
+  context.closePath();
+  context.fill();
+}
+__name(drawTriangle, "drawTriangle");
+function drawTriangleOutline(context, v0, v1, v2, color, lineWidth = 1) {
+  context.strokeStyle = color;
+  context.lineWidth = lineWidth;
+  context.beginPath();
+  context.moveTo(v0.x, v0.y);
+  context.lineTo(v1.x, v1.y);
+  context.lineTo(v2.x, v2.y);
+  context.closePath();
+  context.stroke();
+}
+__name(drawTriangleOutline, "drawTriangleOutline");
+
+// 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 = (0, import_diagnostics.createDiagnostic)(import_diagnostics.APIErrorCode.E7001);
+      const formatted = (0, import_diagnostics.formatForBrowser)(diagnostic);
+      (0, import_diagnostics.reportRuntimeError)(this.runtime?.listener, import_diagnostics.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) {
+        (0, import_diagnostics.reportRuntimeError)(this.runtime?.listener, import_diagnostics.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) {
+      (0, import_diagnostics.reportRuntimeError)(this.runtime?.listener, import_diagnostics.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(() => {
+        (0, import_diagnostics.reportRuntimeError)(this.runtime?.listener, import_diagnostics.APIErrorCode.E7006, {
+          font
+        });
+      });
+    } catch {
+      (0, import_diagnostics.reportRuntimeError)(this.runtime?.listener, import_diagnostics.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)) {
+        (0, import_diagnostics.reportRuntimeError)(this.runtime?.listener, import_diagnostics.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) {
+      (0, import_diagnostics2.reportRuntimeError)(this.runtime?.listener, import_diagnostics2.APIErrorCode.E7092, {});
+      return;
+    }
+    if (!isFinite(x) || !isFinite(y) || !isFinite(w) || !isFinite(h) || w <= 0 || h <= 0) {
+      (0, import_diagnostics2.reportRuntimeError)(this.runtime?.listener, import_diagnostics2.APIErrorCode.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) {
+        (0, import_diagnostics3.reportRuntimeError)(this.runtime?.listener, import_diagnostics3.APIErrorCode.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";
+      (0, import_diagnostics3.reportRuntimeError)(this.runtime?.listener, import_diagnostics3.APIErrorCode.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);
+    }
+  }
+};
+
+// src/tri/triangle-screen.ts
+var TriangleScreen = class extends TextScreen {
+  static {
+    __name(this, "TriangleScreen");
+  }
+  tri(x1, y1, x2, y2, x3, y3, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    const v0 = {
+      x: x1,
+      y: -y1
+    };
+    const v1 = {
+      x: x2,
+      y: -y2
+    };
+    const v2 = {
+      x: x3,
+      y: -y3
+    };
+    drawTriangle(this.context, v0, v1, v2, this.context.fillStyle);
+  }
+  trib(x1, y1, x2, y2, x3, y3, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    const v0 = {
+      x: x1,
+      y: -y1
+    };
+    const v1 = {
+      x: x2,
+      y: -y2
+    };
+    const v2 = {
+      x: x3,
+      y: -y3
+    };
+    drawTriangleOutline(this.context, v0, v1, v2, this.context.strokeStyle, this.line_width);
+  }
+  ttri(x1, y1, x2, y2, x3, y3, u1, v1, u2, v2, u3, v3, texture, textureSource = "tiles", z1 = 1, z2 = 1, z3 = 1, useDepth = false) {
+    this.context.globalAlpha = this.alpha;
+    const canvasWidth = this.canvas.width;
+    const canvasHeight = this.canvas.height;
+    const ratio = Math.min(canvasWidth / 200, canvasHeight / 200);
+    const toCanvasX = /* @__PURE__ */ __name((x) => canvasWidth / 2 + x * ratio, "toCanvasX");
+    const toCanvasY = /* @__PURE__ */ __name((y) => canvasHeight / 2 - y * ratio, "toCanvasY");
+    const data = {
+      context: this.context,
+      width: canvasWidth,
+      height: canvasHeight,
+      runtime: this.runtime,
+      pixelated: this.pixelated === 1
+    };
+    drawTexturedTriangle(data, {
+      x: toCanvasX(x1),
+      y: toCanvasY(y1),
+      u: u1,
+      v: v1,
+      z: z1
+    }, {
+      x: toCanvasX(x2),
+      y: toCanvasY(y2),
+      u: u2,
+      v: v2,
+      z: z2
+    }, {
+      x: toCanvasX(x3),
+      y: toCanvasY(y3),
+      u: u3,
+      v: v3,
+      z: z3
+    }, texture, textureSource, this.zBuffer, useDepth);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TriangleScreen
+});
+//# sourceMappingURL=triangle-screen.js.map