[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_168":169,"_170":171},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":49,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",132,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","2a2ddc24-250e-11f0-acaf-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\"\nimport { createRoot } from \"https://esm.sh/react-dom/client\"\n\nconst SCALES = {\n \"Low Octave\": [130.81, 146.83, 164.81, 174.61, 196.00, 220.00, 246.94], // C3 to B3\n \"Major\": [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88],\n \"Minor\": [261.63, 293.66, 311.13, 349.23, 392.00, 415.30, 493.88],\n \"Pentatonic\": [261.63, 293.66, 329.63, 392.00, 440.00],\n}\n\nconst CHORD_PROGRESSION = [\n [1, 3, 5], // I\n [4, 6, 1], // IV\n [5, 7, 2], // V\n [1, 3, 5], // I\n]\n\nlet audioContext: AudioContext\nlet lowPassFilter: BiquadFilterNode\n\ntry {\n audioContext = new (window.AudioContext || window.webkitAudioContext)()\n lowPassFilter = audioContext.createBiquadFilter()\n lowPassFilter.type = \"lowpass\"\n lowPassFilter.frequency.setValueAtTime(1000, audioContext.currentTime)\n lowPassFilter.Q.setValueAtTime(1, audioContext.currentTime)\n lowPassFilter.connect(audioContext.destination)\n} catch (error) {\n console.error(\"Failed to initialize audio context:\", error)\n}\n\nconst playSound = (frequency: number, intensity: number, type = \"synth\") => {\n const ctx = audioContext\n const gain = ctx.createGain()\n gain.connect(lowPassFilter)\n\n let volume: number = 0,\n attackTime: number = 0,\n decayTime: number = 0,\n sustainLevel: number = 0,\n releaseTime: number = 0\n\n if (type === \"synth\") {\n const oscillators: { type: OscillatorType; detune: number; gain: number }[] = [\n { type: \"sine\", detune: 0, gain: 0.3 },\n { type: \"triangle\", detune: -1, gain: 0.1 },\n { type: \"sawtooth\", detune: 0, gain: 0.2 },\n ]\n\n oscillators.forEach(oscSettings => {\n const oscillator = ctx.createOscillator()\n const oscGain = ctx.createGain()\n\n oscillator.type = oscSettings.type\n oscillator.frequency.setValueAtTime(frequency, ctx.currentTime)\n oscillator.detune.setValueAtTime(oscSettings.detune, ctx.currentTime)\n\n oscGain.gain.setValueAtTime(oscSettings.gain, ctx.currentTime)\n\n oscillator.connect(oscGain)\n oscGain.connect(gain)\n\n oscillator.start(ctx.currentTime)\n oscillator.stop(ctx.currentTime + 0.5)\n })\n\n volume = 0.05 + (intensity * 0.5)\n attackTime = 0.01\n decayTime = 0.02\n sustainLevel = 0.9\n releaseTime = 0.9\n }\n else if (type === \"bass\") {\n const oscillators: { type: OscillatorType; detune: number; gain: number }[] = [\n { type: \"sine\", detune: 0, gain: 0.8 },\n // { type: \"triangle\", detune: -1, gain: 0.1 },\n { type: \"sawtooth\", detune: 0, gain: 0.2 },\n ]\n\n oscillators.forEach(oscSettings => {\n const oscillator = ctx.createOscillator()\n const oscGain = ctx.createGain()\n\n oscillator.type = oscSettings.type\n oscillator.frequency.setValueAtTime(frequency, ctx.currentTime)\n oscillator.detune.setValueAtTime(oscSettings.detune, ctx.currentTime)\n\n oscGain.gain.setValueAtTime(oscSettings.gain, ctx.currentTime)\n\n oscillator.connect(oscGain)\n oscGain.connect(gain)\n\n oscillator.start(ctx.currentTime)\n oscillator.stop(ctx.currentTime + 0.5)\n })\n\n volume = 0.05 + (intensity * 0.05)\n attackTime = 0.01\n decayTime = 0.02\n sustainLevel = 0.9\n releaseTime = 0.9\n } else if (type === \"kick\") {\n const oscillator = ctx.createOscillator()\n oscillator.type = \"sine\"\n oscillator.frequency.setValueAtTime(100, ctx.currentTime)\n oscillator.frequency.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5)\n\n oscillator.connect(gain)\n oscillator.start(ctx.currentTime)\n oscillator.stop(ctx.currentTime + 0.5)\n\n volume = 0.5\n attackTime = 0.001\n decayTime = 0.2\n sustainLevel = 0\n releaseTime = 0.2\n } else if (type === \"hihat\") {\n const bufferSize = 2 * ctx.sampleRate\n const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate)\n const output = noiseBuffer.getChannelData(0)\n for (let i = 0; i < bufferSize; i++) {\n output[i] = Math.random() * 2 - 1\n }\n\n const whiteNoise = ctx.createBufferSource()\n whiteNoise.buffer = noiseBuffer\n\n const filter = ctx.createBiquadFilter()\n filter.type = \"highpass\"\n filter.frequency.value = 4000\n\n whiteNoise.connect(filter)\n filter.connect(gain)\n\n whiteNoise.start(ctx.currentTime)\n whiteNoise.stop(ctx.currentTime + 0.1)\n\n volume = 0.1\n attackTime = 0.001\n decayTime = 0.05\n sustainLevel = 0\n releaseTime = 0.05\n }\n\n // Apply ADSR envelope\n gain.gain.setValueAtTime(0, ctx.currentTime)\n gain.gain.linearRampToValueAtTime(volume, ctx.currentTime + attackTime)\n gain.gain.linearRampToValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime)\n gain.gain.setValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime + 0.1)\n gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + attackTime + decayTime + 0.1 + releaseTime)\n}\n\nconst playChord = (chordNotes, intensity: number) => {\n chordNotes.forEach(note => {\n playSound(note, intensity, \"synth\")\n })\n}\n\nconst playDrumPattern = (beat: number) => {\n console.log(beat)\n if (beat % 8 === 0) {\n playSound(0, 1, \"kick\")\n }\n if (beat % 8 === 3 || beat % 8 === 7) {\n playSound(0, 1, \"kick\")\n }\n if (beat % 2 === 0) {\n playSound(0, 0.7, \"hihat\")\n }\n}\n\nfunction App() {\n const [username, setUsername] = useState(\"stevekrouse\")\n const [contributionData, setContributionData] = useState(null)\n const [userData, setUserData] = useState(null)\n const [error, setError] = useState(null)\n const [isPlaying, setIsPlaying] = useState(false)\n const [currentColumn, setCurrentColumn] = useState(0)\n const [scale, setScale] = useState(\"Low Octave\")\n const [audioEnabled, setAudioEnabled] = useState(false)\n const intervalRef = useRef(null)\n\n useEffect(() => {\n fetchContributions()\n }, [])\n\n const fetchContributions = async () => {\n setError(null)\n setContributionData(null)\n setUserData(null)\n try {\n const response = await fetch(\"/contributions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username }),\n })\n if (!response.ok) throw new Error(\"Failed to fetch contributions\")\n const data = await response.json()\n console.log(\"Fetched data:\", data)\n setContributionData(data.contributionCalendar)\n setUserData(data.user)\n } catch (err) {\n console.error(\"Error fetching contributions:\", err)\n setError(err.message)\n }\n }\n\n const togglePlay = () => {\n setIsPlaying(!isPlaying)\n }\n\n useEffect(() => {\n if (isPlaying && contributionData) {\n console.log(\"Starting playback\")\n const bpm = 60\n const interval = (60 / bpm) * 1000 / 4 // 16th notes\n intervalRef.current = setInterval(() => {\n setCurrentColumn(col =>\n ++col\n % (Math.floor(\n contributionData.weeks.length / 4,\n ) * 4)\n )\n }, interval)\n } else if (!isPlaying && intervalRef.current) {\n setCurrentColumn(0)\n console.log(\"Stopping playback\")\n clearInterval(intervalRef.current)\n }\n return () => {\n intervalRef.current && clearInterval(intervalRef.current)\n }\n }, [isPlaying, contributionData, scale])\n\n const handleKeyPress = (event) => {\n if (event.key === \"Enter\") {\n fetchContributions()\n }\n }\n\n const getCurrentWeekIndex = () => {\n if (!contributionData) return 0\n const today = new Date()\n const index = contributionData.weeks.findIndex(week =>\n week.contributionDays.some(day => new Date(day.date) > today)\n )\n return index === -1 ? contributionData.weeks.length : index\n }\n\n useEffect(() => {\n if (!contributionData) return\n playDrumPattern(currentColumn)\n const currentWeek = contributionData.weeks[currentColumn]\n\n // Check if the week has any contributions\n const hasContributions = currentWeek.contributionDays.some(day => day.contributionCount > 0)\n\n if (hasContributions) {\n const chordIndex = Math.floor(currentColumn / 4) % CHORD_PROGRESSION.length\n console.log(chordIndex)\n const chordNotes = CHORD_PROGRESSION[chordIndex]\n .filter((n, i) => {\n return currentWeek.contributionDays[i]?.contributionCount > 0\n }).map(degree => {\n return SCALES[scale][degree - 1 % SCALES[scale].length]\n })\n\n playChord(chordNotes, currentColumn % 4 === 0 ? 1 : 0.45)\n playSound(\n SCALES[scale][\n CHORD_PROGRESSION[chordIndex][1]\n ] / 2,\n 1,\n \"bass\",\n )\n }\n }, [currentColumn])\n\n return (\n

Code Symphony

\n setUsername(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"Enter GitHub username\"\n />\n \n

\n {error &&

{error}

}\n {userData && (\n

{userData.name}

\n )}\n {contributionData && (\n <>\n

\n {contributionData.weeks.slice(0, getCurrentWeekIndex()).map((week, weekIndex) => (\n

\n {Array.from({ length: 7 }).map((_, dayIndex) => {\n const day = week.contributionDays[dayIndex]\n return (\n \n )\n })}\n

\n ))}\n

\n \n \n

\n \n )}\n

\n View source on Val Town\n

\n )\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render()\n}\nif (typeof document !== \"undefined\") { client() }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/contributions\") {\n const { username } = await request.json()\n const contributionData = await fetchGitHubContributions(username)\n return new Response(JSON.stringify(contributionData), {\n headers: { \"Content-Type\": \"application/json\" },\n })\n }\n\n return new Response(\n `\n \n \n Code Symphony\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n )\n}\n\nasync function fetchGitHubContributions(username: string) {\n const query = `\n query($username: String!) {\n user(login: $username) {\n name\n avatarUrl\n contributionsCollection {\n contributionCalendar {\n totalContributions\n weeks {\n contributionDays {\n contributionCount\n date\n color\n }\n }\n }\n }\n }\n }\n `\n\n const response = await fetch(\"https://api.github.com/graphql\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${Deno.env.get(\"GITHUB_CONTRIBUTIONS\")}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ query, variables: { username } }),\n })\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch GitHub data\")\n }\n\n const data = await response.json()\n return {\n user: {\n name: data.data.user.name,\n avatarUrl: data.data.user.avatarUrl,\n },\n contributionCalendar: data.data.user.contributionsCollection.contributionCalendar,\n }\n}\n\nconst css = `\nbody {\n font-family: 'Inter', sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #ffffff;\n color: #000000;\n}\n.container {\n max-width: 1000px;\n margin: 0 auto;\n}\nh1 {\n color: #000000;\n text-align: center;\n margin-bottom: 30px;\n font-weight: 700;\n}\n.input-group {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\ninput {\n padding: 10px;\n font-size: 16px;\n background-color: #f0f0f0;\n border-radius: 4px 0 0 4px;\n color: #000000;\n font-family: 'Inter', sans-serif;\n width: 250px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n background-color: #000000;\n color: white;\n border: 1px solid #000000;\n border-radius: 0 4px 4px 0;\n cursor: pointer;\n font-family: 'Inter', sans-serif;\n white-space: nowrap;\n}\nbutton:hover {\n background-color: #333333;\n}\n.error {\n color: #ff0000;\n}\n.graph-container {\n display: flex;\n margin-bottom: 20px;\n}\n.days-of-week {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding-right: 10px;\n padding-top: 28px;\n}\n.day-label {\n font-size: 12px;\n color: #666666;\n height: 14px;\n line-height: 14px;\n}\n.contribution-graph {\n flex-grow: 1;\n background-color: #ffffff;\n border-radius: 4px;\n padding: 8px;\n overflow: hidden;\n}\n.months {\n display: flex;\n margin-bottom: 5px;\n}\n.month-label {\n font-size: 12px;\n text-align: center;\n color: #666666;\n}\n.weeks {\n display: flex;\n overflow-x: auto;\n}\n.week {\n display: flex;\n flex-direction: column;\n transition: opacity 0.3s ease;\n}\n.week.active {\n opacity: 1;\n}\n.week:not(.active) {\n opacity: 0.5;\n}\n.day {\n width: 10px;\n height: 10px;\n margin: 2px;\n border-radius: 2px;\n border: 1px solid #ebedf0;\n}\n.day:hover {\n border-color: rgba(27,31,35,0.3);\n transition: border-color 0.1s ease-in-out;\n cursor: pointer;\n}\n.controls {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n}\nselect {\n padding: 10px;\n font-size: 16px;\n background-color: #f0f0f0;\n color: #000000;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n font-family: 'Inter', sans-serif;\n}\n.footer {\n margin-top: 30px;\n text-align: center;\n font-size: 14px;\n color: #666666;\n}\n.footer a {\n color: #000000;\n text-decoration: none;\n}\n.footer a:hover {\n text-decoration: underline;\n}\n.user-info {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n}\n.avatar {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-right: 10px;\n}\nh2 {\n font-size: 18px;\n margin: 0;\n}\n`","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\"\nimport { createRoot } from \"https://esm.sh/react-dom/client\"\n\nconst SCALES = {\n \"Low Octave\": [130.81, 146.83, 164.81, 174.61, 196.00, 220.00, 246.94], // C3 to B3\n \"Major\": [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88],\n \"Minor\": [261.63, 293.66, 311.13, 349.23, 392.00, 415.30, 493.88],\n \"Pentatonic\": [261.63, 293.66, 329.63, 392.00, 440.00],\n}\n\nconst CHORD_PROGRESSION = [\n [1, 3, 5], // I\n [4, 6, 1], // IV\n [5, 7, 2], // V\n [1, 3, 5], // I\n]\n\nlet audioContext: AudioContext\nlet lowPassFilter: BiquadFilterNode\n\ntry {\n audioContext = new (window.AudioContext || window.webkitAudioContext)()\n lowPassFilter = audioContext.createBiquadFilter()\n lowPassFilter.type = \"lowpass\"\n lowPassFilter.frequency.setValueAtTime(1000, audioContext.currentTime)\n lowPassFilter.Q.setValueAtTime(1, audioContext.currentTime)\n lowPassFilter.connect(audioContext.destination)\n} catch (error) {\n console.error(\"Failed to initialize audio context:\", error)\n}\n\nconst playSound = (frequency: number, intensity: number, type = \"synth\") => {\n const ctx = audioContext\n const gain = ctx.createGain()\n gain.connect(lowPassFilter)\n\n let volume: number = 0,\n attackTime: number = 0,\n decayTime: number = 0,\n sustainLevel: number = 0,\n releaseTime: number = 0\n\n if (type === \"synth\") {\n const oscillators: { type: OscillatorType; detune: number; gain: number }[] = [\n { type: \"sine\", detune: 0, gain: 0.3 },\n { type: \"triangle\", detune: -1, gain: 0.1 },\n { type: \"sawtooth\", detune: 0, gain: 0.2 },\n ]\n\n oscillators.forEach(oscSettings => {\n const oscillator = ctx.createOscillator()\n const oscGain = ctx.createGain()\n\n oscillator.type = oscSettings.type\n oscillator.frequency.setValueAtTime(frequency, ctx.currentTime)\n oscillator.detune.setValueAtTime(oscSettings.detune, ctx.currentTime)\n\n oscGain.gain.setValueAtTime(oscSettings.gain, ctx.currentTime)\n\n oscillator.connect(oscGain)\n oscGain.connect(gain)\n\n oscillator.start(ctx.currentTime)\n oscillator.stop(ctx.currentTime + 0.5)\n })\n\n volume = 0.05 + (intensity * 0.5)\n attackTime = 0.01\n decayTime = 0.02\n sustainLevel = 0.9\n releaseTime = 0.9\n }\n else if (type === \"bass\") {\n const oscillators: { type: OscillatorType; detune: number; gain: number }[] = [\n { type: \"sine\", detune: 0, gain: 0.8 },\n // { type: \"triangle\", detune: -1, gain: 0.1 },\n { type: \"sawtooth\", detune: 0, gain: 0.2 },\n ]\n\n oscillators.forEach(oscSettings => {\n const oscillator = ctx.createOscillator()\n const oscGain = ctx.createGain()\n\n oscillator.type = oscSettings.type\n oscillator.frequency.setValueAtTime(frequency, ctx.currentTime)\n oscillator.detune.setValueAtTime(oscSettings.detune, ctx.currentTime)\n\n oscGain.gain.setValueAtTime(oscSettings.gain, ctx.currentTime)\n\n oscillator.connect(oscGain)\n oscGain.connect(gain)\n\n oscillator.start(ctx.currentTime)\n oscillator.stop(ctx.currentTime + 0.5)\n })\n\n volume = 0.05 + (intensity * 0.05)\n attackTime = 0.01\n decayTime = 0.02\n sustainLevel = 0.9\n releaseTime = 0.9\n } else if (type === \"kick\") {\n const oscillator = ctx.createOscillator()\n oscillator.type = \"sine\"\n oscillator.frequency.setValueAtTime(100, ctx.currentTime)\n oscillator.frequency.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5)\n\n oscillator.connect(gain)\n oscillator.start(ctx.currentTime)\n oscillator.stop(ctx.currentTime + 0.5)\n\n volume = 0.5\n attackTime = 0.001\n decayTime = 0.2\n sustainLevel = 0\n releaseTime = 0.2\n } else if (type === \"hihat\") {\n const bufferSize = 2 * ctx.sampleRate\n const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate)\n const output = noiseBuffer.getChannelData(0)\n for (let i = 0; i < bufferSize; i++) {\n output[i] = Math.random() * 2 - 1\n }\n\n const whiteNoise = ctx.createBufferSource()\n whiteNoise.buffer = noiseBuffer\n\n const filter = ctx.createBiquadFilter()\n filter.type = \"highpass\"\n filter.frequency.value = 4000\n\n whiteNoise.connect(filter)\n filter.connect(gain)\n\n whiteNoise.start(ctx.currentTime)\n whiteNoise.stop(ctx.currentTime + 0.1)\n\n volume = 0.1\n attackTime = 0.001\n decayTime = 0.05\n sustainLevel = 0\n releaseTime = 0.05\n }\n\n // Apply ADSR envelope\n gain.gain.setValueAtTime(0, ctx.currentTime)\n gain.gain.linearRampToValueAtTime(volume, ctx.currentTime + attackTime)\n gain.gain.linearRampToValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime)\n gain.gain.setValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime + 0.1)\n gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + attackTime + decayTime + 0.1 + releaseTime)\n}\n\nconst playChord = (chordNotes, intensity: number) => {\n chordNotes.forEach(note => {\n playSound(note, intensity, \"synth\")\n })\n}\n\nconst playDrumPattern = (beat: number) => {\n console.log(beat)\n if (beat % 8 === 0) {\n playSound(0, 1, \"kick\")\n }\n if (beat % 8 === 3 || beat % 8 === 7) {\n playSound(0, 1, \"kick\")\n }\n if (beat % 2 === 0) {\n playSound(0, 0.7, \"hihat\")\n }\n}\n\nfunction App() {\n const [username, setUsername] = useState(\"stevekrouse\")\n const [contributionData, setContributionData] = useState(null)\n const [userData, setUserData] = useState(null)\n const [error, setError] = useState(null)\n const [isPlaying, setIsPlaying] = useState(false)\n const [currentColumn, setCurrentColumn] = useState(0)\n const [scale, setScale] = useState(\"Low Octave\")\n const [audioEnabled, setAudioEnabled] = useState(false)\n const intervalRef = useRef(null)\n\n useEffect(() => {\n fetchContributions()\n }, [])\n\n const fetchContributions = async () => {\n setError(null)\n setContributionData(null)\n setUserData(null)\n try {\n const response = await fetch(\"/contributions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username }),\n })\n if (!response.ok) throw new Error(\"Failed to fetch contributions\")\n const data = await response.json()\n console.log(\"Fetched data:\", data)\n setContributionData(data.contributionCalendar)\n setUserData(data.user)\n } catch (err) {\n console.error(\"Error fetching contributions:\", err)\n setError(err.message)\n }\n }\n\n const togglePlay = () => {\n setIsPlaying(!isPlaying)\n }\n\n useEffect(() => {\n if (isPlaying && contributionData) {\n console.log(\"Starting playback\")\n const bpm = 60\n const interval = (60 / bpm) * 1000 / 4 // 16th notes\n intervalRef.current = setInterval(() => {\n setCurrentColumn(col =>\n ++col\n % (Math.floor(\n contributionData.weeks.length / 4,\n ) * 4)\n )\n }, interval)\n } else if (!isPlaying && intervalRef.current) {\n setCurrentColumn(0)\n console.log(\"Stopping playback\")\n clearInterval(intervalRef.current)\n }\n return () => {\n intervalRef.current && clearInterval(intervalRef.current)\n }\n }, [isPlaying, contributionData, scale])\n\n const handleKeyPress = (event) => {\n if (event.key === \"Enter\") {\n fetchContributions()\n }\n }\n\n const getCurrentWeekIndex = () => {\n if (!contributionData) return 0\n const today = new Date()\n const index = contributionData.weeks.findIndex(week =>\n week.contributionDays.some(day => new Date(day.date) > today)\n )\n return index === -1 ? contributionData.weeks.length : index\n }\n\n useEffect(() => {\n if (!contributionData) return\n playDrumPattern(currentColumn)\n const currentWeek = contributionData.weeks[currentColumn]\n\n // Check if the week has any contributions\n const hasContributions = currentWeek.contributionDays.some(day => day.contributionCount > 0)\n\n if (hasContributions) {\n const chordIndex = Math.floor(currentColumn / 4) % CHORD_PROGRESSION.length\n console.log(chordIndex)\n const chordNotes = CHORD_PROGRESSION[chordIndex]\n .filter((n, i) => {\n return currentWeek.contributionDays[i]?.contributionCount > 0\n }).map(degree => {\n return SCALES[scale][degree - 1 % SCALES[scale].length]\n })\n\n playChord(chordNotes, currentColumn % 4 === 0 ? 1 : 0.45)\n playSound(\n SCALES[scale][\n CHORD_PROGRESSION[chordIndex][0]\n ] / 2,\n 1,\n \"bass\",\n )\n }\n }, [currentColumn])\n\n return (\n

Diff · v132