feat: add all 191+ Habbo fonts from habbofont.net to logo generator

src/components/public/logo-generator.tsx

@@ -1,165 +1,68 @@
 "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";
-
-/**
- * Client-side logo generator. Lets the visitor type a hotel name, pick a fun
- * font stack, text + (optional) background colour, and a size, with a live
- * preview. "Download PNG" paints the styled text onto an offscreen <canvas>
- * and triggers a download via canvas.toBlob -> object URL -> <a download>.
- *
- * Pure browser code — no server modules (prisma/siteSettings) are imported.
- */
-
-type FontOption = { label: string; stack: string };
-
-// ~8 fun, broadly-available stacks (web-safe + a Google-ish first pick).
-const FONTS: FontOption[] = [
-  { label: "Habbo pixel", stack: "var(--font-pixel), 'Courier New', monospace" },
-  { label: "Poppins (rounded)", stack: "'Poppins', 'Trebuchet MS', sans-serif" },
-  { label: "Comic Sans (playful)", stack: "'Comic Sans MS', 'Comic Sans', cursive" },
-  { label: "Georgia (classic serif)", stack: "Georgia, 'Times New Roman', serif" },
-  { label: "Impact (bold poster)", stack: "Impact, 'Haettenschweiler', sans-serif" },
-  { label: "Trebuchet (clean)", stack: "'Trebuchet MS', Tahoma, sans-serif" },
-  { label: "Monospace (retro)", stack: "'Courier New', monospace" },
-];
-
-const MIN_SIZE = 16;
-const MAX_SIZE = 160;
+import { HABBO_FONT_GROUPS, buildFontUrl } from "@/components/public/habbo-fonts";
 
 export default function LogoGenerator() {
   const [text, setText] = useState("Atom");
-  const [fontStack, setFontStack] = useState(FONTS[0]!.stack);
-  const [textColor, setTextColor] = useState("#f59e0b");
-  const [bgEnabled, setBgEnabled] = useState(false);
-  const [bgColor, setBgColor] = useState("#0f172a");
-  const [size, setSize] = useState(72);
-  const [bold, setBold] = useState(true);
-
-  const linkRef = useRef<HTMLAnchorElement | null>(null);
+  const [styleName, setStyleName] = useState("habbo");
+  const [search, setSearch] = useState("");
   const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "done" | "error">("idle");
   const [, startTransition] = useTransition();
 
-  const safeText = text.trim().length > 0 ? text : "Your hotel";
-  const fontWeight = bold ? "bold" : "normal";
+  const safeText = text.trim() || "Your hotel";
+  const gifUrl = useMemo(() => buildFontUrl(styleName, safeText), [styleName, safeText]);
 
-  // Inline style for the live preview text, mirroring what the canvas will draw.
-  const previewTextStyle = useMemo<React.CSSProperties>(
-    () => ({
-      fontFamily: fontStack,
-      fontSize: `${size}px`,
-      fontWeight,
-      color: textColor,
-      lineHeight: 1.1,
-      margin: 0,
-      padding: "0.1em 0.15em",
-      whiteSpace: "nowrap",
-      letterSpacing: "0.5px",
-    }),
-    [fontStack, size, fontWeight, textColor],
+  const currentFont = useMemo(
+    () => HABBO_FONT_GROUPS.flatMap((g) => g.fonts).find((f) => f.styleName === styleName),
+    [styleName],
+  );
+
+  const filteredGroups = useMemo(
+    () =>
+      search
+        ? HABBO_FONT_GROUPS.map((g) => ({
+            ...g,
+            fonts: g.fonts.filter(
+              (f) =>
+                f.name.toLowerCase().includes(search.toLowerCase()) ||
+                f.styleName.toLowerCase().includes(search.toLowerCase()),
+            ),
+          })).filter((g) => g.fonts.length > 0)
+        : HABBO_FONT_GROUPS,
+    [search],
   );
 
   const handleDownload = useCallback(() => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const fontSpec = `${fontWeight} ${size}px ${fontStack}`;
-    // Measure with the chosen font so the canvas fits the text snugly.
-    ctx.font = fontSpec;
-    const metrics = ctx.measureText(safeText);
-    const padX = Math.round(size * 0.4);
-    const padY = Math.round(size * 0.45);
-    const textWidth = Math.max(1, Math.ceil(metrics.width));
-    const width = textWidth + padX * 2;
-    const height = Math.ceil(size * 1.35) + padY * 2;
-
-    // Render crisply on high-DPI screens, then keep CSS-pixel coordinates below.
-    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 3);
-    canvas.width = Math.round(width * dpr);
-    canvas.height = Math.round(height * dpr);
-    ctx.scale(dpr, dpr);
-
-    if (bgEnabled) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, width, height);
-    }
-    // else: leave transparent (the default for a fresh canvas).
-
-    ctx.font = fontSpec;
-    ctx.fillStyle = textColor;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(safeText, width / 2, height / 2);
-
-    const fileBase =
-      safeText
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "") || "logo";
-
-    canvas.toBlob((blob) => {
-      if (!blob) return;
-      const url = URL.createObjectURL(blob);
-      const a = linkRef.current ?? document.createElement("a");
-      a.href = url;
-      a.download = `${fileBase}-logo.png`;
-      a.click();
-      // Release the object URL once the download has been kicked off.
-      setTimeout(() => URL.revokeObjectURL(url), 1000);
-    }, "image/png");
-  }, [bgColor, bgEnabled, fontStack, fontWeight, safeText, size, textColor]);
-
-  const handleSave = useCallback(() => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const fontSpec = `${fontWeight} ${size}px ${fontStack}`;
-    ctx.font = fontSpec;
-    const metrics = ctx.measureText(safeText);
-    const padX = Math.round(size * 0.4);
-    const padY = Math.round(size * 0.45);
-    const textWidth = Math.max(1, Math.ceil(metrics.width));
-    const width = textWidth + padX * 2;
-    const height = Math.ceil(size * 1.35) + padY * 2;
-
-    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 3);
-    canvas.width = Math.round(width * dpr);
-    canvas.height = Math.round(height * dpr);
-    ctx.scale(dpr, dpr);
-
-    if (bgEnabled) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, width, height);
-    }
-
-    ctx.font = fontSpec;
-    ctx.fillStyle = textColor;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(safeText, width / 2, height / 2);
+    window.open(gifUrl, "_blank");
+  }, [gifUrl]);
 
+  const handleSave = useCallback(async () => {
     setSaveStatus("saving");
-    canvas.toBlob(async (blob) => {
-      if (!blob) { setSaveStatus("error"); return; }
-      const file = new File([blob], "logo.png", { type: "image/png" });
+    try {
+      const res = await fetch(gifUrl);
+      const blob = await res.blob();
+      const ext = blob.type === "image/gif" ? "gif" : "png";
+      const file = new File([blob], `logo.${ext}`, { type: blob.type });
       const fd = new FormData();
       fd.append("file", file);
+
       startTransition(async () => {
         const result = await saveLogo(fd);
         setSaveStatus(result.success ? "done" : "error");
         if (result.success) setTimeout(() => setSaveStatus("idle"), 3000);
       });
-    }, "image/png");
-  }, [bgColor, bgEnabled, fontStack, fontWeight, safeText, size, textColor, startTransition]);
+    } catch {
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    }
+  }, [gifUrl, startTransition]);
 
   return (
     <div className="card-grid md-2" style={{ alignItems: "start" }}>
-      {/* ── Controls ──────────────────────────────── */}
-      <ContentCard icon="⚙️" title="Design" subtitle="Tweak the look of your logo.">
+      <ContentCard icon="⚙️" title="Design" subtitle="Pick a Habbo font and type your text.">
         <div style={{ display: "grid", gap: "1rem" }}>
           <label style={{ display: "grid", gap: "0.3rem" }}>
             <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Hotel name</span>
@@ -170,88 +73,48 @@ export default function LogoGenerator() {
               placeholder="Your hotel"
               maxLength={40}
             />
+            <span className="muted" style={{ fontSize: "0.78rem" }}>
+              Text will be lowercased with spaces as + in the GIF URL.
+            </span>
           </label>
 
           <label style={{ display: "grid", gap: "0.3rem" }}>
-            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Font</span>
-            <select value={fontStack} onChange={(e) => setFontStack(e.target.value)}>
-              {FONTS.map((f) => (
-                <option key={f.label} value={f.stack}>
-                  {f.label}
-                </option>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Search font</span>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Type to filter fonts…"
+            />
+          </label>
+
+          <label style={{ display: "grid", gap: "0.3rem" }}>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>
+              Font —{" "}
+              <span className="muted">
+                {currentFont?.name ?? styleName} ({styleName})
+              </span>
+            </span>
+            <select
+              value={styleName}
+              onChange={(e) => setStyleName(e.target.value)}
+              style={{ maxHeight: 320 }}
+              size={Math.min(filteredGroups.flatMap((g) => g.fonts).length + filteredGroups.length, 12)}
+            >
+              {filteredGroups.map((group) => (
+                <optgroup key={group.groupName} label={group.groupName}>
+                  {group.fonts.map((f) => (
+                    <option key={f.styleName} value={f.styleName}>
+                      {f.name}
+                    </option>
+                  ))}
+                </optgroup>
               ))}
             </select>
           </label>
 
-          <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
-            <label style={{ display: "grid", gap: "0.3rem" }}>
-              <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Text colour</span>
-              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-                <input
-                  type="color"
-                  value={textColor}
-                  onChange={(e) => setTextColor(e.target.value)}
-                  style={{ width: 44, height: 38, padding: 2 }}
-                  aria-label="Text colour"
-                />
-                <code className="muted" style={{ fontSize: "0.78rem" }}>
-                  {textColor}
-                </code>
-              </span>
-            </label>
-
-            <label style={{ display: "grid", gap: "0.3rem" }}>
-              <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Background</span>
-              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-                <input
-                  type="checkbox"
-                  checked={bgEnabled}
-                  onChange={(e) => setBgEnabled(e.target.checked)}
-                  style={{ width: "auto" }}
-                  aria-label="Enable background colour"
-                />
-                <input
-                  type="color"
-                  value={bgColor}
-                  onChange={(e) => setBgColor(e.target.value)}
-                  disabled={!bgEnabled}
-                  style={{ width: 44, height: 38, padding: 2, opacity: bgEnabled ? 1 : 0.4 }}
-                  aria-label="Background colour"
-                />
-                <code className="muted" style={{ fontSize: "0.78rem" }}>
-                  {bgEnabled ? bgColor : "transparent"}
-                </code>
-              </span>
-            </label>
-          </div>
-
-          <label style={{ display: "grid", gap: "0.3rem" }}>
-            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>
-              Size — <span className="muted">{size}px</span>
-            </span>
-            <input
-              type="range"
-              min={MIN_SIZE}
-              max={MAX_SIZE}
-              step={1}
-              value={size}
-              onChange={(e) => setSize(Number(e.target.value))}
-              style={{ width: "100%", padding: 0 }}
-            />
-          </label>
-
-          <label style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-            <input
-              type="checkbox"
-              checked={bold}
-              onChange={(e) => setBold(e.target.checked)}
-              style={{ width: "auto" }}
-            />
-            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Bold</span>
-          </label>
-
           <button type="button" className="btn btn-primary" onClick={handleDownload}>
-            ⬇️ Download PNG
+            ⬇️ Download GIF
           </button>
           <button
             type="button"
@@ -259,17 +122,18 @@ export default function LogoGenerator() {
             onClick={handleSave}
             disabled={saveStatus === "saving"}
           >
-            {saveStatus === "saving" ? "⏳ Saving..." : saveStatus === "done" ? "✅ Saved!" : saveStatus === "error" ? "❌ Error" : "💾 Save as site logo"}
+            {saveStatus === "saving"
+              ? "⏳ Saving..."
+              : saveStatus === "done"
+                ? "✅ Saved!"
+                : saveStatus === "error"
+                  ? "❌ Error"
+                  : "💾 Save as site logo"}
           </button>
-          {/* Reused, hidden anchor used to trigger the file download. */}
-          <a ref={linkRef} style={{ display: "none" }} aria-hidden href="/">
-            download
-          </a>
         </div>
       </ContentCard>
 
-      {/* ── Live preview ──────────────────────────── */}
-      <ContentCard icon="👁️" title="Preview" subtitle="Live, exactly as it will export.">
+      <ContentCard icon="👁️" title="Preview" subtitle="Live GIF from habbofont.net.">
         <div
           style={{
             display: "grid",
@@ -279,18 +143,22 @@ export default function LogoGenerator() {
             borderRadius: "12px",
             border: "1px dashed color-mix(in srgb, var(--color-text-muted) 30%, transparent)",
             overflow: "auto",
-            // Checkerboard so a transparent (no-background) logo is obvious.
-            background: bgEnabled
-              ? bgColor
-              : "repeating-conic-gradient(color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px",
+            background: "repeating-conic-gradient(color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px",
           }}
         >
-          <p style={previewTextStyle}>{safeText}</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" }}
+          />
         </div>
-        <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
-          Everything runs in your browser — nothing is uploaded. The PNG keeps a
-          {" "}
-          transparent background unless you enable one.
+        <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem", wordBreak: "break-all" }}>
+          Generated via{" "}
+          <a href="https://habbofont.net" target="_blank" rel="noopener noreferrer">
+            habbofont.net
+          </a>
+          . The GIF is loaded from their server.
         </p>
       </ContentCard>
     </div>