Fix logo generator: remove decorative fonts and fix missing char spacing

src/components/public/logo-generator.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from
 import { ContentCard } from "@/components/public/ui";
 import { saveLogo } from "@/actions/save-logo";
 import { HABBO_FONT_GROUPS } from "@/components/public/habbo-fonts";
-import { getFontInfo, measureText, renderToCanvas } from "@/components/public/sprite-font";
+import { getFontInfo, getMissingChars, renderToCanvas } from "@/components/public/sprite-font";
 
 export default function LogoGenerator() {
   const [text, setText] = useState("Atom");
@@ -13,6 +13,7 @@ export default function LogoGenerator() {
   const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "done" | "error">("idle");
   const [fontLoaded, setFontLoaded] = useState(false);
   const [fontError, setFontError] = useState(false);
+  const [missingChars, setMissingChars] = useState<Set<string>>(new Set());
   const [, startTransition] = useTransition();
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -54,6 +55,7 @@ export default function LogoGenerator() {
           const ctx = canvasRef.current.getContext("2d");
           ctx?.drawImage(canvas, 0, 0);
         }
+        setMissingChars(getMissingChars(info.chars, safeText));
         setFontLoaded(true);
       })
       .catch(() => {
@@ -224,7 +226,14 @@ export default function LogoGenerator() {
           {fontError ? (
             <p className="muted">Failed to load font sprite.</p>
           ) : fontLoaded ? (
+            <>
               <canvas ref={canvasRef} style={{ maxWidth: "100%", height: "auto" }} />
+              {missingChars.size > 0 && (
+                <p className="muted" style={{ marginTop: 8, fontSize: "0.8rem" }}>
+                  Note: this font does not have characters: {[...missingChars].join(", ")}
+                </p>
+              )}
+            </>
           ) : (
             <p className="muted">Loading font…</p>
           )}

src/components/public/sprite-font.ts

@@ -98,12 +98,23 @@ export function measureText(chars: CharInfo[], text: string, avgW: number): { to
       totalW += avgW;
     } else {
       const info = map.get(ch);
-      totalW += info?.w ?? avgW;
+      totalW += info?.w ?? 0;
     }
   }
   return { totalW };
 }
 
+export function getMissingChars(chars: CharInfo[], text: string): Set<string> {
+  const available = new Set(chars.map((c) => c.char));
+  const missing = new Set<string>();
+  for (const ch of text.toLowerCase()) {
+    if (ch !== " " && !available.has(ch)) {
+      missing.add(ch);
+    }
+  }
+  return missing;
+}
+
 export function renderToCanvas(
   chars: CharInfo[],
   h: number,
@@ -118,7 +129,7 @@ export function renderToCanvas(
 
   let totalW = 0;
   for (const ch of safeText) {
-    totalW += ch === " " ? avgW : (map.get(ch)?.w ?? avgW);
+    totalW += ch === " " ? avgW : (map.get(ch)?.w ?? 0);
   }
 
   if (totalW === 0) return null;
@@ -139,8 +150,6 @@ export function renderToCanvas(
       if (info) {
         ctx.drawImage(sheet, info.x, top, info.w, h, x, 0, info.w, h);
         x += info.w;
-      } else {
-        x += avgW;
       }
     }
   }