dopaminejs 1.2.0 → 2.0.0

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--;
+    }
+}

package/src/dopamine/index.js

@@ -0,0 +1,62 @@
+import { RewardSystem } from './core/RewardSystem.js';
+import { DataService } from './core/DataService.js';
+import { GameUI } from './ui/GameUI.js';
+import { ParticleSystem } from './effects/ParticleSystem.js';
+import { SoundManager } from './audio/SoundManager.js';
+import './ui/dopamine.css';
+
+export { RewardSystem, DataService, GameUI, ParticleSystem, SoundManager };
+
+export default class Dopamine {
+    constructor(config = {}) {
+        this.config = config;
+
+        // Initialize subsystems with config
+        this.dataService = new DataService(config.data || {});
+        this.rewardSystem = new RewardSystem(this.dataService, config.rewards || {});
+        this.soundManager = new SoundManager(config.sound || {});
+        this.particleSystem = new ParticleSystem(config.particles || {});
+        this.gameUI = new GameUI(this.particleSystem);
+
+        // Bind UI to RewardSystem events
+        this._bindEvents();
+    }
+
+    async init() {
+        await this.rewardSystem.init();
+        console.log('DopamineJS Initialized 🚀');
+        return {
+            rewardSystem: this.rewardSystem,
+            gameUI: this.gameUI,
+            particleSystem: this.particleSystem,
+            soundManager: this.soundManager
+        };
+    }
+
+    _bindEvents() {
+        this.rewardSystem.on('xp_gained', (data) => {
+            const { total, needed } = this.rewardSystem.getXPForNextLevel();
+            this.gameUI.updateXP(this.rewardSystem.player.xp, needed, total);
+
+            if (data.xpGained > 0) {
+                // Show floating text for XP gain
+                // We might need a way to know WHERE to show this, or just show it in a standard place
+                // For now, let's just update the bar
+            }
+        });
+
+        this.rewardSystem.on('level_up', (data) => {
+            this.gameUI.updateLevel(data.newLevel);
+            this.gameUI.showLevelUp(data.oldLevel, data.newLevel);
+        });
+
+        this.rewardSystem.on('achievement_unlocked', (achievement) => {
+            this.gameUI.showAchievement(achievement);
+        });
+
+        this.rewardSystem.on('new_high_score', (data) => {
+            this.gameUI.showNotification(`New High Score: ${data.score}!`, 'legendary');
+            this.soundManager.playSuccess();
+        });
+    }
+}

package/src/dopamine/utils/TextureGenerator.js

@@ -0,0 +1,90 @@
+/**
+ * Generates procedural textures for prototyping.
+ */
+export class TextureGenerator {
+    static createGround(width, height, color = '#333') {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, width, height);
+
+        // Noise / Grit
+        for (let i = 0; i < 1000; i++) {
+            ctx.fillStyle = Math.random() > 0.5 ? '#444' : '#222';
+            const size = Math.random() * 4 + 2;
+            ctx.fillRect(Math.random() * width, Math.random() * height, size, size);
+        }
+
+        // Grid lines overlay (faint)
+        ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        for (let i = 0; i <= width; i += 64) {
+            ctx.moveTo(i, 0); ctx.lineTo(i, height);
+        }
+        for (let i = 0; i <= height; i += 64) {
+            ctx.moveTo(0, i); ctx.lineTo(width, i);
+        }
+        ctx.stroke();
+
+        return canvas;
+    }
+
+    static createCharacterSheet(colorBody, colorDetail) {
+        // Create a 4-frame walk cycle strip (Vertical or Horizontal)
+        // Let's do Horizontal: 64x64 frames, 4 frames -> 256x64 image
+        const cellW = 64;
+        const cellH = 64;
+        const canvas = document.createElement('canvas');
+        canvas.width = cellW * 4;
+        canvas.height = cellH;
+        const ctx = canvas.getContext('2d');
+
+        for (let i = 0; i < 4; i++) {
+            const x = i * cellW;
+            const y = 0;
+            const cx = x + cellW / 2;
+            const cy = y + cellH / 2;
+
+            // -- Frame Animation Variances --
+            // Bobbing effect
+            const bob = (i % 2 === 0) ? 0 : -2;
+            // Leg swing (simulated by shape change or just simple offset)
+            const legOffset = (i === 1) ? 5 : (i === 3 ? -5 : 0);
+
+            // Body
+            ctx.fillStyle = colorBody;
+            ctx.beginPath();
+            ctx.arc(cx, cy + bob, 20, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Shoulders/Hands (Top Down)
+            ctx.fillStyle = colorDetail;
+            ctx.beginPath();
+            ctx.arc(cx - 15, cy + bob + legOffset, 8, 0, Math.PI * 2); // Left hand
+            ctx.arc(cx + 15, cy + bob - legOffset, 8, 0, Math.PI * 2); // Right hand
+            ctx.fill();
+
+            // Head/Helmet
+            ctx.fillStyle = adjustColor(colorBody, -20);
+            ctx.beginPath();
+            ctx.arc(cx, cy + bob, 15, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Gun (if soldier)
+            if (colorDetail === '#333') { // Hacky check
+                ctx.fillStyle = '#000';
+                ctx.fillRect(cx + 10, cy + bob - 5, 25, 6);
+            }
+        }
+
+        return canvas;
+    }
+}
+
+function adjustColor(color, amount) {
+    return color; // Placeholder for color darkening logic
+}

package/src/index.js

@@ -1,62 +1,34 @@
-import { RewardSystem } from './core/RewardSystem.js';
-import { DataService } from './core/DataService.js';
-import { GameUI } from './ui/GameUI.js';
-import { ParticleSystem } from './effects/ParticleSystem.js';
-import { SoundManager } from './audio/SoundManager.js';
-import './ui/dopamine.css';
-
-export { RewardSystem, DataService, GameUI, ParticleSystem, SoundManager };
-
-export default class Dopamine {
-    constructor(config = {}) {
-        this.config = config;
-
-        // Initialize subsystems with config
-        this.dataService = new DataService(config.data || {});
-        this.rewardSystem = new RewardSystem(this.dataService, config.rewards || {});
-        this.soundManager = new SoundManager(config.sound || {});
-        this.particleSystem = new ParticleSystem(config.particles || {});
-        this.gameUI = new GameUI(this.particleSystem);
-
-        // Bind UI to RewardSystem events
-        this._bindEvents();
-    }
-
-    async init() {
-        await this.rewardSystem.init();
-        console.log('DopamineJS Initialized 🚀');
-        return {
-            rewardSystem: this.rewardSystem,
-            gameUI: this.gameUI,
-            particleSystem: this.particleSystem,
-            soundManager: this.soundManager
-        };
-    }
-
-    _bindEvents() {
-        this.rewardSystem.on('xp_gained', (data) => {
-            const { total, needed } = this.rewardSystem.getXPForNextLevel();
-            this.gameUI.updateXP(this.rewardSystem.player.xp, needed, total);
-
-            if (data.xpGained > 0) {
-                // Show floating text for XP gain
-                // We might need a way to know WHERE to show this, or just show it in a standard place
-                // For now, let's just update the bar
-            }
-        });
-
-        this.rewardSystem.on('level_up', (data) => {
-            this.gameUI.updateLevel(data.newLevel);
-            this.gameUI.showLevelUp(data.oldLevel, data.newLevel);
-        });
-
-        this.rewardSystem.on('achievement_unlocked', (achievement) => {
-            this.gameUI.showAchievement(achievement);
-        });
-
-        this.rewardSystem.on('new_high_score', (data) => {
-            this.gameUI.showNotification(`New High Score: ${data.score}!`, 'legendary');
-            this.soundManager.playSuccess();
-        });
-    }
-}
+import Dopamine from './dopamine/index.js';
+
+// Re-export legacy systems
+export * from './dopamine/index.js';
+
+// Export New Kernel Architecture (Phase 0)
+export { DopamineKernel } from './core/DopamineKernel.js';
+export { EventBus } from './core/EventBus.js';
+export { SystemRegistry } from './core/SystemRegistry.js';
+export { PluginRegistry } from './core/PluginRegistry.js';
+
+// Export System Interfaces
+export * from './interfaces/index.js';
+
+// Export New Engine Core
+export { Game } from './core/Game.js';
+export { Scene } from './core/Scene.js';
+export { GameObject } from './core/GameObject.js';
+export { Component } from './core/Component.js';
+export { Renderer } from './renderer/Renderer.js';
+export { Ticker } from './systems/Ticker.js';
+export { Loader, GlobalLoader } from './systems/Loader.js';
+export { Input, GlobalInput } from './systems/Input.js';
+export { Director } from './systems/Director.js';
+export { Physics, GlobalPhysics } from './systems/Physics.js';
+export { Vector2 } from './core/Vector2.js';
+export { Collider } from './core/Collider.js';
+export { Sprite } from './core/Sprite.js';
+export { Animator } from './core/Animator.js';
+export { TextureGenerator } from './dopamine/utils/TextureGenerator.js';
+export { ParticleEmitter, ScreenShake } from './dopamine/components/index.js';
+
+// Export default for backward compatibility
+export default Dopamine;

package/src/interfaces/IAudioSystem.js

@@ -0,0 +1,58 @@
+import { ISystem } from './ISystem.js';
+
+/**
+ * IAudioSystem - Interface for audio implementations
+ * 
+ * Allows different audio engines (Web Audio, Howler.js, etc.) to be swapped
+ */
+export const IAudioSystem = {
+    ...ISystem,
+
+    /**
+     * Register a sound with a key
+     * @param {string} key - Sound identifier
+     * @param {string} url - Path to audio file
+     */
+    registerSound(key, url) { },
+
+    /**
+     * Preload multiple sounds
+     * @param {Object} soundMap - Map of key -> url
+     * @returns {Promise<void>}
+     */
+    preloadSounds(soundMap) { },
+
+    /**
+     * Play a sound by key
+     * @param {string} key - Sound identifier
+     * @param {Object} options - Playback options (volume, loop, etc.)
+     */
+    play(key, options) { },
+
+    /**
+     * Play a synthesized tone
+     * @param {number} frequency - Frequency in Hz
+     * @param {number} duration - Duration in seconds
+     * @param {string} type - Waveform type ('sine', 'square', etc.)
+     * @param {number} volume - Volume (0-1)
+     */
+    playTone(frequency, duration, type, volume) { },
+
+    /**
+     * Stop a playing sound
+     * @param {string} key - Sound identifier
+     */
+    stop(key) { },
+
+    /**
+     * Toggle mute state
+     * @returns {boolean} - New mute state
+     */
+    toggleMute() { },
+
+    /**
+     * Set master volume
+     * @param {number} volume - Volume (0-1)
+     */
+    setVolume(volume) { },
+};