dopaminejs 1.1.0 → 2.0.0

package/src/dopamine/effects/ParticleSystem.js

@@ -0,0 +1,327 @@
+/**
+ * Particle Effect System
+ * Creates satisfying visual feedback for achievements and rewards
+ */
+
+export class ParticleSystem {
+    constructor(config = {}) {
+        this.container = config.container ?
+            (typeof config.container === 'string' ? document.querySelector(config.container) : config.container)
+            : document.body;
+
+        this.canvasId = config.canvasId || 'dopamine-particle-canvas';
+        this.canvas = document.getElementById(this.canvasId);
+
+        if (!this.canvas) {
+            this.canvas = document.createElement('canvas');
+            this.canvas.id = this.canvasId;
+            this.canvas.style.pointerEvents = 'none';
+            this.canvas.style.zIndex = config.zIndex || '9999';
+
+            if (this.container === document.body) {
+                this.canvas.style.position = 'fixed';
+                this.canvas.style.top = '0';
+                this.canvas.style.left = '0';
+            } else {
+                this.canvas.style.position = 'absolute';
+                this.canvas.style.top = '0';
+                this.canvas.style.left = '0';
+                // Ensure container is positioned
+                const style = window.getComputedStyle(this.container);
+                if (style.position === 'static') {
+                    this.container.style.position = 'relative';
+                }
+            }
+
+            this.container.appendChild(this.canvas);
+        }
+
+        this.ctx = this.canvas.getContext('2d');
+        this.particles = [];
+        this.pool = []; // Object pool
+        this.sprites = new Map(); // key -> Image
+        this.customEffects = new Map(); // key -> callback
+        this.isAnimating = false;
+
+        this._resize();
+        // Use ResizeObserver for container resizing if supported, fallback to window resize
+        if (window.ResizeObserver && this.container !== document.body) {
+            new ResizeObserver(() => this._resize()).observe(this.container);
+        } else {
+            window.addEventListener('resize', () => this._resize());
+        }
+    }
+
+    _resize() {
+        if (this.container === document.body) {
+            this.canvas.width = window.innerWidth;
+            this.canvas.height = window.innerHeight;
+        } else {
+            this.canvas.width = this.container.clientWidth;
+            this.canvas.height = this.container.clientHeight;
+        }
+    }
+
+    /**
+     * Register a custom sprite image
+     * @param {string} key 
+     * @param {string} url 
+     */
+    registerSprite(key, url) {
+        const img = new Image();
+        img.src = url;
+        this.sprites.set(key, img);
+    }
+
+    /**
+     * Register a custom effect
+     * @param {string} name 
+     * @param {Function} callback - (x, y, ...args) => void
+     */
+    registerEffect(name, callback) {
+        this.customEffects.set(name, callback);
+    }
+
+    /**
+     * Play a registered effect
+     */
+    play(name, x, y, ...args) {
+        const effect = this.customEffects.get(name);
+        if (effect) {
+            effect(x, y, ...args);
+        } else {
+            console.warn(`[DopamineJS] Effect '${name}' not found.`);
+        }
+    }
+
+    /**
+     * Emit particles with custom config
+     * @param {Object} config 
+     */
+    emit(config) {
+        const {
+            x, y,
+            count = 10,
+            speed = 5,
+            gravity = 0.1,
+            decay = 0.02,
+            life = 1.0,
+            color = '#ffd700',
+            sprite = null,
+            spread = Math.PI * 2,
+            angle = 0,
+            size = 5
+        } = config;
+
+        for (let i = 0; i < count; i++) {
+            const p = this._getParticle();
+            const pAngle = angle + (Math.random() - 0.5) * spread;
+            const pSpeed = Math.random() * speed;
+
+            p.x = x;
+            p.y = y;
+            p.vx = Math.cos(pAngle) * pSpeed;
+            p.vy = Math.sin(pAngle) * pSpeed;
+            p.life = life;
+            p.decay = decay * (0.8 + Math.random() * 0.4); // Randomize decay slightly
+            p.gravity = gravity;
+            p.color = Array.isArray(color) ? color[Math.floor(Math.random() * color.length)] : color;
+            p.size = size * (0.8 + Math.random() * 0.4);
+            p.sprite = sprite;
+            p.rotation = Math.random() * Math.PI * 2;
+            p.rotationSpeed = (Math.random() - 0.5) * 0.2;
+
+            this.particles.push(p);
+        }
+
+        this._startAnimation();
+    }
+
+    _getParticle() {
+        if (this.pool.length > 0) {
+            return this.pool.pop();
+        }
+        return {}; // New particle object
+    }
+
+    _recycleParticle(p) {
+        this.pool.push(p);
+    }
+
+    // --- Built-in Effects ---
+
+    confetti(x, y, count = 50) {
+        const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f7dc6f', '#c06c84', '#6c5ce7'];
+        this.emit({
+            x, y, count,
+            color: colors,
+            speed: 10,
+            gravity: 0.3,
+            decay: 0.015,
+            size: 8,
+            spread: Math.PI * 2
+        });
+    }
+
+    coinShower(x, y, count = 10) {
+        this.emit({
+            x, y, count,
+            color: '#ffd700',
+            speed: 4,
+            gravity: 0.4,
+            decay: 0.012,
+            size: 12,
+            angle: -Math.PI / 2, // Upwards initially
+            spread: Math.PI / 2
+        });
+    }
+
+    sparkle(x, y, count = 20, color = '#ffd700') {
+        this.emit({
+            x, y, count,
+            color,
+            speed: 3,
+            gravity: -0.05, // Float up
+            decay: 0.03,
+            size: 3
+        });
+    }
+
+    fire(x, y, count = 15) {
+        const colors = ['#ff6b00', '#ff8800', '#ffaa00', '#ff4400'];
+        this.emit({
+            x, y, count,
+            color: colors,
+            speed: 3,
+            gravity: -0.2,
+            decay: 0.04,
+            size: 5,
+            angle: -Math.PI / 2,
+            spread: Math.PI / 4
+        });
+    }
+
+    starBurst(x, y, count = 8) {
+        // Star burst is unique because of fixed angles, so we keep manual loop or use emit carefully
+        // For simplicity, let's use emit but we lose the perfect star shape distribution
+        // To keep it perfect, we'll manually push particles but use the pool
+        for (let i = 0; i < count; i++) {
+            const p = this._getParticle();
+            const angle = (Math.PI * 2 / count) * i;
+            const speed = 4;
+
+            p.x = x;
+            p.y = y;
+            p.vx = Math.cos(angle) * speed;
+            p.vy = Math.sin(angle) * speed;
+            p.life = 1.0;
+            p.decay = 0.03;
+            p.gravity = 0;
+            p.color = '#ffffff';
+            p.size = 15;
+            p.sprite = null;
+            p.type = 'star'; // Special type for drawing logic
+            p.rotation = angle;
+            p.rotationSpeed = 0;
+
+            this.particles.push(p);
+        }
+        this._startAnimation();
+    }
+
+    _startAnimation() {
+        if (!this.isAnimating) {
+            this.isAnimating = true;
+            this._animate();
+        }
+    }
+
+    _animate() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        for (let i = this.particles.length - 1; i >= 0; i--) {
+            const p = this.particles[i];
+
+            // Physics
+            p.vy += p.gravity;
+            p.x += p.vx;
+            p.y += p.vy;
+            p.life -= p.decay;
+
+            if (p.rotationSpeed) {
+                p.rotation += p.rotationSpeed;
+            }
+
+            // Death
+            if (p.life <= 0) {
+                this._recycleParticle(p);
+                this.particles.splice(i, 1);
+                continue;
+            }
+
+            // Draw
+            this.ctx.save();
+            this.ctx.globalAlpha = p.life;
+            this.ctx.translate(p.x, p.y);
+            this.ctx.rotate(p.rotation);
+
+            if (p.sprite && this.sprites.has(p.sprite)) {
+                const img = this.sprites.get(p.sprite);
+                if (img.complete) {
+                    this.ctx.drawImage(img, -p.size / 2, -p.size / 2, p.size, p.size);
+                }
+            } else if (p.type === 'star') {
+                this.ctx.fillStyle = p.color;
+                this._drawStarPath(0, 0, 5, p.size, p.size / 2);
+                this.ctx.fill();
+            } else {
+                this.ctx.fillStyle = p.color;
+                // Default shape is square for performance/confetti, or circle
+                // Let's usefillRect for speed unless it's a coin/sparkle which usually implies circle
+                // For generic emit, let's assume circle if no sprite
+                this.ctx.beginPath();
+                this.ctx.arc(0, 0, p.size, 0, Math.PI * 2);
+                this.ctx.fill();
+            }
+
+            this.ctx.restore();
+        }
+
+        if (this.particles.length > 0) {
+            requestAnimationFrame(() => this._animate());
+        } else {
+            this.isAnimating = false;
+        }
+    }
+
+    _drawStarPath(cx, cy, spikes, outerRadius, innerRadius) {
+        let rot = Math.PI / 2 * 3;
+        let x = cx;
+        let y = cy;
+        const step = Math.PI / spikes;
+
+        this.ctx.beginPath();
+        this.ctx.moveTo(cx, cy - outerRadius);
+
+        for (let i = 0; i < spikes; i++) {
+            x = cx + Math.cos(rot) * outerRadius;
+            y = cy + Math.sin(rot) * outerRadius;
+            this.ctx.lineTo(x, y);
+            rot += step;
+
+            x = cx + Math.cos(rot) * innerRadius;
+            y = cy + Math.sin(rot) * innerRadius;
+            this.ctx.lineTo(x, y);
+            rot += step;
+        }
+        this.ctx.lineTo(cx, cy - outerRadius);
+        this.ctx.closePath();
+    }
+
+    clear() {
+        // Recycle all
+        this.particles.forEach(p => this._recycleParticle(p));
+        this.particles = [];
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+}

package/src/dopamine/effects/WebGLParticleSystem.js

@@ -0,0 +1,348 @@
+/**
+ * WebGL Particle System
+ * 
+ * High-performance particle renderer using WebGL for 10,000+ particles
+ * Implements IParticleSystem interface
+ */
+
+export class WebGLParticleSystem {
+    constructor(config = {}) {
+        this.maxParticles = config.maxParticles || 10000;
+        this.kernel = null;
+
+        // WebGL context and resources
+        this.canvas = null;
+        this.gl = null;
+        this.program = null;
+        this.particleBuffer = null;
+
+        // Particle data (flat arrays for GPU upload)
+        this.positions = new Float32Array(this.maxParticles * 2); // x, y
+        this.velocities = new Float32Array(this.maxParticles * 2); // vx, vy
+        this.colors = new Float32Array(this.maxParticles * 4); // r, g, b, a
+        this.sizes = new Float32Array(this.maxParticles);
+        this.lifetimes = new Float32Array(this.maxParticles);
+        this.ages = new Float32Array(this.maxParticles);
+
+        this.particleCount = 0;
+        this.registeredEffects = new Map();
+    }
+
+    // ISystem interface
+    init(kernel) {
+        this.kernel = kernel;
+        this._initWebGL();
+        this._createShaders();
+        this._createBuffers();
+
+        console.log('[WebGLParticles] Initialized with max particles:', this.maxParticles);
+    }
+
+    update(dt) {
+        // Update particle physics
+        for (let i = 0; i < this.particleCount; i++) {
+            // Update age
+            this.ages[i] += dt;
+
+            // Remove dead particles
+            if (this.ages[i] >= this.lifetimes[i]) {
+                this._removeParticle(i);
+                i--; // Recheck this index
+                continue;
+            }
+
+            // Update position
+            this.positions[i * 2] += this.velocities[i * 2] * dt;
+            this.positions[i * 2 + 1] += this.velocities[i * 2 + 1] * dt;
+
+            // Apply gravity
+            this.velocities[i * 2 + 1] += 500 * dt; // Gravity
+
+            // Fade out
+            const lifeRatio = this.ages[i] / this.lifetimes[i];
+            this.colors[i * 4 + 3] = 1 - lifeRatio; // Alpha fade
+        }
+
+        // Render
+        this._render();
+    }
+
+    destroy() {
+        if (this.gl) {
+            this.gl.deleteProgram(this.program);
+            this.gl.deleteBuffer(this.particleBuffer);
+        }
+        if (this.canvas && this.canvas.parentNode) {
+            this.canvas.parentNode.removeChild(this.canvas);
+        }
+    }
+
+    // IParticleSystem interface
+    registerSprite(key, url) {
+        // WebGL particles use point sprites, not textures (for simplicity)
+        console.warn('[WebGLParticles] Sprite registration not yet implemented');
+    }
+
+    registerEffect(name, callback) {
+        this.registeredEffects.set(name, callback);
+    }
+
+    play(name, x, y, ...args) {
+        const effect = this.registeredEffects.get(name);
+        if (effect) {
+            effect.call(this, x, y, ...args);
+        }
+    }
+
+    emit(config) {
+        const {
+            x = 0,
+            y = 0,
+            count = 10,
+            color = [1, 1, 1, 1],
+            size = 5,
+            lifetime = 1,
+            velocity = { x: 0, y: -100 },
+            spread = 50
+        } = config;
+
+        for (let i = 0; i < count; i++) {
+            if (this.particleCount >= this.maxParticles) break;
+
+            const idx = this.particleCount;
+
+            // Position
+            this.positions[idx * 2] = x + (Math.random() - 0.5) * spread;
+            this.positions[idx * 2 + 1] = y + (Math.random() - 0.5) * spread;
+
+            // Velocity
+            const angle = Math.random() * Math.PI * 2;
+            const speed = Math.random() * 200 + 100;
+            this.velocities[idx * 2] = Math.cos(angle) * speed + velocity.x;
+            this.velocities[idx * 2 + 1] = Math.sin(angle) * speed + velocity.y;
+
+            // Color
+            this.colors[idx * 4] = color[0];
+            this.colors[idx * 4 + 1] = color[1];
+            this.colors[idx * 4 + 2] = color[2];
+            this.colors[idx * 4 + 3] = color[3];
+
+            // Size and lifetime
+            this.sizes[idx] = size;
+            this.lifetimes[idx] = lifetime;
+            this.ages[idx] = 0;
+
+            this.particleCount++;
+        }
+    }
+
+    clear() {
+        this.particleCount = 0;
+    }
+
+    // Built-in effects
+    confetti(x, y, count = 50) {
+        const colors = [
+            [1, 0, 0, 1],    // Red
+            [0, 1, 0, 1],    // Green
+            [0, 0, 1, 1],    // Blue
+            [1, 1, 0, 1],    // Yellow
+            [1, 0, 1, 1],    // Magenta
+        ];
+
+        for (let i = 0; i < count; i++) {
+            this.emit({
+                x, y,
+                count: 1,
+                color: colors[Math.floor(Math.random() * colors.length)],
+                size: Math.random() * 8 + 4,
+                lifetime: Math.random() * 2 + 1,
+                velocity: { x: 0, y: -300 },
+                spread: 100
+            });
+        }
+    }
+
+    sparkle(x, y, count = 20, color = [1, 1, 1, 1]) {
+        this.emit({
+            x, y,
+            count,
+            color,
+            size: 3,
+            lifetime: 0.5,
+            velocity: { x: 0, y: -50 },
+            spread: 30
+        });
+    }
+
+    // Private methods
+    _initWebGL() {
+        // Create overlay canvas
+        this.canvas = document.createElement('canvas');
+        this.canvas.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 9999;
+        `;
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+        document.body.appendChild(this.canvas);
+
+        // Get WebGL context
+        this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
+        if (!this.gl) {
+            console.error('[WebGLParticles] WebGL not supported');
+            return;
+        }
+
+        // Setup WebGL state
+        this.gl.enable(this.gl.BLEND);
+        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+
+        // Handle resize
+        window.addEventListener('resize', () => {
+            this.canvas.width = window.innerWidth;
+            this.canvas.height = window.innerHeight;
+            this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        });
+    }
+
+    _createShaders() {
+        const vertexShaderSource = `
+            attribute vec2 a_position;
+            attribute vec4 a_color;
+            attribute float a_size;
+            
+            uniform vec2 u_resolution;
+            
+            varying vec4 v_color;
+            
+            void main() {
+                // Convert from pixels to clip space
+                vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0;
+                gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+                gl_PointSize = a_size;
+                v_color = a_color;
+            }
+        `;
+
+        const fragmentShaderSource = `
+            precision mediump float;
+            varying vec4 v_color;
+            
+            void main() {
+                // Circular point sprite
+                vec2 coord = gl_PointCoord - vec2(0.5);
+                if (length(coord) > 0.5) {
+                    discard;
+                }
+                gl_FragColor = v_color;
+            }
+        `;
+
+        const vertexShader = this._compileShader(this.gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = this._compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);
+
+        this.program = this.gl.createProgram();
+        this.gl.attachShader(this.program, vertexShader);
+        this.gl.attachShader(this.program, fragmentShader);
+        this.gl.linkProgram(this.program);
+
+        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+            console.error('[WebGLParticles] Shader program failed to link');
+        }
+    }
+
+    _compileShader(type, source) {
+        const shader = this.gl.createShader(type);
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error('[WebGLParticles] Shader compilation error:', this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+
+        return shader;
+    }
+
+    _createBuffers() {
+        this.particleBuffer = this.gl.createBuffer();
+    }
+
+    _render() {
+        const gl = this.gl;
+
+        // Clear canvas
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        if (this.particleCount === 0) return;
+
+        // Use shader program
+        gl.useProgram(this.program);
+
+        // Set resolution uniform
+        const resolutionLocation = gl.getUniformLocation(this.program, 'u_resolution');
+        gl.uniform2f(resolutionLocation, this.canvas.width, this.canvas.height);
+
+        // Interleave particle data for GPU
+        const vertexData = new Float32Array(this.particleCount * 7); // x, y, r, g, b, a, size
+        for (let i = 0; i < this.particleCount; i++) {
+            vertexData[i * 7] = this.positions[i * 2];
+            vertexData[i * 7 + 1] = this.positions[i * 2 + 1];
+            vertexData[i * 7 + 2] = this.colors[i * 4];
+            vertexData[i * 7 + 3] = this.colors[i * 4 + 1];
+            vertexData[i * 7 + 4] = this.colors[i * 4 + 2];
+            vertexData[i * 7 + 5] = this.colors[i * 4 + 3];
+            vertexData[i * 7 + 6] = this.sizes[i];
+        }
+
+        // Upload to GPU
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.particleBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.DYNAMIC_DRAW);
+
+        // Setup attributes
+        const stride = 7 * 4; // 7 floats * 4 bytes
+
+        const positionLocation = gl.getAttribLocation(this.program, 'a_position');
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, stride, 0);
+
+        const colorLocation = gl.getAttribLocation(this.program, 'a_color');
+        gl.enableVertexAttribArray(colorLocation);
+        gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, stride, 2 * 4);
+
+        const sizeLocation = gl.getAttribLocation(this.program, 'a_size');
+        gl.enableVertexAttribArray(sizeLocation);
+        gl.vertexAttribPointer(sizeLocation, 1, gl.FLOAT, false, stride, 6 * 4);
+
+        // Draw particles
+        gl.drawArrays(gl.POINTS, 0, this.particleCount);
+    }
+
+    _removeParticle(index) {
+        // Swap with last particle and decrease count
+        const last = this.particleCount - 1;
+        if (index !== last) {
+            // Copy last particle to this index
+            this.positions[index * 2] = this.positions[last * 2];
+            this.positions[index * 2 + 1] = this.positions[last * 2 + 1];
+            this.velocities[index * 2] = this.velocities[last * 2];
+            this.velocities[index * 2 + 1] = this.velocities[last * 2 + 1];
+            this.colors[index * 4] = this.colors[last * 4];
+            this.colors[index * 4 + 1] = this.colors[last * 4 + 1];
+            this.colors[index * 4 + 2] = this.colors[last * 4 + 2];
+            this.colors[index * 4 + 3] = this.colors[last * 4 + 3];
+            this.sizes[index] = this.sizes[last];
+            this.lifetimes[index] = this.lifetimes[last];
+            this.ages[index] = this.ages[last];
+        }
+        this.particleCount--;
+    }
+}