feat : better ui

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

@@ -36,11 +36,29 @@ function metric(value: string): string {
 }
 
 function statLabel(value: string): string {
-  return value === "EM"
-    ? "Elemental Mastery"
-    : value === "ER"
-      ? "Energy Recharge"
-      : value;
+  const labels: Record<string, string> = {
+    HP: "พลังชีวิต",
+    ATK: "พลังโจมตี",
+    DEF: "พลังป้องกัน",
+    EM: "ความชำนาญธาตุ",
+    ER: "ฟื้นฟูพลังงาน",
+    "CRIT RATE": "อัตราคริ",
+    "CRIT DAMAGE": "ความแรงคริ",
+    "ATK%": "พลังโจมตี%",
+    "HP%": "พลังชีวิต%",
+    "DEF%": "พลังป้องกัน%",
+    "CRIT Rate%/CRIT DMG%": "อัตราคริ/ความแรงคริ",
+    "Pyro DMG%": "ความเสียหายธาตุไฟ%",
+    "Hydro DMG%": "ความเสียหายธาตุน้ำ%",
+    "Cryo DMG%": "ความเสียหายธาตุน้ำแข็ง%",
+    "Electro DMG%": "ความเสียหายธาตุไฟฟ้า%",
+    "Anemo DMG%": "ความเสียหายธาตุลม%",
+    "Geo DMG%": "ความเสียหายธาตุดิน%",
+    "Dendro DMG%": "ความเสียหายธาตุไม้%",
+    "Physical DMG%": "ความเสียหายกายภาพ%",
+    "Healing Bonus%": "โบนัสการรักษา%",
+  };
+  return labels[value] ?? value;
 }
 
 async function pngDataUrl(url: string): Promise<string | null> {
@@ -72,7 +90,7 @@ export async function GET(
 ) {
   const { guideId } = await context.params;
   const guide = await getCachedPublicArtifactExport(guideId);
-  if (!guide) return new Response("Guide not found", { status: 404 });
+  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
   const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
 
   const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
@@ -131,7 +149,7 @@ export async function GET(
           อาร์ติแฟกต์และสเตตัสที่แนะนำ
         </div>
         <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
-          Artifacts &amp; Stats
+          อาร์ติแฟกต์และค่าสถานะ
         </div>
       </div>
 
@@ -150,7 +168,7 @@ export async function GET(
               }}
             >
               <div style={{ display: "flex", padding: "16px 20px", fontSize: 22, fontWeight: 700 }}>
-                {group.name}
+                {group.name === "Late Game" ? "เลทเกม" : group.name}
               </div>
               <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                 {group.rows.map((row, rowIndex) => (
@@ -188,15 +206,15 @@ export async function GET(
           <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
             <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25" }}>
               <div style={{ display: "flex", justifyContent: "center", background: "#ddb45a", color: "#211a0d", padding: "14px 20px", fontSize: 24, fontWeight: 700 }}>
-                Artifact Stats
+                ออฟหลัก
               </div>
               <div style={{ display: "flex" }}>
                 {[
-                  { label: "Sands", values: profile.sands, icon: statIconAssets[0] },
-                  { label: "Goblet", values: profile.goblet, icon: statIconAssets[1] },
-                  { label: "Circlet", values: profile.circlet, icon: statIconAssets[2] },
+                  { label: "นาฬิกา", values: profile.sands, icon: statIconAssets[0] },
+                  { label: "ถ้วย", values: profile.goblet, icon: statIconAssets[1] },
+                  { label: "หัว", values: profile.circlet, icon: statIconAssets[2] },
                 ].map((stat) => (
-                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "มงกุฎ" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
                     <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" }} />
@@ -210,7 +228,7 @@ export async function GET(
 
             {profile.substats.length ? (
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
-                <strong>Stat Priority:</strong>
+                <strong>ลำดับค่าสถานะ:</strong>
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                   {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
                 </div>
@@ -222,7 +240,7 @@ export async function GET(
                 <div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
                 {profile.targets.length ? (
                   <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
-                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>Target Stats</div>
+                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ค่าสถานะเป้าหมาย</div>
                     {profile.targets.map((target, index) => {
                       const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
                       return (
@@ -241,7 +259,7 @@ export async function GET(
                         <div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                           {talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
                           <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                            <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                            <span>{talent.type}{talent.level ? ` เลเวล ${talent.level}+` : ""}</span>
                             <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
                           </span>
                           {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
@@ -269,7 +287,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": imageContentDisposition(`${guide.guideName} Artifacts`, "artifacts"),
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาร์ติแฟกต์`, "artifacts"),
         "Content-Type": "image/png",
       },
     },

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

@@ -50,7 +50,7 @@ export async function GET(
 ) {
   const { guideId } = await context.params;
   const guide = await getCachedPublicWeaponExport(guideId);
-  if (!guide) return new Response("Guide not found", { status: 404 });
+  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
 
   const [fonts, weaponImages] = await Promise.all([
     anuphanFonts,
@@ -77,7 +77,7 @@ export async function GET(
       <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>
+        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>อาวุธ</div>
       </div>
       {guide.weapons.map((row, index) => (
         <div
@@ -140,7 +140,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": imageContentDisposition(`${guide.guideName} Weapons`, "weapons"),
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาวุธ`, "weapons"),
         "Content-Type": "image/png",
       },
     },