import React, { useState, useRef, useEffect } from "react"; const CANVAS_W = 340, CANVAS_H = 440, SPLIT_Y = 190; const HEADS = [ { name: "Fuzzy Antenna", draw: (ctx) => { // Fuzzy round head with two wiggly antenna ctx.save(); ctx.fillStyle = "#ffd966"; ctx.beginPath(); ctx.ellipse(170, 95, 74, 80, 0, 0, Math.PI * 2); // head ctx.fill(); ctx.strokeStyle = "#c19a41"; ctx.lineWidth = 5; ctx.stroke(); // Antenna - left ctx.beginPath(); ctx.moveTo(110, 55); ctx.bezierCurveTo(95, 25, 120, 15, 130, 40); ctx.stroke(); ctx.beginPath(); ctx.arc(130, 40, 10, 0, Math.PI * 2); ctx.fillStyle = "#b8b8b8"; ctx.fill(); // Antenna - right ctx.beginPath(); ctx.moveTo(230, 55); ctx.bezierCurveTo(260, 10, 255, 40, 205, 50); ctx.stroke(); ctx.beginPath(); ctx.arc(205, 50, 10, 0, Math.PI * 2); ctx.fill(); // Eyes ctx.beginPath(); ctx.arc(145, 100, 10, 0, Math.PI * 2); ctx.arc(195, 100, 10, 0, Math.PI * 2); ctx.fillStyle = "#2f2f2f"; ctx.fill(); // Grin ctx.beginPath(); ctx.arc(170, 125, 30, 0, Math.PI); ctx.lineWidth = 3; ctx.strokeStyle = "#2f2f2f"; ctx.stroke(); ctx.restore(); }, }, { name: "Cyclops Blob", draw: (ctx) => { // Tall blob with big eye and waggle horns ctx.save(); ctx.fillStyle = "#b7e3fa"; ctx.beginPath(); ctx.ellipse(170, 100, 77, 86, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#4cc1e0"; ctx.lineWidth = 6; ctx.stroke(); // Eye ctx.beginPath(); ctx.arc(170, 100, 33, 0, Math.PI * 2); ctx.fillStyle = "#fff"; ctx.fill(); ctx.strokeStyle = "#272742"; ctx.lineWidth = 2; ctx.stroke(); ctx.beginPath(); ctx.arc(170, 100, 15, 0, Math.PI * 2); ctx.fillStyle = "#161819"; ctx.fill(); // Horns ctx.strokeStyle = "#fff683"; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(115, 30); ctx.bezierCurveTo(60, 10, 115, 75, 130, 35); ctx.stroke(); ctx.beginPath(); ctx.moveTo(225, 32); ctx.bezierCurveTo(290, 5, 220, 70, 205, 35); ctx.stroke(); ctx.restore(); }, }, { name: "Robot Dome", draw: (ctx) => { // Silver dome head w/ antenna, eyes and a grating ctx.save(); ctx.fillStyle = "#e1e5ea"; ctx.beginPath(); ctx.ellipse(170, 90, 70, 65, 0, Math.PI, 0, true); ctx.fill(); ctx.strokeStyle = "#9298a0"; ctx.lineWidth = 4; ctx.stroke(); // Antenna ctx.beginPath(); ctx.strokeStyle = "#fe6366"; ctx.moveTo(170, 5); ctx.lineTo(170, 34); ctx.stroke(); ctx.beginPath(); ctx.arc(170, 5, 10, 0, Math.PI * 2); ctx.fillStyle = "#fe6366"; ctx.fill(); // Eyes ctx.beginPath(); ctx.arc(140, 90, 15, 0, Math.PI * 2); ctx.arc(200, 92, 11, 0, Math.PI * 2); ctx.fillStyle = "#6b7a8f"; ctx.fill(); ctx.strokeStyle = "#505764"; ctx.stroke(); // Grate mouth ctx.fillStyle = "#d2d6d8"; ctx.fillRect(155, 120, 30, 10); ctx.strokeRect(155, 120, 30, 10); for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.moveTo(157 + i * 4, 120); ctx.lineTo(157 + i * 4, 130); ctx.stroke(); } ctx.restore(); }, }, ]; const BODIES = [ { name: "OctoLegs", draw: (ctx) => { ctx.save(); ctx.fillStyle = "#f4bebb"; // Fat body ctx.beginPath(); ctx.ellipse(170, 320, 85, 90, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#eb9793"; ctx.lineWidth = 4; ctx.stroke(); // Tentacle legs ctx.strokeStyle = "#ec8b81"; ctx.lineWidth = 13; for (let i = 0; i < 6; i++) { ctx.beginPath(); ctx.moveTo(110 + i * 33, 375); ctx.bezierCurveTo(115 + i * 32, 410 + ((i % 2) * 18), 120 + i * 32, 415 + 16 * ((i + 1) % 2), 120 + i * 31, 410); ctx.stroke(); } ctx.restore(); }, }, { name: "Waddly Bird", draw: (ctx) => { ctx.save(); ctx.fillStyle = "#fff581"; // Big egg body ctx.beginPath(); ctx.ellipse(170, 320, 78, 98, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#efd85e"; ctx.lineWidth = 4; ctx.stroke(); // Chubby feet ctx.fillStyle = "#ffa760"; ctx.beginPath(); ctx.ellipse(140, 404, 16, 10, 0, 0, Math.PI * 2); ctx.ellipse(200, 406, 15, 10, 0, 0, Math.PI * 2); ctx.fill(); // Feathery tail ctx.beginPath(); ctx.strokeStyle = "#efd85e"; ctx.moveTo(100, 330); ctx.lineTo(65, 316); ctx.moveTo(102, 340); ctx.lineTo(73, 355); ctx.moveTo(105, 355); ctx.lineTo(82, 376); ctx.stroke(); ctx.restore(); }, }, { name: "Springbot Wheels", draw: (ctx) => { ctx.save(); // Metal body ctx.fillStyle = "#b1e3f8"; ctx.beginPath(); ctx.ellipse(170, 328, 80, 75, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#38bdf8"; ctx.lineWidth = 4; ctx.stroke(); // Spring ctx.strokeStyle = "#b6b6b6"; ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(170, 363); ctx.bezierCurveTo(180, 382, 160, 415, 170, 423); ctx.stroke(); // Wheels ctx.beginPath(); ctx.arc(195, 424, 15, 0, Math.PI * 2); ctx.arc(145, 423, 15, 0, Math.PI * 2); ctx.fillStyle = "#505764"; ctx.fill(); ctx.restore(); }, }, ]; function getRandomExcluding(arr, excludeIdx) { let idx = Math.floor(Math.random() * (arr.length - 1)); if (idx >= excludeIdx) idx++; return arr[idx]; } export default function App() { // UI stages: 'pick' (choose upper/lower), 'draw-half', 'swap', 'draw-finish', 'share', 'done' const [stage, setStage] = useState("pick"); const [myRole, setMyRole] = useState(null); // 'upper' or 'lower' const [otherPart, setOtherPart] = useState(null); // Will be randomly chosen const [doodleUrl, setDoodleUrl] = useState(null); const [drawing, setDrawing] = useState([]); // [{x,y,dragging}...] for current session const [isDrawing, setIsDrawing] = useState(false); const [strokeColor] = useState("#ff4f87"); // One fun accent color const [strokeWidth] = useState(7); const [sharedImageUrl, setSharedImageUrl] = useState(null); const [copied, setCopied] = useState(false); // To persist last drawing in session const canvasRef = useRef(null); // Pick head/body first function handlePick(role) { setMyRole(role); setDrawing([]); setStage("draw-half"); setOtherPart(null); setDoodleUrl(null); setSharedImageUrl(null); setCopied(false); } // Drawing logic function pointerPos(e) { const rect = canvasRef.current.getBoundingClientRect(); let x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left; let y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top; x = Math.max(0, Math.min(CANVAS_W, x)); y = Math.max(0, Math.min(CANVAS_H, y)); return { x, y }; } const onDrawStart = e => { setIsDrawing(true); const { x, y } = pointerPos(e); setDrawing(d => [...d, { x, y, dragging: false }]); }; const onDrawMove = e => { if (!isDrawing) return; const { x, y } = pointerPos(e); setDrawing(d => [...d, { x, y, dragging: true }]); }; const stopDraw = () => { setIsDrawing(false); }; // Render the half with user's doodle useEffect(() => { if (!canvasRef.current) return; const ctx = canvasRef.current.getContext("2d"); ctx.clearRect(0, 0, CANVAS_W, CANVAS_H); // Background! ctx.fillStyle = "#f0f9ff"; ctx.fillRect(0, 0, CANVAS_W, CANVAS_H); // Divider ctx.strokeStyle = "#6dd5fa"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(0, SPLIT_Y); ctx.lineTo(CANVAS_W, SPLIT_Y); ctx.stroke(); // Draw half-creature paint overlay: if (myRole === "upper") { // HEAD BASE SKETCH ctx.globalAlpha = 0.14; HEADS[0].draw(ctx); ctx.globalAlpha = 1; } else if (myRole === "lower") { ctx.globalAlpha = 0.13; BODIES[0].draw(ctx); ctx.globalAlpha = 1; } // Mask out the off-half so you only draw on the allowed side ctx.save(); ctx.beginPath(); if (myRole === "upper") { ctx.rect(0, 0, CANVAS_W, SPLIT_Y); } else { ctx.rect(0, SPLIT_Y, CANVAS_W, CANVAS_H - SPLIT_Y); } ctx.clip(); // Redraw history ctx.strokeStyle = strokeColor; ctx.lineWidth = strokeWidth; ctx.lineCap = "round"; for (let i = 0; i < drawing.length; i++) { if (drawing[i].dragging && i) { ctx.beginPath(); ctx.moveTo(drawing[i - 1].x, drawing[i - 1].y); ctx.lineTo(drawing[i].x, drawing[i].y); ctx.stroke(); } } ctx.restore(); }, [drawing, myRole]); // Complete with surprise body/head and show for finishing function handleSwap() { let idx; if (myRole === "upper") { idx = Math.floor(Math.random() * BODIES.length); setOtherPart(BODIES[idx]); } else { idx = Math.floor(Math.random() * HEADS.length); setOtherPart(HEADS[idx]); } setStage("draw-finish"); } // Finalize monster! Draw composite and enable sharing function handleDone() { // Composite the canvas: first half = user's, second half = surprise let c = document.createElement("canvas"); c.width = CANVAS_W; c.height = CANVAS_H; let ctx = c.getContext("2d"); // Fill bg ctx.fillStyle = "#f0f9ff"; ctx.fillRect(0, 0, CANVAS_W, CANVAS_H); // Divider ctx.strokeStyle = "#6dd5fa"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(0, SPLIT_Y); ctx.lineTo(CANVAS_W, SPLIT_Y); ctx.stroke(); // Render user doodle (with mask) ctx.save(); ctx.beginPath(); if (myRole === "upper") ctx.rect(0, 0, CANVAS_W, SPLIT_Y); else ctx.rect(0, SPLIT_Y, CANVAS_W, CANVAS_H - SPLIT_Y); ctx.clip(); let userDoodle = canvasRef.current; ctx.drawImage(userDoodle, 0, 0); ctx.restore(); // Render completed half (AI or pre-fab) ctx.save(); ctx.beginPath(); if (myRole === "upper") ctx.rect(0, SPLIT_Y, CANVAS_W, CANVAS_H - SPLIT_Y); else ctx.rect(0, 0, CANVAS_W, SPLIT_Y); ctx.clip(); if (myRole === "upper") { otherPart?.draw(ctx); } else { otherPart?.draw(ctx); } ctx.restore(); setDoodleUrl(c.toDataURL()); setStage("share"); } function handleCopy() { if (!doodleUrl) return; navigator.clipboard.writeText(doodleUrl) .then(() => setCopied(true)); setTimeout(() => setCopied(false), 1400); } function handleDownload() { if (!doodleUrl) return; const a = document.createElement("a"); a.href = doodleUrl; a.download = "SquiggleSwapMonster.png"; a.click(); setCopied(true); setTimeout(() => setCopied(false), 1200); } function resetAll() { setStage("pick"); setDoodleUrl(null); setDrawing([]); setOtherPart(null); setMyRole(null); setSharedImageUrl(null); setCopied(false); } // UI Stages let content; if (stage === "pick") { content = (

🌀 SquiggleSwap

Draw half a silly monster, get a surprise half to finish, and share your creation!

No accounts or sign-in! Your doodle stays local until you share.
Play together—send your wacky result to friends!

); } else if (stage === "draw-half") { content = (

{myRole === "upper" ? "Draw a Head & Face!" : "Draw a Body & Legs!"}

); } else if (stage === "draw-finish") { // Show other half as a faint guide, let user finish their half content = (

{myRole === "upper" ? `Finish the monster's legs/body!` : `Finish the monster's head!`}

); } else if (stage === "share") { content = (

Your Wacky Monster! 🎉

{copied && (

Saved! Try sending it to a friend.

)}

); } return (

{content}

); } function GuideOverlay({ which, drawFn }) { // which: "head" or "body" // drawFn: function to draw the template part const ref = useRef(); useEffect(() => { if (!ref.current || !drawFn) return; const ctx = ref.current.getContext("2d"); ctx.clearRect(0, 0, CANVAS_W, CANVAS_H); if (which === "head") { ctx.save(); ctx.globalAlpha = 0.12; drawFn(ctx); ctx.restore(); } else if (which === "body") { ctx.save(); ctx.globalAlpha = 0.11; drawFn(ctx); ctx.restore(); } }, [which, drawFn]); return (