{subj.emoji} {subj.name}
@@ -123,4 +123,4 @@ export default async function LearnPage() {
}
const subCard = (done: boolean): React.CSSProperties => ({ textDecoration: "none", color: "inherit", border: done ? "2px solid var(--leaf)" : "2px solid var(--line)", boxShadow: "none", padding: 14 });
-const phaseBox: React.CSSProperties = { display: "block", border: "2px solid var(--line)", borderRadius: 12, padding: "12px 14px", background: "#fff" };
+const phaseBox: React.CSSProperties = { display: "block", border: "2px solid var(--line)", borderRadius: 12, padding: "12px 14px", background: "var(--surface)" };
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fa1ac7d..e68e0ad 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,7 +34,7 @@ export default function Home() {
-
+
Watch it drawn, line by line ๐
@@ -97,7 +97,7 @@ export default function Home() {
-
+
How DrawIt works
diff --git a/src/components/ColoringRunner.tsx b/src/components/ColoringRunner.tsx
index 779dfdf..2d10ae1 100644
--- a/src/components/ColoringRunner.tsx
+++ b/src/components/ColoringRunner.tsx
@@ -2,7 +2,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
-import { loadProgressDrawing, saveProgressDrawing, saveFinalDrawing, fileToDataURL } from "./drawingPersistence";
+import { loadProgressDrawing, saveProgressDrawing, saveFinalDrawing, fileToDataURL, loadDrawingAsLayer } from "./drawingPersistence";
interface Meta { level: string; levelName: string; sublevel: number; title: string; emoji: string; intro: string; baseSvg: string }
@@ -32,10 +32,14 @@ function newLayer(id: number, name: string): Layer {
return { id, name, visible: true, canvas: c };
}
-export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned }: {
- meta: Meta; loggedIn: boolean; username: string; alreadyEarned: boolean;
+export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned, userSketch = "" }: {
+ meta: Meta; loggedIn: boolean; username: string; alreadyEarned: boolean; userSketch?: string;
}) {
const router = useRouter();
+ // Which line art to color: the stock template or the child's own sketch.
+ // If they have no sketch of their own, skip the choice and use the stock art.
+ const [sketch, setSketch] = useState<"stock" | "yours" | null>(userSketch ? null : "stock");
+ const [overlayUrl, setOverlayUrl] = useState("");
const [done, setDone] = useState(false);
const [finalImage, setFinalImage] = useState(null);
const [uploadMsg, setUploadMsg] = useState("");
@@ -81,21 +85,35 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
// 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
+ // Build the line-art overlay (+ fill boundary + final export template) from the chosen source.
+ // "stock" = the curriculum's template SVG; "yours" = the child's own sketch (white knocked out to transparent so coloring shows under the lines).
useEffect(() => {
- const svg = ``;
- const blob = new Blob([svg], { type: "image/svg+xml" });
- const url = URL.createObjectURL(blob);
- const img = new Image();
- img.onload = () => {
- templImgRef.current = img;
- const b = document.createElement("canvas"); b.width = W; b.height = H;
- const bctx = b.getContext("2d")!; bctx.drawImage(img, 0, 0, W, H);
- boundaryRef.current = bctx.getImageData(0, 0, W, H);
- URL.revokeObjectURL(url);
- };
- img.src = url;
- }, [meta.baseSvg]);
+ if (!sketch) return;
+ let alive = true;
+ (async () => {
+ let url: string;
+ if (sketch === "yours" && userSketch) {
+ const layer = await loadDrawingAsLayer(userSketch); // dark lines on transparent
+ const c = document.createElement("canvas"); c.width = W; c.height = H;
+ c.getContext("2d")!.drawImage(layer, 0, 0, W, H);
+ url = c.toDataURL("image/png");
+ } else {
+ url = "data:image/svg+xml;utf8," + encodeURIComponent(``);
+ }
+ if (!alive) return;
+ const img = new Image();
+ img.onload = () => {
+ if (!alive) return;
+ templImgRef.current = img;
+ const b = document.createElement("canvas"); b.width = W; b.height = H;
+ const bctx = b.getContext("2d")!; bctx.drawImage(img, 0, 0, W, H);
+ boundaryRef.current = bctx.getImageData(0, 0, W, H);
+ setOverlayUrl(url);
+ };
+ img.src = url;
+ })();
+ return () => { alive = false; };
+ }, [sketch, meta.baseSvg, userSketch]);
// Restore saved coloring into the bottom layer
useEffect(() => {
@@ -239,6 +257,33 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
finally { if (uploadRef.current) uploadRef.current.value = ""; }
}
+ // Ask which line art to color before opening the studio (only when the child has a sketch of their own).
+ if (sketch === null) {
+ return (
+
+ {meta.levelName} ยท Color it!
+ {meta.emoji} {meta.title}
+ Which drawing would you like to color in?
+
+
+
+
+
+ );
+ }
+
if (done) {
return (
@@ -287,7 +332,7 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
-
+ {overlayUrl && 
}
{/* Tools */}
diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
index f1eacba..c8cfc82 100644
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -2,6 +2,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import LogoutButton from "./LogoutButton";
+import ThemeToggle from "./ThemeToggle";
export default function NavLinks({
user,
@@ -54,6 +55,7 @@ export default function NavLinks({
)}
+ = { system: "๐", light: "โ๏ธ", dark: "๐" };
+
+export default function ThemeToggle() {
+ const [pref, setPref] = useState("system");
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ try {
+ const p = localStorage.getItem("drawit-theme") as Pref | null;
+ if (p === "light" || p === "dark" || p === "system") setPref(p);
+ } catch {
+ /* ignore */
+ }
+ }, []);
+
+ // Apply the effective theme whenever the preference changes (and follow the system if "system").
+ useEffect(() => {
+ if (!mounted) return;
+ const mq = window.matchMedia("(prefers-color-scheme: dark)");
+ const apply = () => {
+ const dark = pref === "dark" || (pref === "system" && mq.matches);
+ document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+ };
+ apply();
+ if (pref === "system") {
+ mq.addEventListener("change", apply);
+ return () => mq.removeEventListener("change", apply);
+ }
+ }, [pref, mounted]);
+
+ function cycle() {
+ const nextPref = ORDER[(ORDER.indexOf(pref) + 1) % ORDER.length];
+ setPref(nextPref);
+ try {
+ localStorage.setItem("drawit-theme", nextPref);
+ } catch {
+ /* ignore */
+ }
+ }
+
+ return (
+
+ );
+}
Watch it drawn, line by line ๐
@@ -97,7 +97,7 @@ export default function Home() {
How DrawIt works
diff --git a/src/components/ColoringRunner.tsx b/src/components/ColoringRunner.tsx
index 779dfdf..2d10ae1 100644
--- a/src/components/ColoringRunner.tsx
+++ b/src/components/ColoringRunner.tsx
@@ -2,7 +2,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
-import { loadProgressDrawing, saveProgressDrawing, saveFinalDrawing, fileToDataURL } from "./drawingPersistence";
+import { loadProgressDrawing, saveProgressDrawing, saveFinalDrawing, fileToDataURL, loadDrawingAsLayer } from "./drawingPersistence";
interface Meta { level: string; levelName: string; sublevel: number; title: string; emoji: string; intro: string; baseSvg: string }
@@ -32,10 +32,14 @@ function newLayer(id: number, name: string): Layer {
return { id, name, visible: true, canvas: c };
}
-export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned }: {
- meta: Meta; loggedIn: boolean; username: string; alreadyEarned: boolean;
+export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned, userSketch = "" }: {
+ meta: Meta; loggedIn: boolean; username: string; alreadyEarned: boolean; userSketch?: string;
}) {
const router = useRouter();
+ // Which line art to color: the stock template or the child's own sketch.
+ // If they have no sketch of their own, skip the choice and use the stock art.
+ const [sketch, setSketch] = useState<"stock" | "yours" | null>(userSketch ? null : "stock");
+ const [overlayUrl, setOverlayUrl] = useState("");
const [done, setDone] = useState(false);
const [finalImage, setFinalImage] = useState(null);
const [uploadMsg, setUploadMsg] = useState("");
@@ -81,21 +85,35 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
// 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
+ // Build the line-art overlay (+ fill boundary + final export template) from the chosen source.
+ // "stock" = the curriculum's template SVG; "yours" = the child's own sketch (white knocked out to transparent so coloring shows under the lines).
useEffect(() => {
- const svg = ``;
- const blob = new Blob([svg], { type: "image/svg+xml" });
- const url = URL.createObjectURL(blob);
- const img = new Image();
- img.onload = () => {
- templImgRef.current = img;
- const b = document.createElement("canvas"); b.width = W; b.height = H;
- const bctx = b.getContext("2d")!; bctx.drawImage(img, 0, 0, W, H);
- boundaryRef.current = bctx.getImageData(0, 0, W, H);
- URL.revokeObjectURL(url);
- };
- img.src = url;
- }, [meta.baseSvg]);
+ if (!sketch) return;
+ let alive = true;
+ (async () => {
+ let url: string;
+ if (sketch === "yours" && userSketch) {
+ const layer = await loadDrawingAsLayer(userSketch); // dark lines on transparent
+ const c = document.createElement("canvas"); c.width = W; c.height = H;
+ c.getContext("2d")!.drawImage(layer, 0, 0, W, H);
+ url = c.toDataURL("image/png");
+ } else {
+ url = "data:image/svg+xml;utf8," + encodeURIComponent(``);
+ }
+ if (!alive) return;
+ const img = new Image();
+ img.onload = () => {
+ if (!alive) return;
+ templImgRef.current = img;
+ const b = document.createElement("canvas"); b.width = W; b.height = H;
+ const bctx = b.getContext("2d")!; bctx.drawImage(img, 0, 0, W, H);
+ boundaryRef.current = bctx.getImageData(0, 0, W, H);
+ setOverlayUrl(url);
+ };
+ img.src = url;
+ })();
+ return () => { alive = false; };
+ }, [sketch, meta.baseSvg, userSketch]);
// Restore saved coloring into the bottom layer
useEffect(() => {
@@ -239,6 +257,33 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
finally { if (uploadRef.current) uploadRef.current.value = ""; }
}
+ // Ask which line art to color before opening the studio (only when the child has a sketch of their own).
+ if (sketch === null) {
+ return (
+ = { system: "๐", light: "โ๏ธ", dark: "๐" };
+
+export default function ThemeToggle() {
+ const [pref, setPref] = useState("system");
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ try {
+ const p = localStorage.getItem("drawit-theme") as Pref | null;
+ if (p === "light" || p === "dark" || p === "system") setPref(p);
+ } catch {
+ /* ignore */
+ }
+ }, []);
+
+ // Apply the effective theme whenever the preference changes (and follow the system if "system").
+ useEffect(() => {
+ if (!mounted) return;
+ const mq = window.matchMedia("(prefers-color-scheme: dark)");
+ const apply = () => {
+ const dark = pref === "dark" || (pref === "system" && mq.matches);
+ document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+ };
+ apply();
+ if (pref === "system") {
+ mq.addEventListener("change", apply);
+ return () => mq.removeEventListener("change", apply);
+ }
+ }, [pref, mounted]);
+
+ function cycle() {
+ const nextPref = ORDER[(ORDER.indexOf(pref) + 1) % ORDER.length];
+ setPref(nextPref);
+ try {
+ localStorage.setItem("drawit-theme", nextPref);
+ } catch {
+ /* ignore */
+ }
+ }
+
+ return (
+
+ );
+}
+
+ );
+ }
+
if (done) {
return (
{meta.levelName} ยท Color it!
+ {meta.emoji} {meta.title}
+Which drawing would you like to color in?
+
+
+
+
+
@@ -287,7 +332,7 @@ export default function ColoringRunner({ meta, loggedIn, username, alreadyEarned
);
}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..35ed215
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,67 @@
+"use client";
+import { useEffect, useState } from "react";
+
+type Pref = "system" | "light" | "dark";
+const ORDER: Pref[] = ["system", "light", "dark"];
+const ICON: Record
-
+ {overlayUrl && }
{/* Tools */}
diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
index f1eacba..c8cfc82 100644
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -2,6 +2,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import LogoutButton from "./LogoutButton";
+import ThemeToggle from "./ThemeToggle";
export default function NavLinks({
user,
@@ -54,6 +55,7 @@ export default function NavLinks({
)}
+