function MainComponent() { const [selectedChords, setSelectedChords] = useState([ "A", "D", "G", "C", "Em", "Am" ]); const [currentChord, setCurrentChord] = useState(null); const [isPracticing, setIsPracticing] = useState(false); const [tempo, setTempo] = useState(2000); const [intervalId, setIntervalId] = useState(null); const chordDiagrams = { A: { dots: [ [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ], barre: null }, D: { dots: [ [ 1, 2 ], [ 2, 3 ], [ 3, 2 ] ], barre: null }, G: { dots: [ [ 1, 3 ], [ 5, 3 ], [ 6, 3 ] ], barre: null }, C: { dots: [ [ 1, 1 ], [ 2, 2 ], [ 4, 3 ] ], barre: null }, Em: { dots: [ [ 4, 2 ], [ 5, 2 ] ], barre: null }, Am: { dots: [ [ 1, 1 ], [ 2, 2 ], [ 3, 2 ] ], barre: null } }; const startPractice = useCallback(()=>{ if (isPracticing) return; setIsPracticing(true); const id = setInterval(()=>{ const randomIndex = Math.floor(Math.random() * selectedChords.length); setCurrentChord(selectedChords[randomIndex]); }, tempo); setIntervalId(id); }, [ isPracticing, selectedChords, tempo ]); const stopPractice = useCallback(()=>{ if (!isPracticing) return; clearInterval(intervalId); setIsPracticing(false); setCurrentChord(null); }, [ intervalId, isPracticing ]); const renderFretboard = ()=>{ if (!currentChord || !chordDiagrams[currentChord]) return null; const diagram = chordDiagrams[currentChord]; const fretboard = Array.from({ length: 6 }).fill(null).map((_, string)=>Array.from({ length: 4 }).fill(null).map((_, fret)=>{ const isActive = diagram.dots.some(([s, f])=>s === string + 1 && f === fret + 1); return /*#__PURE__*/ React.createElement("div", { key: `${string}-${fret}`, className: `w-[40px] h-[40px] border border-gray-300 flex items-center justify-center ${isActive ? "bg-blue-500 rounded-full m-1" : ""}`, __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, isActive && /*#__PURE__*/ React.createElement("div", { className: "w-[30px] h-[30px] rounded-full bg-blue-500", __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this })); })); return fretboard; }; useEffect(()=>{ if (currentChord) { const vexchords = new window.Vex.UI.ChordBox("#chord-diagram", { width: 200, height: 240 }); const chord = chordDiagrams[currentChord]; const positions = chord.dots.map(([string, fret])=>({ str: string, fret: fret })); vexchords.draw({ positions: positions, barres: [] }); } }, [ currentChord ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 131, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 text-blue-600", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "FlashChord"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Tempo (milliseconds):"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "500", max: "5000", step: "100", value: tempo, onChange: (e)=>setTempo(Number(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, tempo, "ms")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-6", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startPractice, disabled: isPracticing, className: `px-6 py-2 rounded-lg ${isPracticing ? "bg-gray-400" : "bg-blue-500 hover:bg-blue-600"} text-white font-semibold`, __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Start Practice"), /*#__PURE__*/ React.createElement("button", { onClick: stopPractice, disabled: !isPracticing, className: `px-6 py-2 rounded-lg ${!isPracticing ? "bg-gray-400" : "bg-red-500 hover:bg-red-600"} text-white font-semibold`, __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "Stop Practice")), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-6xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, currentChord || "Ready!")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "chord-diagram", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, "Available Chords"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, selectedChords.map((chord)=>/*#__PURE__*/ React.createElement("div", { key: chord, className: "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, chord))))), /*#__PURE__*/ React.createElement("script", { src: "https://cdn.jsdelivr.net/npm/vexchords@1.2.0/build/vexchords.js", __source: { fileName: "", lineNumber: 198, columnNumber: 7 }, __self: this })); }