dopaminejs 1.0.0

package/src/effects/ParticleSystem.js

@@ -0,0 +1,259 @@
+/**
+ * Particle Effect System
+ * Creates satisfying visual feedback for achievements and rewards
+ */
+
+export class ParticleSystem {
+    constructor(canvasId = 'dopamine-particle-canvas') {
+        this.canvasId = canvasId;
+        this.canvas = document.getElementById(canvasId);
+
+        if (!this.canvas) {
+            // Create overlay canvas if it doesn't exist
+            this.canvas = document.createElement('canvas');
+            this.canvas.id = canvasId;
+            this.canvas.style.position = 'fixed';
+            this.canvas.style.top = '0';
+            this.canvas.style.left = '0';
+            this.canvas.style.width = '100%';
+            this.canvas.style.height = '100%';
+            this.canvas.style.pointerEvents = 'none';
+            this.canvas.style.zIndex = '9999';
+            document.body.appendChild(this.canvas);
+        }
+
+        this.ctx = this.canvas.getContext('2d');
+        this.particles = [];
+        this.isAnimating = false;
+
+        this._resize();
+        window.addEventListener('resize', () => this._resize());
+    }
+
+    _resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+
+    /**
+     * Confetti explosion (for achievements, level ups)
+     */
+    confetti(x, y, count = 50) {
+        const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f7dc6f', '#c06c84', '#6c5ce7'];
+
+        for (let i = 0; i < count; i++) {
+            this.particles.push({
+                x, y,
+                vx: (Math.random() - 0.5) * 10,
+                vy: (Math.random() - 0.5) * 10 - 5,
+                rotation: Math.random() * Math.PI * 2,
+                rotationSpeed: (Math.random() - 0.5) * 0.2,
+                color: colors[Math.floor(Math.random() * colors.length)],
+                size: Math.random() * 8 + 4,
+                life: 1.0,
+                decay: 0.015 + Math.random() * 0.01,
+                gravity: 0.3,
+                type: 'confetti'
+            });
+        }
+
+        this._startAnimation();
+    }
+
+    /**
+     * Sparkle effect (for score milestones, combos)
+     */
+    sparkle(x, y, count = 20, color = '#ffd700') {
+        for (let i = 0; i < count; i++) {
+            const angle = (Math.PI * 2 / count) * i;
+            const speed = 2 + Math.random() * 3;
+
+            this.particles.push({
+                x, y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                color,
+                size: Math.random() * 4 + 2,
+                life: 1.0,
+                decay: 0.02,
+                gravity: -0.1, // Slight upward drift
+                type: 'spark'
+            });
+        }
+
+        this._startAnimation();
+    }
+
+    /**
+     * Coin shower (for collecting coins)
+     */
+    coinShower(x, y, count = 10) {
+        for (let i = 0; i < count; i++) {
+            this.particles.push({
+                x: x + (Math.random() - 0.5) * 100,
+                y: y - Math.random() * 50,
+                vx: (Math.random() - 0.5) * 3,
+                vy: Math.random() * -2 - 3,
+                color: '#ffd700',
+                size: 12,
+                life: 1.0,
+                decay: 0.012,
+                gravity: 0.4,
+                type: 'coin'
+            });
+        }
+
+        this._startAnimation();
+    }
+
+    /**
+     * Fire particles (for streaks, combos)
+     */
+    fire(x, y, count = 15) {
+        const colors = ['#ff6b00', '#ff8800', '#ffaa00', '#ff4400'];
+
+        for (let i = 0; i < count; i++) {
+            this.particles.push({
+                x: x + (Math.random() - 0.5) * 20,
+                y,
+                vx: (Math.random() - 0.5) * 2,
+                vy: -Math.random() * 3 - 2,
+                color: colors[Math.floor(Math.random() * colors.length)],
+                size: Math.random() * 6 + 3,
+                life: 1.0,
+                decay: 0.025,
+                gravity: -0.2, // Upward
+                type: 'fire'
+            });
+        }
+
+        this._startAnimation();
+    }
+
+    /**
+     * Star burst (for "perfect" moments)
+     */
+    starBurst(x, y, count = 8) {
+        for (let i = 0; i < count; i++) {
+            const angle = (Math.PI * 2 / count) * i;
+            const speed = 4;
+
+            this.particles.push({
+                x, y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                rotation: angle,
+                color: '#ffffff',
+                size: 15,
+                life: 1.0,
+                decay: 0.03,
+                gravity: 0,
+                type: 'star'
+            });
+        }
+
+        this._startAnimation();
+    }
+
+    _startAnimation() {
+        if (!this.isAnimating) {
+            this.isAnimating = true;
+            this._animate();
+        }
+    }
+
+    _animate() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // Update and draw particles
+        for (let i = this.particles.length - 1; i >= 0; i--) {
+            const p = this.particles[i];
+
+            // Update physics
+            p.vy += p.gravity;
+            p.x += p.vx;
+            p.y += p.vy;
+            p.life -= p.decay;
+
+            if (p.rotationSpeed) {
+                p.rotation += p.rotationSpeed;
+            }
+
+            // Remove dead particles
+            if (p.life <= 0) {
+                this.particles.splice(i, 1);
+                continue;
+            }
+
+            // Draw particle
+            this.ctx.save();
+            this.ctx.globalAlpha = p.life;
+            this.ctx.fillStyle = p.color;
+
+            if (p.type === 'confetti') {
+                this.ctx.translate(p.x, p.y);
+                this.ctx.rotate(p.rotation);
+                this.ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size / 2);
+            } else if (p.type === 'coin') {
+                this.ctx.beginPath();
+                this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+                this.ctx.fill();
+                // Add shine
+                this.ctx.fillStyle = '#ffee88';
+                this.ctx.beginPath();
+                this.ctx.arc(p.x - p.size / 3, p.y - p.size / 3, p.size / 3, 0, Math.PI * 2);
+                this.ctx.fill();
+            } else if (p.type === 'star') {
+                this._drawStar(p.x, p.y, 5, p.size, p.size / 2, p.rotation);
+            } else {
+                // Default: circle
+                this.ctx.beginPath();
+                this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+                this.ctx.fill();
+            }
+
+            this.ctx.restore();
+        }
+
+        // Continue animation if particles remain
+        if (this.particles.length > 0) {
+            requestAnimationFrame(() => this._animate());
+        } else {
+            this.isAnimating = false;
+        }
+    }
+
+    _drawStar(cx, cy, spikes, outerRadius, innerRadius, rotation) {
+        let rot = Math.PI / 2 * 3 + rotation;
+        const step = Math.PI / spikes;
+
+        this.ctx.beginPath();
+        this.ctx.moveTo(cx, cy - outerRadius);
+
+        for (let i = 0; i < spikes; i++) {
+            let x = cx + Math.cos(rot) * outerRadius;
+            let 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();
+        this.ctx.fill();
+    }
+
+    /**
+     * Clear all particles
+     */
+    clear() {
+        this.particles = [];
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+}
+
+export const particleSystem = new ParticleSystem();

package/src/index.js

@@ -0,0 +1,25 @@
+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;
+    }
+
+    async init() {
+        await rewardSystem.init();
+        console.log('DopamineJS Initialized 🚀');
+        return {
+            rewardSystem,
+            gameUI,
+            particleSystem,
+            soundManager
+        };
+    }
+}

package/src/ui/GameUI.js

@@ -0,0 +1,258 @@
+/**
+ * UI Components for Dopamine-Driven Games
+ * Reusable UI elements for XP bars, achievement popups, level-up screens, etc.
+ */
+
+import { particleSystem } from '../effects/ParticleSystem.js';
+
+export class GameUI {
+    constructor() {
+        this.container = null;
+        this.xpBar = null;
+        this.levelDisplay = null;
+        this.streakDisplay = null;
+        this.init();
+    }
+
+    /**
+     * Initialize UI overlay
+     */
+    init() {
+        // Create main container
+        this.container = document.createElement('div');
+        this.container.id = 'game-ui-overlay';
+        this.container.innerHTML = `
+            <div class="game-ui-top-bar">
+                <div class="level-badge" id="level-badge">
+                    <span class="level-label">LVL</span>
+                    <span class="level-number" id="level-number">1</span>
+                </div>
+                
+                <div class="xp-container">
+                    <div class="xp-bar-bg">
+                        <div class="xp-bar-fill" id="xp-bar-fill" style="width: 0%"></div>
+                    </div>
+                    <div class="xp-text" id="xp-text">0 /100 XP</div>
+                </div>
+                
+                <div class="streak-badge" id="streak-badge">
+                    <span class="streak-icon">🔥</span>
+                    <span class="streak-number" id="streak-number">1</span>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(this.container);
+
+        // Cache elements
+        this.xpBar = document.getElementById('xp-bar-fill');
+        this.xpText = document.getElementById('xp-text');
+        this.levelDisplay = document.getElementById('level-number');
+        this.streakDisplay = document.getElementById('streak-number');
+    }
+
+    /**
+     * Update XP bar
+     */
+    updateXP(current, needed, total) {
+        const progress = (current / total) * 100;
+        this.xpBar.style.width = `${Math.min(100, progress)}%`;
+        this.xpText.textContent = `${current} / ${total} XP`;
+
+        // Add pulse animation when gaining XP
+        this.xpBar.style.animation = 'none';
+        setTimeout(() => {
+            this.xpBar.style.animation = 'xp-pulse 0.3s ease-out';
+        }, 10);
+    }
+
+    /**
+     * Update level display
+     */
+    updateLevel(level) {
+        this.levelDisplay.textContent = level;
+
+        // Pulse animation
+        const badge = document.getElementById('level-badge');
+        badge.style.animation = 'none';
+        setTimeout(() => {
+            badge.style.animation = 'level-pulse 0.5s ease-out';
+        }, 10);
+    }
+
+    /**
+     * Update streak display
+     */
+    updateStreak(days) {
+        this.streakDisplay.textContent = days;
+
+        // Change color based on streak
+        const badge = document.getElementById('streak-badge');
+        if (days >= 7) {
+            badge.style.background = 'linear-gradient(135deg, #ff6b00 0%, #ff4400 100%)';
+        } else if (days >= 3) {
+            badge.style.background = 'linear-gradient(135deg, #ff8800 0%, #ff6b00 100%)';
+        }
+    }
+
+    /**
+     * Show achievement unlocked popup
+     */
+    showAchievement(achievement) {
+        const popup = document.createElement('div');
+        popup.className = 'achievement-popup';
+        popup.innerHTML = `
+            <div class="achievement-shine"></div>
+            <div class="achievement-content">
+                <div class="achievement-icon">${achievement.icon}</div>
+                <div class="achievement-info">
+                    <div class="achievement-title">Achievement Unlocked!</div>
+                    <div class="achievement-name">${achievement.name}</div>
+                    <div class="achievement-desc">${achievement.description}</div>
+                    <div class="achievement-xp">+${achievement.xp} XP</div>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(popup);
+
+        // Trigger confetti at popup location
+        setTimeout(() => {
+            const rect = popup.getBoundingClientRect();
+            particleSystem.confetti(rect.left + rect.width / 2, rect.top + rect.height / 2, 40);
+        }, 300);
+
+        // Remove after animation
+        setTimeout(() => {
+            popup.style.animation = 'slideOut 0.3s ease-in forwards';
+            setTimeout(() => popup.remove(), 300);
+        }, 4000);
+    }
+
+    /**
+     * Show level up screen
+     */
+    showLevelUp(oldLevel, newLevel) {
+        const overlay = document.createElement('div');
+        overlay.className = 'level-up-overlay';
+        overlay.innerHTML = `
+            <div class="level-up-content">
+                <div class="level-up-title">LEVEL UP!</div>
+                <div class="level-up-number">${newLevel}</div>
+                <div class="level-up-subtitle">Amazing progress!</div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+
+        // Fireworks effect
+        setTimeout(() => {
+            for (let i = 0; i < 5; i++) {
+                setTimeout(() => {
+                    const x = Math.random() * window.innerWidth;
+                    const y = Math.random() * window.innerHeight * 0.6;
+                    particleSystem.confetti(x, y, 30);
+                }, i * 200);
+            }
+        }, 300);
+
+        // Remove after 3 seconds
+        setTimeout(() => {
+            overlay.style.opacity = '0';
+            setTimeout(() => overlay.remove(), 500);
+        }, 2500);
+    }
+
+    /**
+     * Show floating text (e.g., "+50 XP", "COMBO!")
+     */
+    showFloatingText(text, x, y, color = '#ffd700', size = '24px') {
+        const floater = document.createElement('div');
+        floater.className = 'floating-text';
+        floater.textContent = text;
+        floater.style.left = x + 'px';
+        floater.style.top = y + 'px';
+        floater.style.color = color;
+        floater.style.fontSize = size;
+
+        document.body.appendChild(floater);
+
+        setTimeout(() => floater.remove(), 2000);
+    }
+
+    /**
+     * Show combo multiplier
+     */
+    showCombo(multiplier, x, y) {
+        this.showFloatingText(`${multiplier}× COMBO!`, x, y, '#ff6b6b', '32px');
+        particleSystem.fire(x, y, 20);
+    }
+
+    /**
+     * Show "near miss"indicator
+     */
+    showNearMiss(x, y) {
+        this.showFloatingText('CLOSE CALL!', x, y, '#45b7d1', '20px');
+        particleSystem.sparkle(x, y, 15, '#45b7d1');
+    }
+
+    /**
+     * Show lucky moment (random multiplier)
+     */
+    showLuckyMoment(multiplier, x, y) {
+        this.showFloatingText(`LUCKY ${multiplier}×!`, x, y, '#ffd700', '36px');
+        particleSystem.starBurst(x, y, 12);
+        particleSystem.confetti(x, y, 25);
+    }
+
+    /**
+     * Show generic notification
+     */
+    showNotification(message, type = 'normal') {
+        const x = window.innerWidth / 2;
+        const y = window.innerHeight / 3;
+
+        if (type === 'legendary') {
+            this.showLuckyMoment(message, x, y);
+        } else if (type === 'rare') {
+            this.showCombo(message, x, y);
+        } else {
+            this.showFloatingText(message, x, y, '#fff', '24px');
+        }
+    }
+
+    /**
+     * Show Game Over Summary
+     */
+    showSummary(data) {
+        const overlay = document.createElement('div');
+        overlay.className = 'message-box';
+        overlay.style.display = 'flex';
+        overlay.style.position = 'absolute';
+        overlay.style.top = '50%';
+        overlay.style.left = '50%';
+        overlay.style.transform = 'translate(-50%, -50%)';
+        overlay.style.zIndex = '1000';
+
+        let metricsHtml = '';
+        if (data.metrics) {
+            metricsHtml = Object.entries(data.metrics)
+                .map(([key, value]) => `<div style="display:flex;justify-content:space-between;width:100%"><span>${key}:</span> <strong>${value}</strong></div>`)
+                .join('');
+        }
+
+        overlay.innerHTML = `
+            <h1>Game Over</h1>
+            <div style="font-size: 3rem; font-weight: bold; color: #e06020; margin: 10px 0;">${data.score}</div>
+            <div style="width: 100%; margin-bottom: 20px;">
+                ${metricsHtml}
+            </div>
+            <button class="btn" onclick="location.reload()">Play Again</button>
+            <button class="btn" onclick="window.location.href='index.html'" style="margin-top: 10px; background: #543847;">Exit</button>
+        `;
+
+        document.body.appendChild(overlay);
+    }
+}
+
+export const gameUI = new GameUI();