diff --git a/public/assets/images/media/logo-1783090011089-zdtspz.png b/public/assets/images/media/logo-1783090011089-zdtspz.png new file mode 100644 index 00000000..31eae3a7 Binary files /dev/null and b/public/assets/images/media/logo-1783090011089-zdtspz.png differ diff --git a/public/assets/images/media/logo-1783090023241-tuhvd8.png b/public/assets/images/media/logo-1783090023241-tuhvd8.png new file mode 100644 index 00000000..83782741 Binary files /dev/null and b/public/assets/images/media/logo-1783090023241-tuhvd8.png differ diff --git a/public/assets/images/media/logo-1783090066849-0640kr.png b/public/assets/images/media/logo-1783090066849-0640kr.png new file mode 100644 index 00000000..31eae3a7 Binary files /dev/null and b/public/assets/images/media/logo-1783090066849-0640kr.png differ diff --git a/src/components/public/habbo-fonts.ts b/src/components/public/habbo-fonts.ts new file mode 100644 index 00000000..9d5cb2a3 --- /dev/null +++ b/src/components/public/habbo-fonts.ts @@ -0,0 +1,269 @@ +export interface HabboFont { + name: string; + styleName: string; + hasNumbers?: boolean; +} + +export interface HabboFontGroup { + groupName: string; + fonts: HabboFont[]; +} + +export const HABBO_FONT_GROUPS: HabboFontGroup[] = [ + { + groupName: "Habbo (related) logo", + fonts: [ + { name: "Habbo new", styleName: "habbo_new", hasNumbers: true }, + { name: "Habbo old", styleName: "habbo_big", hasNumbers: true }, + { name: "Habbo new big", styleName: "habbo_new_big", hasNumbers: true }, + { name: "Habbo old big", styleName: "habbo_old_big", hasNumbers: true }, + { name: "Habbo", styleName: "habbo", hasNumbers: true }, + { name: "Habbo Tiny", styleName: "habbo_tiny" }, + { name: "Habbo oldschool", styleName: "habbo_oldschool" }, + { name: "Habbo blocky", styleName: "habbo_blocky" }, + { name: "Habjoy", styleName: "habjoy" }, + { name: "Habjoy light", styleName: "habjoy_light" }, + { name: "Paradise", styleName: "paradise" }, + { name: "Paradise 2", styleName: "paradise_rounded" }, + { name: "Habbnew", styleName: "habbnew" }, + { name: "Habbo Clicker", styleName: "habbo_clicker" }, + { name: "Reception", styleName: "reception" }, + ], + }, + { + groupName: "Generic fonts", + fonts: [ + { name: "Accessoires", styleName: "accessoires" }, + { name: "Africa", styleName: "africa" }, + { name: "Alhambra", styleName: "alhambra" }, + { name: "Arctic", styleName: "arctic", hasNumbers: true }, + { name: "Asian", styleName: "asian" }, + { name: "Asian small", styleName: "asian_small" }, + { name: "Basic", styleName: "basic", hasNumbers: true }, + { name: "Base", styleName: "base", hasNumbers: true }, + { name: "Bathroom", styleName: "bathroom", hasNumbers: true }, + { name: "Battle Banzai", styleName: "battlebanzai" }, + { name: "Bensalem", styleName: "bensalem", hasNumbers: true }, + { name: "Bensalem sea", styleName: "bensalem_sea" }, + { name: "Bling", styleName: "bling", hasNumbers: true }, + { name: "Bling Gold", styleName: "bling_gold" }, + { name: "Bones", styleName: "bones" }, + { name: "Books", styleName: "books", hasNumbers: true }, + { name: "Bots", styleName: "bots" }, + { name: "Bubble", styleName: "bubble" }, + { name: "Bubble blue", styleName: "bubble_blue" }, + { name: "Bubble orange", styleName: "bubble_orange" }, + { name: "Bunny run", styleName: "bunny_run" }, + { name: "Bunny run blue", styleName: "bunny_run_blue" }, + { name: "Buttons", styleName: "buttons" }, + { name: "Candy", styleName: "candy" }, + { name: "Collectibles", styleName: "collectibles" }, + { name: "Crystal", styleName: "crystal" }, + { name: "Cubie", styleName: "cubie" }, + { name: "Disco", styleName: "disco" }, + { name: "Dreams", styleName: "dreams" }, + { name: "Dreams flat", styleName: "dreams_flat" }, + { name: "Duckets", styleName: "duckets" }, + { name: "Emo", styleName: "emo" }, + { name: "Exchange", styleName: "exchange" }, + { name: "Executive", styleName: "executive" }, + { name: "Explore", styleName: "explore" }, + { name: "Explore big", styleName: "explore_big" }, + { name: "Explore small", styleName: "explore_small" }, + { name: "F.A.Q.", styleName: "faq" }, + { name: "F.BOMB", styleName: "fbomb" }, + { name: "Festival", styleName: "festival" }, + { name: "Flags", styleName: "flags" }, + { name: "FX", styleName: "fx" }, + { name: "Freehand", styleName: "freehand" }, + { name: "Gaming", styleName: "gaming" }, + { name: "Gallery", styleName: "gallery" }, + { name: "Golden temple", styleName: "goldentemple" }, + { name: "Gravity", styleName: "gravity" }, + { name: "HMA", styleName: "hma" }, + { name: "Habbo gold", styleName: "gold_big" }, + { name: "Habbo news", styleName: "habbo_news" }, + { name: "Habbo Runway", styleName: "habbo_runway" }, + { name: "Habbid red", styleName: "habbid_red" }, + { name: "Habbid blue", styleName: "habbid_blue" }, + { name: "Habbolife", styleName: "habbolife" }, + { name: "Habbowood", styleName: "habbowood" }, + { name: "Habbowood big", styleName: "habbowood_big" }, + { name: "Hands", styleName: "hands" }, + { name: "Hello", styleName: "hello" }, + { name: "Horse", styleName: "horse" }, + { name: "Ice", styleName: "ice" }, + { name: "Iced", styleName: "iced" }, + { name: "Iron", styleName: "iron" }, + { name: "Japan", styleName: "japan" }, + { name: "Love", styleName: "love" }, + { name: "Marketplace red", styleName: "marketplace_red" }, + { name: "Monkey", styleName: "monkey" }, + { name: "Mushroom", styleName: "mushroom" }, + { name: "Mushroom green", styleName: "mushroom_green" }, + { name: "Neon blue", styleName: "neon_blue", hasNumbers: true }, + { name: "Neon green", styleName: "neon_green", hasNumbers: true }, + { name: "Neon pink", styleName: "neon_pink", hasNumbers: true }, + { name: "Occasional", styleName: "occasional" }, + { name: "Palooza", styleName: "palooza" }, + { name: "Palooza blue", styleName: "palooza_blue" }, + { name: "Pets", styleName: "pets" }, + { name: "Pillows Orange", styleName: "pillow_orange" }, + { name: "Pillows Pink", styleName: "pillow_pink" }, + { name: "Pipes", styleName: "pipes" }, + { name: "Plants", styleName: "plants" }, + { name: "Plastic", styleName: "plastic" }, + { name: "Recycle", styleName: "recycle" }, + { name: "Retropixel", styleName: "retropixel" }, + { name: "Rugs", styleName: "rugs" }, + { name: "Sale", styleName: "sale" }, + { name: "Shalimar", styleName: "shalimar", hasNumbers: true }, + { name: "Shalimar big", styleName: "shalimar_big", hasNumbers: true }, + { name: "Shalimar small", styleName: "shalimar_small", hasNumbers: true }, + { name: "Soccer", styleName: "soccer" }, + { name: "Soccer red", styleName: "soccer_red" }, + { name: "Soccer yellow", styleName: "soccer_yellow" }, + { name: "Space Cafe", styleName: "space" }, + { name: "Spaces", styleName: "spaces" }, + { name: "Special offers", styleName: "special_offers" }, + { name: "StrayPixels", styleName: "straypixels" }, + { name: "Steampunk", styleName: "steampunk" }, + { name: "SCI-FI", styleName: "scifi" }, + { name: "Summer", styleName: "summer" }, + { name: "Teleport", styleName: "teleport", hasNumbers: true }, + { name: "Theater lights", styleName: "theater_lights" }, + { name: "Tribe", styleName: "tribe" }, + { name: "Trophies", styleName: "trophies" }, + { name: "USVA", styleName: "usva" }, + { name: "Unknown blue", styleName: "unknown_blue" }, + { name: "Unknown blue 2", styleName: "unknown_blue_2" }, + { name: "Unknown metal", styleName: "unknown_metal" }, + { name: "Unknown white", styleName: "unknown_white" }, + { name: "Unknown pillow", styleName: "unknown_pillow_1" }, + { name: "Unknown pillow", styleName: "unknown_pillow_2" }, + { name: "Valentine", styleName: "valentine" }, + { name: "Western", styleName: "western" }, + { name: "Woods", styleName: "wood" }, + { name: "Yellow text", styleName: "yellow_text" }, + ], + }, + { + groupName: "Custom creations", + fonts: [ + { name: "Jurrasic", styleName: "jurrasic" }, + ], + }, + { + groupName: "Halloween fonts", + fonts: [ + { name: "Halloween", styleName: "halloween" }, + { name: "Halloween 2", styleName: "halloween_2" }, + { name: "Halloween 3", styleName: "halloween_3" }, + ], + }, + { + groupName: "Group fonts", + fonts: [ + { name: "Bling", styleName: "bling" }, + { name: "Plastic", styleName: "plastic" }, + { name: "Plastic playful", styleName: "plastic_playful" }, + { name: "Dinner blue", styleName: "dinner_blue", hasNumbers: true }, + { name: "Dinner green", styleName: "dinner_green", hasNumbers: true }, + { name: "Dinner red", styleName: "dinner_red", hasNumbers: true }, + ], + }, + { + groupName: "Games", + fonts: [ + { name: "Battleball", styleName: "battleball" }, + { name: "Battle Banzai", styleName: "battlebanzai" }, + { name: "Lido", styleName: "lido", hasNumbers: true }, + { name: "Soccer", styleName: "soccer" }, + { name: "Soccer big", styleName: "soccer_big" }, + ], + }, + { + groupName: "Habbo club", + fonts: [ + { name: "Habbo Club", styleName: "hc" }, + { name: "HC Big", styleName: "hc_big" }, + { name: "HC Small", styleName: "hc_small" }, + { name: "HC Compact", styleName: "hc_compact", hasNumbers: true }, + { name: "HC gold", styleName: "hc_gold" }, + { name: "Habbo Club 2", styleName: "habboclub", hasNumbers: true }, + { name: "Habbo Club 2", styleName: "habboclub_banner", hasNumbers: true }, + { name: "VIP", styleName: "habbovip", hasNumbers: true }, + { name: "VIP", styleName: "habbovip_banner", hasNumbers: true }, + ], + }, + { + groupName: "Uncategorised", + fonts: [ + { name: "Agenda", styleName: "agenda", hasNumbers: true }, + { name: "Mini white", styleName: "mini_white" }, + { name: "Volter goldfish", styleName: "volter" }, + { name: "Volter shadow", styleName: "volter_shadow" }, + { name: "Lucky goldfish", styleName: "volter_modern" }, + { name: "Goldfish small", styleName: "volter_modern_small" }, + { name: "Black", styleName: "black" }, + ], + }, + { + groupName: "Windows", + fonts: [ + { name: "Windows", styleName: "windows" }, + { name: "Lowercase", styleName: "windows_lowercase" }, + { name: "Jungle", styleName: "windows_jungle" }, + { name: "Blue", styleName: "windows_blue", hasNumbers: true }, + { name: "Green", styleName: "windows_green", hasNumbers: true }, + { name: "Pink", styleName: "windows_pink", hasNumbers: true }, + { name: "Red", styleName: "windows_red", hasNumbers: true }, + { name: "Dark red", styleName: "windows_red_dark", hasNumbers: true }, + { name: "Yellow", styleName: "windows_yellow" }, + { name: "Purple", styleName: "windows_purple" }, + ], + }, + { + groupName: "Beta", + fonts: [ + { name: "Beta big", styleName: "beta_big" }, + { name: "Beta small", styleName: "beta_small" }, + { name: "Beta old", styleName: "beta_small_old" }, + { name: "Beta", styleName: "beta", hasNumbers: true }, + ], + }, + { + groupName: "Special fonts", + fonts: [ + { name: "Duckets", styleName: "duckets" }, + { name: "Habbo club", styleName: "habboclub_complete" }, + { name: "FX", styleName: "fx" }, + { name: "Gift", styleName: "gift" }, + { name: "HC silver", styleName: "habboclub_silver" }, + { name: "Love full", styleName: "love_full" }, + { name: "Marketplace", styleName: "marketplace_full" }, + { name: "RELAX", styleName: "relax" }, + { name: "Ribbon", styleName: "habbo_ribbon" }, + { name: "Scifi", styleName: "scifi" }, + { name: "Steampunk", styleName: "steampunk" }, + { name: "USVA", styleName: "usva" }, + { name: "Valentine", styleName: "valentine" }, + ], + }, + { + groupName: "Unknown fonts", + fonts: [ + { name: "Unknown blue", styleName: "unknown_blue" }, + { name: "Unknown blue 2", styleName: "unknown_blue_2" }, + { name: "Unknown metal", styleName: "unknown_metal" }, + { name: "Unknown white", styleName: "unknown_white" }, + { name: "Unknown pillow", styleName: "unknown_pillow_1" }, + { name: "Unknown pillow", styleName: "unknown_pillow_2" }, + ], + }, +]; + +export function buildFontUrl(styleName: string, text: string): string { + const t = text.toLowerCase().replace(/\s/g, "+"); + return `https://habbofont.net/font/${styleName}/${t}.gif`; +} diff --git a/src/components/public/logo-generator.tsx b/src/components/public/logo-generator.tsx index dcee6262..cb57ea5d 100644 --- a/src/components/public/logo-generator.tsx +++ b/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 - * and triggers a download via canvas.toBlob -> object URL -> . - * - * 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(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( - () => ({ - 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 (
- {/* ── Controls ──────────────────────────────── */} - +
+ + -
- - - -
- - - - - - {/* Reused, hidden anchor used to trigger the file download. */} - - download -
- {/* ── Live preview ──────────────────────────── */} - +
-

{safeText}

+ {/* eslint-disable-next-line @next/next/no-img-element */} + {`Logo
-

- Everything runs in your browser — nothing is uploaded. The PNG keeps a - {" "} - transparent background unless you enable one. +

+ Generated via{" "} + + habbofont.net + + . The GIF is loaded from their server.