feat : update

2026-09-07 22:05:35 +07:00
parent f13979a86f
commit bdf29c930e
14 changed files with 4464 additions and 83 deletions
@@ -27,6 +27,8 @@ import { SiteHeader } from "@/components/public/site-header";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { TeamArtifactIcon, TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
+import { WeaponImageExport } from "@/components/public/weapon-image-export";
+import { ArtifactImageExport } from "@/components/public/artifact-image-export";
 import { GuideExportBranding } from "@/components/public/guide-export-branding";
 import { ConstellationImage } from "@/components/public/constellation-image";
 import { ConditionSwitcher } from "@/components/public/condition-switcher";
@@ -112,17 +114,12 @@ export function StructuredGuideShell({
          >
            <ChevronLeftIcon />
          </Link>
-          <div
-            className={cn(
-              "relative size-11 overflow-hidden rounded-lg border",
-              rarityGradientClass(guide.character.rarity),
-            )}
-          >
+          <div className="relative size-11 overflow-hidden rounded-lg border">
            <Image
-              src={guide.character.imageUrl}
+              src={guide.coverUrl}
              alt={guide.name}
              fill
-              className="object-contain"
+              className="object-cover"
            />
          </div>
          <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
@@ -438,27 +435,24 @@ function WeaponSectionContent({
          ) : null}
        </div>
      </header>
-      <ConditionSwitcher label="เลือกเงื่อนไขอาวุธ">
+      <ConditionSwitcher
+        label="เลือกเงื่อนไขอาวุธ"
+        labels={weaponGroups.map((group, index) => group.name || `Condition ${index + 1}`)}
+      >
      {weaponGroups.map((group, groupIndex, groups) => (
      <div key={group.id} className="relative z-10 flex flex-col gap-3">
        <div className="flex items-center justify-between gap-3">
          {groups.length > 1 || conditionNumber ? (
            <h2 className="font-heading text-2xl font-semibold">
-              Condition {conditionNumber ?? groupIndex + 1}
+              {group.name || `Condition ${conditionNumber ?? groupIndex + 1}`}
            </h2>
          ) : <span />}
          {showExportActions ? (
-            <GuideImageExport
-              fileName={`${guide.name}-Weapon-Condition-${groupIndex + 1}.png`}
-              captureClassName="p-0"
-            >
-              <WeaponSectionContent
-                guide={guide}
-                exporting
-                groups={[group]}
-                conditionNumber={groups.length > 1 ? groupIndex + 1 : undefined}
-              />
-            </GuideImageExport>
+            <WeaponImageExport
+              guide={guide}
+              group={group}
+              conditionIndex={groupIndex}
+            />
          ) : null}
        </div>
        {group.note ? <p className="whitespace-pre-wrap text-muted-foreground">{group.note}</p> : null}
@@ -609,16 +603,19 @@ function WeaponSectionContent({
 }

 function ArtifactSection({ guide }: { guide: PublicGuide }) {
+  const targetConditionCount = guide.artifactProfile?.targetConditions.filter(
+    (group) => group.rows.length,
+  ).length ?? 0;
  return (
    <ArtifactSectionContent
      guide={guide}
      action={
-        <GuideImageExport
+        <ArtifactImageExport
          fileName={`${guide.name}-Artifact.png`}
-          captureClassName="p-0"
+          targetConditionCount={targetConditionCount}
        >
          <ArtifactSectionContent guide={guide} exporting />
-        </GuideImageExport>
+        </ArtifactImageExport>
      }
    />
  );
@@ -674,14 +671,14 @@ function ArtifactSectionContent({
      </header>
      <div
        className={cn(
-          "relative z-10 grid gap-5",
+          "artifact-export-grid relative z-10 grid gap-5",
          exporting ? "grid-cols-[1.2fr_1fr]" : "lg:grid-cols-[1.2fr_1fr]",
        )}
      >
        {" "}
-        <div className="flex flex-col gap-5">
+        <div className="artifact-export-left flex flex-col gap-5">
          {profile ? (
-            <Card className="overflow-hidden pt-0">
+            <Card data-artifact-export-section="best-stats" className="artifact-export-main-stats overflow-hidden pt-0">
              <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
                <CardTitle className="text-2xl">ออฟหลักที่ดีที่สุด</CardTitle>
              </CardHeader>
@@ -711,7 +708,7 @@ function ArtifactSectionContent({
            </Card>
          ) : null}
          {profile?.substats.length ? (
-            <Card>
+            <Card data-artifact-export-section="best-stats" className="artifact-export-substats">
              <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
                <strong>ออฟรองที่ดีที่สุด</strong>
                <div className="flex flex-col items-center gap-1">
@@ -728,7 +725,7 @@ function ArtifactSectionContent({
              </CardContent>
            </Card>
          ) : null}
-          <div className="order-first flex flex-col gap-5">
+          <div data-artifact-export-section="tierlist" className="artifact-export-tierlist order-first flex flex-col gap-5">
            {guide.artifactGroups.map((group) => (
              <Card key={group.id}>
                <CardHeader>
@@ -780,15 +777,15 @@ function ArtifactSectionContent({
        </div>
      </div>
        {profile ? (
-          <div className="flex flex-col gap-5">
+          <div className="artifact-export-right flex flex-col gap-5">
            <Card>
              <CardHeader>
              </CardHeader>
              <CardContent className="flex flex-col gap-5">
                {profile.targetConditions.some((group) => group.rows.length) ? (
-                  <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย">
-                    {profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
-                  <div key={groupIndex}>
+                  exporting ? (
+                    profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
+                  <div key={groupIndex} data-artifact-export-section="target-stats" data-target-condition={groupIndex}>
                    <p className="mb-2 text-sm font-medium">ค่าสถานะต่ำๆที่ควรจะปั้นไว้</p>
                    {group.note ? <p className="mb-2 whitespace-pre-wrap text-sm text-muted-foreground">{group.note}</p> : null}
                    <div className="flex flex-col gap-1">
@@ -822,11 +819,31 @@ function ArtifactSectionContent({
                      ))}
                    </div>
                  </div>
-                    ))}
-                  </ConditionSwitcher>
+                    ))
+                  ) : (
+                    <ConditionSwitcher label="เลือกเงื่อนไขค่าสถานะเป้าหมาย">
+                      {profile.targetConditions.filter((group) => group.rows.length).map((group, groupIndex) => (
+                        <div key={groupIndex}>
+                          <p className="mb-2 text-sm font-medium">ค่าสถานะต่ำๆที่ควรจะปั้นไว้</p>
+                          {group.note ? <p className="mb-2 whitespace-pre-wrap text-sm text-muted-foreground">{group.note}</p> : null}
+                          <div className="flex flex-col gap-1">
+                            {group.rows.map((target, index) => (
+                              <div key={`${target.stat}-${target.value}`} className={cn("flex items-center justify-between gap-4 rounded-md px-3 py-2 text-sm", index % 2 === 0 ? "bg-muted/60" : "bg-muted/20")}>
+                                <span className="flex min-w-0 items-center gap-2">
+                                  {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={14} height={14} className="size-3.5 shrink-0 object-contain brightness-0 invert" /> : null}
+                                  <span>{statLabel(normalizeTargetStat(target.stat) ?? target.stat)}</span>
+                                </span>
+                                <strong className="shrink-0">{target.value}</strong>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                    </ConditionSwitcher>
+                  )
                ) : null}
                {profile.talents.length ? (
-                  <div>
+                  <div data-artifact-export-section="talents">
                    <p className="mb-2 text-sm font-medium">
                      ลำดับการอัพพรสวรรค์
                    </p>
@@ -1099,6 +1116,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
          </p>
        ) : null}
      </header>
+      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว">
      {guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
        <div key={group.id} className="flex flex-col gap-4">
          <div>
@@ -1152,6 +1170,7 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
          </div>
        </div>
      ))}
+      </ConditionSwitcher>
    </section>
  );
 }