96:I[478524,["/chat-static/_next/static/immutable/chunks/0b5l4j22my69q.js","/chat-static/_next/static/immutable/chunks/1o_8apc9t7n_q.js","/chat-static/_next/static/immutable/chunks/3r_w5eszjqdcl.js","/chat-static/_next/static/immutable/chunks/114n8e2ac_jia.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/2s3szdh4sj8a9.js","/chat-static/_next/static/immutable/chunks/0-_o4hpte0vl3.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/0tx1sb8vbv047.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1vytwqo6pzy-2.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/3pxk47hjn0did.js","/chat-static/_next/static/immutable/chunks/2o77ap5zb_ifo.js","/chat-static/_next/static/immutable/chunks/1y9-5e-fp9k6t.js","/chat-static/_next/static/immutable/chunks/06bkmbcp63szl.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2u6_2ad6hwbai.js","/chat-static/_next/static/immutable/chunks/3z2ytqe4qbkve.js","/chat-static/_next/static/immutable/chunks/3cvxogyz6xpjg.js","/chat-static/_next/static/immutable/chunks/37imr48mpgnlw.js","/chat-static/_next/static/immutable/chunks/2s-5grvetxapr.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0fyg5jcc_36eb.js","/chat-static/_next/static/immutable/chunks/0al-lqkps3dre.js","/chat-static/_next/static/immutable/chunks/1nr8mtt823fe4.js","/chat-static/_next/static/immutable/chunks/28ncw0c3u_jm_.js","/chat-static/_next/static/immutable/chunks/2a75wjty6j9fw.js","/chat-static/_next/static/immutable/chunks/2ndt_c6v79mb_.js","/chat-static/_next/static/immutable/chunks/3pdq-c388l9_h.js","/chat-static/_next/static/immutable/chunks/1rfln50oa1s9j.js","/chat-static/_next/static/immutable/chunks/2gaf24-oqkjzb.js","/chat-static/_next/static/immutable/chunks/143r8ojyp-nrs.js","/chat-static/_next/static/immutable/chunks/3k5m3vbsr0f09.js"],"TemplateCardStatsLikes"] 97:I[903690,["/chat-static/_next/static/immutable/chunks/0b5l4j22my69q.js","/chat-static/_next/static/immutable/chunks/1o_8apc9t7n_q.js","/chat-static/_next/static/immutable/chunks/3r_w5eszjqdcl.js","/chat-static/_next/static/immutable/chunks/114n8e2ac_jia.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/2s3szdh4sj8a9.js","/chat-static/_next/static/immutable/chunks/0-_o4hpte0vl3.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/0tx1sb8vbv047.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1vytwqo6pzy-2.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/3pxk47hjn0did.js","/chat-static/_next/static/immutable/chunks/2o77ap5zb_ifo.js","/chat-static/_next/static/immutable/chunks/1y9-5e-fp9k6t.js","/chat-static/_next/static/immutable/chunks/06bkmbcp63szl.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2u6_2ad6hwbai.js","/chat-static/_next/static/immutable/chunks/3z2ytqe4qbkve.js","/chat-static/_next/static/immutable/chunks/3cvxogyz6xpjg.js","/chat-static/_next/static/immutable/chunks/37imr48mpgnlw.js","/chat-static/_next/static/immutable/chunks/2s-5grvetxapr.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0fyg5jcc_36eb.js","/chat-static/_next/static/immutable/chunks/0al-lqkps3dre.js","/chat-static/_next/static/immutable/chunks/1nr8mtt823fe4.js","/chat-static/_next/static/immutable/chunks/28ncw0c3u_jm_.js","/chat-static/_next/static/immutable/chunks/2a75wjty6j9fw.js","/chat-static/_next/static/immutable/chunks/2ndt_c6v79mb_.js","/chat-static/_next/static/immutable/chunks/3pdq-c388l9_h.js","/chat-static/_next/static/immutable/chunks/1rfln50oa1s9j.js","/chat-static/_next/static/immutable/chunks/2gaf24-oqkjzb.js","/chat-static/_next/static/immutable/chunks/143r8ojyp-nrs.js","/chat-static/_next/static/immutable/chunks/3k5m3vbsr0f09.js"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/immutable/chunks/0b5l4j22my69q.js","/chat-static/_next/static/immutable/chunks/1o_8apc9t7n_q.js","/chat-static/_next/static/immutable/chunks/3r_w5eszjqdcl.js","/chat-static/_next/static/immutable/chunks/114n8e2ac_jia.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/2s3szdh4sj8a9.js","/chat-static/_next/static/immutable/chunks/0-_o4hpte0vl3.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/0tx1sb8vbv047.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1vytwqo6pzy-2.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/3pxk47hjn0did.js","/chat-static/_next/static/immutable/chunks/2o77ap5zb_ifo.js","/chat-static/_next/static/immutable/chunks/1y9-5e-fp9k6t.js","/chat-static/_next/static/immutable/chunks/06bkmbcp63szl.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2u6_2ad6hwbai.js","/chat-static/_next/static/immutable/chunks/3z2ytqe4qbkve.js","/chat-static/_next/static/immutable/chunks/3cvxogyz6xpjg.js","/chat-static/_next/static/immutable/chunks/37imr48mpgnlw.js","/chat-static/_next/static/immutable/chunks/2s-5grvetxapr.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0fyg5jcc_36eb.js","/chat-static/_next/static/immutable/chunks/0al-lqkps3dre.js","/chat-static/_next/static/immutable/chunks/1nr8mtt823fe4.js","/chat-static/_next/static/immutable/chunks/28ncw0c3u_jm_.js","/chat-static/_next/static/immutable/chunks/2a75wjty6j9fw.js","/chat-static/_next/static/immutable/chunks/2ndt_c6v79mb_.js","/chat-static/_next/static/immutable/chunks/3pdq-c388l9_h.js","/chat-static/_next/static/immutable/chunks/1rfln50oa1s9j.js","/chat-static/_next/static/immutable/chunks/2gaf24-oqkjzb.js","/chat-static/_next/static/immutable/chunks/143r8ojyp-nrs.js","/chat-static/_next/static/immutable/chunks/3k5m3vbsr0f09.js"],"SWRDataProvider"] 93:["$","span",null,{"className":"text-[13px] leading-none","children":"113"}] 94:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-dot size-4 -mx-1","children":[["$","circle","18d7e5",{"cx":"12.1","cy":"12.1","r":"1"}],"$undefined"]}] 95:["$","$L96",null,{"likeCount":53,"isLiked":false}] 99:T4540,[V0_FILE]typescriptreact:file="/app/page.tsx" "use client"; import { useState, useEffect, useCallback, useRef } from "react"; import { getScenario } from "@/lib/scenarios"; import { interpretSequence } from "@/lib/interpreter"; import type { BeatAction, ConversationBeat, ScenarioId, AppState, RhythmResult, } from "@/lib/rhythm-types"; import { ScenarioDial } from "@/components/scenario-dial"; import { BeatTape } from "@/components/beat-tape"; import { InstrumentPads } from "@/components/instrument-pads"; import { RhythmReading } from "@/components/rhythm-reading"; import { useAudio } from "@/hooks/use-audio"; // ── helpers ──────────────────────────────────────────────────────────────────── const TOTAL_BEATS = 8; const PLAYBACK_MS = 420; // ms per beat during playback const OVERLAP_MS = 380; // simultaneous-press window function makeBeat( index: number, action: BeatAction, source?: ConversationBeat["sourceAction"] ): ConversationBeat { return { index, action, sourceAction: source, intensity: 2 }; } // ── Page ─────────────────────────────────────────────────────────────────────── export default function ReciprocityRhythmPage() { const [scenarioId, setScenarioId] = useState("good-news"); const [beats, setBeats] = useState([]); const [appState, setAppState] = useState("initial"); const [playbackIndex, setPlaybackIndex] = useState(-1); const [result, setResult] = useState(null); const [reducedMotion, setReducedMotion] = useState(false); const playbackTimer = useRef | null>(null); const announceRef = useRef(null); const lastPressRef = useRef<{ action: "offer" | "receive"; time: number } | null>(null); const audio = useAudio(); // Detect prefers-reduced-motion useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReducedMotion(mq.matches); const h = (e: MediaQueryListEvent) => setReducedMotion(e.matches); mq.addEventListener("change", h); return () => mq.removeEventListener("change", h); }, []); // Cleanup timers on unmount useEffect(() => () => { if (playbackTimer.current) clearTimeout(playbackTimer.current); }, []); // ── Derived ──────────────────────────────────────────────────────────────── const nextBeatIndex = beats.length; const canCompose = appState === "initial" || appState === "composing"; const canUndo = canCompose && beats.length > 0; const canRepair = canCompose && beats.length > 0 && beats[beats.length - 1].action !== "repair"; const canPlay = appState === "ready" || appState === "result"; // ── ARIA announce ────────────────────────────────────────────────────────── const announce = useCallback((msg: string) => { if (!announceRef.current) return; announceRef.current.textContent = ""; requestAnimationFrame(() => { if (announceRef.current) announceRef.current.textContent = msg; }); }, []); // ── Core beat add ────────────────────────────────────────────────────────── const addBeat = useCallback( (action: BeatAction, source?: ConversationBeat["sourceAction"]) => { if (!canCompose || beats.length >= TOTAL_BEATS) return; const next = [...beats, makeBeat(beats.length, action, source)]; setBeats(next); announce(`Beat ${next.length}: ${action}`); setAppState(next.length === TOTAL_BEATS ? "ready" : "composing"); }, [beats, canCompose, announce] ); // ── Overlap-aware pad handlers ───────────────────────────────────────────── const handleOffer = useCallback(() => { if (!canCompose) return; const now = Date.now(); const last = lastPressRef.current; if (last?.action === "receive" && now - last.time < OVERLAP_MS) { lastPressRef.current = null; addBeat("overlap", "overlap"); audio.playOverlap(); return; } lastPressRef.current = { action: "offer", time: now }; setTimeout(() => { if (lastPressRef.current?.action === "offer") { lastPressRef.current = null; addBeat("offer"); audio.playOffer(); } }, OVERLAP_MS); }, [canCompose, addBeat, audio]); const handleReceive = useCallback(() => { if (!canCompose) return; const now = Date.now(); const last = lastPressRef.current; if (last?.action === "offer" && now - last.time < OVERLAP_MS) { lastPressRef.current = null; addBeat("overlap", "overlap"); audio.playOverlap(); return; } lastPressRef.current = { action: "receive", time: now }; setTimeout(() => { if (lastPressRef.current?.action === "receive") { lastPressRef.current = null; addBeat("receive"); audio.playReceive(); } }, OVERLAP_MS); }, [canCompose, addBeat, audio]); const handlePause = useCallback(() => { if (!canCompose) return; addBeat("pause"); audio.playPause(); }, [canCompose, addBeat, audio]); const handleRepair = useCallback(() => { if (!canRepair) return; setBeats((prev) => { const next = [...prev]; const last = next[next.length - 1]; next[next.length - 1] = { ...last, action: "repair", sourceAction: last.action as ConversationBeat["sourceAction"], }; announce(`Beat ${next.length} changed to repair`); return next; }); audio.playRepair(); }, [canRepair, announce, audio]); const handleUndo = useCallback(() => { if (!canUndo) return; setBeats((prev) => { const next = prev.slice(0, -1); announce(next.length === 0 ? "Tape cleared" : `Undone — ${next.length} beats remain`); setAppState(next.length === 0 ? "initial" : "composing"); return next; }); }, [canUndo, announce]); // ── Playback ─────────────────────────────────────────────────────────────── const handlePlay = useCallback(() => { if (appState !== "ready" && appState !== "result") return; setAppState("playing"); setResult(null); setPlaybackIndex(-1); let idx = 0; const tick = () => { setPlaybackIndex(idx); const b = beats[idx]; if (b) { if (b.action === "offer") audio.playOffer(); if (b.action === "receive") audio.playReceive(); if (b.action === "overlap") audio.playOverlap(); if (b.action === "repair") audio.playRepair(); } if (idx < beats.length - 1) { idx++; playbackTimer.current = setTimeout(tick, PLAYBACK_MS); } else { playbackTimer.current = setTimeout(() => { setPlaybackIndex(-1); setAppState("result"); const r = interpretSequence(getScenario(scenarioId), beats); setResult(r); announce("Rhythm reading complete. Interpretation visible below."); }, PLAYBACK_MS + 100); } }; playbackTimer.current = setTimeout(tick, 120); }, [canPlay, beats, scenarioId, audio, announce]); // ── Scenario change resets ───────────────────────────────────────────────── const handleScenarioChange = useCallback( (id: ScenarioId) => { if (appState === "playing") return; if (playbackTimer.current) clearTimeout(playbackTimer.current); setScenarioId(id); setBeats([]); setAppState("initial"); setResult(null); setPlaybackIndex(-1); }, [appState] ); // ── Try the suggested change ─────────────────────────────────────────────── const handleTryChange = useCallback(() => { if (!result) return; const { beatIndex, to } = result.suggestedChange; const next = beats.map((b, i) => i === beatIndex ? makeBeat(i, to, b.action as ConversationBeat["sourceAction"]) : b ); setBeats(next); setResult(null); setAppState("ready"); announce(`Beat ${beatIndex + 1} changed to ${to}. Press Play to replay.`); }, [result, beats, announce]); // ── Keyboard shortcuts ───────────────────────────────────────────────────── useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return; // Don't fire R inside the scenario dial (it uses arrow keys instead) const inDial = e.target instanceof HTMLElement && !!e.target.closest("[data-scenario-dial]"); switch (e.key) { case "o": case "O": e.preventDefault(); handleOffer(); break; case "r": case "R": if (!inDial) { e.preventDefault(); handleReceive(); } break; case " ": e.preventDefault(); handlePause(); break; case "p": case "P": e.preventDefault(); handleRepair(); break; case "Backspace": e.preventDefault(); handleUndo(); break; } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [handleOffer, handleReceive, handlePause, handleRepair, handleUndo]); // ── Render ───────────────────────────────────────────────────────────────── const stateLabel = { initial: "Tape empty — compose your exchange", composing: `Beat ${nextBeatIndex + 1} of ${TOTAL_BEATS}`, ready: "All 8 beats — ready to play", playing: "Playing…", result: "Exchange played", }[appState]; return (

{/* ARIA live region */}

{/* ── 1. Opening header ──────────────────────────────────────────── */}

July 30 · UN International Day of Friendship

Reciprocity Rhythm

Friendship has timing.

An illustrative eight-beat conversation study for July 30.

Choose a moment. Tap the exchange. Notice what the rhythm makes visible.

{/* ── 2. Scenario dial ───────────────────────────────────────────── */}

Choose a friendship scenario

{/* Divider */}

{/* ── 3. Eight-beat instrument ────────────────────────────────────── */}

Eight-beat conversation instrument

{/* State label + sound toggle */}

{stateLabel}

{/* Tape */} {/* Pads + controls */} {/* Reset — visible only after result */} {appState === "result" && (

)}

{/* ── 4. Rhythm reading ──────────────────────────────────────────── */} {result && (

Rhythm reading

)} {/* Footer */}

); }88:["$","$L97",null,{"chatId":"bSUyCMI0zi2","children":["$","$L98",null,{"data":{"@\"active-block\",\"bSUyCMI0zi2\",":{"id":"b_xUPSE1ItrwX","messageId":"4tfvisWsx9meErM0gxdX38d3oCY8J3Ce","source":"$99","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Fixing handlePlay guard","taskNameComplete":"handlePlay guard fixed"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"bSUyCMI0zi2\",":true,"/chat/api/snapshots/proxy?blockId=b_xUPSE1ItrwX&v=v2":null},"children":"$L9a"}]}]

About

Tags

Share

About

Tags

Share

More from ctxzz

More Templates Like This