feat : buzz feedback

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

@@ -7,6 +7,7 @@ import sharp from "sharp";
 import { rarityGradient } from "@/lib/catalog/rarity";
 import { imageContentDisposition } from "@/lib/guides/export-image";
 import { getPublicArtifactExport } from "@/lib/guides/queries";
+import { normalizeTargetStat, statPriorityColor, targetStatIconName, targetStatOptions } from "@/lib/guides/stats";
 import { normalizeTalentPriorities } from "@/lib/guides/talents";
 
 const anuphanFonts = Promise.all(
@@ -55,9 +56,9 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
-async function localPngDataUrl(fileName: string): Promise<string> {
-  const png = await sharp(join(process.cwd(), "public", "icon", fileName))
-    .resize(96, 96, { fit: "contain" })
+async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
+  const image = sharp(join(process.cwd(), "public", "icon", fileName));
+  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
     .png()
     .toBuffer();
   return `data:image/png;base64,${png.toString("base64")}`;
@@ -72,7 +73,7 @@ export async function GET(
   if (!guide) return new Response("Guide not found", { status: 404 });
   const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
 
-  const [fonts, groupAssets, statIconAssets, talentAssets] = await Promise.all([
+  const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets, watermark] = await Promise.all([
     anuphanFonts,
     Promise.all(
       guide.groups.map((group) =>
@@ -93,13 +94,15 @@ export async function GET(
       const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
       return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
     })),
+    Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`))),
+    localPngDataUrl("Watermark.png", null),
   ]);
 
   const profile = guide.profile;
   const groupRowHeights = guide.groups.map((group) => group.rows.map((row) => Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0))));
   const leftHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16;
   const detailHeight = profile
-    ? 60 + profile.targets.length * 30 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
+    ? 60 + profile.targets.length * 40 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
     : 0;
   const rightHeight = profile
     ? 242 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
@@ -118,8 +121,11 @@ export async function GET(
         background: "#05060a",
         padding: "32px 36px",
         fontFamily: "Anuphan",
+        position: "relative",
       }}
     >
+      <img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
+      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 20 }}>
       <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
         <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>
           อาร์ติแฟกต์และสเตตัสที่แนะนำ
@@ -148,7 +154,7 @@ export async function GET(
               </div>
               <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                 {group.rows.map((row, rowIndex) => (
-                  <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14 }}>
+                    <div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14 }}>
                     <div style={{ display: "flex", width: row.second ? 94 : 58 }}>
                       {groupAssets[groupIndex][rowIndex].first ? (
                         <div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.first.rarity) }}>
@@ -193,8 +199,8 @@ export async function GET(
                     <img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} />
                     <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                     <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
-                    <div style={{ display: "flex", fontSize: 14, lineHeight: 1.45 }}>
-                      {stat.values.length ? stat.values.map(statLabel).join(" > ") : "—"}
+                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}>
+                      {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "nowrap" }}>{statLabel(value)}</span>) : "—"}
                     </div>
                   </div>
                 ))}
@@ -202,8 +208,8 @@ export async function GET(
             </div>
 
             {profile.substats.length ? (
-              <div style={{ display: "flex", justifyContent: "center", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "20px", fontSize: 17, textAlign: "center" }}>
-                <strong>Stat Priority:&nbsp;</strong>{profile.substats.map(statLabel).join(" > ")}
+                <div style={{ display: "flex", justifyContent: "center", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "20px", fontSize: 17, textAlign: "center" }}>
+                <strong>Stat Priority:&nbsp;</strong>{profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{index ? " > " : ""}{statLabel(stat)}</span>)}
               </div>
             ) : null}
 
@@ -213,11 +219,14 @@ export async function GET(
                 {profile.targets.length ? (
                   <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                     <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>Target Stats</div>
-                    {profile.targets.map((target) => (
-                      <div key={`${target.stat}-${target.value}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 15 }}>
-                        <span>{target.stat}</span><strong>{target.value}</strong>
+                    {profile.targets.map((target, index) => {
+                      const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
+                      return (
+                      <div key={`${target.stat}-${target.value}`} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, borderRadius: 6, background: index % 2 === 0 ? "#34343d" : "#272730", padding: "5px 8px", fontSize: 15 }}>
+                        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>{iconIndex >= 0 ? <img src={targetStatAssets[iconIndex]} alt="" width={28} height={28} style={{ objectFit: "contain" }} /> : null}{normalizeTargetStat(target.stat) ?? target.stat}</span><strong>{target.value}</strong>
                       </div>
-                    ))}
+                      );
+                    })}
                   </div>
                 ) : null}
                 {talents.length ? (
@@ -245,6 +254,7 @@ export async function GET(
           </div>
         ) : null}
       </div>
+      </div>
     </div>,
     {
       width: 1200,

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

@@ -1,4 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
+import { join } from "node:path";
+
 import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
@@ -44,6 +46,14 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
+async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
+  const image = sharp(join(process.cwd(), "public", "icon", fileName));
+  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
+    .png()
+    .toBuffer();
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+
 export async function GET(
   _request: Request,
   context: { params: Promise<{ guideId: string }> },
@@ -52,9 +62,10 @@ export async function GET(
   const guide = await getPublicWeaponExport(guideId);
   if (!guide) return new Response("Guide not found", { status: 404 });
 
-  const [fonts, weaponImages] = await Promise.all([
+  const [fonts, weaponImages, watermark] = await Promise.all([
     anuphanFonts,
     Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
+    localPngDataUrl("Watermark.png", null),
   ]);
   const weaponHeights = guide.weapons.map((row) => Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)));
   const height = Math.max(360, 190 + weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) + Math.max(0, guide.weapons.length - 1) * 14);
@@ -71,8 +82,11 @@ export async function GET(
         background: "#05060a",
         padding: "32px 36px",
         fontFamily: "Anuphan",
+        position: "relative",
       }}
     >
+      <img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
+      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 14 }}>
       <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>
@@ -128,6 +142,7 @@ export async function GET(
           </div>
         </div>
       ))}
+      </div>
     </div>,
     {
       width: 1000,

app/api/teams/[teamId]/image/route.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "next/og";
+import { join } from "node:path";
 import sharp from "sharp";
 
 import { rarityGradient } from "@/lib/catalog/rarity";
@@ -44,6 +45,14 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
+async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
+  const image = sharp(join(process.cwd(), "public", "icon", fileName));
+  const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
+    .png()
+    .toBuffer();
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+
 export async function GET(
   _request: Request,
   context: RouteContext<"/api/teams/[teamId]/image">,
@@ -58,8 +67,10 @@ export async function GET(
   );
   const seconds = Number(team.rotationSeconds);
   const dps = seconds > 0 ? total / seconds : 0;
-  const fonts = await anuphanFonts;
-  const memberAssets = await Promise.all(
+  const [fonts, watermark, memberAssets] = await Promise.all([
+    anuphanFonts,
+    localPngDataUrl("Watermark.png", null),
+    Promise.all(
     team.members.map(async (member) => {
       const [character, weapon, artifact] = await Promise.all([
         pngDataUrl(member.character.imageUrl),
@@ -68,7 +79,8 @@ export async function GET(
       ]);
       return { character, weapon, artifact };
     }),
-  );
+    ),
+  ]);
 
   return new ImageResponse(
     <div
@@ -83,8 +95,11 @@ export async function GET(
         border: "2px solid #3aaaa2",
         padding: "34px 36px",
         fontFamily: "Anuphan",
+        position: "relative",
       }}
     >
+      <img src={watermark} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.2 }} />
+      <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column" }}>
       <div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
         <div style={{ display: "flex", justifyContent: "center", fontSize: 42, fontWeight: 700 }}>
           {team.guideName}
@@ -117,7 +132,7 @@ export async function GET(
                 {member.weapon && memberAssets[index].weapon ? (
                   <div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.weapon.rarity) }}>
                     <img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
-                    <div style={{ position: "absolute", top: 2, right: 2, display: "flex", borderRadius: 4, background: "#f4fbfa", color: "#06171b", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
+                    <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "#f4fbfa", color: "#06171b", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
                       R{member.refinement}
                     </div>
                   </div>
@@ -167,6 +182,7 @@ export async function GET(
       <div style={{ display: "flex", justifyContent: "center", marginTop: 18, color: "#5c9995", fontSize: 14 }}>
         By YT เกนชินไม่ใช่เกมมือถือ
       </div>
+      </div>
     </div>,
     {
       width: 550,

app/globals.css

@@ -23,6 +23,9 @@
   --color-success: var(--success);
   --color-warning: var(--warning);
   --color-info: var(--info);
+  --color-tier-gold: var(--tier-gold);
+  --color-tier-silver: var(--tier-silver);
+  --color-tier-copper: var(--tier-copper);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -73,6 +76,9 @@
   --success: oklch(0.72 0.15 155);
   --warning: oklch(0.8 0.15 82);
   --info: oklch(0.72 0.12 235);
+  --tier-gold: oklch(0.8 0.15 82);
+  --tier-silver: oklch(0.82 0.02 260);
+  --tier-copper: oklch(0.65 0.12 55);
   --border: oklch(0.96 0.01 88 / 12%);
   --input: oklch(0.96 0.01 88 / 16%);
   --ring: oklch(0.79 0.14 78);