import React, { useState, useRef, useEffect } from "react"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("drawing-telephone-v1"); const { docs: chains } = useLiveQuery("type", { key: "chain", descending: true }); const { docs: steps } = useLiveQuery("type", { key: "step", descending: false }); const [view, setView] = useState("home"); // home | new | play | reveal const [activeChainId, setActiveChainId] = useState(null); const [isDrawing, setIsDrawing] = useState(false); const [isLoading, setIsLoading] = useState(false); const [guessText, setGuessText] = useState(""); const [secretWord, setSecretWord] = useState(""); const [playerName, setPlayerName] = useState(""); const [drawColor, setDrawColor] = useState("#0f172a"); const [brushSize, setBrushSize] = useState(4); const [revealChainId, setRevealChainId] = useState(null); const canvasRef = useRef(null); const lastPos = useRef(null); const activeChain = chains.find(c => c._id === activeChainId); const chainSteps = steps.filter(s => s.chainId === activeChainId).sort((a, b) => a.order - b.order); const latestStep = chainSteps[chainSteps.length - 1]; const revealSteps = steps.filter(s => s.chainId === revealChainId).sort((a, b) => a.order - b.order); useEffect(() => { if (view === "play") { const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); } } }, [view, activeChainId]); function getPos(e, canvas) { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; if (e.touches) { return { x: (e.touches[0].clientX - rect.left) * scaleX, y: (e.touches[0].clientY - rect.top) * scaleY, }; } return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY, }; } function startDraw(e) { e.preventDefault(); setIsDrawing(true); lastPos.current = getPos(e, canvasRef.current); } function draw(e) { e.preventDefault(); if (!isDrawing) return; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); const pos = getPos(e, canvas); ctx.beginPath(); ctx.moveTo(lastPos.current.x, lastPos.current.y); ctx.lineTo(pos.x, pos.y); ctx.strokeStyle = drawColor; ctx.lineWidth = brushSize; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.stroke(); lastPos.current = pos; } function stopDraw(e) { e.preventDefault(); setIsDrawing(false); lastPos.current = null; } function clearCanvas() { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); } async function startNewChain() { if (!secretWord.trim() || !playerName.trim()) return; const chain = await database.put({ type: "chain", secret: secretWord.trim(), starter: playerName.trim(), createdAt: Date.now(), finished: false, }); setActiveChainId(chain.id); setView("play"); setSecretWord(""); } async function submitDrawing() { if (isLoading) return; setIsLoading(true); try { const canvas = canvasRef.current; const blob = await new Promise(res => canvas.toBlob(res, "image/png")); const file = new File([blob], "drawing.png", { type: "image/png" }); const order = chainSteps.length; await database.put({ type: "step", chainId: activeChainId, order, kind: "drawing", player: playerName.trim() || "Anonymous", createdAt: Date.now(), _files: { drawing: file }, }); } finally { setIsLoading(false); setView("home"); setActiveChainId(null); } } async function submitGuess() { if (!guessText.trim() || isLoading || !latestStep) return; setIsLoading(true); try { const order = chainSteps.length; await database.put({ type: "step", chainId: activeChainId, order, kind: "guess", player: playerName.trim() || "Anonymous", guess: guessText.trim(), createdAt: Date.now(), prompt: guessText.trim(), }); setGuessText(""); } finally { setIsLoading(false); setView("home"); setActiveChainId(null); } } async function finishChain(chainId) { const chain = chains.find(c => c._id === chainId); if (chain) await database.put({ ...chain, finished: true }); setRevealChainId(chainId); setView("reveal"); } function joinChain(chain) { setActiveChainId(chain._id); const cSteps = steps.filter(s => s.chainId === chain._id).sort((a, b) => a.order - b.order); const last = cSteps[cSteps.length - 1]; if (!last || last.kind === "guess") { setView("play"); } else { setView("guess"); } } const COLORS = ["#0f172a", "#dc2626", "#ca8a04", "#16a34a", "#2563eb", "#ffffff"]; const c = { bg: "bg-[#f5f3ee]", card: "bg-[#ffffff]", border: "border-[#0f172a]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", red: "bg-[#c2410c]", yellow: "bg-[#ca8a04]", green: "bg-[#16a34a]", blue: "bg-[#2563eb]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", btn: "border-[3px] border-[#0f172a] rounded-[4px] font-bold uppercase tracking-wide text-sm cursor-pointer transition-all duration-150 active:translate-x-[2px] active:translate-y-[2px] active:shadow-none", input: "border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 w-full font-[Space_Grotesk] text-sm focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150", }; const Spinner = () => ( ); return (

{/* Floating shapes */}

{/* NAV */} {/* HOME */} {view === "home" && (

{/* Hero */}

DRAWING
TELEPHONE

Draw it. Guess it. Watch it drift.

{/* Player name */}

Your Name setPlayerName(e.target.value)} placeholder="Enter your name..." />

{/* Active chains */}

Active Chains

{chains.filter(c2 => !c2.finished).length === 0 && (

No active chains yet. Start one!

)}

{chains.filter(ch => !ch.finished).map(chain => { const cSteps = steps.filter(s => s.chainId === chain._id); const last = cSteps.sort((a, b) => a.order - b.order)[cSteps.length - 1]; const needsDraw = !last || last.kind === "guess"; return (

Chain by {chain.starter}

{cSteps.length} step{cSteps.length !== 1 ? "s" : ""} — needs {needsDraw ? "drawing" : "guess"}

); })}

{/* Finished chains */} {chains.filter(c2 => c2.finished).length > 0 && (

Finished Chains

{chains.filter(ch => ch.finished).map(chain => (

Chain by {chain.starter}

{steps.filter(s => s.chainId === chain._id).length} steps

))}

)}

)} {/* NEW CHAIN */} {view === "new" && (

Start a New Chain

Your Name setPlayerName(e.target.value)} placeholder="Enter your name..." />

Secret Word / Phrase setSecretWord(e.target.value)} placeholder="What will you draw?" />

)} {/* DRAW */} {view === "play" && (

Your Turn to Draw

{activeChain && chainSteps.length === 0 && (

Draw: {activeChain.secret}

)} {chainSteps.length === 0 && (

Draw your secret word above

)} {/* Toolbar */}

{COLORS.map(col => ( ))}

)} {/* GUESS */} {view === "guess" && latestStep && (

What Is This?

{latestStep.kind === "drawing" && latestStep._files?.drawing && (

)} {latestStep.kind === "guess" && latestStep.prompt && ( )}

Your Guess setGuessText(e.target.value)} placeholder="What do you see?" onKeyDown={e => e.key === "Enter" && submitGuess()} />

)} {/* REVEAL */} {view === "reveal" && (

Chain Reveal

{(() => { const rc = chains.find(ch => ch._id === revealChainId); return rc ?

Started by {rc.starter} — secret: {rc.secret}

: null; })()}

{revealSteps.map((step, i) => (

Step {i + 1} — {step.kind === "drawing" ? "Drawing" : "Guess"} {step.player}

{step.kind === "drawing" && step._files?.drawing && ( {`Step

)} {step.kind === "guess" && ( <>

"{step.guess}"

)}

))}

)}

); }

DRAWINGTELEPHONE

Start a New Chain

Your Turn to Draw

What Is This?

Chain Reveal

DRAWING
TELEPHONE