\n \n

\n {children}\n

\n );\n}\n\n// Animated favicon: types out a message letter by letter in Fullerfont.\nfunction useAnimatedFavicon(text: string, active: boolean) {\n useEffect(() => {\n if (!active) return;\n const size = 64; // render at 64px, browser scales to 16/32\n const canvas = document.createElement(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n const ctx = canvas.getContext(\"2d\")!;\n\n let link = document.querySelector(\"link[rel='icon']\") as HTMLLinkElement;\n if (!link) {\n link = document.createElement(\"link\");\n link.rel = \"icon\";\n document.head.appendChild(link);\n }\n\n let i = 0;\n const chars = text.split(\"\");\n const dark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n\n function draw() {\n const idx = i % (chars.length + 4);\n ctx.clearRect(0, 0, size, size);\n ctx.fillStyle = dark ? \"#1a1a1a\" : \"#fafafa\";\n ctx.fillRect(0, 0, size, size);\n ctx.font = `${size * 0.45}px Fullerfont`;\n ctx.fillStyle = dark ? \"#e8e8e8\" : \"#222\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n const display = idx < chars.length\n ? chars.slice(Math.max(0, idx - 2), idx + 1).join(\"\")\n : \"\";\n ctx.fillText(display, size / 2, size / 2);\n link.href = canvas.toDataURL(\"image/png\");\n i++;\n }\n\n draw();\n const interval = setInterval(draw, 340);\n return () => clearInterval(interval);\n }, [text, active]);\n}\n\n// --- App ---\n\nfunction App() {\n const [fontLoaded, setFontLoaded] = useState(false);\n const [dark, setDark] = useState(false);\n\n useEffect(() => {\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n setDark(mq.matches);\n const handler = (e: MediaQueryListEvent) => setDark(e.matches);\n mq.addEventListener(\"change\", handler);\n return () => mq.removeEventListener(\"change\", handler);\n }, []);\n\n useEffect(() => {\n const font = new FontFace(\"Fullerfont\", `url('${FONT_URL}')`);\n font.load().then(() => {\n document.fonts.add(font);\n setFontLoaded(true);\n }).catch((err) => console.error(\"Font load failed:\", err));\n }, []);\n\n useAnimatedFavicon(\"WHAT R U LOOKING AT????\", fontLoaded);\n\n if (!fontLoaded) return null;\n\n return (\n

\n Catch up with Charlie\n

\n {Object.entries(BOOKING_LINKS).map(([label, href]) => (\n \n \n {label}\n \n \n ))}\n

\n \n the code\n \n

\n );\n}\n\nconst styles: Record = {\n page: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: \"100dvh\",\n padding: \"24px\",\n boxSizing: \"border-box\",\n backgroundColor: \"var(--bg)\",\n },\n title: {\n fontFamily: \"'Fullerfont', sans-serif\",\n fontSize: \"clamp(2rem, 6vw, 3.2rem)\",\n fontWeight: 400,\n color: \"var(--text)\",\n marginBottom: \"2.5rem\",\n textAlign: \"center\" as const,\n cursor: \"default\",\n },\n cards: {\n display: \"flex\",\n flexDirection: \"row\" as const,\n gap: \"20px\",\n flexWrap: \"wrap\" as const,\n justifyContent: \"center\",\n },\n cardLink: {\n textDecoration: \"none\",\n transition: \"transform 0.15s ease\",\n display: \"inline-block\",\n },\n cardLabel: {\n fontFamily: \"'Fullerfont', sans-serif\",\n fontSize: \"1.8rem\",\n color: \"var(--text)\",\n },\n sourceLink: {\n fontFamily: \"'Fullerfont', sans-serif\",\n fontSize: \"1.25rem\",\n color: \"var(--source)\",\n textDecoration: \"underline\",\n marginTop: \"3rem\",\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default function server(_req: Request): Response {\n return new Response(\n `\n\n\n \n \n Catch up with Charlie\n \n\n\n

\n \n\n`,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}\n","deleted","label","catchup",[100],"permalink","https://www.val.town/x/dcm31/catchUp/code/main.tsx","extension","actionData","errors"]