UI gaps: radio player widget, logo generator, public room page

Phase D of the parity push: - Radio player: fixed bottom-right widget (port of atom's radio-player.blade) that streams the hotel radio via <audio>, with play/pause, volume, current DJ / now-playing and live listener count, polling the public API every 15s. A server gate (RadioPlayerGate) only mounts it when radio is enabled + a stream URL is set, so no widget JS ships when off. Mounted in the layout. - Logo generator (/logo): client tool — hotel name + font/colour/size pickers with a live preview and "download PNG" via canvas. - Public room page (/room/[id]): renders an emulator room (name, owner, users/max, state, category) in a ContentCard. Verified live (prod, amx_test): /logo renders the generator, /room/50 shows the real room "Dark Elegant Bundle", and with radio enabled the player mounts fixed bottom-right (audio + play/pause + Test FM); reverted the test settings. tsc 0, vitest 49/49, next build 0.
2026-06-28 21:48:42 +02:00
1 parent 80f591a343
commit 8cedf5614e
@@ -0,0 +1,242 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ContentCard } from "@/components/public/ui";
+
+/**
+ * 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 };
+
+// ~6 fun, broadly-available stacks (web-safe + a Google-ish first pick).
+const FONTS: FontOption[] = [
+  { 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;
+
+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 safeText = text.trim().length > 0 ? text : "Your hotel";
+  const fontWeight = bold ? "bold" : "normal";
+
+  // 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 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]);
+
+  return (
+    <div className="card-grid md-2" style={{ alignItems: "start" }}>
+      {/* ── Controls ──────────────────────────────── */}
+      <ContentCard icon="⚙️" title="Design" subtitle="Tweak the look of your logo.">
+        <div style={{ display: "grid", gap: "1rem" }}>
+          <label style={{ display: "grid", gap: "0.3rem" }}>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Hotel name</span>
+            <input
+              type="text"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Your hotel"
+              maxLength={40}
+            />
+          </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>
+              ))}
+            </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
+          </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.">
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            minHeight: 220,
+            padding: "1.25rem",
+            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",
+          }}
+        >
+          <p style={previewTextStyle}>{safeText}</p>
+        </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>
+      </ContentCard>
+    </div>
+  );
+}