/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const SCALES = { "Low Octave": [130.81, 146.83, 164.81, 174.61, 196.00, 220.00, 246.94], // C3 to B3 "Major": [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88], "Minor": [261.63, 293.66, 311.13, 349.23, 392.00, 415.30, 493.88], "Pentatonic": [261.63, 293.66, 329.63, 392.00, 440.00], }; const CHORD_PROGRESSION = [ [1, 3, 5], // I [4, 6, 1], // IV [5, 7, 2], // V [1, 3, 5], // I ]; function App() { const [username, setUsername] = useState("stevekrouse"); const [contributionData, setContributionData] = useState(null); const [userData, setUserData] = useState(null); const [error, setError] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const [currentColumn, setCurrentColumn] = useState(0); const [currentBeat, setCurrentBeat] = useState(0); const [scale, setScale] = useState("Low Octave"); const [audioEnabled, setAudioEnabled] = useState(false); const audioContextRef = useRef(null); const intervalRef = useRef(null); const lowPassFilterRef = useRef(null); useEffect(() => { fetchContributions(); }, []); const fetchContributions = async () => { setError(null); setContributionData(null); setUserData(null); try { const response = await fetch("/contributions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username }), }); if (!response.ok) throw new Error("Failed to fetch contributions"); const data = await response.json(); console.log("Fetched data:", data); setContributionData(data.contributionCalendar); setUserData(data.user); } catch (err) { console.error("Error fetching contributions:", err); setError(err.message); } }; const initAudio = () => { if (!audioContextRef.current) { try { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); lowPassFilterRef.current = audioContextRef.current.createBiquadFilter(); lowPassFilterRef.current.type = "lowpass"; lowPassFilterRef.current.frequency.setValueAtTime(1000, audioContextRef.current.currentTime); lowPassFilterRef.current.Q.setValueAtTime(1, audioContextRef.current.currentTime); lowPassFilterRef.current.connect(audioContextRef.current.destination); setAudioEnabled(true); console.log("Audio context initialized"); } catch (error) { console.error("Failed to initialize audio context:", error); setAudioEnabled(false); } } }; const playSound = (frequency, intensity, type = "synth") => { if (!audioContextRef.current) { console.warn("Audio context not initialized. Initializing now."); initAudio(); } if (!audioEnabled) { console.warn("Audio is not enabled. Skipping playSound."); return; } const ctx = audioContextRef.current; const gain = ctx.createGain(); gain.connect(lowPassFilterRef.current); let volume, attackTime, decayTime, sustainLevel, releaseTime; if (type === "synth") { const oscillators = [ { type: "sine", detune: 0, gain: 0.3 }, { type: "triangle", detune: 5, gain: 0.1 }, { type: "sawtooth", detune: -5, gain: 0.1 }, ]; oscillators.forEach(oscSettings => { const oscillator = ctx.createOscillator(); const oscGain = ctx.createGain(); oscillator.type = oscSettings.type; oscillator.frequency.setValueAtTime(frequency, ctx.currentTime); oscillator.detune.setValueAtTime(oscSettings.detune, ctx.currentTime); oscGain.gain.setValueAtTime(oscSettings.gain, ctx.currentTime); oscillator.connect(oscGain); oscGain.connect(gain); oscillator.start(ctx.currentTime); oscillator.stop(ctx.currentTime + 0.5); }); volume = 0.05 + (intensity * 0.02); attackTime = 0.02; decayTime = 0.1; sustainLevel = 0.7; releaseTime = 0.4; } else if (type === "kick") { const oscillator = ctx.createOscillator(); oscillator.type = "sine"; oscillator.frequency.setValueAtTime(100, ctx.currentTime); oscillator.frequency.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5); oscillator.connect(gain); oscillator.start(ctx.currentTime); oscillator.stop(ctx.currentTime + 0.5); volume = 0.5; attackTime = 0.001; decayTime = 0.2; sustainLevel = 0; releaseTime = 0.2; } else if (type === "hihat") { const bufferSize = 2 * ctx.sampleRate; const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate); const output = noiseBuffer.getChannelData(0); for (let i = 0; i < bufferSize; i++) { output[i] = Math.random() * 2 - 1; } const whiteNoise = ctx.createBufferSource(); whiteNoise.buffer = noiseBuffer; const filter = ctx.createBiquadFilter(); filter.type = "highpass"; filter.frequency.value = 5000; whiteNoise.connect(filter); filter.connect(gain); whiteNoise.start(ctx.currentTime); whiteNoise.stop(ctx.currentTime + 0.1); volume = 0.2; attackTime = 0.001; decayTime = 0.05; sustainLevel = 0; releaseTime = 0.05; } // Apply ADSR envelope gain.gain.setValueAtTime(0, ctx.currentTime); gain.gain.linearRampToValueAtTime(volume, ctx.currentTime + attackTime); gain.gain.linearRampToValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime); gain.gain.setValueAtTime(sustainLevel * volume, ctx.currentTime + attackTime + decayTime + 0.1); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + attackTime + decayTime + 0.1 + releaseTime); }; const playChord = (chordNotes, intensity) => { chordNotes.forEach(note => { playSound(note, intensity * 0.5, "synth"); }); }; const playArpeggio = (chordNotes, intensity, beat) => { const noteIndex = beat % chordNotes.length; playSound(chordNotes[noteIndex], intensity, "synth"); }; const playDrumPattern = (beat) => { if (beat % 16 === 0 || beat % 16 === 10) { playSound(0, 1, "kick"); } if (beat % 2 === 0) { playSound(0, 0.7, "hihat"); } if (beat % 16 === 8 || beat % 16 === 14) { playSound(0, 0.5, "kick"); } }; const togglePlay = () => { if (!isPlaying) { initAudio(); } setIsPlaying(!isPlaying); }; useEffect(() => { if (isPlaying && contributionData) { console.log("Starting playback"); const bpm = 60; const interval = (60 / bpm) * 1000 / 4; // 16th notes intervalRef.current = setInterval(() => { playDrumPattern(currentBeat); setCurrentColumn((prevColumn) => { const nextColumn = (prevColumn + 1) % contributionData.weeks.length; const currentWeek = contributionData.weeks[nextColumn]; // Check if the week has any contributions const hasContributions = currentWeek.contributionDays.some(day => day.contributionCount > 0); if (hasContributions) { const chordIndex = Math.floor(nextColumn / 4) % CHORD_PROGRESSION.length; const chordNotes = CHORD_PROGRESSION[chordIndex].map(degree => SCALES[scale][degree - 1]); if (currentBeat % 16 === 0) { playChord(chordNotes, 1); } playArpeggio(chordNotes, 1, currentBeat); currentWeek.contributionDays.forEach((day, index) => { if (day.contributionCount > 0) { const intensity = Math.min(day.contributionCount, 4); const noteIndex = index % SCALES[scale].length; playSound(SCALES[scale][noteIndex], intensity * 0.5); } }); } return nextColumn; }); setCurrentBeat((prevBeat) => (prevBeat + 1) % 64); }, interval); } else if (!isPlaying && intervalRef.current) { setCurrentColumn(0); console.log("Stopping playback"); clearInterval(intervalRef.current); } return () => clearInterval(intervalRef.current); }, [isPlaying, contributionData, scale]); const handleKeyPress = (event) => { if (event.key === "Enter") { fetchContributions(); } }; const getCurrentWeekIndex = () => { if (!contributionData) return 0; const today = new Date(); const index = contributionData.weeks.findIndex(week => week.contributionDays.some(day => new Date(day.date) > today) ); return index === -1 ? contributionData.weeks.length : index; }; return (

Git Jiggy

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

{error &&

{error}

} {userData && (

{userData.name}

)} {contributionData && ( <>

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

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

); })}

))}

)}

View source on Val Town

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

`, { headers: { "Content-Type": "text/html" }, }, ); } async function fetchGitHubContributions(username: string) { const query = ` query($username: String!) { user(login: $username) { name avatarUrl contributionsCollection { contributionCalendar { totalContributions weeks { contributionDays { contributionCount date color } } } } } } `; const response = await fetch("https://api.github.com/graphql", { method: "POST", headers: { "Authorization": `Bearer ${Deno.env.get("GITHUB_CONTRIBUTIONS")}`, "Content-Type": "application/json", }, body: JSON.stringify({ query, variables: { username } }), }); if (!response.ok) { throw new Error("Failed to fetch GitHub data"); } const data = await response.json(); return { user: { name: data.data.user.name, avatarUrl: data.data.user.avatarUrl, }, contributionCalendar: data.data.user.contributionsCollection.contributionCalendar, }; } const css = ` body { font-family: 'Inter', sans-serif; margin: 0; padding: 20px; background-color: #ffffff; color: #000000; } .container { max-width: 1000px; margin: 0 auto; } h1 { color: #000000; text-align: center; margin-bottom: 30px; font-weight: 700; } .input-group { display: flex; justify-content: center; margin-bottom: 20px; } input { padding: 10px; font-size: 16px; background-color: #f0f0f0; border-radius: 4px 0 0 4px; color: #000000; font-family: 'Inter', sans-serif; width: 250px; } button { padding: 10px 20px; font-size: 16px; background-color: #000000; color: white; border: 1px solid #000000; border-radius: 0 4px 4px 0; cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; } button:hover { background-color: #333333; } .error { color: #ff0000; } .graph-container { display: flex; margin-bottom: 20px; } .days-of-week { display: flex; flex-direction: column; justify-content: space-between; padding-right: 10px; padding-top: 28px; } .day-label { font-size: 12px; color: #666666; height: 14px; line-height: 14px; } .contribution-graph { flex-grow: 1; background-color: #ffffff; border-radius: 4px; padding: 8px; overflow: hidden; } .months { display: flex; margin-bottom: 5px; } .month-label { font-size: 12px; text-align: center; color: #666666; } .weeks { display: flex; overflow-x: auto; } .week { display: flex; flex-direction: column; transition: opacity 0.3s ease; } .week.active { opacity: 1; } .week:not(.active) { opacity: 0.5; } .day { width: 10px; height: 10px; margin: 2px; border-radius: 2px; border: 1px solid #ebedf0; } .day:hover { border-color: rgba(27,31,35,0.3); transition: border-color 0.1s ease-in-out; cursor: pointer; } .controls { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } select { padding: 10px; font-size: 16px; background-color: #f0f0f0; color: #000000; border: 1px solid #e0e0e0; border-radius: 4px; font-family: 'Inter', sans-serif; } .footer { margin-top: 30px; text-align: center; font-size: 14px; color: #666666; } .footer a { color: #000000; text-decoration: none; } .footer a:hover { text-decoration: underline; } .user-info { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } h2 { font-size: 18px; margin: 0; } `;

git_jiggy