function MainComponent() { const { useState, useEffect, useCallback } = React; const [numberOfPatterns, setNumberOfPatterns] = useState(1); const [patterns, setPatterns] = useState([]); const [lengths, setLengths] = useState([ 4 ]); const [isPlaying, setIsPlaying] = useState(false); const [bpm, setBpm] = useState(100); const [selectedSound, setSelectedSound] = useState("clave"); const [audioContext, setAudioContext] = useState(null); const [currentPlayingIndex, setCurrentPlayingIndex] = useState({ pattern: 0, step: -1 }); const [enableMetronome, setEnableMetronome] = useState(false); const [enableGhostNotes, setEnableGhostNotes] = useState(false); function generatePatterns() { const newPatterns = []; for(let i = 0; i < numberOfPatterns; i++){ const patternLength = lengths[i] || 4; let newPattern = ""; for(let j = 0; j < patternLength; j++){ newPattern += [ "•", "-" ][Math.floor(Math.random() * 2)] + " "; } newPatterns.push(newPattern.trim()); } setPatterns(newPatterns); } const initializeAudioContext = useCallback(()=>{ if (!audioContext) { const ctx = new (window.AudioContext || window.webkitAudioContext)(); setAudioContext(ctx); return ctx; } return audioContext; }, [ audioContext ]); useEffect(()=>{ generatePatterns(); }, [ numberOfPatterns, lengths ]); useEffect(()=>{ if (!audioContext) return; let nextNoteTime = audioContext.currentTime; let schedulerTimer = null; let patternIndex = 0; let stepIndex = 0; function scheduleNote(time, freq) { const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.frequency.value = freq; gainNode.gain.setValueAtTime(0, time); gainNode.gain.linearRampToValueAtTime(0.1, time + 0.01); gainNode.gain.linearRampToValueAtTime(0, time + 0.1); oscillator.start(time); oscillator.stop(time + 0.1); } function scheduleMetronome(time) { const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.frequency.value = 1500; gainNode.gain.setValueAtTime(0, time); gainNode.gain.linearRampToValueAtTime(0.03, time + 0.01); gainNode.gain.linearRampToValueAtTime(0, time + 0.05); oscillator.start(time); oscillator.stop(time + 0.05); } function scheduleGhostNote(time) { const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.frequency.value = 1500; gainNode.gain.setValueAtTime(0, time); gainNode.gain.linearRampToValueAtTime(0.02, time + 0.01); gainNode.gain.linearRampToValueAtTime(0, time + 0.05); oscillator.start(time); oscillator.stop(time + 0.05); } function scheduler() { while(nextNoteTime < audioContext.currentTime + 0.1){ const secondsPerBeat = 60.0 / bpm; const currentLength = lengths[patternIndex] || 4; const secondsPerSubdivision = secondsPerBeat / currentLength; const currentPattern = patterns[patternIndex]; const currentChar = currentPattern && currentPattern[stepIndex * 2]; setCurrentPlayingIndex({ pattern: patternIndex, step: stepIndex }); if (stepIndex === 0 && enableMetronome) { scheduleMetronome(nextNoteTime); } if (currentChar === "•") { const freq = selectedSound === "clave" ? 1000 : selectedSound === "snare" ? 200 : selectedSound === "piano" ? 440 : 330; scheduleNote(nextNoteTime, freq); } else if (currentChar === "-" && enableGhostNotes) { scheduleGhostNote(nextNoteTime); } stepIndex++; if (stepIndex >= currentLength) { stepIndex = 0; patternIndex = (patternIndex + 1) % patterns.length; } nextNoteTime += secondsPerSubdivision; } schedulerTimer = requestAnimationFrame(scheduler); } if (isPlaying) { nextNoteTime = audioContext.currentTime; scheduler(); } return ()=>{ if (schedulerTimer) { cancelAnimationFrame(schedulerTimer); } }; }, [ isPlaying, bpm, patterns, selectedSound, audioContext, lengths, enableMetronome, enableGhostNotes ]); useEffect(()=>{ if (!isPlaying) { setCurrentPlayingIndex({ pattern: 0, step: -1 }); } }, [ isPlaying ]); useEffect(()=>{ if (isPlaying) { const savedMetronome = localStorage.getItem("metronomeEnabled"); const savedGhostNotes = localStorage.getItem("ghostNotesEnabled"); if (savedMetronome !== null) { setEnableMetronome(JSON.parse(savedMetronome)); } if (savedGhostNotes !== null) { setEnableGhostNotes(JSON.parse(savedGhostNotes)); } } }, [ isPlaying ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen w-full bg-black px-4 py-8 md:py-12 relative", __source: { fileName: "", lineNumber: 177, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.abeldominoes.com", target: "_blank", rel: "noopener noreferrer", className: "absolute top-4 right-4 flex items-center gap-2 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, "Visit ABEL"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/a2dcca34-c682-480c-b08a-226e82b23958/-/format/auto/", alt: "ABEL RHYTHM DOMINOES", className: "w-56 mb-4", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md space-y-6 mx-auto", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 justify-center", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: numberOfPatterns, onChange: (e)=>setNumberOfPatterns(Number(e.target.value)), className: "bg-[#1a1f2e] text-white px-4 py-2 rounded", name: "numberOfPatterns", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ].map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, num, " pattern", num > 1 ? "s" : "")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1f2e] p-8 rounded-lg space-y-4", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, patterns.map((pattern, patternIndex)=>/*#__PURE__*/ React.createElement("div", { key: patternIndex, className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: lengths[patternIndex] || 4, onChange: (e)=>{ const newLengths = [ ...lengths ]; newLengths[patternIndex] = Number(e.target.value); setLengths(newLengths); }, className: "bg-[#1a1f2e] text-white px-2 py-1 rounded text-sm", name: `length-${patternIndex}`, __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ].map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 227, columnNumber: 23 }, __self: this }, "Subdivision ", num)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-2", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, pattern.split(" ").map((char, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>{ const newPatterns = [ ...patterns ]; const currentPattern = newPatterns[patternIndex].split(" "); currentPattern[index] = currentPattern[index] === "•" ? "-" : "•"; newPatterns[patternIndex] = currentPattern.join(" "); setPatterns(newPatterns); }, className: `w-10 h-10 text-2xl font-mono rounded-lg transition-all duration-200 transform ${char === "•" ? "bg-gradient-to-r from-gray-500 to-gray-600 text-white shadow-lg" : "bg-gray-800 text-gray-400 hover:bg-gray-700"} ${currentPlayingIndex.pattern === patternIndex && currentPlayingIndex.step === index ? "scale-110 ring-2 ring-purple-500 ring-opacity-75" : ""} ${currentPlayingIndex.pattern === patternIndex && currentPlayingIndex.step === index && char === "•" ? "bg-gradient-to-r from-purple-500 to-blue-500" : ""} `, __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, char)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1f2e] p-6 rounded-lg space-y-4", __source: { fileName: "", lineNumber: 275, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between gap-4", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex-1 rounded-lg transition-all duration-300 overflow-hidden ${enableMetronome ? "bg-gradient-to-r from-green-500 to-green-600 shadow-lg" : "bg-gray-800 hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 278, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const newState = !enableMetronome; localStorage.setItem("metronomeEnabled", JSON.stringify(newState)); setEnableMetronome(newState); }, className: "w-full py-3 px-4 text-white font-medium touch-manipulation", role: "switch", "aria-checked": enableMetronome, __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, "Metronome")), /*#__PURE__*/ React.createElement("div", { className: `flex-1 rounded-lg transition-all duration-300 overflow-hidden ${enableGhostNotes ? "bg-gradient-to-r from-purple-500 to-purple-600 shadow-lg" : "bg-gray-800 hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const newState = !enableGhostNotes; localStorage.setItem("ghostNotesEnabled", JSON.stringify(newState)); setEnableGhostNotes(newState); }, className: "w-full py-3 px-4 text-white font-medium touch-manipulation", role: "switch", "aria-checked": enableGhostNotes, __source: { fileName: "", lineNumber: 309, columnNumber: 19 }, __self: this }, "Ghost Notes")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 w-full", __source: { fileName: "", lineNumber: 327, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between w-full", __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 329, columnNumber: 17 }, __self: this }, "BPM: ", bpm), /*#__PURE__*/ React.createElement("input", { type: "number", value: bpm, onChange: (e)=>setBpm(Math.min(300, Math.max(30, Number(e.target.value)))), className: "w-16 px-2 py-1 bg-gray-800 text-white rounded border border-gray-700 text-center", min: "30", max: "300", name: "bpm", __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "range", min: "30", max: "300", value: bpm, onChange: (e)=>setBpm(Number(e.target.value)), className: "w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-white [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:hover:scale-110 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:hover:scale-110", name: "bpmRange", __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: selectedSound, onChange: (e)=>setSelectedSound(e.target.value), className: "w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-md text-white", name: "selectedSound", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "clave", __source: { fileName: "", lineNumber: 377, columnNumber: 15 }, __self: this }, "Sound 1"), /*#__PURE__*/ React.createElement("option", { value: "snare", __source: { fileName: "", lineNumber: 378, columnNumber: 15 }, __self: this }, "Sound 2"), /*#__PURE__*/ React.createElement("option", { value: "piano", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, "Sound 3"), /*#__PURE__*/ React.createElement("option", { value: "guitar", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, "Sound 4")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 w-full", __source: { fileName: "", lineNumber: 382, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const ctx = initializeAudioContext(); if (ctx.state === "suspended") { ctx.resume(); } setIsPlaying(!isPlaying); }, className: `flex-1 py-2 rounded-lg font-semibold transition-all duration-200 ${isPlaying ? "bg-red-600 hover:bg-red-700 text-white" : "bg-green-600 hover:bg-green-700 text-white"}`, __source: { fileName: "", lineNumber: 383, columnNumber: 15 }, __self: this }, isPlaying ? "Stop" : "Play"), /*#__PURE__*/ React.createElement("button", { onClick: generatePatterns, className: "flex-1 bg-white hover:bg-gray-100 text-gray-900 font-inter py-2 rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 399, columnNumber: 15 }, __self: this }, "Shuffle")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-4 border-t border-gray-700", __source: { fileName: "", lineNumber: 406, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-3", __source: { fileName: "", lineNumber: 407, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this }, "You enjoy this app? Support its development!"), /*#__PURE__*/ React.createElement("a", { href: "https://www.paypal.me/abeldominoes", target: "_blank", rel: "noopener noreferrer", className: "inline-block px-6 py-2 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-lg hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg", __source: { fileName: "", lineNumber: 411, columnNumber: 17 }, __self: this }, "❤️ Make a donation"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, "Secure payment via PayPal")))), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-300 font-inter", __source: { fileName: "", lineNumber: 426, columnNumber: 11 }, __self: this }, "• = Note | - = Silence/Ghost Note")))); }