[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_169":170,"_171":172},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_128":-5,"_20":129,"_22":130,"_131":132,"_133":134,"_25":135,"_24":-5,"_136":-5,"_137":-5,"_138":54,"_139":140,"_141":45,"_142":-5,"_143":-5,"_144":145},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","stevekrouse","name","git_jiggy","branchName","main","version","path","","project",{"_34":74,"_13":14,"_46":75,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":107,"_108":109,"_110":111,"_112":54},"tree",[65,66],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":64},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","9b557a6e-25f0-11f0-ad23-569c3dd06744","main.tsx","fileId","9abc78aa-25f0-11f0-ad23-569c3dd06744","parentId","branchId","9aba7848-25f0-11f0-ad23-569c3dd06744","branchVersion",39,"latest",true,"createdAt",["D",1727387080079],38,"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\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 [currentBeat, setCurrentBeat] = useState(0);\n const [scale, setScale] = useState(\"Low Octave\");\n const [audioEnabled, setAudioEnabled] = useState(false);\n const audioContextRef = useRef(null);\n const intervalRef = useRef(null);\n const lowPassFilterRef = 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 initAudio = () => {\n if (!audioContextRef.current) {\n try {\n audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n lowPassFilterRef.current = audioContextRef.current.createBiquadFilter();\n lowPassFilterRef.current.type = \"lowpass\";\n lowPassFilterRef.current.frequency.setValueAtTime(1000, audioContextRef.current.currentTime);\n lowPassFilterRef.current.Q.setValueAtTime(1, audioContextRef.current.currentTime);\n lowPassFilterRef.current.connect(audioContextRef.current.destination);\n setAudioEnabled(true);\n console.log(\"Audio context initialized\");\n } catch (error) {\n console.error(\"Failed to initialize audio context:\", error);\n setAudioEnabled(false);\n }\n }\n };\n\n const playSound = (frequency, intensity, type = \"synth\") => {\n if (!audioContextRef.current) {\n console.warn(\"Audio context not initialized. Initializing now.\");\n initAudio();\n }\n\n if (!audioEnabled) {\n console.warn(\"Audio is not enabled. Skipping playSound.\");\n return;\n }\n\n const ctx = audioContextRef.current;\n const gain = ctx.createGain();\n gain.connect(lowPassFilterRef.current);\n\n let volume, attackTime, decayTime, sustainLevel, releaseTime;\n\n if (type === \"synth\") {\n const oscillators = [\n { type: \"sine\", detune: 0, gain: 0.3 },\n { type: \"triangle\", detune: 5, gain: 0.1 },\n { type: \"sawtooth\", detune: -5, gain: 0.1 },\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.02);\n attackTime = 0.02;\n decayTime = 0.1;\n sustainLevel = 0.7;\n releaseTime = 0.4;\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 = 5000;\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.2;\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\n const playChord = (chordNotes, intensity) => {\n chordNotes.forEach(note => {\n playSound(note, intensity * 0.5, \"synth\");\n });\n };\n\n const playArpeggio = (chordNotes, intensity, beat) => {\n const noteIndex = beat % chordNotes.length;\n playSound(chordNotes[noteIndex], intensity, \"synth\");\n };\n\n const playDrumPattern = (beat) => {\n if (beat % 16 === 0 || beat % 16 === 10) {\n playSound(0, 1, \"kick\");\n }\n if (beat % 2 === 0) {\n playSound(0, 0.7, \"hihat\");\n }\n if (beat % 16 === 8 || beat % 16 === 14) {\n playSound(0, 0.5, \"kick\");\n }\n };\n\n const togglePlay = () => {\n if (!isPlaying) {\n initAudio();\n }\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 playDrumPattern(currentBeat);\n setCurrentColumn((prevColumn) => {\n const nextColumn = (prevColumn + 1) % contributionData.weeks.length;\n const currentWeek = contributionData.weeks[nextColumn];\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(nextColumn / 4) % CHORD_PROGRESSION.length;\n const chordNotes = CHORD_PROGRESSION[chordIndex].map(degree => SCALES[scale][degree - 1]);\n\n if (currentBeat % 16 === 0) {\n playChord(chordNotes, 1);\n }\n\n playArpeggio(chordNotes, 1, currentBeat);\n\n currentWeek.contributionDays.forEach((day, index) => {\n if (day.contributionCount > 0) {\n const intensity = Math.min(day.contributionCount, 4);\n const noteIndex = index % SCALES[scale].length;\n playSound(SCALES[scale][noteIndex], intensity * 0.5);\n }\n });\n }\n\n return nextColumn;\n });\n setCurrentBeat((prevBeat) => (prevBeat + 1) % 64);\n }, interval);\n } else if (!isPlaying && intervalRef.current) {\n setCurrentColumn(0);\n console.log(\"Stopping playback\");\n clearInterval(intervalRef.current);\n }\n return () => clearInterval(intervalRef.current);\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 return (\n

Git Jiggy

\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 Git Jiggy\n \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`;","deleted",false,"label",[36],"9abc9ab0-25f0-11f0-ad23-569c3dd06744","README.md","9abc9b6e-25f0-11f0-ad23-569c3dd06744",1,["D",1727375786330],0,"Needs `GITHUB_CONTRIBUTIONS` key set in your Val Town [Environment Variables](https://www.val.town/settings/environment-variables).\n\nGet this token here: https://github.com/settings/personal-access-tokens/new\n\nGive it basically the minimum permissions. It should only pull public data anyways.\n\nMigrated from folder: Archive/git_jiggy",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":72,"_18":73},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":69,"_18":70},["D",1727387080079],"children",[],[36],["D",1727375786330],[],[58],"9aba3978-25f0-11f0-ad23-569c3dd06744",["D",1746037576674],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",3,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_127":123},"org",{"_11":12,"_121":-5,"_122":123,"_83":84,"_124":125,"_126":54},"branch",{"_17":43,"_13":16,"_34":41,"_113":74,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":74,"_13":14,"_46":165,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":166,"_108":167,"_110":168,"_112":54},[159,160],"files",[159,160],"counts",{"_150":62,"_151":60,"_152":90,"_31":153,"_154":155},[146,147],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":149},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":148},[36],[58],"pulls","branches","forks",{"_156":62,"_158":62},"connections",{"_156":62,"_157":62},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_68":163,"_18":164},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":161,"_18":162},[],[36],[],[58],["D",1746037576674],{"_11":12,"_127":123},{"_11":12,"_121":-5,"_122":123,"_83":84,"_124":125,"_126":54},{"_17":43,"_13":16,"_34":41,"_113":74,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_106":-5,"_143":202,"_203":204,"_205":206,"_207":54,"_208":54,"_209":54,"_210":45,"_211":-5,"_212":-7,"_213":-7,"_214":62,"_215":54,"_216":54,"_217":-5,"_218":54,"_219":54,"_220":54,"_221":-5},"ENV",{"_173":174,"_175":176,"_177":16,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code