fix(weapon-export) : align image with public layout

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

@@ -10,6 +10,10 @@ const anuphanFonts = Promise.all(
   [
     { subset: "latin", weight: 400 as const },
     { subset: "thai", weight: 400 as const },
+    { subset: "latin", weight: 500 as const },
+    { subset: "thai", weight: 500 as const },
+    { subset: "latin", weight: 600 as const },
+    { subset: "thai", weight: 600 as const },
     { subset: "latin", weight: 700 as const },
     { subset: "thai", weight: 700 as const },
   ].map(async ({ subset, weight }) => {
@@ -33,12 +37,21 @@ function metric(value: string): string {
     : `${Number(value).toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
 }
 
+function wrappedLineCount(value: string, lineLength: number): number {
+  return value
+    .split(/\r?\n/u)
+    .reduce(
+      (lines, line) => lines + Math.max(1, Math.ceil(line.length / lineLength)),
+      0,
+    );
+}
+
 async function pngDataUrl(url: string): Promise<string | null> {
   try {
     const response = await fetch(url);
     if (!response.ok) return null;
     const png = await sharp(Buffer.from(await response.arrayBuffer()))
-      .resize(120, 120, { fit: "contain" })
+      .resize(80, 80, { fit: "contain" })
       .png()
       .toBuffer();
     return `data:image/png;base64,${png.toString("base64")}`;
@@ -59,18 +72,19 @@ export async function GET(
     anuphanFonts,
     Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
   ]);
-  const weaponHeights = guide.weapons.map((row) =>
+  const weaponHeights = guide.weapons.map((row) => {
-    Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)),
+    const noteLines = row.note ? wrappedLineCount(row.note, 58) : 0;
-  );
+    return Math.max(112, noteLines ? 64 + noteLines * 22 : 112);
-  const noteHeight = guide.note
+  });
-    ? Math.max(24, Math.ceil(guide.note.length / 70) * 22)
+  const noteLines = guide.note ? wrappedLineCount(guide.note, 70) : 0;
-    : 0;
+  const headerHeight = 72 + (noteLines ? 12 + noteLines * 24 : 0);
   const height = Math.max(
     360,
-    190 +
+    64 +
-      noteHeight +
+      headerHeight +
+      24 +
       weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) +
-      Math.max(0, guide.weapons.length - 1) * 14,
+      Math.max(0, guide.weapons.length - 1) * 12,
   );
 
   return new ImageResponse(
@@ -80,22 +94,18 @@ export async function GET(
         height: "100%",
         display: "flex",
         flexDirection: "column",
-        gap: 14,
+        color: "#f2eee6",
-        color: "#f7f7f7",
+        background: "#06070c",
-        background: "#05060a",
         padding: "32px 36px",
         fontFamily: "Anuphan",
-        position: "relative",
       }}
     >
       <div
         style={{
-          position: "relative",
-          zIndex: 1,
           display: "flex",
           flex: 1,
           flexDirection: "column",
-          gap: 14,
+          gap: 12,
         }}
       >
         <div
@@ -103,21 +113,29 @@ export async function GET(
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            gap: 8,
+            gap: 12,
-            marginBottom: 6,
+            marginBottom: 12,
           }}
         >
           <div
             style={{
               display: "flex",
-              color: "#f0b72f",
+              color: "#ebae42",
-              fontSize: 16,
+              fontSize: 14,
-              fontWeight: 700,
+              fontWeight: 500,
+              lineHeight: 1.43,
             }}
           >
             อาวุธที่แนะนำ
           </div>
-          <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
+          <div
+            style={{
+              display: "flex",
+              fontSize: 36,
+              fontWeight: 600,
+              lineHeight: 1.11,
+            }}
+          >
             Weapons
           </div>
           {guide.note ? (
@@ -125,10 +143,11 @@ export async function GET(
               style={{
                 display: "flex",
                 maxWidth: 760,
-                color: "#b9b9c2",
+                color: "#9b9eaa",
                 fontSize: 16,
-                lineHeight: 1.4,
+                lineHeight: 1.5,
                 textAlign: "center",
+                whiteSpace: "pre-wrap",
               }}
             >
               {guide.note}
@@ -142,18 +161,17 @@ export async function GET(
               display: "flex",
               minHeight: weaponHeights[index],
               overflow: "hidden",
-              border: "1px solid rgba(247, 247, 247, 0.1)",
+              border: "1px solid rgba(242, 238, 230, 0.1)",
               borderRadius: 14,
               background: "#ffffff",
             }}
           >
             <div
               style={{
-                position: "relative",
                 display: "flex",
                 flex: 3,
                 overflow: "hidden",
-                borderBottomRightRadius: 80,
+                borderBottomRightRadius: 128,
                 background: rarityGradient(row.weapon.rarity),
                 color: "white",
                 padding: 0,
@@ -161,29 +179,27 @@ export async function GET(
             >
               <div
                 style={{
-                  position: "relative",
-                  zIndex: 1,
                   display: "flex",
                   flex: 1,
                   alignItems: "center",
-                  gap: 18,
+                  gap: 16,
-                  padding: "10px 40px 10px 24px",
+                  padding: "16px 64px 16px 16px",
                 }}
               >
                 {weaponImages[index] ? (
                   <img
                     src={weaponImages[index]!}
                     alt=""
-                    width={104}
+                    width={80}
-                    height={104}
+                    height={80}
                     style={{ objectFit: "contain" }}
                   />
                 ) : (
                   <div
                     style={{
                       display: "flex",
-                      width: 104,
+                      width: 80,
-                      height: 104,
+                      height: 80,
                       alignItems: "center",
                       justifyContent: "center",
                       fontSize: 32,
@@ -193,10 +209,24 @@ export async function GET(
                   </div>
                 )}
                 <div
-                  style={{ display: "flex", flexDirection: "column", gap: 5 }}
+                  style={{
+                    display: "flex",
+                    flex: 1,
+                    minWidth: 0,
+                    flexDirection: "column",
+                    gap: 4,
+                  }}
                 >
                   <div
-                    style={{ display: "flex", fontSize: 24, fontWeight: 700 }}
+                    style={{
+                      display: "flex",
+                      overflow: "hidden",
+                      fontSize: 18,
+                      fontWeight: 600,
+                      lineHeight: 1.55,
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
                   >
                     {index + 1}. {row.weapon.name} R{row.refinement}
                   </div>
@@ -205,7 +235,8 @@ export async function GET(
                       style={{
                         display: "flex",
                         fontSize: 14,
-                        lineHeight: 1.55,
+                        lineHeight: 1.43,
+                        whiteSpace: "pre-wrap",
                       }}
                     >
                       {row.note}
@@ -220,9 +251,9 @@ export async function GET(
                 flex: 1,
                 alignItems: "center",
                 justifyContent: "space-around",
-                gap: 12,
+                gap: 16,
-                color: "#17171c",
+                color: "#000000",
-                padding: "12px 16px",
+                padding: "20px 16px",
               }}
             >
               {row.overallPercent ? (
@@ -238,13 +269,17 @@ export async function GET(
                     style={{
                       display: "flex",
                       color: rarityTextColor(row.weapon.rarity),
-                      fontSize: 36,
+                      fontSize: 48,
                       fontWeight: 700,
+                      lineHeight: 1,
+                      whiteSpace: "nowrap",
                     }}
                   >
                     {metric(row.overallPercent)}
                   </div>
-                  <div style={{ display: "flex", fontSize: 14 }}>
+                  <div
+                    style={{ display: "flex", marginTop: 4, fontSize: 16 }}
+                  >
                     ดาเมททั้งทีม
                   </div>
                 </div>
@@ -262,13 +297,17 @@ export async function GET(
                     style={{
                       display: "flex",
                       color: rarityTextColor(row.weapon.rarity),
-                      fontSize: 36,
+                      fontSize: 48,
                       fontWeight: 700,
+                      lineHeight: 1,
+                      whiteSpace: "nowrap",
                     }}
                   >
                     {metric(row.personalPercent)}
                   </div>
-                  <div style={{ display: "flex", fontSize: 14 }}>
+                  <div
+                    style={{ display: "flex", marginTop: 4, fontSize: 16 }}
+                  >
                     ดาเมจส่วนตัว
                   </div>
                 </div>