fix: restore word-level proxy for Habbo fonts, pre-cache all 175 fonts for 'Atom'

src/components/public/logo-generator.tsx

@@ -1,88 +1,20 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState, useTransition } from "react";
+import { useCallback, useMemo, useState, useTransition } from "react";
 import { ContentCard } from "@/components/public/ui";
-import { saveLogo } from "@/actions/save-logo";
-import { HABBO_FONT_GROUPS, charUrl } from "@/components/public/habbo-fonts";
-import { HabboFontPreview, splitText } from "@/components/public/habbo-font-renderer";
-
-const CHAR_LIST = "abcdefghijklmnopqrstuvwxyz0123456789";
-
-function renderToCanvas(font: string, text: string): Promise<Blob | null> {
-  return new Promise((resolve) => {
-    const chars = splitText(text);
-    if (chars.length === 0) { resolve(null); return; }
-
-    const images: (HTMLImageElement | null)[] = [];
-    let loaded = 0;
-
-    for (let i = 0; i < chars.length; i++) {
-      if (chars[i] === " ") {
-        images.push(null);
-        loaded++;
-      } else {
-        const idx = images.length;
-        const img = new Image();
-        img.crossOrigin = "anonymous";
-        img.onload = img.onerror = () => {
-          loaded++;
-          if (loaded === chars.length) finish();
-        };
-        img.src = charUrl(font, chars[i]);
-        images.push(img);
-      }
-    }
-
-    if (loaded === chars.length) finish();
-
-    function finish() {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) { resolve(null); return; }
-
-      const dpr = Math.min(window.devicePixelRatio || 1, 3);
-      let totalW = 0;
-      let maxH = 0;
-      const spaceW = 16;
-
-      for (const img of images) {
-        if (img) {
-          totalW += img.naturalWidth || img.width || 10;
-          maxH = Math.max(maxH, img.naturalHeight || img.height || 20);
-        } else {
-          totalW += spaceW;
-        }
-      }
-
-      if (totalW === 0 || maxH === 0) { resolve(null); return; }
-
-      canvas.width = Math.round(totalW * dpr);
-      canvas.height = Math.round(maxH * dpr);
-      ctx.scale(dpr, dpr);
-
-      let x = 0;
-      for (const img of images) {
-        if (img) {
-          ctx.drawImage(img, x, 0);
-          x += img.naturalWidth || img.width || 10;
-        } else {
-          x += spaceW;
-        }
-      }
-
-      canvas.toBlob((blob) => resolve(blob), "image/png");
-    }
-  });
-}
+import { saveLogoFromUrl } from "@/actions/save-logo";
+import { HABBO_FONT_GROUPS, buildFontUrl } from "@/components/public/habbo-fonts";
 
 export default function LogoGenerator() {
   const [text, setText] = useState("Atom");
   const [styleName, setStyleName] = useState("habbo");
   const [search, setSearch] = useState("");
   const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "done" | "error">("idle");
+  const [imgError, setImgError] = useState(false);
   const [, startTransition] = useTransition();
 
   const safeText = text.trim() || "Your hotel";
+  const gifUrl = useMemo(() => buildFontUrl(styleName, safeText), [styleName, safeText]);
 
   const currentFont = useMemo(
     () => HABBO_FONT_GROUPS.flatMap((g) => g.fonts).find((f) => f.styleName === styleName),
@@ -104,33 +36,26 @@ export default function LogoGenerator() {
     [search],
   );
 
-  const handleDownload = useCallback(async () => {
-    const blob = await renderToCanvas(styleName, safeText);
-    if (!blob) return;
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = `${safeText.replace(/[^a-z0-9]+/gi, "_") || "logo"}.png`;
-    a.click();
-    URL.revokeObjectURL(a.href);
-  }, [styleName, safeText]);
+  const handleDownload = useCallback(() => {
+    window.open(gifUrl, "_blank");
+  }, [gifUrl]);
 
   const handleSave = useCallback(() => {
     setSaveStatus("saving");
-    renderToCanvas(styleName, safeText).then((blob) => {
-      if (!blob) { setSaveStatus("error"); return; }
-      const file = new File([blob], "logo.png", { type: "image/png" });
-      const fd = new FormData();
-      fd.append("file", file);
-      startTransition(async () => {
-        const result = await saveLogo(fd);
-        setSaveStatus(result.success ? "done" : "error");
-        setTimeout(() => setSaveStatus("idle"), 3000);
-      });
+    startTransition(async () => {
+      const result = await saveLogoFromUrl(
+        `${window.location.origin}${gifUrl}`,
+      );
+      setSaveStatus(result.success ? "done" : "error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
     });
-  }, [styleName, safeText, startTransition]);
+  }, [gifUrl, startTransition]);
 
   const [zipping, setZipping] = useState(false);
-  const allFonts = useMemo(() => HABBO_FONT_GROUPS.flatMap((g) => g.fonts), []);
+  const allFonts = useMemo(
+    () => HABBO_FONT_GROUPS.flatMap((g) => g.fonts),
+    [],
+  );
 
   const handleDownloadAll = useCallback(async () => {
     if (zipping) return;
@@ -139,17 +64,17 @@ export default function LogoGenerator() {
       const JSZip = (await import("jszip")).default;
       const zip = new JSZip();
       const folder = zip.folder(safeText.replace(/[^a-z0-9]+/gi, "_") || "logo")!;
-      let failed = 0;
-
-      for (const font of allFonts) {
-        const blob = await renderToCanvas(font.styleName, safeText);
-        if (blob) {
-          folder.file(`${font.styleName}.png`, blob);
-        } else {
-          failed++;
-        }
-      }
+      const results = await Promise.allSettled(
+        allFonts.map(async (font) => {
+          const url = buildFontUrl(font.styleName, safeText);
+          const res = await fetch(url);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const blob = await res.blob();
+          folder.file(`${font.styleName}.gif`, blob);
+        }),
+      );
 
+      const failed = results.filter((r) => r.status === "rejected").length;
       const content = await zip.generateAsync({ type: "blob" });
       const a = document.createElement("a");
       a.href = URL.createObjectURL(content);
@@ -157,7 +82,7 @@ export default function LogoGenerator() {
       a.click();
       URL.revokeObjectURL(a.href);
       if (failed > 0) {
-        alert(`${allFonts.length - failed}/${allFonts.length} fonts rendered. ${failed} failed.`);
+        alert(`${allFonts.length - failed}/${allFonts.length} fonts downloaded. ${failed} failed.`);
       }
     } catch {
       alert("Failed to create ZIP.");
@@ -200,7 +125,10 @@ export default function LogoGenerator() {
             </span>
             <select
               value={styleName}
-              onChange={(e) => setStyleName(e.target.value)}
+              onChange={(e) => {
+                setStyleName(e.target.value);
+                setImgError(false);
+              }}
               style={{ maxHeight: 320 }}
               size={Math.min(filteredGroups.flatMap((g) => g.fonts).length + filteredGroups.length, 12)}
             >
@@ -217,7 +145,7 @@ export default function LogoGenerator() {
           </label>
 
           <button type="button" className="btn btn-primary" onClick={handleDownload}>
-            ⬇️ Download PNG
+            ⬇️ Download GIF
           </button>
           <button
             type="button"
@@ -244,7 +172,7 @@ export default function LogoGenerator() {
         </div>
       </ContentCard>
 
-      <ContentCard icon="👁️" title="Preview" subtitle="Composed from local character images.">
+      <ContentCard icon="👁️" title="Preview" subtitle="Rendered word via local proxy (cached on first load).">
         <div
           style={{
             display: "grid",
@@ -257,7 +185,18 @@ export default function LogoGenerator() {
             background: "repeating-conic-gradient(color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px",
           }}
         >
-          <HabboFontPreview font={styleName} text={safeText} />
+          {imgError ? (
+            <p className="muted">Failed to load preview.</p>
+          ) : (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={gifUrl}
+              alt={`Logo preview: ${safeText} in ${currentFont?.name ?? styleName} font`}
+              style={{ maxWidth: "100%", height: "auto" }}
+              onError={() => setImgError(true)}
+              onLoad={() => setImgError(false)}
+            />
+          )}
         </div>
       </ContentCard>
     </div>