From b01ebe8a16e7b06849ccabf819fc1ce8d5b2fd94 Mon Sep 17 00:00:00 2001
From: Reverdin Agent <agent@reverdin.eu>
Date: Sat, 23 May 2026 01:07:21 +0000
Subject: [PATCH] improve(dx): fix OG image font download failure

Replace Unicode special chars (crown, sun, infinity, grid) with
colored initials using each game accent color. Eliminates the
"Failed to load dynamic font" build warning from satori/next-og.
---
 app/opengraph-image.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
index e8fd776..25ba788 100644
--- a/app/opengraph-image.tsx
+++ b/app/opengraph-image.tsx
@@ -4,6 +4,14 @@ export const alt = "Puzzle Trainer";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
+const GAMES = [
+  { label: "Q", color: "#d97706" },
+  { label: "T", color: "#ea580c" },
+  { label: "Z", color: "#2563eb" },
+  { label: "S", color: "#16a34a" },
+  { label: "P", color: "#7c3aed" },
+];
+
 export default function OGImage() {
   return new ImageResponse(
     (
@@ -19,39 +27,33 @@ export default function OGImage() {
           fontFamily: "system-ui, -apple-system, sans-serif",
         }}
       >
-        {/* Game icons row */}
         <div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
-          {["♛", "☀", "∞", "#", "▦"].map((icon, i) => (
+          {GAMES.map((g) => (
             <div
-              key={i}
+              key={g.label}
               style={{
                 width: 72,
                 height: 72,
-                background: "#111827",
+                background: g.color,
                 borderRadius: 16,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 fontSize: 32,
-                color: "#f9fafb",
+                fontWeight: 700,
+                color: "#ffffff",
               }}
             >
-              {icon}
+              {g.label}
             </div>
           ))}
         </div>
-
-        {/* Title */}
         <div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
           Puzzle Trainer
         </div>
-
-        {/* Tagline */}
         <div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
           5 puzzles logiques · chaque jour
         </div>
-
-        {/* URL */}
         <div
           style={{
             position: "absolute",