// gamify-effects.jsx — Gamification layer: confetti, XP, combos, sounds, celebrations // Draws from game design psychology: variable reinforcement, combo momentum, progress bars, juice const { useState: useGState, useRef: useGRef, useEffect: useGEffect, useCallback: useGCb, createContext, useContext } = React; // ═══════════════════════════════════════════════════ // Audio Engine — synthesized sounds via Web Audio API // ═══════════════════════════════════════════════════ const GamifyAudio = (() => { let ctx = null; function getCtx() { if (!ctx) ctx = new (window.AudioContext || window.webkitAudioContext)(); if (ctx.state === 'suspended') ctx.resume(); return ctx; } function playTone(freq, duration, type = 'sine', vol = 0.15, delay = 0) { const c = getCtx(); const osc = c.createOscillator(); const gain = c.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, c.currentTime + delay); gain.gain.setValueAtTime(vol, c.currentTime + delay); gain.gain.exponentialRampToValueAtTime(0.001, c.currentTime + delay + duration); osc.connect(gain); gain.connect(c.destination); osc.start(c.currentTime + delay); osc.stop(c.currentTime + delay + duration); } return { // Satisfying "ding" for task completion complete() { playTone(880, 0.12, 'sine', 0.12); playTone(1320, 0.18, 'sine', 0.10, 0.06); }, // Higher pitched combo ding combo(count) { const base = 660 + count * 110; playTone(base, 0.08, 'sine', 0.10); playTone(base * 1.5, 0.14, 'sine', 0.08, 0.04); playTone(base * 2, 0.12, 'sine', 0.06, 0.08); }, // Level up fanfare levelUp() { [523, 659, 784, 1047].forEach((f, i) => { playTone(f, 0.22, 'sine', 0.10, i * 0.09); playTone(f * 1.5, 0.16, 'triangle', 0.05, i * 0.09 + 0.02); }); }, // Achievement unlock achievement() { playTone(784, 0.10, 'sine', 0.12); playTone(988, 0.10, 'sine', 0.10, 0.08); playTone(1175, 0.25, 'sine', 0.12, 0.16); }, // All done celebration allDone() { [523, 659, 784, 988, 1175, 1319, 1568].forEach((f, i) => { playTone(f, 0.3, 'sine', 0.08, i * 0.07); playTone(f * 0.5, 0.25, 'triangle', 0.04, i * 0.07 + 0.02); }); }, }; })(); // ═══════════════════════════════════════════════════ // Confetti Canvas — high-perf particle system // ═══════════════════════════════════════════════════ function ConfettiCanvas({ bursts }) { const canvasRef = useGRef(null); const particlesRef = useGRef([]); const rafRef = useGRef(null); const COLORS = ['#00d4aa','#00e676','#00b4d8','#fbbf24','#a78bfa','#f472b6','#38bdf8','#34d399','#fb923c','#e879f9']; useGEffect(() => { if (!bursts || bursts.length === 0) return; const latest = bursts[bursts.length - 1]; const { x, y, count = 40, spread = 1, power = 1 } = latest; for (let i = 0; i < count; i++) { const angle = (Math.random() * Math.PI * 2); const speed = (2 + Math.random() * 6) * power; const size = 3 + Math.random() * 5; const shape = Math.random() > 0.4 ? 'rect' : 'circle'; const rotation = Math.random() * 360; const rotSpeed = (Math.random() - 0.5) * 12; particlesRef.current.push({ x, y, vx: Math.cos(angle) * speed * spread, vy: Math.sin(angle) * speed * spread - 2 * power, size, color: COLORS[Math.floor(Math.random() * COLORS.length)], life: 1, decay: 0.008 + Math.random() * 0.012, shape, rotation, rotSpeed, gravity: 0.12 + Math.random() * 0.06, }); } if (!rafRef.current) animate(); }, [bursts]); function animate() { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const W = canvas.width = canvas.offsetWidth; const H = canvas.height = canvas.offsetHeight; ctx.clearRect(0, 0, W, H); const alive = []; for (const p of particlesRef.current) { p.x += p.vx; p.y += p.vy; p.vy += p.gravity; p.vx *= 0.98; p.life -= p.decay; p.rotation += p.rotSpeed; if (p.life <= 0) continue; alive.push(p); ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rotation * Math.PI / 180); ctx.globalAlpha = Math.min(1, p.life * 2); ctx.fillStyle = p.color; if (p.shape === 'rect') { ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2); } else { ctx.beginPath(); ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); } particlesRef.current = alive; if (alive.length > 0) { rafRef.current = requestAnimationFrame(animate); } else { rafRef.current = null; } } return ( ); } // ═══════════════════════════════════════════════════ // Screen Flash — brief color overlay // ═══════════════════════════════════════════════════ function ScreenFlash({ flash }) { const [active, setActive] = useGState(false); const [color, setColor] = useGState('rgba(0,212,170,0.15)'); const prevFlash = useGRef(0); useGEffect(() => { if (!flash || flash.id === prevFlash.current) return; prevFlash.current = flash.id; setColor(flash.color || 'rgba(0,212,170,0.12)'); setActive(true); const t = setTimeout(() => setActive(false), 350); return () => clearTimeout(t); }, [flash]); return (
); } // ═══════════════════════════════════════════════════ // XP Bar — persistent progress indicator // ═══════════════════════════════════════════════════ function XPBar({ xp, level, show, position = 'bottom' }) { const XP_PER_LEVEL = 100; const currentXP = xp % XP_PER_LEVEL; const pct = (currentXP / XP_PER_LEVEL) * 100; const [displayPct, setDisplayPct] = useGState(0); const [pop, setPop] = useGState(false); const prevXP = useGRef(xp); useGEffect(() => { if (xp !== prevXP.current) { setPop(true); setTimeout(() => setPop(false), 400); prevXP.current = xp; } setDisplayPct(pct); }, [xp, pct]); if (!show) return null; const isTop = position === 'top'; return (
{/* Level badge */}
{level}
LVL
{/* XP bar */}
{/* Shimmer */}
{/* XP text */} {currentXP}/{XP_PER_LEVEL} XP
); } // ═══════════════════════════════════════════════════ // Combo Indicator — shows multiplier on quick completions // ═══════════════════════════════════════════════════ function ComboIndicator({ combo, x, y }) { if (!combo || combo.count < 2) return null; const colors = ['', '', '#00d4aa', '#38bdf8', '#a78bfa', '#fbbf24', '#f472b6', '#ef4444']; const clr = colors[Math.min(combo.count, 7)]; const msgs = ['', '', 'DOUBLE!', 'TRIPLE!', 'MEGA!', 'ULTRA!', 'INSANE!', 'GODLIKE!']; const msg = msgs[Math.min(combo.count, 7)]; return ReactDOM.createPortal(
= 5 ? 48 : combo.count >= 3 ? 38 : 28, fontWeight: 900, color: clr, textShadow: `0 0 30px ${clr}88, 0 0 60px ${clr}44`, letterSpacing: '-1px', lineHeight: 1, fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", textAlign: 'center', }}> {combo.count}x
{msg}
, document.body ); } // ═══════════════════════════════════════════════════ // XP Popup — "+15 XP" floating text // ═══════════════════════════════════════════════════ function XPPopup({ popups }) { return ReactDOM.createPortal(
{popups.map(p => (
+{p.amount} XP
))}
, document.body ); } // ═══════════════════════════════════════════════════ // Achievement Toast — slides in from top // ═══════════════════════════════════════════════════ function AchievementToast({ achievement }) { if (!achievement) return null; return ReactDOM.createPortal(
{achievement.icon}
ACHIEVEMENT
{achievement.title}
{achievement.subtitle &&
{achievement.subtitle}
}
, document.body ); } // ═══════════════════════════════════════════════════ // Level Up Overlay — full-screen celebration // ═══════════════════════════════════════════════════ function LevelUpOverlay({ level, show }) { const [visible, setVisible] = useGState(false); useGEffect(() => { if (show) { setVisible(true); const t = setTimeout(() => setVisible(false), 2800); return () => clearTimeout(t); } }, [show]); if (!visible) return null; return ReactDOM.createPortal(
LEVEL UP!
{level}
Keep going!
, document.body ); } // ═══════════════════════════════════════════════════ // Gamify Context — wraps the app, provides trigger functions // ═══════════════════════════════════════════════════ const GamifyContext = createContext(null); const XP_PER_LEVEL = 100; const XP_TASK = 15; const XP_ROUTINE = 20; const XP_COMBO_BONUS = 10; const COMBO_WINDOW_MS = 4000; const ACHIEVEMENTS = [ { trigger: 'firstTask', icon: '🎯', title: 'First Blood', subtitle: 'Complete your first task' }, { trigger: 'combo3', icon: '🔥', title: 'On Fire!', subtitle: '3x combo streak' }, { trigger: 'combo5', icon: '⚡', title: 'Unstoppable', subtitle: '5x combo streak' }, { trigger: 'allTodos', icon: '🏆', title: 'Clean Slate', subtitle: 'All tasks done' }, { trigger: 'allRoutines', icon: '💎', title: 'Routine Master', subtitle: 'All routines done' }, { trigger: 'level5', icon: '⭐', title: 'Rising Star', subtitle: 'Reach level 5' }, { trigger: 'level10', icon: '👑', title: 'Productivity King', subtitle: 'Reach level 10' }, ]; function GamifyProvider({ children, enabled, triggerRef }) { const [xp, setXP] = useGState(() => parseInt(localStorage.getItem('el-gamify-xp') || '0')); const [level, setLevel] = useGState(() => parseInt(localStorage.getItem('el-gamify-level') || '1')); const [totalCompleted, setTotalCompleted] = useGState(() => parseInt(localStorage.getItem('el-gamify-total') || '0')); const [bursts, setBursts] = useGState([]); const [flash, setFlash] = useGState(null); const [combo, setCombo] = useGState(null); const [xpPopups, setXPPopups] = useGState([]); const [achievement, setAchievement] = useGState(null); const [levelUp, setLevelUp] = useGState(null); const [unlockedAch, setUnlockedAch] = useGState(() => { try { return JSON.parse(localStorage.getItem('el-gamify-ach') || '[]'); } catch { return []; } }); const comboRef = useGRef({ count: 0, timer: null }); const flashId = useGRef(0); const comboId = useGRef(0); const popupId = useGRef(0); const achId = useGRef(0); const levelUpId = useGRef(0); // Persist useGEffect(() => { localStorage.setItem('el-gamify-xp', String(xp)); localStorage.setItem('el-gamify-level', String(level)); localStorage.setItem('el-gamify-total', String(totalCompleted)); localStorage.setItem('el-gamify-ach', JSON.stringify(unlockedAch)); }, [xp, level, totalCompleted, unlockedAch]); const unlock = useGCb((trigger) => { if (unlockedAch.includes(trigger)) return; const ach = ACHIEVEMENTS.find(a => a.trigger === trigger); if (!ach) return; setUnlockedAch(prev => [...prev, trigger]); achId.current++; setAchievement({ ...ach, id: achId.current }); GamifyAudio.achievement(); }, [unlockedAch]); // The main trigger — call when something is completed const triggerCompletion = useGCb(({ x, y, type = 'task', allDoneCheck }) => { if (!enabled) return; // Combo tracking clearTimeout(comboRef.current.timer); comboRef.current.count++; const cCount = comboRef.current.count; comboRef.current.timer = setTimeout(() => { comboRef.current.count = 0; setCombo(null); }, COMBO_WINDOW_MS); // XP calculation const baseXP = type === 'routine' ? XP_ROUTINE : XP_TASK; const comboBonus = cCount >= 2 ? XP_COMBO_BONUS * (cCount - 1) : 0; const totalXPGain = baseXP + comboBonus; // Update XP + level setXP(prev => { const newXP = prev + totalXPGain; const newLevel = Math.floor(newXP / XP_PER_LEVEL) + 1; if (newLevel > level) { setLevel(newLevel); levelUpId.current++; setLevelUp({ level: newLevel, id: levelUpId.current }); GamifyAudio.levelUp(); if (newLevel >= 5) unlock('level5'); if (newLevel >= 10) unlock('level10'); } return newXP; }); setTotalCompleted(prev => prev + 1); // Confetti burst const burstX = x || window.innerWidth / 2; const burstY = y || window.innerHeight / 2; const power = cCount >= 5 ? 1.8 : cCount >= 3 ? 1.3 : 1; const count = cCount >= 5 ? 80 : cCount >= 3 ? 55 : 35; setBursts(prev => [...prev.slice(-5), { x: burstX, y: burstY, count, power, spread: 1.2 }]); // Screen flash flashId.current++; const flashColor = cCount >= 5 ? 'rgba(251,191,36,0.18)' : cCount >= 3 ? 'rgba(0,180,216,0.15)' : 'rgba(0,212,170,0.12)'; setFlash({ id: flashId.current, color: flashColor }); // Combo display if (cCount >= 2) { comboId.current++; setCombo({ count: cCount, id: comboId.current }); GamifyAudio.combo(cCount); } else { GamifyAudio.complete(); } // XP popup popupId.current++; setXPPopups(prev => [...prev.slice(-8), { id: popupId.current, x: burstX, y: burstY - 20, amount: totalXPGain, bonus: comboBonus > 0, }]); // Clean old popups setTimeout(() => { setXPPopups(prev => prev.slice(1)); }, 1500); // Achievements if (totalCompleted === 0) unlock('firstTask'); if (cCount === 3) unlock('combo3'); if (cCount === 5) unlock('combo5'); // Check all done if (allDoneCheck) { const { type: checkType, allDone } = allDoneCheck; if (allDone && checkType === 'todos') { unlock('allTodos'); GamifyAudio.allDone(); // Extra confetti burst setTimeout(() => { setBursts(prev => [...prev, { x: window.innerWidth / 2, y: window.innerHeight / 2, count: 100, power: 2, spread: 1.5 }]); }, 300); } if (allDone && checkType === 'routines') { unlock('allRoutines'); GamifyAudio.allDone(); setTimeout(() => { setBursts(prev => [...prev, { x: window.innerWidth / 2, y: window.innerHeight / 2, count: 100, power: 2, spread: 1.5 }]); }, 300); } } }, [enabled, level, totalCompleted, unlock]); const value = { triggerCompletion, xp, level, totalCompleted, enabled }; // Expose trigger to parent via ref (so parent doesn't need useContext) useGEffect(() => { if (triggerRef) triggerRef.current = triggerCompletion; }, [triggerCompletion, triggerRef]); return ( {children} {enabled && ( <> )} ); } function useGamify() { return useContext(GamifyContext) || { triggerCompletion: () => {}, xp: 0, level: 1, enabled: false }; } // ═══════════════════════════════════════════════════ // Gamify Toggle Row — for avatar/settings menus // ═══════════════════════════════════════════════════ function GamifyToggleRow({ enabled, onToggle, theme = 'dark' }) { const isDark = theme === 'dark'; const DK_pri = isDark ? '#e4e8f1' : '#1a1816'; const DK_sec = isDark ? '#6a7394' : '#5a534a'; const DK_accent = isDark ? '#00d4aa' : '#007a5e'; const hoverBg = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(26,24,22,0.05)'; return (
e.currentTarget.style.background = hoverBg} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> Gamify
); } // Export everything Object.assign(window, { GamifyProvider, useGamify, GamifyContext, GamifyToggleRow, GamifyAudio, ConfettiCanvas, ScreenFlash, XPBar, ComboIndicator, XPPopup, AchievementToast, LevelUpOverlay, });