import React, { useState, useEffect, useRef, useCallback } from "react"; import { useFireproof } from "use-fireproof"; const MOVES = [ { id: "fist", label: "FIST BUMP", freq: 180, dur: 0.08, color: "red" }, { id: "slap", label: "HAND SLAP", freq: 320, dur: 0.06, color: "yellow" }, { id: "snap", label: "SNAP", freq: 900, dur: 0.04, color: "blue" }, { id: "clap", label: "CLAP", freq: 250, dur: 0.07, color: "green" }, { id: "pound", label: "POUND IT", freq: 120, dur: 0.1, color: "red" }, { id: "wave", label: "WAVE", freq: 520, dur: 0.12, color: "blue" }, { id: "point", label: "FINGER GUN", freq: 700, dur: 0.05, color: "yellow" }, { id: "shake", label: "SHAKE", freq: 200, dur: 0.09, color: "green" }, ]; const BPM = 120; const SPB = 60 / BPM; function makeNoise(ctx, freq, dur, type = "sine") { const osc = ctx.createOscillator(); const env = ctx.createGain(); osc.type = type; osc.frequency.value = freq; env.gain.setValueAtTime(0.0001, ctx.currentTime); env.gain.exponentialRampToValueAtTime(0.6, ctx.currentTime + 0.005); env.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + dur); osc.connect(env).connect(ctx.destination); osc.start(ctx.currentTime); osc.stop(ctx.currentTime + dur + 0.02); osc.onended = () => { try { osc.disconnect(); env.disconnect(); } catch {} }; } function scheduleMove(ctx, move, when) { const osc = ctx.createOscillator(); const env = ctx.createGain(); osc.type = move.id === "snap" ? "square" : move.id === "wave" ? "sine" : "triangle"; osc.frequency.setValueAtTime(move.freq, when); env.gain.setValueAtTime(0.0001, when); env.gain.exponentialRampToValueAtTime(0.5, when + 0.005); env.gain.exponentialRampToValueAtTime(0.0001, when + move.dur); osc.connect(env).connect(ctx.destination); osc.start(when); osc.stop(when + move.dur + 0.05); osc.onended = () => { try { osc.disconnect(); env.disconnect(); } catch {} }; } export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("handshake-composer"); const [sequence, setSequence] = useState([]); const [routineName, setRoutineName] = useState(""); const [isPlaying, setIsPlaying] = useState(false); const [activeIdx, setActiveIdx] = useState(-1); const [isSaving, setIsSaving] = useState(false); const [selectedRoutine, setSelectedRoutine] = useState(null); const audioCtxRef = useRef(null); const { docs: routines } = useLiveQuery("type", { key: "routine", descending: true }); const getCtx = useCallback(async () => { if (!audioCtxRef.current) { audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)(); } if (audioCtxRef.current.state !== "running") await audioCtxRef.current.resume(); return audioCtxRef.current; }, []); const addMove = useCallback(async (move) => { const ctx = await getCtx(); makeNoise(ctx, move.freq, move.dur, move.id === "snap" ? "square" : "triangle"); setSequence(prev => [...prev, { ...move, uid: Date.now() + Math.random() }]); }, [getCtx]); const removeMove = useCallback((uid) => { setSequence(prev => prev.filter(m => m.uid !== uid)); }, []); const moveUp = useCallback((idx) => { if (idx === 0) return; setSequence(prev => { const a = [...prev]; [a[idx - 1], a[idx]] = [a[idx], a[idx - 1]]; return a; }); }, []); const moveDown = useCallback((idx) => { setSequence(prev => { if (idx >= prev.length - 1) return prev; const a = [...prev]; [a[idx], a[idx + 1]] = [a[idx + 1], a[idx]]; return a; }); }, []); const playSequence = useCallback(async () => { if (isPlaying || sequence.length === 0) return; const ctx = await getCtx(); setIsPlaying(true); setActiveIdx(0); let t = ctx.currentTime + 0.1; sequence.forEach((move, i) => { scheduleMove(ctx, move, t); const delay = (t - ctx.currentTime) * 1000; setTimeout(() => setActiveIdx(i), delay); t += SPB; }); const totalMs = (t - ctx.currentTime) * 1000 + 100; setTimeout(() => { setIsPlaying(false); setActiveIdx(-1); }, totalMs); }, [isPlaying, sequence, getCtx]); const saveRoutine = useCallback(async () => { if (!routineName.trim() || sequence.length === 0) return; setIsSaving(true); try { await database.put({ type: "routine", name: routineName.trim(), moves: sequence.map(m => m.id), createdAt: Date.now(), }); setRoutineName(""); } finally { setIsSaving(false); } }, [database, routineName, sequence]); const loadRoutine = useCallback((routine) => { const moves = routine.moves.map(id => { const move = MOVES.find(m => m.id === id); return move ? { ...move, uid: Date.now() + Math.random() } : null; }).filter(Boolean); setSequence(moves); setSelectedRoutine(routine._id); }, []); const deleteRoutine = useCallback(async (id) => { await database.del(id); if (selectedRoutine === id) setSelectedRoutine(null); }, [database, selectedRoutine]); const colorMap = { red: { btn: "bg-[#c2410c] text-white border-[#0f172a]", bar: "bg-[#c2410c]" }, yellow: { btn: "bg-[#ca8a04] text-[#0f172a] border-[#0f172a]", bar: "bg-[#ca8a04]" }, blue: { btn: "bg-[#1d4ed8] text-white border-[#0f172a]", bar: "bg-[#1d4ed8]" }, green: { btn: "bg-[#15803d] text-[#0f172a] border-[#0f172a]", bar: "bg-[#15803d]" }, }; const c = { bg: "bg-[#f5f0e8]", card: "bg-white border-[3px] border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", ink: "text-[#0f172a]", muted: "text-[#50505a]", accent: "bg-[#c2410c]", yellow: "bg-[#ca8a04]", green: "bg-[#15803d]", blue: "bg-[#1d4ed8]", heading: "font-bold uppercase tracking-tight text-[#0f172a]", label: "text-[0.65rem] uppercase tracking-[0.15em] text-[#50505a] font-semibold", btnPrimary: "bg-[#c2410c] text-white border-[3px] border-[#0f172a] shadow-[4px_4px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 font-bold uppercase tracking-wider text-sm px-4 py-2 rounded-[4px]", btnSecondary: "bg-[#ca8a04] text-[#0f172a] border-[3px] border-[#0f172a] shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 font-bold uppercase tracking-wider text-sm px-4 py-2 rounded-[4px]", btnGhost: "bg-white text-[#0f172a] border-[3px] border-[#0f172a] hover:shadow-[3px_3px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 font-bold uppercase tracking-wider text-xs px-3 py-1 rounded-[4px]", }; const Spinner = () => ( ); return (

{/* Ambient BG */}

{/* NAV */} {/* HERO */}

BUILD YOUR SECRET HANDSHAKE

Tap moves to sequence them. Hit play to hear the rhythm. Save and share.

{/* MOVE PALETTE */}

MOVE PALETTE

{MOVES.map(move => { const col = colorMap[move.color]; return ( ); })}

{/* SEQUENCE */}

SEQUENCE

{sequence.length === 0 ? (

TAP MOVES TO ADD THEM

) : (

{idx + 1}
{move.label}

)}

{/* SAVE ROW */}

SAVE ROUTINE

setRoutineName(e.target.value)} onKeyDown={e => e.key === "Enter" && saveRoutine()} />

{/* SAVED ROUTINES */}

SAVED ROUTINES {routines.length} TOTAL

{routines.length === 0 ? (

NO ROUTINES SAVED YET

) : (

{routines.map(r => (

{r.name}

{r.moves.map((id, i) => { const m = MOVES.find(x => x.id === id); if (!m) return null; return {m.label}; })}

{new Date(r.createdAt).toLocaleDateString()} · {r.moves.length} MOVES

))}

)}

); }