@kawaijs/renderer-dom 0.1.11 → 0.1.13

package/dist/components/stage-layer.js

@@ -0,0 +1,257 @@
+import { VfxLayerComponent } from './vfx-layer.js';
+import { escapeHtml } from '../utils/rich-text.js';
+import { bindImageSrcFallbacks, characterAssetCandidates } from '../asset-fallbacks.js';
+export class StageLayerComponent {
+    stageEl;
+    backgroundEl;
+    charactersEl;
+    vfxLayer;
+    cgEl;
+    modeBadgeEl;
+    bgLayerA;
+    bgLayerB;
+    activeBgLayer = 'A';
+    currentBgUrl = '';
+    activeCharacters = new Map();
+    pendingRemovals = new Map();
+    flashTimer = null;
+    assetResolver;
+    constructor(assetResolver) {
+        this.assetResolver = assetResolver;
+        this.stageEl = document.createElement('div');
+        this.stageEl.className = 'kawa-stage';
+        this.stageEl.setAttribute('role', 'main');
+        this.stageEl.setAttribute('aria-label', 'Visual Novel Stage');
+        this.backgroundEl = document.createElement('div');
+        this.backgroundEl.className = 'kawa-background';
+        this.backgroundEl.setAttribute('aria-hidden', 'true');
+        this.bgLayerA = document.createElement('div');
+        this.bgLayerA.className = 'kawa-bg-layer active';
+        this.bgLayerB = document.createElement('div');
+        this.bgLayerB.className = 'kawa-bg-layer';
+        this.backgroundEl.appendChild(this.bgLayerA);
+        this.backgroundEl.appendChild(this.bgLayerB);
+        this.charactersEl = document.createElement('div');
+        this.charactersEl.className = 'kawa-characters kawa-sprites';
+        this.charactersEl.setAttribute('aria-hidden', 'true');
+        this.vfxLayer = new VfxLayerComponent();
+        this.cgEl = document.createElement('div');
+        this.cgEl.className = 'kawa-cg-layer';
+        this.cgEl.style.display = 'none';
+        this.modeBadgeEl = document.createElement('div');
+        this.modeBadgeEl.className = 'kawa-mode-badge';
+        this.modeBadgeEl.style.display = 'none';
+        this.modeBadgeEl.setAttribute('aria-live', 'polite');
+        this.modeBadgeEl.setAttribute('role', 'status');
+        this.cgEl.setAttribute('aria-hidden', 'true');
+        this.cgEl.setAttribute('role', 'presentation');
+        this.stageEl.appendChild(this.backgroundEl);
+        this.stageEl.appendChild(this.charactersEl);
+        this.stageEl.appendChild(this.vfxLayer.el);
+        this.stageEl.appendChild(this.cgEl);
+        this.stageEl.appendChild(this.modeBadgeEl);
+    }
+    updateBackground(background, transition) {
+        if (!background) {
+            this.currentBgUrl = '';
+            this.bgLayerA.style.backgroundImage = '';
+            this.bgLayerB.style.backgroundImage = '';
+            this.bgLayerA.classList.remove('active');
+            this.bgLayerB.classList.remove('active');
+            return;
+        }
+        const transitionName = (transition ?? 'none').toLowerCase();
+        this.backgroundEl.dataset.transition = transitionName;
+        const cleanBg = background.replace(/^bg[\s_]+/i, '').trim();
+        const primaryUrl = this.assetResolver(cleanBg, 'background');
+        if (primaryUrl !== this.currentBgUrl) {
+            this.currentBgUrl = primaryUrl;
+            const crossfade = transitionName === 'fade' ||
+                transitionName === 'dissolve' ||
+                transitionName === 'wipeleft' ||
+                transitionName === 'wiperight';
+            if (crossfade) {
+                const nextLayer = this.activeBgLayer === 'A' ? this.bgLayerB : this.bgLayerA;
+                const curLayer = this.activeBgLayer === 'A' ? this.bgLayerA : this.bgLayerB;
+                nextLayer.style.backgroundImage = `url("${primaryUrl}")`;
+                // Reset wipe classes then apply for this transition
+                nextLayer.classList.remove('kawa-wipe-from-left', 'kawa-wipe-from-right');
+                curLayer.classList.remove('kawa-wipe-from-left', 'kawa-wipe-from-right');
+                if (transitionName === 'wipeleft') {
+                    nextLayer.classList.add('kawa-wipe-from-right');
+                }
+                else if (transitionName === 'wiperight') {
+                    nextLayer.classList.add('kawa-wipe-from-left');
+                }
+                nextLayer.classList.add('active');
+                curLayer.classList.remove('active');
+                this.activeBgLayer = this.activeBgLayer === 'A' ? 'B' : 'A';
+            }
+            else {
+                const curLayer = this.activeBgLayer === 'A' ? this.bgLayerA : this.bgLayerB;
+                curLayer.style.backgroundImage = `url("${primaryUrl}")`;
+                curLayer.classList.add('active');
+            }
+        }
+    }
+    updateCharacters(characters) {
+        const presentChars = new Set(Object.keys(characters));
+        // Remove characters no longer in scene
+        for (const [id, entry] of this.activeCharacters.entries()) {
+            if (!presentChars.has(id)) {
+                entry.div.style.opacity = '0';
+                entry.div.style.transform = `translateY(20px)`;
+                const timer = setTimeout(() => {
+                    entry.div.remove();
+                    this.pendingRemovals.delete(id);
+                }, 350);
+                this.pendingRemovals.set(id, { div: entry.div, timer });
+                this.activeCharacters.delete(id);
+            }
+        }
+        // Add or update active characters
+        for (const [id, charState] of Object.entries(characters)) {
+            if (this.pendingRemovals.has(id)) {
+                const pending = this.pendingRemovals.get(id);
+                clearTimeout(pending.timer);
+                pending.div.remove();
+                this.pendingRemovals.delete(id);
+            }
+            const pos = charState.position ?? 'center';
+            const expr = charState.expression;
+            const z = typeof charState.z === 'number' ? charState.z : 10;
+            const assetKey = expr ? `${id}/${expr}` : id;
+            const candidates = characterAssetCandidates(assetKey, this.assetResolver);
+            if (!this.activeCharacters.has(id)) {
+                const div = document.createElement('div');
+                div.className = `kawa-sprite kawa-pos-${pos}`;
+                div.dataset.character = id;
+                if (expr)
+                    div.dataset.expression = expr;
+                if (charState.layer)
+                    div.dataset.layer = charState.layer;
+                div.style.zIndex = String(z);
+                const img = document.createElement('img');
+                img.alt = `${id} ${expr ?? ''}`;
+                img.decoding = 'async';
+                bindImageSrcFallbacks(img, candidates, () => {
+                    img.style.display = 'none';
+                    if (!div.querySelector('.kawa-sprite-placeholder')) {
+                        const ph = document.createElement('div');
+                        ph.className = 'kawa-sprite-placeholder';
+                        ph.innerHTML = `<span class="kawa-sprite-placeholder-icon">👤</span><span class="kawa-sprite-placeholder-name">${escapeHtml(id)}</span>`;
+                        div.appendChild(ph);
+                    }
+                });
+                div.appendChild(img);
+                this.charactersEl.appendChild(div);
+                this.activeCharacters.set(id, { div, img, expression: expr, position: pos, z });
+            }
+            else {
+                const existing = this.activeCharacters.get(id);
+                // Position change
+                if (existing.position !== pos) {
+                    existing.div.className = `kawa-sprite kawa-pos-${pos}`;
+                    // re-apply css anim class if any
+                    existing.position = pos;
+                }
+                if (existing.z !== z) {
+                    existing.div.style.zIndex = String(z);
+                    existing.z = z;
+                }
+                if (charState.layer) {
+                    existing.div.dataset.layer = charState.layer;
+                }
+                // Expression change
+                if (existing.expression !== expr) {
+                    existing.img.style.display = 'block';
+                    bindImageSrcFallbacks(existing.img, candidates);
+                    existing.expression = expr;
+                    const ph = existing.div.querySelector('.kawa-sprite-placeholder');
+                    if (ph)
+                        ph.remove();
+                    if (expr) {
+                        existing.div.dataset.expression = expr;
+                    }
+                    else {
+                        delete existing.div.dataset.expression;
+                    }
+                }
+                // Sprite Animation/Transition if provided
+                if (charState.transition) {
+                    existing.div.classList.remove('kawa-anim-bounce', 'kawa-anim-shake', 'kawa-anim-nod');
+                    void existing.div.offsetWidth; // Reflow
+                    existing.div.classList.add(`kawa-anim-${charState.transition}`);
+                }
+            }
+            const entry = this.activeCharacters.get(id);
+            // CSS-first animate directive
+            if (charState.cssAnimation && charState.cssAnimation.token !== entry.animToken) {
+                const anim = charState.cssAnimation.name;
+                const className = `kawa-css-anim-${anim}`;
+                entry.div.classList.forEach((cls) => {
+                    if (cls.startsWith('kawa-css-anim-'))
+                        entry.div.classList.remove(cls);
+                });
+                void entry.div.offsetWidth;
+                entry.div.classList.add(className);
+                if (charState.cssAnimation.durationMs) {
+                    entry.div.style.animationDuration = `${charState.cssAnimation.durationMs}ms`;
+                }
+                else {
+                    entry.div.style.removeProperty('animation-duration');
+                }
+                entry.animToken = charState.cssAnimation.token;
+            }
+        }
+    }
+    updateVfx(vfxState) {
+        this.vfxLayer.setVfx(vfxState);
+    }
+    updateCG(cgPath) {
+        if (!cgPath) {
+            this.cgEl.style.display = 'none';
+            this.cgEl.style.backgroundImage = '';
+        }
+        else {
+            const url = this.assetResolver(cgPath, 'background');
+            this.cgEl.style.backgroundImage = `url("${url}")`;
+            this.cgEl.style.display = 'block';
+        }
+    }
+    shakeScreen(type = 'shake') {
+        this.stageEl.classList.remove('kawa-shake', 'kawa-vpunch', 'kawa-hpunch');
+        void this.stageEl.offsetWidth; // Force reflow
+        const cls = type === 'vpunch' ? 'kawa-vpunch' : type === 'hpunch' ? 'kawa-hpunch' : 'kawa-shake';
+        this.stageEl.classList.add(cls);
+    }
+    flashScreen() {
+        const existing = this.stageEl.querySelector('.kawa-flash-overlay');
+        if (existing)
+            existing.remove();
+        if (this.flashTimer) {
+            clearTimeout(this.flashTimer);
+            this.flashTimer = null;
+        }
+        const flash = document.createElement('div');
+        flash.className = 'kawa-flash-overlay';
+        this.stageEl.appendChild(flash);
+        this.flashTimer = setTimeout(() => {
+            this.flashTimer = null;
+            flash.remove();
+        }, 600);
+    }
+    destroy() {
+        this.vfxLayer.destroy();
+        if (this.flashTimer) {
+            clearTimeout(this.flashTimer);
+            this.flashTimer = null;
+        }
+        for (const pending of this.pendingRemovals.values()) {
+            clearTimeout(pending.timer);
+        }
+        this.pendingRemovals.clear();
+        this.activeCharacters.clear();
+    }
+}
+//# sourceMappingURL=stage-layer.js.map

package/dist/components/stage-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-layer.js","sourceRoot":"","sources":["../../src/components/stage-layer.ts"],"names":[],"mappings":"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"}

package/dist/components/vfx-layer.d.ts

@@ -0,0 +1,32 @@
+import type { VfxState } from '@kawaijs/runtime';
+export declare class VfxLayerComponent {
+    readonly el: HTMLDivElement;
+    private canvas;
+    private ctx;
+    private particles;
+    private currentEffect;
+    private animationFrameId;
+    private tintEl;
+    private fogEl;
+    private suspended;
+    private resizeTimer;
+    private destroyed;
+    private readonly lowPower;
+    private lastFrameTs;
+    private targetFrameMs;
+    private boundResizeHandler?;
+    private boundVisibilityHandler?;
+    constructor();
+    setVfx(vfxState: VfxState | null): void;
+    setSuspended(suspended: boolean): void;
+    clear(): void;
+    destroy(): void;
+    private syncCanvasSize;
+    private initListeners;
+    private particleBudget;
+    private startParticleEffect;
+    private stopParticleLoop;
+    private updateParticles;
+    private renderParticles;
+}
+//# sourceMappingURL=vfx-layer.d.ts.map

package/dist/components/vfx-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vfx-layer.d.ts","sourceRoot":"","sources":["../../src/components/vfx-layer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA4BjD,qBAAa,iBAAiB;IAC5B,SAAgB,EAAE,EAAE,cAAc,CAAC;IACnC,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAA8C;IACjE,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAU;IACnC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,sBAAsB,CAAC,CAAa;;IA+BrC,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI;IAmEvC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAkBtC,KAAK,IAAI,IAAI;IAWb,OAAO,IAAI,IAAI;IAgBtB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,mBAAmB;IAmE3B,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,eAAe;IA0CvB,OAAO,CAAC,eAAe;CAkCxB"}

package/dist/components/vfx-layer.js

@@ -0,0 +1,357 @@
+function isLowPowerClient() {
+    if (typeof window === 'undefined')
+        return false;
+    const conn = navigator.connection;
+    if (conn?.saveData)
+        return true;
+    if (typeof window.matchMedia === 'function') {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return true;
+        if (window.matchMedia('(pointer: coarse)').matches && window.innerWidth < 900)
+            return true;
+    }
+    const mem = navigator.deviceMemory;
+    if (typeof mem === 'number' && mem > 0 && mem <= 4)
+        return true;
+    return false;
+}
+export class VfxLayerComponent {
+    el;
+    canvas;
+    ctx;
+    particles = [];
+    currentEffect = null;
+    animationFrameId = null;
+    tintEl;
+    fogEl;
+    suspended = false;
+    resizeTimer = null;
+    destroyed = false;
+    lowPower;
+    lastFrameTs = 0;
+    targetFrameMs;
+    boundResizeHandler;
+    boundVisibilityHandler;
+    constructor() {
+        this.lowPower = isLowPowerClient();
+        this.targetFrameMs = this.lowPower ? 1000 / 30 : 1000 / 60;
+        this.el = document.createElement('div');
+        this.el.className = 'kawa-vfx-layer';
+        this.el.setAttribute('aria-hidden', 'true');
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'kawa-vfx-canvas';
+        this.ctx =
+            this.canvas.getContext('2d', { alpha: true, desynchronized: true }) ??
+                this.canvas.getContext('2d');
+        this.tintEl = document.createElement('div');
+        this.tintEl.className = 'kawa-vfx-tint';
+        this.tintEl.style.display = 'none';
+        this.fogEl = document.createElement('div');
+        this.fogEl.className = 'kawa-vfx-fog';
+        this.fogEl.style.display = 'none';
+        this.el.appendChild(this.canvas);
+        this.el.appendChild(this.fogEl);
+        this.el.appendChild(this.tintEl);
+        this.initListeners();
+    }
+    setVfx(vfxState) {
+        if (this.destroyed)
+            return;
+        if (!vfxState || vfxState.effect === 'stop') {
+            this.clear();
+            return;
+        }
+        if (vfxState.color || vfxState.effect === 'tint') {
+            this.tintEl.style.display = 'block';
+            this.tintEl.style.backgroundColor = vfxState.color || 'rgba(244, 63, 94, 0.2)';
+        }
+        else {
+            this.tintEl.style.display = 'none';
+        }
+        if (vfxState.effect === 'tint') {
+            if (!this.currentEffect || this.currentEffect === 'tint') {
+                this.currentEffect = 'tint';
+                this.stopParticleLoop();
+                this.fogEl.style.display = 'none';
+            }
+            return;
+        }
+        const prefersReducedMotion = typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if ((prefersReducedMotion || this.lowPower) &&
+            (vfxState.effect === 'rain' ||
+                vfxState.effect === 'snow' ||
+                vfxState.effect === 'sakura')) {
+            // Keep a static light overlay instead of continuous particle rAF on weak devices.
+            if (prefersReducedMotion) {
+                this.stopParticleLoop();
+                this.currentEffect = vfxState.effect;
+                this.fogEl.style.display = 'none';
+                return;
+            }
+            // lowPower still gets particles, but fewer + 30fps (handled below)
+        }
+        if (vfxState.effect === 'fog') {
+            this.currentEffect = 'fog';
+            this.stopParticleLoop();
+            this.fogEl.style.display = 'block';
+            return;
+        }
+        this.fogEl.style.display = 'none';
+        if (this.currentEffect === vfxState.effect) {
+            return;
+        }
+        this.currentEffect = vfxState.effect;
+        if (this.suspended) {
+            this.stopParticleLoop();
+            return;
+        }
+        this.startParticleEffect(vfxState.effect, vfxState.intensity);
+    }
+    setSuspended(suspended) {
+        if (this.suspended === suspended)
+            return;
+        this.suspended = suspended;
+        if (suspended) {
+            this.stopParticleLoop();
+            if (this.ctx) {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            }
+        }
+        else if (this.currentEffect &&
+            this.currentEffect !== 'tint' &&
+            this.currentEffect !== 'fog' &&
+            this.currentEffect !== 'stop') {
+            this.startParticleEffect(this.currentEffect);
+        }
+    }
+    clear() {
+        this.currentEffect = null;
+        this.stopParticleLoop();
+        this.particles = [];
+        this.tintEl.style.display = 'none';
+        this.fogEl.style.display = 'none';
+        if (this.ctx) {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+    }
+    destroy() {
+        this.destroyed = true;
+        this.clear();
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (typeof window !== 'undefined' && this.boundResizeHandler) {
+            window.removeEventListener('resize', this.boundResizeHandler);
+        }
+        if (typeof document !== 'undefined' && this.boundVisibilityHandler) {
+            document.removeEventListener('visibilitychange', this.boundVisibilityHandler);
+        }
+        this.el.remove();
+    }
+    syncCanvasSize() {
+        const rect = this.el.getBoundingClientRect();
+        const cssW = Math.max(1, Math.floor(rect.width || (typeof window !== 'undefined' ? window.innerWidth : 1280)));
+        const cssH = Math.max(1, Math.floor(rect.height || (typeof window !== 'undefined' ? window.innerHeight : 720)));
+        const dprRaw = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const dpr = this.lowPower ? Math.min(1, dprRaw) : Math.min(1.5, dprRaw);
+        // Cap absolute buffer size to limit GPU memory on large phones
+        const maxEdge = this.lowPower ? 960 : 1440;
+        const scale = Math.min(1, maxEdge / Math.max(cssW, cssH));
+        const w = Math.max(1, Math.floor(cssW * dpr * scale));
+        const h = Math.max(1, Math.floor(cssH * dpr * scale));
+        if (this.canvas.width !== w || this.canvas.height !== h) {
+            this.canvas.width = w;
+            this.canvas.height = h;
+        }
+    }
+    initListeners() {
+        if (typeof window !== 'undefined') {
+            this.boundResizeHandler = () => {
+                if (this.destroyed)
+                    return;
+                this.syncCanvasSize();
+            };
+            window.addEventListener('resize', this.boundResizeHandler, { passive: true });
+            this.resizeTimer = setTimeout(this.boundResizeHandler, 50);
+        }
+        if (typeof document !== 'undefined') {
+            this.boundVisibilityHandler = () => {
+                if (this.destroyed || this.suspended)
+                    return;
+                if (document.hidden) {
+                    this.stopParticleLoop();
+                }
+                else if (this.currentEffect && this.currentEffect !== 'tint' && this.currentEffect !== 'fog') {
+                    this.startParticleEffect(this.currentEffect);
+                }
+            };
+            document.addEventListener('visibilitychange', this.boundVisibilityHandler);
+        }
+    }
+    particleBudget(intensity) {
+        const base = typeof intensity === 'number' ? Math.min(150, Math.max(10, intensity * 50)) : 50;
+        if (this.lowPower)
+            return Math.min(22, Math.max(10, Math.floor(base * 0.4)));
+        return Math.min(80, base);
+    }
+    startParticleEffect(effect, intensity) {
+        if (this.destroyed || this.suspended)
+            return;
+        this.stopParticleLoop();
+        this.syncCanvasSize();
+        const count = this.particleBudget(intensity);
+        const w = this.canvas.width || 1280;
+        const h = this.canvas.height || 720;
+        this.particles = [];
+        for (let i = 0; i < count; i++) {
+            if (effect === 'sakura') {
+                this.particles.push({
+                    x: Math.random() * w,
+                    y: Math.random() * h,
+                    vx: 1 + Math.random() * 1.5,
+                    vy: 1.5 + Math.random() * 2,
+                    size: 6 + Math.random() * 8,
+                    alpha: 0.6 + Math.random() * 0.4,
+                    rotation: Math.random() * Math.PI * 2,
+                    rotationSpeed: (Math.random() - 0.5) * 0.04,
+                    swingAngle: Math.random() * Math.PI * 2,
+                    swingSpeed: 0.02 + Math.random() * 0.03
+                });
+            }
+            else if (effect === 'rain') {
+                this.particles.push({
+                    x: Math.random() * w,
+                    y: Math.random() * h,
+                    vx: -2 - Math.random() * 2,
+                    vy: 12 + Math.random() * 10,
+                    size: 15 + Math.random() * 12,
+                    alpha: 0.4 + Math.random() * 0.5
+                });
+            }
+            else if (effect === 'snow') {
+                this.particles.push({
+                    x: Math.random() * w,
+                    y: Math.random() * h,
+                    vx: (Math.random() - 0.5) * 1.2,
+                    vy: 1 + Math.random() * 2,
+                    size: 3 + Math.random() * 4,
+                    alpha: 0.5 + Math.random() * 0.5,
+                    swingAngle: Math.random() * Math.PI * 2,
+                    swingSpeed: 0.02 + Math.random() * 0.02
+                });
+            }
+        }
+        this.lastFrameTs = 0;
+        const loop = (timestamp) => {
+            if (this.destroyed || this.suspended)
+                return;
+            if (this.lastFrameTs && timestamp - this.lastFrameTs < this.targetFrameMs) {
+                this.animationFrameId = requestAnimationFrame(loop);
+                return;
+            }
+            const dt = this.lastFrameTs
+                ? Math.min(0.1, Math.max(0.001, (timestamp - this.lastFrameTs) / 1000))
+                : 1 / 60;
+            this.lastFrameTs = timestamp;
+            const speedFactor = dt * 60;
+            this.updateParticles(effect, speedFactor);
+            this.renderParticles(effect);
+            this.animationFrameId = requestAnimationFrame(loop);
+        };
+        this.animationFrameId = requestAnimationFrame(loop);
+    }
+    stopParticleLoop() {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.lastFrameTs = 0;
+    }
+    updateParticles(effect, speedFactor = 1) {
+        const w = this.canvas.width || 1280;
+        const h = this.canvas.height || 720;
+        for (const p of this.particles) {
+            if (effect === 'sakura') {
+                p.swingAngle = (p.swingAngle || 0) + (p.swingSpeed || 0.02) * speedFactor;
+                p.x += (p.vx + Math.sin(p.swingAngle) * 1.5) * speedFactor;
+                p.y += p.vy * speedFactor;
+                p.rotation = (p.rotation || 0) + (p.rotationSpeed || 0.02) * speedFactor;
+                if (p.y > h + 30) {
+                    p.y = -30;
+                    p.x = Math.random() * (w + 40) - 20;
+                }
+                else if (p.y < -40) {
+                    p.y = h + 20;
+                    p.x = Math.random() * (w + 40) - 20;
+                }
+                if (p.x > w + 40)
+                    p.x = -20;
+                if (p.x < -40)
+                    p.x = w + 20;
+            }
+            else if (effect === 'rain') {
+                p.x += p.vx * speedFactor;
+                p.y += p.vy * speedFactor;
+                if (p.y > h + 20) {
+                    p.y = -20;
+                    p.x = Math.random() * w;
+                }
+                if (p.x < -20)
+                    p.x = w + 10;
+            }
+            else if (effect === 'snow') {
+                p.swingAngle = (p.swingAngle || 0) + (p.swingSpeed || 0.02) * speedFactor;
+                p.x += (p.vx + Math.sin(p.swingAngle) * 0.8) * speedFactor;
+                p.y += p.vy * speedFactor;
+                if (p.y > h + 10) {
+                    p.y = -10;
+                    p.x = Math.random() * w;
+                }
+                if (p.x > w + 10)
+                    p.x = -10;
+                if (p.x < -10)
+                    p.x = w + 10;
+            }
+        }
+    }
+    renderParticles(effect) {
+        const ctx = this.ctx;
+        if (!ctx)
+            return;
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        ctx.clearRect(0, 0, w, h);
+        for (const p of this.particles) {
+            ctx.globalAlpha = p.alpha;
+            if (effect === 'sakura') {
+                ctx.save();
+                ctx.translate(p.x, p.y);
+                ctx.rotate(p.rotation || 0);
+                ctx.fillStyle = '#fda4af';
+                ctx.beginPath();
+                ctx.ellipse(0, 0, p.size * 0.55, p.size * 0.35, 0, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+            else if (effect === 'rain') {
+                ctx.strokeStyle = 'rgba(186, 230, 253, 0.85)';
+                ctx.lineWidth = 1.5;
+                ctx.beginPath();
+                ctx.moveTo(p.x, p.y);
+                ctx.lineTo(p.x + p.vx * 0.4, p.y + p.size);
+                ctx.stroke();
+            }
+            else if (effect === 'snow') {
+                ctx.fillStyle = '#f8fafc';
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.size * 0.5, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        ctx.globalAlpha = 1;
+    }
+}
+//# sourceMappingURL=vfx-layer.js.map