// Welcome Screen Component function WelcomeScreen({ onGetStarted }) { const [currentFeature, setCurrentFeature] = useState(0); const colors = { bg: '#050510', primary: '#00f3ff', secondary: '#ff00ff', accent: '#39ff14', surface: '#12121a', text: '#ffffff', dim: 'rgba(0, 243, 255, 0.2)' }; const features = [ { icon: '⚡', title: 'Instant Melodies', desc: 'Arpeggiated soundscapes start playing the moment you open the app' }, { icon: '🎹', title: 'Dynamic Keys', desc: 'Tap keys to sculpt your melody in real-time' }, { icon: '🔊', title: 'Voice Transformer', desc: 'Switch between SAW, SQR, TRI, and SIN waveforms' }, { icon: '🔀', title: 'Arp Modes', desc: 'Play notes Up, Down, or Random for endless patterns' } ]; useEffect(() => { const interval = setInterval(() => { setCurrentFeature(prev => (prev + 1) % features.length); }, 3000); return () => clearInterval(interval); }, []); return (

{/* Animated Background Grid */}

{/* Glow Orbs */}

{/* Logo Section */}

{/* Animated Logo Icon */}

⚡

ARP_SPARK

Sonic Playground

{/* Tagline */}

Create evolving melodies with a tap. Sculpt sound in real-time with your personal synthesizer.

{/* Feature Carousel */}

{features[currentFeature].icon}

{features[currentFeature].title}

{features[currentFeature].desc}

{/* Feature Dots */}

{features.map((_, idx) => (

setCurrentFeature(idx)} style={{ width: 8, height: 8, borderRadius: '50%', background: idx === currentFeature ? colors.primary : colors.dim, cursor: 'pointer', transition: 'all 0.3s', boxShadow: idx === currentFeature ? `0 0 10px ${colors.primary}` : 'none' }} /> ))}

{/* CTA Button */} {/* Footer */}

TAP ANYWHERE TO ENABLE AUDIO

); } function App({ data, setData, user }) { // 🎹 INITIAL STATE & SAMPLE DATA // We start with a cool vibe immediately - C Major 7th arpeggio const INITIAL_NOTES = [0, 4, 7, 11]; // C, E, G, B const [showWelcome, setShowWelcome] = useState(() => { // Show welcome screen if user hasn't seen it before return !data?.hasSeenWelcome; }); const [activeNotes, setActiveNotes] = useState(INITIAL_NOTES); const [bpm, setBpm] = useState(120); const [waveType, setWaveType] = useState('sawtooth'); // sawtooth, square, sine, triangle const [arpMode, setArpMode] = useState('up'); // up, down, random const [currentStep, setCurrentStep] = useState(0); const [isPlaying, setIsPlaying] = useState(true); const [audioEnabled, setAudioEnabled] = useState(false); // Audio Context Ref - keeps it persistent (must be before any conditional returns) const audioCtxRef = useRef(null); const nextNoteTimeRef = useRef(0); const timerIDRef = useRef(null); const stepRef = useRef(0); // 🔊 AUDIO ENGINE const initAudio = useCallback(() => { if (!audioCtxRef.current) { const AudioContext = window.AudioContext || window.webkitAudioContext; audioCtxRef.current = new AudioContext(); } if (audioCtxRef.current.state === 'suspended') { audioCtxRef.current.resume().then(() => setAudioEnabled(true)); } else { setAudioEnabled(true); } }, []); // Scale frequencies (C4 to B4) const NOTES = [ { note: 'C', freq: 261.63, type: 'white', index: 0 }, { note: 'C#', freq: 277.18, type: 'black', index: 1 }, { note: 'D', freq: 293.66, type: 'white', index: 2 }, { note: 'D#', freq: 311.13, type: 'black', index: 3 }, { note: 'E', freq: 329.63, type: 'white', index: 4 }, { note: 'F', freq: 349.23, type: 'white', index: 5 }, { note: 'F#', freq: 369.99, type: 'black', index: 6 }, { note: 'G', freq: 392.00, type: 'white', index: 7 }, { note: 'G#', freq: 415.30, type: 'black', index: 8 }, { note: 'A', freq: 440.00, type: 'white', index: 9 }, { note: 'A#', freq: 466.16, type: 'black', index: 10 }, { note: 'B', freq: 493.88, type: 'white', index: 11 }, { note: 'C2', freq: 523.25, type: 'white', index: 12 }, ]; const playTone = useCallback((freq) => { if (!audioCtxRef.current || audioCtxRef.current.state === 'suspended') return; const ctx = audioCtxRef.current; const osc = ctx.createOscillator(); const gainNode = ctx.createGain(); const filterNode = ctx.createBiquadFilter(); osc.type = waveType; osc.frequency.setValueAtTime(freq, ctx.currentTime); // Filter settings based on wave type for better sound filterNode.type = 'lowpass'; filterNode.frequency.setValueAtTime(waveType === 'sawtooth' ? 2000 : 800, ctx.currentTime); filterNode.Q.value = 5; // Envelope gainNode.gain.setValueAtTime(0, ctx.currentTime); gainNode.gain.linearRampToValueAtTime(0.3, ctx.currentTime + 0.05); // Attack gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4); // Decay osc.connect(filterNode); filterNode.connect(gainNode); gainNode.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.5); }, [waveType]); // Sync from storage if available useEffect(() => { if (data?.notes) setActiveNotes(data.notes); if (data?.bpm) setBpm(data.bpm); if (data?.waveType) setWaveType(data.waveType); if (data?.arpMode) setArpMode(data.arpMode); }, []); // 🕰️ SEQUENCER LOOP useEffect(() => { // Don't run sequencer while showing welcome if (showWelcome) return; // Clean up previous timer if (timerIDRef.current) clearInterval(timerIDRef.current); if (!isPlaying) return; const scheduler = () => { // Calculate next notes // Sort notes for consistent arpeggios const sortedNotes = [...activeNotes].sort((a, b) => a - b); if ((sortedNotes || []).length === 0) return; let noteIndexToPlay = 0; // Arpeggiator Logic if (arpMode === 'up') { noteIndexToPlay = sortedNotes[stepRef.current % (sortedNotes || []).length]; } else if (arpMode === 'down') { noteIndexToPlay = sortedNotes[((sortedNotes || []).length - 1) - (stepRef.current % (sortedNotes || []).length)]; } else if (arpMode === 'random') { noteIndexToPlay = sortedNotes[Math.floor(Math.random() * (sortedNotes || []).length)]; } // Update visual state setCurrentStep(noteIndexToPlay); // Play sound const noteData = (NOTES || []).find(n => n.index === noteIndexToPlay); if (noteData) playTone(noteData.freq); // Advance step stepRef.current = stepRef.current + 1; }; // Convert BPM to ms (16th notes) const interval = (60 / bpm) * 1000 / 2; // 8th notes speed timerIDRef.current = setInterval(scheduler, interval); return () => clearInterval(timerIDRef.current); }, [activeNotes, bpm, arpMode, waveType, isPlaying, showWelcome, playTone]); const handleGetStarted = () => { setShowWelcome(false); setData({ ...data, hasSeenWelcome: true }); }; // Show welcome screen if needed if (showWelcome) { return ; } // Interaction Handlers const toggleNote = (index) => { initAudio(); // Ensure audio is ready on first tap const newNotes = (activeNotes || []).includes(index) ? (activeNotes || []).filter(n => n !== index) : [...activeNotes, index]; setActiveNotes(newNotes); setData({ ...data, notes: newNotes }); // Feedback beep if adding if (!(activeNotes || []).includes(index)) { const note = (NOTES || []).find(n => n.index === index); if (note) playTone(note.freq); } }; const updateSetting = (key, value) => { initAudio(); if (key === 'bpm') setBpm(value); if (key === 'waveType') setWaveType(value); if (key === 'arpMode') setArpMode(value); setData({ ...data, [key]: value }); }; // 🎨 STYLES // Neon/Cyberpunk Palette const colors = { bg: '#050510', primary: '#00f3ff', // Cyan secondary: '#ff00ff', // Magenta accent: '#39ff14', // Lime surface: '#12121a', text: '#ffffff', dim: 'rgba(0, 243, 255, 0.2)' }; return (

{/* HEADER / VISUALIZER */}

ARP_SPARK v1.0

{!audioEnabled && (

⚠️ TAP ANYWHERE TO INITIALIZE SYSTEM

)}

{/* MAIN DISPLAY - The "Scope" */}

{/* Grid lines */}

{/* Visualizer Circle */}

{(activeNotes || []).includes(currentStep) ? '⚡' : '◌'}

{(NOTES || []).find(n => n.index === currentStep)?.note || '--'}

{/* CONTROLS AREA */}

{/* WAVE TYPE SELECTOR */}

{['sawtooth', 'square', 'triangle', 'sine'].map(type => ( ))}

{/* MODE & BPM */}

{/* Mode Toggle */}

PATTERN

{arpMode.toUpperCase()}

{/* BPM Slider */}

SPEED {bpm} BPM

updateSetting('bpm', Number(e.target.value))} style={{ width: '100%', accentColor: colors.accent }} />

{/* PIANO KEYBOARD */}

{/* White Keys Layer */}

{(NOTES || []).filter(n => n.type === 'white').map((note) => (

toggleNote(note.index)} style={{ flex: 1, background: (activeNotes || []).includes(note.index) ? colors.primary : '#e0e0e0', borderRadius: '0 0 4px 4px', position: 'relative', cursor: 'pointer', boxShadow: (activeNotes || []).includes(note.index) ? `0 0 15px ${colors.primary}, inset 0 -10px 20px rgba(0,0,0,0.2)` : 'inset 0 -5px 10px rgba(0,0,0,0.2)', border: 'none', transition: 'all 0.1s', transform: currentStep === note.index ? 'translateY(2px)' : 'none' }} > {/* Active Step Indicator Dot on Key */} {currentStep === note.index && (

)}

))}

{/* Black Keys Layer - Positioned Absolutely */}

{/* Spacers and Keys to align Black Keys */} {/* This is a simple visual hack for alignment without complex grid */} {/* C# */}

toggleNote(1)} color={colors.secondary} /> {/* D# */}

toggleNote(3)} color={colors.secondary} /> {/* Space between E and F */}

{/* F# */} toggleNote(6)} color={colors.secondary} /> {/* G# */}

toggleNote(8)} color={colors.secondary} /> {/* A# */}

toggleNote(10)} color={colors.secondary} />

); } // Helper component for black keys to keep render clean function BlackKey({ note, isActive, isCurrent, onClick, color }) { return (

{ e.stopPropagation(); onClick(); }} style={{ flex: 1.2, background: isActive ? color : '#1a1a1a', borderRadius: '0 0 4px 4px', margin: '0 4px', cursor: 'pointer', pointerEvents: 'auto', boxShadow: isActive ? `0 0 15px ${color}` : '0 2px 5px rgba(0,0,0,0.5)', border: `1px solid #333`, zIndex: 10, position: 'relative', transition: 'all 0.1s', transform: isCurrent ? 'scale(0.95)' : 'none' }} > {isCurrent && (

)}

); }