Change level wording, fix retry lesson not opening

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 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="${W}" height="${H}">${meta.baseSvg}</svg>`;

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();

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(); }
 

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) {