minimojs 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/internal/RenderSystem.js

@@ -0,0 +1,1021 @@
+/** @internal */
+export class RenderSystem {
+    constructor() {
+        /** @internal */
+        this._surfaceCache = new Map();
+        /** @internal */
+        this._lastAppliedPageBackground = undefined;
+        /** @internal */
+        this._bootInk = null;
+        /** @internal */
+        this._transitionScratchCanvas = null;
+        /** @internal */
+        this._transitionScratchContext = null;
+        /** @internal */
+        this._dynamicSurfacePassId = 0;
+    }
+    clearSpriteCache() {
+        this._surfaceCache.clear();
+    }
+    beginDynamicSurfacePass() {
+        this._dynamicSurfacePassId += 1;
+    }
+    getSpriteGlyphCanvasForEffects(sprite) {
+        return this.getRenderSurface(sprite);
+    }
+    getSpriteRenderSnapshot(sprite) {
+        const canvas = this.getRenderSurface(sprite);
+        const renderData = sprite._renderData;
+        const deformScaleX = this.getSafeRenderScale(renderData?.scaleX);
+        const deformScaleY = this.getSafeRenderScale(renderData?.scaleY);
+        const pivotX = this.getSafePivot(renderData?.pivotX);
+        const pivotY = this.getSafePivot(renderData?.pivotY);
+        const offsetX = this.getSafeNumber(renderData?.offsetX, 0);
+        const offsetY = this.getSafeNumber(renderData?.offsetY, 0);
+        const alphaMultiplier = this.getSafeNumber(renderData?.alphaMultiplier, 1);
+        const safeRenderScale = this.getSafeRenderScale(sprite.scale);
+        const finalScaleX = safeRenderScale * deformScaleX;
+        const finalScaleY = safeRenderScale * deformScaleY;
+        const baseDisplayWidth = sprite.displayWidth;
+        const baseDisplayHeight = sprite.displayHeight;
+        const pivotOffsetX = (pivotX - 0.5) * baseDisplayWidth * (1 - deformScaleX);
+        const pivotOffsetY = (pivotY - 0.5) * baseDisplayHeight * (1 - deformScaleY);
+        return {
+            canvas,
+            x: sprite.renderX + pivotOffsetX + offsetX,
+            y: sprite.renderY + pivotOffsetY + offsetY,
+            rotation: sprite.rotation,
+            alpha: Math.max(0, Math.min(1, sprite.alpha * alphaMultiplier)),
+            flipX: sprite.flipX,
+            flipY: sprite.flipY,
+            drawWidth: canvas.width * Math.abs(finalScaleX),
+            drawHeight: canvas.height * Math.abs(finalScaleY),
+            layer: sprite.layer,
+            ignoreScroll: sprite.ignoreScroll,
+        };
+    }
+    render(options) {
+        this.applyPageBackground(options.pageBackground);
+        this.renderScene(options);
+    }
+    captureFrame(options) {
+        const snapshot = document.createElement("canvas");
+        snapshot.width = options.canvas.width;
+        snapshot.height = options.canvas.height;
+        const snapshotContext = snapshot.getContext("2d");
+        if (!snapshotContext) {
+            throw new Error("MinimoJS: Could not acquire a transition snapshot context.");
+        }
+        this.renderScene({
+            ...options,
+            canvas: snapshot,
+            context: snapshotContext,
+        });
+        return snapshot;
+    }
+    renderScreenTransition(options) {
+        const ctx = options.context;
+        const width = options.canvas.width;
+        const height = options.canvas.height;
+        const transition = options.transition;
+        const progress = this.easeTransitionProgress(transition.progress);
+        this.applyPageBackground(options.pageBackground);
+        ctx.clearRect(0, 0, width, height);
+        switch (transition.type) {
+            case "fade":
+                this.drawFadeTransition(ctx, transition, width, height, progress);
+                return;
+            case "wipe":
+                this.drawWipeTransition(ctx, transition, width, height, progress);
+                return;
+            case "slide":
+                this.drawSlideTransition(ctx, transition, width, height, progress);
+                return;
+            case "iris":
+                this.drawIrisTransition(ctx, transition, width, height, progress);
+                return;
+            case "pixelate":
+                this.drawPixelateTransition(ctx, transition, width, height, progress);
+                return;
+            case "flash":
+                this.drawFlashTransition(ctx, transition, width, height, progress);
+                return;
+        }
+    }
+    /** @internal */
+    renderScene(options) {
+        const ctx = options.context;
+        const W = options.canvas.width;
+        const H = options.canvas.height;
+        this.paintCanvasBackground(ctx, W, H, options.background, options.backgroundGradient);
+        const backgrounds = [...options.backgroundLayers].sort((a, b) => a.layer - b.layer);
+        for (const layer of backgrounds) {
+            if (!layer.visible)
+                continue;
+            const image = options.resolveImage(layer.imageKey);
+            if (!image)
+                continue;
+            this.drawBackgroundLayer(ctx, options.canvas, layer, image);
+        }
+        const sorted = [...options.sprites].sort((a, b) => a.layer - b.layer);
+        const trailEntries = [...options.trails].sort((a, b) => a.layer - b.layer);
+        for (const ghost of trailEntries) {
+            ctx.save();
+            ctx.globalAlpha = Math.max(0, Math.min(1, ghost.alpha));
+            const drawX = ghost.ignoreScroll ? ghost.x : ghost.x - options.scrollX;
+            const drawY = ghost.ignoreScroll ? ghost.y : ghost.y - options.scrollY;
+            ctx.translate(drawX, drawY);
+            if (ghost.rotation !== 0) {
+                ctx.rotate((ghost.rotation * Math.PI) / 180);
+            }
+            if (ghost.flipX || ghost.flipY) {
+                ctx.scale(ghost.flipX ? -1 : 1, ghost.flipY ? -1 : 1);
+            }
+            ctx.drawImage(ghost.canvas, -ghost.drawWidth / 2, -ghost.drawHeight / 2, ghost.drawWidth, ghost.drawHeight);
+            ctx.restore();
+        }
+        for (const sprite of sorted) {
+            if (!sprite.visible)
+                continue;
+            ctx.save();
+            const snapshot = this.getSpriteRenderSnapshot(sprite);
+            ctx.globalAlpha = snapshot.alpha;
+            const drawX = Math.round(snapshot.ignoreScroll ? snapshot.x : snapshot.x - options.scrollX);
+            const drawY = Math.round(snapshot.ignoreScroll ? snapshot.y : snapshot.y - options.scrollY);
+            ctx.translate(drawX, drawY);
+            if (snapshot.rotation !== 0) {
+                ctx.rotate((snapshot.rotation * Math.PI) / 180);
+            }
+            if (snapshot.flipX || snapshot.flipY) {
+                ctx.scale(snapshot.flipX ? -1 : 1, snapshot.flipY ? -1 : 1);
+            }
+            ctx.shadowColor = "transparent";
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            ctx.drawImage(snapshot.canvas, -snapshot.drawWidth / 2, -snapshot.drawHeight / 2, snapshot.drawWidth, snapshot.drawHeight);
+            ctx.restore();
+        }
+        const wipeEntries = [...options.wipes].sort((a, b) => a.layer - b.layer);
+        for (const entry of wipeEntries) {
+            const visibleProgress = Math.max(0, Math.min(1, entry.progress));
+            if (visibleProgress <= 0)
+                continue;
+            ctx.save();
+            ctx.globalAlpha = entry.alpha;
+            const drawX = Math.round(entry.ignoreScroll ? entry.x : entry.x - options.scrollX);
+            const drawY = Math.round(entry.ignoreScroll ? entry.y : entry.y - options.scrollY);
+            ctx.translate(drawX, drawY);
+            if (entry.rotation !== 0) {
+                ctx.rotate((entry.rotation * Math.PI) / 180);
+            }
+            if (entry.flipX || entry.flipY) {
+                ctx.scale(entry.flipX ? -1 : 1, entry.flipY ? -1 : 1);
+            }
+            const clip = this.getWipeClipRect(entry.drawWidth, entry.drawHeight, entry.direction, visibleProgress);
+            if (clip.width > 0 && clip.height > 0) {
+                ctx.beginPath();
+                ctx.rect(clip.x, clip.y, clip.width, clip.height);
+                ctx.clip();
+                ctx.drawImage(entry.canvas, -entry.drawWidth / 2, -entry.drawHeight / 2, entry.drawWidth, entry.drawHeight);
+            }
+            ctx.restore();
+        }
+        const explosionEntries = [...options.explosions].sort((a, b) => a.layer - b.layer);
+        for (const entry of explosionEntries) {
+            for (const piece of entry.pieces) {
+                ctx.save();
+                ctx.globalAlpha = Math.max(0, Math.min(1, piece.alpha));
+                const drawX = entry.ignoreScroll ? piece.x : piece.x - options.scrollX;
+                const drawY = entry.ignoreScroll ? piece.y : piece.y - options.scrollY;
+                ctx.translate(drawX, drawY);
+                if (piece.rotation !== 0) {
+                    ctx.rotate((piece.rotation * Math.PI) / 180);
+                }
+                if (piece.flipX || piece.flipY) {
+                    ctx.scale(piece.flipX ? -1 : 1, piece.flipY ? -1 : 1);
+                }
+                ctx.drawImage(entry.canvas, piece.sx, piece.sy, piece.sw, piece.sh, -piece.drawWidth / 2, -piece.drawHeight / 2, piece.drawWidth, piece.drawHeight);
+                ctx.restore();
+            }
+        }
+        for (const entry of options.textEntries) {
+            ctx.save();
+            ctx.font = `${entry.fontSize}px monospace`;
+            ctx.fillStyle = entry.color;
+            ctx.textAlign = entry.centered ? "center" : "left";
+            ctx.textBaseline = entry.centered ? "middle" : "top";
+            ctx.fillText(entry.text, entry.x, entry.y);
+            ctx.restore();
+        }
+        if (options.debugBodies) {
+            this.drawBodyDebugOverlay(ctx, sorted, options.scrollX, options.scrollY);
+        }
+        if (options.debugInputAreas) {
+            this.drawInputDebugOverlay(ctx, sorted, options.scrollX, options.scrollY);
+        }
+    }
+    /** @internal */
+    drawBodyDebugOverlay(ctx, sprites, scrollX, scrollY) {
+        ctx.save();
+        ctx.setLineDash([6, 4]);
+        ctx.lineWidth = 2;
+        for (const sprite of sprites) {
+            const halfWidth = sprite.bodyDisplayWidth / 2;
+            const halfHeight = sprite.bodyDisplayHeight / 2;
+            const centerX = sprite.ignoreScroll ? sprite.bodyCenterX : sprite.bodyCenterX - scrollX;
+            const centerY = sprite.ignoreScroll ? sprite.bodyCenterY : sprite.bodyCenterY - scrollY;
+            const left = Math.round(centerX - halfWidth) + 0.5;
+            const top = Math.round(centerY - halfHeight) + 0.5;
+            const width = Math.max(1, Math.round(sprite.bodyDisplayWidth) - 1);
+            const height = Math.max(1, Math.round(sprite.bodyDisplayHeight) - 1);
+            const stroke = sprite.isStatic
+                ? 'rgba(0, 217, 255, 0.95)'
+                : 'rgba(255, 77, 109, 0.95)';
+            const fill = sprite.isStatic
+                ? 'rgba(0, 217, 255, 0.12)'
+                : 'rgba(255, 77, 109, 0.12)';
+            ctx.strokeStyle = stroke;
+            ctx.fillStyle = fill;
+            ctx.fillRect(left, top, width, height);
+            ctx.strokeRect(left, top, width, height);
+        }
+        ctx.restore();
+    }
+    /** @internal */
+    drawInputDebugOverlay(ctx, sprites, scrollX, scrollY) {
+        ctx.save();
+        ctx.setLineDash([3, 5]);
+        ctx.lineWidth = 2;
+        for (const sprite of sprites) {
+            const halfWidth = sprite.displayWidth / 2;
+            const halfHeight = sprite.displayHeight / 2;
+            const centerX = sprite.ignoreScroll ? sprite.renderX : sprite.renderX - scrollX;
+            const centerY = sprite.ignoreScroll ? sprite.renderY : sprite.renderY - scrollY;
+            const left = Math.round(centerX - halfWidth) + 0.5;
+            const top = Math.round(centerY - halfHeight) + 0.5;
+            const width = Math.max(1, Math.round(sprite.displayWidth) - 1);
+            const height = Math.max(1, Math.round(sprite.displayHeight) - 1);
+            const stroke = "rgba(255, 196, 0, 0.98)";
+            const fill = "rgba(255, 196, 0, 0.10)";
+            ctx.strokeStyle = stroke;
+            ctx.fillStyle = fill;
+            ctx.fillRect(left, top, width, height);
+            ctx.strokeRect(left, top, width, height);
+        }
+        ctx.restore();
+    }
+    /**
+     * Draws the boot loading screen: the game's background and one thin
+     * progress line across its middle, with no text, so it needs no font.
+     */
+    renderLoadingScreen(options) {
+        const ctx = options.context;
+        const W = options.canvas.width;
+        const H = options.canvas.height;
+        const progress = this.clampProgress(options.progress);
+        this.applyPageBackground(options.pageBackground);
+        this.paintCanvasBackground(ctx, W, H, options.background ?? "#101820", options.backgroundGradient);
+        // The line is redrawn on every settled image; read the background once.
+        const inkKey = `${options.background}|${options.backgroundGradient?.from}|${options.backgroundGradient?.to}`;
+        if (this._bootInk === null || this._bootInk.key !== inkKey) {
+            this._bootInk = { key: inkKey, ink: this.pickLoadingInk(options.canvas) };
+        }
+        const ink = this._bootInk.ink;
+        const lineWidth = Math.round(Math.min(320, Math.max(160, W * 0.4)));
+        const x = Math.round((W - lineWidth) / 2);
+        const y = Math.round(H / 2);
+        ctx.save();
+        ctx.lineWidth = RenderSystem.LOADING_STROKE;
+        ctx.lineCap = "round";
+        ctx.strokeStyle = ink;
+        ctx.globalAlpha = 0.22;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + lineWidth, y);
+        ctx.stroke();
+        if (progress > 0) {
+            ctx.globalAlpha = 1;
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + lineWidth * progress, y);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    /**
+     * Draws the frozen scene being left, dimmed so it reads as paused, and over
+     * its center a ring whose outline fills with the share of images loaded.
+     * The ring has no fill.
+     */
+    renderSceneLoading(options) {
+        const ctx = options.context;
+        const W = options.canvas.width;
+        const H = options.canvas.height;
+        const reveal = this.clampProgress(options.reveal);
+        this.applyPageBackground(options.pageBackground);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(options.snapshot, 0, 0, W, H);
+        if (reveal === 0)
+            return;
+        this.dimScene(ctx, W, H, reveal);
+        const progress = this.clampProgress(options.progress);
+        const radius = Math.round(Math.min(44, Math.max(20, Math.min(W, H) * 0.06)));
+        const start = -Math.PI / 2;
+        const isDarkInk = options.ink !== "#ffffff";
+        ctx.save();
+        ctx.lineWidth = RenderSystem.LOADING_STROKE;
+        ctx.lineCap = "round";
+        ctx.strokeStyle = options.ink;
+        // A soft halo in the opposite tone keeps the ring legible over busy art.
+        ctx.shadowColor = isDarkInk ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)";
+        ctx.shadowBlur = 6;
+        ctx.globalAlpha = 0.25 * reveal;
+        ctx.beginPath();
+        ctx.arc(W / 2, H / 2, radius, 0, Math.PI * 2);
+        ctx.stroke();
+        if (progress > 0) {
+            ctx.globalAlpha = reveal;
+            ctx.beginPath();
+            ctx.arc(W / 2, H / 2, radius, start, start + Math.PI * 2 * progress);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    /**
+     * Chooses the ring's color against the frozen frame as it looks once fully
+     * dimmed, since that is what the ring is drawn over.
+     */
+    pickSceneLoadingInk(snapshot) {
+        const dimmed = document.createElement("canvas");
+        dimmed.width = snapshot.width;
+        dimmed.height = snapshot.height;
+        const ctx = dimmed.getContext("2d");
+        if (!ctx)
+            return "#ffffff";
+        ctx.drawImage(snapshot, 0, 0);
+        this.dimScene(ctx, dimmed.width, dimmed.height, 1);
+        return this.pickLoadingInk(dimmed);
+    }
+    /** @internal */
+    dimScene(ctx, width, height, reveal) {
+        ctx.save();
+        ctx.globalAlpha = RenderSystem.SCENE_LOADING_DIM * reveal;
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+    }
+    /**
+     * Chooses white or near-black loading ink from the average brightness at the
+     * center of `source`. Falls back to white when the pixels cannot be read,
+     * which happens when a cross-origin image has tainted the canvas.
+     */
+    pickLoadingInk(source) {
+        const size = Math.max(1, Math.min(96, source.width, source.height));
+        const x = Math.floor((source.width - size) / 2);
+        const y = Math.floor((source.height - size) / 2);
+        try {
+            const ctx = source.getContext("2d");
+            if (!ctx)
+                return "#ffffff";
+            const data = ctx.getImageData(x, y, size, size).data;
+            let luminance = 0;
+            let weight = 0;
+            for (let i = 0; i < data.length; i += 4) {
+                const alpha = data[i + 3] / 255;
+                luminance +=
+                    alpha * (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]);
+                weight += alpha;
+            }
+            if (weight === 0)
+                return "#ffffff";
+            return luminance / weight / 255 > 0.6 ? "#101820" : "#ffffff";
+        }
+        catch {
+            return "#ffffff";
+        }
+    }
+    /** @internal */
+    clampProgress(progress) {
+        return Number.isFinite(progress) ? Math.max(0, Math.min(1, progress)) : 0;
+    }
+    /** @internal */
+    drawFadeTransition(ctx, transition, width, height, progress) {
+        const firstHalf = progress < 0.5;
+        const localT = firstHalf ? progress / 0.5 : (progress - 0.5) / 0.5;
+        ctx.drawImage(firstHalf ? transition.fromCanvas : transition.toCanvas, 0, 0, width, height);
+        ctx.save();
+        ctx.globalAlpha = firstHalf ? localT : 1 - localT;
+        ctx.fillStyle = transition.color;
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+    }
+    /** @internal */
+    drawWipeTransition(ctx, transition, width, height, progress) {
+        ctx.drawImage(transition.fromCanvas, 0, 0, width, height);
+        const clip = this.getScreenWipeClipRect(width, height, transition.direction, progress);
+        if (clip.width <= 0 || clip.height <= 0)
+            return;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(clip.x, clip.y, clip.width, clip.height);
+        ctx.clip();
+        ctx.drawImage(transition.toCanvas, 0, 0, width, height);
+        ctx.restore();
+    }
+    /** @internal */
+    drawSlideTransition(ctx, transition, width, height, progress) {
+        const offset = this.getSlideOffset(transition.direction, width, height, progress);
+        ctx.drawImage(transition.fromCanvas, offset.fromX, offset.fromY, width, height);
+        ctx.drawImage(transition.toCanvas, offset.toX, offset.toY, width, height);
+    }
+    /** @internal */
+    drawIrisTransition(ctx, transition, width, height, progress) {
+        ctx.drawImage(transition.fromCanvas, 0, 0, width, height);
+        const maxRadius = Math.max(Math.hypot(transition.centerX, transition.centerY), Math.hypot(width - transition.centerX, transition.centerY), Math.hypot(transition.centerX, height - transition.centerY), Math.hypot(width - transition.centerX, height - transition.centerY));
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(transition.centerX, transition.centerY, maxRadius * progress, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.drawImage(transition.toCanvas, 0, 0, width, height);
+        ctx.restore();
+    }
+    /** @internal */
+    drawPixelateTransition(ctx, transition, width, height, progress) {
+        const firstHalf = progress < 0.5;
+        const localT = firstHalf ? progress / 0.5 : (progress - 0.5) / 0.5;
+        const source = firstHalf ? transition.fromCanvas : transition.toCanvas;
+        const pixelSize = firstHalf
+            ? this.lerp(1, transition.pixelSize, localT)
+            : this.lerp(transition.pixelSize, 1, localT);
+        this.drawPixelatedCanvas(ctx, source, width, height, pixelSize);
+    }
+    /** @internal */
+    drawFlashTransition(ctx, transition, width, height, progress) {
+        const swapPoint = 0.28;
+        const overlayPeak = 0.52;
+        const source = progress < swapPoint ? transition.fromCanvas : transition.toCanvas;
+        let alpha = 0;
+        if (progress < swapPoint) {
+            alpha = progress / Math.max(0.001, swapPoint);
+        }
+        else if (progress < overlayPeak) {
+            alpha = 1;
+        }
+        else {
+            alpha = 1 - (progress - overlayPeak) / Math.max(0.001, 1 - overlayPeak);
+        }
+        ctx.drawImage(source, 0, 0, width, height);
+        ctx.save();
+        ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
+        ctx.fillStyle = transition.color;
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+    }
+    /** @internal */
+    getRenderSurface(sprite) {
+        if (this.isDrawSprite(sprite)) {
+            return this.getDrawSurface(sprite);
+        }
+        const cacheKey = sprite.getRenderCacheKey();
+        const cached = this._surfaceCache.get(cacheKey);
+        if (cached) {
+            this._surfaceCache.delete(cacheKey);
+            this._surfaceCache.set(cacheKey, cached);
+            return cached;
+        }
+        const surface = this.isTextSprite(sprite)
+            ? this.createTextSurface(sprite)
+            : this.isImageSprite(sprite)
+                ? this.createImageSurface(sprite)
+                : this.createEmojiSurface(this.asEmojiSprite(sprite));
+        this._surfaceCache.set(cacheKey, surface);
+        this.trimSurfaceCache();
+        return surface;
+    }
+    /** @internal */
+    trimSurfaceCache() {
+        while (this._surfaceCache.size > RenderSystem.MAX_SURFACE_CACHE_ENTRIES) {
+            const oldestKey = this._surfaceCache.keys().next().value;
+            if (oldestKey === undefined) {
+                break;
+            }
+            this._surfaceCache.delete(oldestKey);
+        }
+    }
+    /** @internal */
+    createEmojiSurface(sprite) {
+        const size = Math.max(1, Math.round(sprite.size));
+        const color = sprite.color;
+        const glyphCanvas = document.createElement("canvas");
+        const boxSize = Math.max(2, Math.ceil(size * 2));
+        glyphCanvas.width = boxSize;
+        glyphCanvas.height = boxSize;
+        const glyphCtx = glyphCanvas.getContext("2d");
+        if (!glyphCtx) {
+            throw new Error("MinimoJS: Could not acquire a glyph rendering context.");
+        }
+        glyphCtx.clearRect(0, 0, boxSize, boxSize);
+        glyphCtx.shadowColor = "transparent";
+        glyphCtx.shadowBlur = 0;
+        glyphCtx.shadowOffsetX = 0;
+        glyphCtx.shadowOffsetY = 0;
+        glyphCtx.fillStyle = color;
+        glyphCtx.font = `${size}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
+        glyphCtx.textAlign = "center";
+        glyphCtx.textBaseline = "middle";
+        glyphCtx.fillText(sprite.sprite, boxSize / 2, boxSize / 2);
+        return glyphCanvas;
+    }
+    /** @internal */
+    createTextSurface(sprite) {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("MinimoJS: Could not acquire a text rendering context.");
+        }
+        const lines = this.layoutTextLines(ctx, sprite);
+        const measuredWidth = Math.max(1, Math.ceil(lines.reduce((maxWidth, line) => Math.max(maxWidth, ctx.measureText(line).width), 0)));
+        const lineHeightPx = Math.max(1, Math.ceil(sprite.fontSize * sprite.lineHeight));
+        const contentHeight = Math.max(1, lineHeightPx * Math.max(lines.length, 1));
+        const borderPad = Math.max(0, sprite.borderWidth) * 2;
+        const strokePad = Math.max(0, sprite.strokeWidth) * 2;
+        const totalWidth = Math.max(1, Math.ceil(sprite.fixedWidth > 0
+            ? sprite.fixedWidth
+            : measuredWidth + sprite.paddingX * 2 + borderPad + strokePad));
+        const totalHeight = Math.max(1, Math.ceil(sprite.fixedHeight > 0
+            ? sprite.fixedHeight
+            : contentHeight + sprite.paddingY * 2 + borderPad + strokePad));
+        sprite._measuredWidth = totalWidth;
+        sprite._measuredHeight = totalHeight;
+        canvas.width = totalWidth;
+        canvas.height = totalHeight;
+        const drawCtx = canvas.getContext("2d");
+        if (!drawCtx) {
+            throw new Error("MinimoJS: Could not acquire a text rendering context.");
+        }
+        this.applyTextStyle(drawCtx, sprite);
+        if (sprite.backgroundColor !== null) {
+            drawCtx.fillStyle = sprite.backgroundColor;
+            this.fillRoundedRect(drawCtx, 0, 0, totalWidth, totalHeight, sprite.cornerRadius);
+        }
+        if (sprite.borderColor !== null && sprite.borderWidth > 0) {
+            drawCtx.strokeStyle = sprite.borderColor;
+            drawCtx.lineWidth = sprite.borderWidth;
+            this.strokeRoundedRect(drawCtx, sprite.borderWidth / 2, sprite.borderWidth / 2, totalWidth - sprite.borderWidth, totalHeight - sprite.borderWidth, sprite.cornerRadius);
+        }
+        drawCtx.fillStyle = sprite.color;
+        drawCtx.textAlign = sprite.textAlign;
+        drawCtx.textBaseline = "middle";
+        if (sprite.strokeColor !== null && sprite.strokeWidth > 0) {
+            drawCtx.strokeStyle = sprite.strokeColor;
+            drawCtx.lineWidth = sprite.strokeWidth;
+            drawCtx.lineJoin = "round";
+            drawCtx.miterLimit = 2;
+        }
+        const contentLeft = sprite.paddingX + sprite.borderWidth + sprite.strokeWidth;
+        const contentRight = totalWidth - sprite.paddingX - sprite.borderWidth - sprite.strokeWidth;
+        const contentCenter = totalWidth / 2;
+        const availableContentHeight = Math.max(1, totalHeight - sprite.paddingY * 2 - borderPad - strokePad);
+        const contentOffsetY = Math.max(0, Math.floor((availableContentHeight - contentHeight) / 2));
+        const startY = sprite.paddingY +
+            sprite.borderWidth +
+            sprite.strokeWidth +
+            contentOffsetY +
+            lineHeightPx / 2;
+        const drawX = sprite.textAlign === "left"
+            ? contentLeft
+            : sprite.textAlign === "right"
+                ? contentRight
+                : contentCenter;
+        for (let i = 0; i < lines.length; i++) {
+            if (sprite.strokeColor !== null && sprite.strokeWidth > 0) {
+                drawCtx.strokeText(lines[i], drawX, startY + i * lineHeightPx);
+            }
+            drawCtx.fillText(lines[i], drawX, startY + i * lineHeightPx);
+        }
+        return canvas;
+    }
+    /** @internal */
+    createImageSurface(sprite) {
+        const image = sprite.game?.getImage(sprite.imageKey);
+        if (!image) {
+            throw new Error(`MinimoJS: Image '${sprite.imageKey}' is not loaded.`);
+        }
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, image instanceof HTMLImageElement ? image.naturalWidth || image.width : image.width);
+        canvas.height = Math.max(1, image instanceof HTMLImageElement ? image.naturalHeight || image.height : image.height);
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("MinimoJS: Could not acquire an image rendering context.");
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+        return canvas;
+    }
+    /** @internal */
+    getDrawSurface(sprite) {
+        const width = Math.max(1, Math.round(sprite.width));
+        const height = Math.max(1, Math.round(sprite.height));
+        let surface = sprite._surface;
+        if (!surface) {
+            surface = document.createElement("canvas");
+            sprite._surface = surface;
+        }
+        const sizeChanged = surface.width !== width || surface.height !== height;
+        if (sprite.frozen && !sizeChanged && surface.width > 0 && surface.height > 0) {
+            return surface;
+        }
+        if (!sprite.frozen &&
+            sprite._lastRedrawPassId === this._dynamicSurfacePassId &&
+            surface.width === width &&
+            surface.height === height) {
+            return surface;
+        }
+        if (sizeChanged) {
+            surface.width = width;
+            surface.height = height;
+        }
+        else {
+            // Resetting width clears pixels and restores the default 2D context state.
+            surface.width = width;
+        }
+        const ctx = surface.getContext("2d");
+        if (!ctx) {
+            throw new Error("MinimoJS: Could not acquire a DrawSprite rendering context.");
+        }
+        sprite._surfaceCtx = ctx;
+        sprite.redraw(ctx);
+        sprite._lastRedrawPassId = this._dynamicSurfacePassId;
+        return surface;
+    }
+    /** @internal */
+    isTextSprite(sprite) {
+        return "text" in sprite && "fontFamily" in sprite && "fontSize" in sprite;
+    }
+    /** @internal */
+    isDrawSprite(sprite) {
+        return "redraw" in sprite && "_surface" in sprite && "_surfaceCtx" in sprite;
+    }
+    /** @internal */
+    isImageSprite(sprite) {
+        return "imageKey" in sprite && "setTexture" in sprite;
+    }
+    /** @internal */
+    getWipeClipRect(drawWidth, drawHeight, direction, progress) {
+        const halfWidth = drawWidth / 2;
+        const halfHeight = drawHeight / 2;
+        switch (direction) {
+            case "left-to-right":
+                return {
+                    x: -halfWidth,
+                    y: -halfHeight,
+                    width: drawWidth * progress,
+                    height: drawHeight,
+                };
+            case "right-to-left": {
+                const width = drawWidth * progress;
+                return {
+                    x: halfWidth - width,
+                    y: -halfHeight,
+                    width,
+                    height: drawHeight,
+                };
+            }
+            case "top-to-bottom":
+                return {
+                    x: -halfWidth,
+                    y: -halfHeight,
+                    width: drawWidth,
+                    height: drawHeight * progress,
+                };
+            case "bottom-to-top": {
+                const height = drawHeight * progress;
+                return {
+                    x: -halfWidth,
+                    y: halfHeight - height,
+                    width: drawWidth,
+                    height,
+                };
+            }
+        }
+    }
+    /** @internal */
+    getScreenWipeClipRect(width, height, direction, progress) {
+        switch (direction) {
+            case "left-to-right":
+                return {
+                    x: 0,
+                    y: 0,
+                    width: width * progress,
+                    height,
+                };
+            case "right-to-left": {
+                const clipWidth = width * progress;
+                return {
+                    x: width - clipWidth,
+                    y: 0,
+                    width: clipWidth,
+                    height,
+                };
+            }
+            case "top-to-bottom":
+                return {
+                    x: 0,
+                    y: 0,
+                    width,
+                    height: height * progress,
+                };
+            case "bottom-to-top": {
+                const clipHeight = height * progress;
+                return {
+                    x: 0,
+                    y: height - clipHeight,
+                    width,
+                    height: clipHeight,
+                };
+            }
+        }
+    }
+    /** @internal */
+    asEmojiSprite(sprite) {
+        if ("sprite" in sprite && "size" in sprite) {
+            return sprite;
+        }
+        throw new Error("MinimoJS: Unsupported sprite type for emoji rendering.");
+    }
+    /** @internal */
+    layoutTextLines(ctx, sprite) {
+        this.applyTextStyle(ctx, sprite);
+        const rawLines = sprite.text.split("\n");
+        const availableTextWidth = this.getAvailableTextWidth(sprite);
+        if (availableTextWidth <= 0) {
+            return rawLines.length > 0 ? rawLines : [""];
+        }
+        const wrappedLines = [];
+        for (const rawLine of rawLines) {
+            const words = rawLine.split(/\s+/).filter((word) => word.length > 0);
+            if (words.length === 0) {
+                wrappedLines.push("");
+                continue;
+            }
+            let currentLine = words[0];
+            for (let i = 1; i < words.length; i++) {
+                const candidate = `${currentLine} ${words[i]}`;
+                if (ctx.measureText(candidate).width <= availableTextWidth) {
+                    currentLine = candidate;
+                }
+                else {
+                    wrappedLines.push(currentLine);
+                    currentLine = words[i];
+                }
+            }
+            wrappedLines.push(currentLine);
+        }
+        return wrappedLines.length > 0 ? wrappedLines : [""];
+    }
+    /** @internal */
+    getAvailableTextWidth(sprite) {
+        const borderPad = Math.max(0, sprite.borderWidth) * 2;
+        const strokePad = Math.max(0, sprite.strokeWidth) * 2;
+        const limits = [];
+        if (sprite.maxWidth > 0) {
+            limits.push(sprite.maxWidth - sprite.paddingX * 2 - borderPad - strokePad);
+        }
+        if (sprite.fixedWidth > 0) {
+            limits.push(sprite.fixedWidth - sprite.paddingX * 2 - borderPad - strokePad);
+        }
+        if (limits.length === 0) {
+            return 0;
+        }
+        return Math.max(1, Math.floor(Math.min(...limits)));
+    }
+    /** @internal */
+    applyTextStyle(ctx, sprite) {
+        ctx.font = `${sprite.fontWeight} ${sprite.fontSize}px ${sprite.fontFamily}`;
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+    }
+    /** @internal */
+    fillRoundedRect(ctx, x, y, width, height, radius) {
+        this.buildRoundedRectPath(ctx, x, y, width, height, radius);
+        ctx.fill();
+    }
+    /** @internal */
+    strokeRoundedRect(ctx, x, y, width, height, radius) {
+        this.buildRoundedRectPath(ctx, x, y, width, height, radius);
+        ctx.stroke();
+    }
+    /** @internal */
+    buildRoundedRectPath(ctx, x, y, width, height, radius) {
+        const safeRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+        ctx.beginPath();
+        if (safeRadius <= 0) {
+            ctx.rect(x, y, width, height);
+            return;
+        }
+        ctx.moveTo(x + safeRadius, y);
+        ctx.lineTo(x + width - safeRadius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + safeRadius);
+        ctx.lineTo(x + width, y + height - safeRadius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - safeRadius, y + height);
+        ctx.lineTo(x + safeRadius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height - safeRadius);
+        ctx.lineTo(x, y + safeRadius);
+        ctx.quadraticCurveTo(x, y, x + safeRadius, y);
+        ctx.closePath();
+    }
+    /** @internal */
+    getSafeRenderScale(value) {
+        if (!Number.isFinite(value))
+            return 1;
+        const safeValue = value;
+        return Math.max(0, safeValue);
+    }
+    /** @internal */
+    getSafePivot(value) {
+        if (!Number.isFinite(value))
+            return 0.5;
+        const safeValue = value;
+        return Math.max(0, Math.min(1, safeValue));
+    }
+    /** @internal */
+    getSafeNumber(value, fallback) {
+        if (!Number.isFinite(value))
+            return fallback;
+        return value;
+    }
+    /** @internal */
+    paintCanvasBackground(ctx, width, height, background, backgroundGradient) {
+        ctx.clearRect(0, 0, width, height);
+        if (backgroundGradient !== null) {
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, backgroundGradient.from);
+            gradient.addColorStop(1, backgroundGradient.to);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+        }
+        else if (background !== null) {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }
+    /** @internal */
+    drawBackgroundLayer(ctx, canvas, layer, image) {
+        const destX = Math.round(layer.x);
+        const destY = Math.round(layer.y);
+        const destW = this.getPositiveLength(layer.width, canvas.width);
+        const destH = this.getPositiveLength(layer.height, canvas.height);
+        const alpha = Math.max(0, Math.min(1, layer.alpha));
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        if (layer.fit === "none") {
+            ctx.drawImage(image, destX, destY);
+            ctx.restore();
+            return;
+        }
+        if (layer.fit === "stretch") {
+            ctx.drawImage(image, destX, destY, destW, destH);
+            ctx.restore();
+            return;
+        }
+        const imageW = Math.max(1, image instanceof HTMLImageElement ? image.naturalWidth || image.width : image.width);
+        const imageH = Math.max(1, image instanceof HTMLImageElement ? image.naturalHeight || image.height : image.height);
+        const scale = this.getBackgroundScale(layer.fit, destW, destH, imageW, imageH);
+        const drawW = imageW * scale;
+        const drawH = imageH * scale;
+        const drawX = destX + (destW - drawW) / 2;
+        const drawY = destY + (destH - drawH) / 2;
+        if (layer.fit === "cover") {
+            ctx.beginPath();
+            ctx.rect(destX, destY, destW, destH);
+            ctx.clip();
+        }
+        ctx.drawImage(image, drawX, drawY, drawW, drawH);
+        ctx.restore();
+    }
+    /** @internal */
+    getPositiveLength(value, fallback) {
+        if (!Number.isFinite(value) || value <= 0)
+            return fallback;
+        return Math.round(value);
+    }
+    /** @internal */
+    getBackgroundScale(fit, destW, destH, imageW, imageH) {
+        const scaleX = destW / imageW;
+        const scaleY = destH / imageH;
+        if (fit === "contain") {
+            return Math.min(scaleX, scaleY);
+        }
+        return Math.max(scaleX, scaleY);
+    }
+    /** @internal */
+    easeTransitionProgress(t) {
+        const clamped = Math.max(0, Math.min(1, t));
+        return clamped * clamped * (3 - 2 * clamped);
+    }
+    /** @internal */
+    getSlideOffset(direction, width, height, progress) {
+        switch (direction) {
+            case "left-to-right":
+                return {
+                    fromX: width * progress,
+                    fromY: 0,
+                    toX: width * (progress - 1),
+                    toY: 0,
+                };
+            case "right-to-left":
+                return {
+                    fromX: -width * progress,
+                    fromY: 0,
+                    toX: width * (1 - progress),
+                    toY: 0,
+                };
+            case "top-to-bottom":
+                return {
+                    fromX: 0,
+                    fromY: height * progress,
+                    toX: 0,
+                    toY: height * (progress - 1),
+                };
+            case "bottom-to-top":
+                return {
+                    fromX: 0,
+                    fromY: -height * progress,
+                    toX: 0,
+                    toY: height * (1 - progress),
+                };
+        }
+    }
+    /** @internal */
+    drawPixelatedCanvas(ctx, source, width, height, pixelSize) {
+        const roundedPixelSize = Math.max(1, Math.round(pixelSize));
+        if (roundedPixelSize <= 1) {
+            ctx.drawImage(source, 0, 0, width, height);
+            return;
+        }
+        const scaledWidth = Math.max(1, Math.ceil(width / roundedPixelSize));
+        const scaledHeight = Math.max(1, Math.ceil(height / roundedPixelSize));
+        const scratch = this.getTransitionScratchSurface(scaledWidth, scaledHeight);
+        const scratchCtx = this._transitionScratchContext;
+        if (!scratchCtx) {
+            ctx.drawImage(source, 0, 0, width, height);
+            return;
+        }
+        scratch.width = scaledWidth;
+        scratch.height = scaledHeight;
+        scratchCtx.clearRect(0, 0, scaledWidth, scaledHeight);
+        scratchCtx.imageSmoothingEnabled = false;
+        scratchCtx.drawImage(source, 0, 0, scaledWidth, scaledHeight);
+        ctx.save();
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(scratch, 0, 0, scaledWidth, scaledHeight, 0, 0, width, height);
+        ctx.restore();
+    }
+    /** @internal */
+    getTransitionScratchSurface(width, height) {
+        if (!this._transitionScratchCanvas) {
+            this._transitionScratchCanvas = document.createElement("canvas");
+            this._transitionScratchContext = this._transitionScratchCanvas.getContext("2d");
+            if (!this._transitionScratchContext) {
+                throw new Error("MinimoJS: Could not acquire a transition scratch context.");
+            }
+        }
+        if (this._transitionScratchCanvas.width !== width ||
+            this._transitionScratchCanvas.height !== height) {
+            this._transitionScratchCanvas.width = width;
+            this._transitionScratchCanvas.height = height;
+            this._transitionScratchContext = this._transitionScratchCanvas.getContext("2d");
+            if (!this._transitionScratchContext) {
+                throw new Error("MinimoJS: Could not acquire a transition scratch context.");
+            }
+        }
+        return this._transitionScratchCanvas;
+    }
+    /** @internal */
+    lerp(from, to, t) {
+        return from + (to - from) * t;
+    }
+    /** @internal */
+    applyPageBackground(pageBackground) {
+        if (!document.body)
+            return;
+        if (this._lastAppliedPageBackground === pageBackground)
+            return;
+        if (pageBackground === null) {
+            document.body.style.removeProperty("background");
+        }
+        else {
+            document.body.style.background = pageBackground;
+        }
+        this._lastAppliedPageBackground = pageBackground;
+    }
+}
+/** @internal */
+RenderSystem.MAX_SURFACE_CACHE_ENTRIES = 256;
+/** @internal Stroke of the boot line and the scene ring, which match. */
+RenderSystem.LOADING_STROKE = 3;
+/** @internal Opacity of the black veil over a scene that is loading the next one. */
+RenderSystem.SCENE_LOADING_DIM = 0.4;