fix : fix export image not like the actual

app/api/guides/[guideId]/weapons/image/route.tsx

@@ -2,7 +2,7 @@
 import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
-import { rarityGradient } from "@/lib/catalog/rarity";
+import { rarityGradient, rarityTextColor } from "@/lib/catalog/rarity";
 import { imageContentDisposition } from "@/lib/guides/export-image";
 import { getPublicWeaponExport } from "@/lib/guides/queries";
 
@@ -26,10 +26,8 @@ const anuphanFonts = Promise.all(
   }),
 ).catch(() => []);
 
-function metric(value: string | null): string {
-  return value === null
-    ? "—"
-    : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+function metric(value: string): string {
+  return `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
 }
 
 async function pngDataUrl(url: string): Promise<string | null> {
@@ -69,14 +67,14 @@ export async function GET(
         flexDirection: "column",
         gap: 14,
         color: "#f7f7f7",
-        background: "#17171c",
+        background: "#05060a",
         padding: "32px 36px",
         fontFamily: "Anuphan",
       }}
     >
-      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 6 }}>
-        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>{guide.guideName}</div>
-        <div style={{ display: "flex", color: "#d3b568", fontSize: 22 }}>Weapons</div>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}>
+        <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div>
+        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>Weapons</div>
       </div>
       {guide.weapons.map((row, index) => (
         <div
@@ -92,12 +90,13 @@ export async function GET(
           <div
             style={{
               display: "flex",
-              flex: 1,
+              flex: 3,
               alignItems: "center",
               gap: 18,
+              borderBottomRightRadius: 80,
               background: rarityGradient(row.weapon.rarity),
               color: "white",
-              padding: "10px 24px",
+              padding: "10px 40px 10px 24px",
             }}
           >
             {weaponImages[index] ? (
@@ -109,15 +108,19 @@ export async function GET(
               {index + 1}. {row.weapon.name} R{row.refinement}
             </div>
           </div>
-          <div style={{ display: "flex", width: 350, alignItems: "center", justifyContent: "space-around", gap: 16, color: "#17171c", padding: "12px 20px" }}>
-            <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
-              <div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.overallPercent)}</div>
-              <div style={{ display: "flex", fontSize: 14 }}>ดาเมจทั้งทีม</div>
-            </div>
-            <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
-              <div style={{ display: "flex", fontSize: 30, fontWeight: 700 }}>{metric(row.personalPercent)}</div>
-              <div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div>
-            </div>
+          <div style={{ display: "flex", flex: 1, alignItems: "center", justifyContent: "space-around", gap: 12, color: "#17171c", padding: "12px 16px" }}>
+            {row.overallPercent ? (
+              <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
+                <div style={{ display: "flex", color: rarityTextColor(row.weapon.rarity), fontSize: 36, fontWeight: 700 }}>{metric(row.overallPercent)}</div>
+                <div style={{ display: "flex", fontSize: 14 }}>ดาเมททั้งทีม</div>
+              </div>
+            ) : null}
+            {row.personalPercent ? (
+              <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center" }}>
+                <div style={{ display: "flex", color: rarityTextColor(row.weapon.rarity), fontSize: 36, fontWeight: 700 }}>{metric(row.personalPercent)}</div>
+                <div style={{ display: "flex", fontSize: 14 }}>ดาเมจส่วนตัว</div>
+              </div>
+            ) : null}
           </div>
         </div>
       ))}

lib/catalog/rarity.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { rarityGradient, rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
+import { rarityGradient, rarityGradientClass, rarityTextClass, rarityTextColor } from "@/lib/catalog/rarity";
 
 describe("catalog rarity backgrounds", () => {
   it("maps every weapon and artifact rarity to its Tailwind gradient", () => {
@@ -15,11 +15,15 @@ describe("catalog rarity backgrounds", () => {
     expect(rarityTextClass(3)).toBe("text-[#4D7691]");
     expect(rarityTextClass(4)).toBe("text-[#6D6A9C]");
     expect(rarityTextClass(5)).toBe("text-[#A67B34]");
+    expect(rarityTextColor(3)).toBe("#4D7691");
+    expect(rarityTextColor(4)).toBe("#6D6A9C");
+    expect(rarityTextColor(5)).toBe("#A67B34");
   });
 
   it("uses the neutral equipment background when rarity is unavailable", () => {
     expect(rarityGradient(null)).toBe("#17383d");
     expect(rarityGradientClass(undefined)).toBeUndefined();
     expect(rarityTextClass(undefined)).toBeUndefined();
+    expect(rarityTextColor(undefined)).toBe("#17171c");
   });
 });

lib/catalog/rarity.ts

@@ -20,6 +20,12 @@ const rarityTextClasses: Record<number, string> = {
   5: "text-[#A67B34]",
 };
 
+const rarityTextColors: Record<number, string> = {
+  3: "#4D7691",
+  4: "#6D6A9C",
+  5: "#A67B34",
+};
+
 export function rarityGradientClass(rarity: number | null | undefined): string | undefined {
   return rarity ? rarityGradientClasses[rarity] : undefined;
 }
@@ -31,3 +37,7 @@ export function rarityGradient(rarity: number | null | undefined): string {
 export function rarityTextClass(rarity: number | null | undefined): string | undefined {
   return rarity ? rarityTextClasses[rarity] : undefined;
 }
+
+export function rarityTextColor(rarity: number | null | undefined): string {
+  return (rarity && rarityTextColors[rarity]) || "#17171c";
+}