From 8803d17f11edb1d8be16d1f5de4a10a2cef18c38 Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Wed, 17 Jun 2026 19:54:28 -0500 Subject: [PATCH] Change level wording, fix retry lesson not opening --- src/components/ColoringRunner.tsx | 3 +++ src/components/LessonRunner.tsx | 6 +++++- src/components/ShadingRunner.tsx | 5 ++++- src/components/TraceRunner.tsx | 3 ++- src/lib/curriculum.ts | 2 +- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/ColoringRunner.tsx b/src/components/ColoringRunner.tsx index c809877..fa7db0e 100644 --- a/src/components/ColoringRunner.tsx +++ b/src/components/ColoringRunner.tsx @@ -75,6 +75,9 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned force((n) => n + 1); }, [composite]); + // Repaint when returning to the studio from the "done" screen + useEffect(() => { if (!done) composite(); }, [done, composite]); + // Rasterize the coloring-book template for the fill boundary + final export useEffect(() => { const svg = `${meta.baseSvg}`; diff --git a/src/components/LessonRunner.tsx b/src/components/LessonRunner.tsx index 53ca56b..db69505 100644 --- a/src/components/LessonRunner.tsx +++ b/src/components/LessonRunner.tsx @@ -128,6 +128,9 @@ export default function LessonRunner({ return () => window.removeEventListener("resize", resize); }, [resize]); + // Re-size the canvas whenever the drawing view returns (e.g. after "Draw it again") + useEffect(() => { if (!finished) resize(); }, [finished, resize]); + // Restore the saved in-progress drawing useEffect(() => { if (!loggedIn || alreadyEarned) return; @@ -192,7 +195,8 @@ export default function LessonRunner({ baseImgRef.current = null; redraw(); force((n) => n + 1); - if (loggedIn) saveProgressDrawing(meta.level, meta.sublevel, exportCanvasToDataURL(canvasRef.current!)); + const c = canvasRef.current; + if (loggedIn && c) saveProgressDrawing(meta.level, meta.sublevel, exportCanvasToDataURL(c)); } function undo() { strokesRef.current.pop(); diff --git a/src/components/ShadingRunner.tsx b/src/components/ShadingRunner.tsx index db40b26..8d301e3 100644 --- a/src/components/ShadingRunner.tsx +++ b/src/components/ShadingRunner.tsx @@ -102,6 +102,8 @@ export default function ShadingRunner({ return () => window.removeEventListener("resize", resize); }, [resize]); + useEffect(() => { if (!finished) resize(); }, [finished, resize]); + useEffect(() => { if (!loggedIn || alreadyEarned) return; let alive = true; @@ -153,7 +155,8 @@ export default function ShadingRunner({ baseImgRef.current = null; redraw(); force((n) => n + 1); - if (loggedIn) saveProgressDrawing(meta.level, meta.sublevel, exportCanvasToDataURL(canvasRef.current!)); + const c = canvasRef.current; + if (loggedIn && c) saveProgressDrawing(meta.level, meta.sublevel, exportCanvasToDataURL(c)); } function undo() { strokesRef.current.pop(); redraw(); force((n) => n + 1); scheduleSave(); } diff --git a/src/components/TraceRunner.tsx b/src/components/TraceRunner.tsx index e06339f..6ef1083 100644 --- a/src/components/TraceRunner.tsx +++ b/src/components/TraceRunner.tsx @@ -65,6 +65,7 @@ export default function TraceRunner({ meta, steps, loggedIn, username, completed c.width = Math.round(r.width * dpr); c.height = Math.round(r.height * dpr); redraw(); }, [redraw]); useEffect(() => { resize(); window.addEventListener("resize", resize); return () => window.removeEventListener("resize", resize); }, [resize]); + useEffect(() => { if (!finished) resize(); }, [finished, resize]); useEffect(() => { if (!loggedIn || alreadyEarned) return; let alive = true; @@ -83,7 +84,7 @@ export default function TraceRunner({ meta, steps, loggedIn, username, completed function onDown(e: React.PointerEvent) { if (finished) return; (e.target as Element).setPointerCapture?.(e.pointerId); const s: Stroke = { color, size, points: [pe(e)] }; drawingRef.current = s; strokesRef.current.push(s); } function onMove(e: React.PointerEvent) { const s = drawingRef.current; if (!s) return; s.points.push(pe(e)); redraw(); } function onUp() { drawingRef.current = null; force((n) => n + 1); scheduleSave(); } - function clearCanvas() { strokesRef.current = []; baseImgRef.current = null; redraw(); force((n) => n + 1); if (loggedIn) saveProgressDrawing(meta.level, meta.sublevel, exportCanvasToDataURL(canvasRef.current!)); } + function clearCanvas() { strokesRef.current = []; baseImgRef.current = null; redraw(); force((n) => n + 1); const c = canvasRef.current; if (loggedIn && c) saveProgressDrawing(meta.level, meta.sublevel, exportCanvasToDataURL(c)); } function undo() { strokesRef.current.pop(); redraw(); force((n) => n + 1); scheduleSave(); } async function saveStep(stepN: number, badgeKey?: string) { diff --git a/src/lib/curriculum.ts b/src/lib/curriculum.ts index 0c5adfc..6155f10 100644 --- a/src/lib/curriculum.ts +++ b/src/lib/curriculum.ts @@ -10,7 +10,7 @@ export const LEVELS: LevelMeta[] = [ { key: "early-beginner", name: "Early Beginner", emoji: "\u{1F331}", blurb: "First lines and simple shapes. Perfect for brand-new artists." }, { key: "beginner", name: "Beginner", emoji: "\u270F\uFE0F", blurb: "Combine shapes into friendly characters and objects." }, { key: "learner", name: "Learner", emoji: "\u{1F3A8}", blurb: "Add details, shading, and your own ideas." }, - { key: "advanced-learned", name: "Advanced Learned", emoji: "\u{1F680}", blurb: "Proportion, perspective, and more complex scenes." }, + { key: "advanced-learned", name: "Advanced Learner", emoji: "\u{1F680}", blurb: "Proportion, perspective, and more complex scenes." }, { key: "superb", name: "Superb", emoji: "\u{1F31F}", blurb: "Confident, expressive drawing in your own style." }, ];