feat : dd up up

2026-10-07 18:15:27 +07:00
parent a53abb0e2e
commit bec24ad00b
9 changed files with 73 additions and 69 deletions
@@ -1,6 +1,6 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
-import { ComparisonContext, ComparisonValue } from "./comparison-context";
+import { ComparisonContext } from "./comparison-context";

 describe("public comparison explanations", () => {
  it("keeps each damage metric's 100% rows separate", () => {
@@ -24,12 +24,4 @@ describe("public comparison explanations", () => {
    expect(html).not.toContain("Only choice");
  });

-  it("renders a loss relative to the baseline but never treats an unavailable value as a loss", () => {
-    expect(renderToStaticMarkup(<ComparisonValue value="98.5" />)).toContain("-1.5%");
-    for (const value of [null, "0", "invalid"]) {
-      const html = renderToStaticMarkup(<ComparisonValue value={value} />);
-      expect(html).toContain("ไม่มีข้อมูลเปรียบเทียบ");
-      expect(html).not.toContain("-100%");
-    }
-  });
 });
@@ -1,4 +1,4 @@
-import { comparisonDelta, comparisonReferenceNames } from "@/lib/guides/comparison";
+import { comparisonReferenceNames } from "@/lib/guides/comparison";

 type WeaponRows = Parameters<typeof comparisonReferenceNames>[0];

@@ -8,7 +8,6 @@ export function ComparisonContext({ rows, metric }: {
 }) {
  const references = rows && metric ? comparisonReferenceNames(rows, metric) : [];
  return <div className="flex flex-col gap-1 text-sm text-muted-foreground">
-    {!rows && <p>100% = ค่าฐานของเงื่อนไขนี้ เช่น 109% หมายถึงสูงกว่าค่าฐาน 9% เปรียบเทียบภายในเงื่อนไขเดียวกัน</p>}
    {rows && metric ? <p>
      {metric === "overallPercent" ? "ดาเมจทั้งทีม" : "ดาเมจส่วนตัว"} - {references.length
        ? `รายการที่แสดง 100%: ${references.join(" / ")}`
@@ -16,8 +15,3 @@ export function ComparisonContext({ rows, metric }: {
    </p> : null}
  </div>;
 }
-
-export function ComparisonValue({ value }: { value: string | null }) {
-  const delta = comparisonDelta(value);
-  return <p className="text-xs opacity-75">{delta ?? "ไม่มีข้อมูลเปรียบเทียบ"}</p>;
-}
@@ -208,9 +208,9 @@ export function MaterialPoster({
                      className="size-[3.5cqw] shrink-0 object-contain brightness-0 invert"
                    />
                  ) : null}
-                  <span>{stat ? statLabel(stat.key) : "—"}</span>
+                  <span>{stat ? statLabel(stat.key) : "-"}</span>
                </span>
-                <span className="whitespace-nowrap text-[2.7cqw]">{stat ? statValue(stat.key, stat.value) : "—"}</span>
+                <span className="whitespace-nowrap text-[2.7cqw]">{stat ? statValue(stat.key, stat.value) : "-"}</span>
              </div>
            );
          })}
@@ -2,11 +2,11 @@ import Image from "@/components/ui/resilient-image";
 import localFont from "next/font/local";
 import Link from "next/link";
 import { ArrowLeftIcon, ArrowUpRightIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { Fragment, type ReactNode } from "react";

 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ComparisonContext, ComparisonValue } from "@/components/public/comparison-context";
+import { ComparisonContext } from "@/components/public/comparison-context";
 import { Button } from "@/components/ui/button";
 import {
  Card,
@@ -76,10 +76,10 @@ export function publicSections(guide: PublicGuide) {
 }

 function publicSectionTitle(slug: string, fallback: string): string {
-  if (slug === "weapon") return "อาวุธ";
-  if (slug === "artifact") return "อาร์ติแฟกต์และค่าสถานะ";
-  if (slug === "constellations") return "กลุ่มดาว";
-  if (slug === "team") return "ทีมแนะนำและดาเมจ";
+  if (slug === "weapon") return "Weapons";
+  if (slug === "artifact") return "Artifacts";
+  if (slug === "constellations") return "Constellations";
+  if (slug === "team") return "Team calc";
  return fallback;
 }

@@ -96,7 +96,7 @@ export function StructuredGuideShell({
  const baseHref = preview ? `/admin/${guide.characterKey}/preview` : `/${guide.slug}`;
  const currentPageTitle = section
    ? publicSectionTitle(section, sections.find((item) => item.slug === section)?.title ?? section)
-    : "ภาพรวม";
+    : "Overview";
  return (
    <div className="flex min-h-svh flex-col bg-background">
      <LiveRefresh endpoint={`/api/events/page/${guide.id}`} />
@@ -156,7 +156,7 @@ export function StructuredGuideShell({
              height={20}
              className="size-5 object-contain"
            />
-            ภาพรวม
+            Overview
          </Link>
          {sections.map((item) => (
            <Link
@@ -574,7 +574,7 @@ function WeaponSectionContent({
                      )}
                    >
                      {Number(row.overallPercent) === 0
-                        ? (exporting ? "-%" : "—")
+                        ? (exporting ? "-%" : "-")
                        : metric(row.overallPercent)}
                    </p>
                    <p
@@ -589,7 +589,6 @@ function WeaponSectionContent({
                    >
                      ดาเมจทั้งทีม
                    </p>
-                    {!exporting && <ComparisonValue value={row.overallPercent} />}
                  </div>
                ) : null}
                {row.personalPercent ? (
@@ -606,7 +605,7 @@ function WeaponSectionContent({
                      )}
                    >
                      {Number(row.personalPercent) === 0
-                        ? (exporting ? "-%" : "—")
+                        ? (exporting ? "-%" : "-")
                        : metric(row.personalPercent)}
                    </p>
                    <p
@@ -621,7 +620,6 @@ function WeaponSectionContent({
                    >
                      ดาเมจส่วนตัว
                    </p>
-                    {!exporting && <ComparisonValue value={row.personalPercent} />}
                  </div>
                ) : null}
              </div>
@@ -777,12 +775,16 @@ function ArtifactSectionContent({
          )}
          <div data-artifact-export-section="tierlist" className={exporting ? "order-first" : "lg:order-first"}>
            {(() => {
+              const TierList = exporting ? Fragment : Card;
+              const TierGroup = exporting ? Card : Fragment;
              const tierCards = guide.artifactGroups.map((condition, conditionIndex) => (
              <div key={condition.id} data-tier-condition={conditionIndex} className="artifact-export-tierlist flex flex-col gap-5">
              {!exporting && <ComparisonContext />}
              {exporting && guide.artifactGroups.length > 1 ? <p className="text-sm font-medium">{condition.name || <ExportText th={`เงื่อนไข ${conditionIndex + 1}`} en={`Condition ${conditionIndex + 1}`} />}</p> : null}
              {condition.note ? <p data-export-note className="whitespace-pre-wrap text-sm text-muted-foreground">{condition.note}</p> : null}
-              {condition.tiers.map((group) => <Card key={group.id}>
+              <TierList>
+              {condition.tiers.map((group, groupIndex) => <TierGroup key={group.id}>
+                {!exporting && groupIndex > 0 ? <Separator /> : null}
                <CardHeader>
                  <CardTitle>
                    {group.name === "Late Game"
@@ -823,14 +825,14 @@ function ArtifactSectionContent({
                      </div>
                      <div className="w-24 shrink-0 text-right sm:w-28">
                        <p className="text-2xl font-semibold text-primary">
-                          {Number(row.percent) === 0 ? (exporting ? "-%" : "—") : metric(row.percent, exporting ? "en-US" : undefined)}
+                          {Number(row.percent) === 0 ? (exporting ? "-%" : "-") : metric(row.percent, exporting ? "en-US" : undefined)}
                        </p>
-                        {!exporting && <ComparisonValue value={row.percent} />}
                      </div>
                    </div>
                  ))}
                </CardContent>
-              </Card>)}
+              </TierGroup>)}
+              </TierList>
              </div>
              ));
              return exporting ? tierCards : <ConditionSwitcher label="เลือกเงื่อนไขอันดับอาร์ติแฟกต์" labels={guide.artifactGroups.map((condition, index) => condition.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.artifactGroups.map((condition) => condition.iconUrl)}>{tierCards}</ConditionSwitcher>;
@@ -1203,7 +1205,6 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
          </p>
        ) : null}
      </header>
-      <p className="text-sm text-muted-foreground">ดาเมจทั้งทีมสะสมเทียบกับ C0 = 100% เช่น 117% คือสูงกว่า C0 17% ภายใต้เงื่อนไขเดียวกัน</p>
      <ConditionSwitcher label="เลือกเงื่อนไขกลุ่มดาว" labels={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, index) => group.name || `เงื่อนไข ${index + 1}`)} iconUrls={guide.constellationGroups.filter((group) => group.rows.length > 0).map((group) => group.iconUrl)}>
      {guide.constellationGroups.filter((group) => group.rows.length > 0).map((group, groupIndex, groups) => (
        <div key={group.id} className="flex flex-col gap-4">
@@ -1245,9 +1246,8 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
                        row.isGreat && "text-warning",
                      )}
                    >
-                      {Number(row.cumulativePercent) === 0 ? "—" : metric(row.cumulativePercent)}
+                      {Number(row.cumulativePercent) === 0 ? "-" : metric(row.cumulativePercent)}
                    </CardTitle>
-                    <ComparisonValue value={row.cumulativePercent} />
                    <CardDescription className="text-base font-medium text-white">
                      C{row.level} - {row.name}
                    </CardDescription>
@@ -1271,9 +1271,16 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
 function TeamSection({ guide }: { guide: PublicGuide }) {
  return (
    <section className="flex flex-col gap-6">
-      <header className="text-center">
-        <h1 className="font-heading text-3xl font-semibold sm:text-4xl">ทีมแนะนำและดาเมจ</h1>
-        <p className="mt-3 text-sm text-muted-foreground">ผลคำนวณสำหรับทีม อาวุธ กลุ่มดาว และเงื่อนไขที่ระบุในไกด์ เลือกดูและเปรียบเทียบทีมที่มีอยู่ได้</p>
+      <header className="flex items-center justify-center gap-3">
+          <Image
+            src="/icon/nav/Team-calc.webp"
+            alt=""
+            width={56}
+            height={56}
+            loading="lazy"
+            className="size-14 shrink-0 object-contain"
+          />
+        <h1 className="font-heading text-3xl font-semibold sm:text-4xl">ทีมและดาเมจ</h1>
      </header>
      <TeamSearch groups={guide.teamGroups} />
    </section>
@@ -388,7 +388,6 @@ function TeamCard({
              <p className="mt-1 truncate text-sm font-medium">
                {member.character.name}
              </p>
-              {!exporting && <p className="text-xs text-muted-foreground">ดาเมจต่อโรเทชั่น</p>}
              <p className="text-sm font-semibold">
                {Number(member.damage).toLocaleString(undefined, {
                  maximumFractionDigits: 2,
@@ -398,7 +397,7 @@ function TeamCard({
                {total
                  ? ((Number(member.damage) / total) * 100).toFixed(2)
                  : "0.00"}
-                %{!exporting && " ของทีม"}
+                %
              </p>
            </div>
          ))}
@@ -1,6 +1,8 @@
 "use client";

 import { Bar, BarChart, CartesianGrid, LabelList, ReferenceLine, XAxis, YAxis } from "recharts";
+import Image from "@/components/ui/resilient-image";
+import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
  ChartContainer, ChartLegend, ChartLegendContent,
@@ -22,6 +24,8 @@ function percentage(value: string | null) {
 export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number]["rows"] }) {
  const data = rows.map((row, index) => ({
    name: `${index + 1}. ${row.weapon.name} R${row.refinement}`,
+    weapon: row.weapon,
+    refinement: row.refinement,
    overall: percentage(row.overallPercent),
    personal: percentage(row.personalPercent),
  }));
@@ -38,30 +42,38 @@ export function WeaponChart({ rows }: { rows: PublicGuide["weaponGroups"][number
    </CardHeader>
    <CardContent className="min-w-0">
      <ChartContainer config={chartConfig} className="aspect-auto min-w-0 w-full"
-        style={{ height: Math.max(240, data.length * 72 + 80) }}
+        style={{ height: 420 }}
        aria-label="กราฟเปรียบเทียบเปอร์เซ็นต์ดาเมจอาวุธ">
-        <BarChart accessibilityLayer data={data} layout="vertical" margin={{ right: 42, left: 0 }}>
-          <CartesianGrid horizontal={false} />
-          <XAxis type="number" tickLine={false} axisLine={false}
+        <BarChart accessibilityLayer data={data} layout="horizontal" barGap={4} margin={{ top: 28, right: 12, left: 0 }}>
+          <CartesianGrid vertical={false} />
+          <YAxis type="number" tickLine={false} axisLine={false}
            domain={[(minimum: number) => Math.min(0, minimum), (maximum: number) => Math.max(110, maximum)]}
            tickFormatter={(value) => `${value}%`} />
-          <YAxis dataKey="name" type="category" tickLine={false} axisLine={false} width={142} interval={0}
-            tick={({ x, y, payload }) => <g transform={`translate(${x},${y})`}>
-              <foreignObject x={-140} y={-32} width={132} height={64}>
-                <div className="flex h-full items-center justify-end text-right text-xs leading-4 wrap-anywhere text-foreground">{payload.value}</div>
-              </foreignObject>
-            </g>} />
-          <ReferenceLine x={100} stroke="var(--muted-foreground)" strokeDasharray="4 4" />
+          <XAxis dataKey="name" type="category" tickLine={false} axisLine={false} height={96} interval={0}
+            tick={({ x, y, width, payload }) => {
+              const row = data.find((item) => item.name === payload.value);
+              if (!row) return <g />;
+              const scale = Math.min(1, Math.max(0, Number(width) / data.length - 4) / 56);
+              return <g transform={`translate(${x},${Number(y) + 8}) scale(${scale})`}>
+                <foreignObject x={-28} y={0} width={56} height={80}>
+                  <div className="flex flex-col items-center gap-1" title={row.name}>
+                    <Image src={row.weapon.imageUrl} alt={row.weapon.name} width={56} height={56} className="size-14 object-contain" />
+                    <Badge variant="secondary">R{row.refinement}</Badge>
+                  </div>
+                </foreignObject>
+              </g>;
+            }} />
+          <ReferenceLine y={100} stroke="var(--muted-foreground)" strokeDasharray="4 4" />
          <ChartTooltip content={<ChartTooltipContent formatter={(value, name) => <div className="flex flex-1 items-center justify-between gap-4">
            <span className="text-muted-foreground">{chartConfig[name as keyof typeof chartConfig]?.label ?? name}</span>
            <span className="font-mono font-medium">{value}%</span>
          </div>} />} />
          <ChartLegend content={<ChartLegendContent className="flex-wrap" />} />
-          {hasPersonal && <Bar dataKey="personal" fill="var(--color-personal)" radius={4} maxBarSize={singleMetric ? 26 : 18} isAnimationActive={false}>
-            <LabelList position="right" formatter={(value) => typeof value === "number" ? `${value.toLocaleString("th-TH", { maximumFractionDigits: 2 })}%` : ""} className="fill-foreground text-xs" />
+          {hasPersonal && <Bar dataKey="personal" fill="var(--color-personal)" radius={4} maxBarSize={singleMetric ? 48 : 40} isAnimationActive={false}>
+            <LabelList position="top" formatter={(value) => typeof value === "number" ? `${value.toLocaleString("th-TH", { maximumFractionDigits: 2 })}%` : ""} className="fill-foreground text-xs" />
          </Bar>}
-          {hasOverall && <Bar dataKey="overall" fill="var(--color-overall)" radius={4} maxBarSize={singleMetric ? 26 : 18} isAnimationActive={false}>
-            <LabelList position="right" formatter={(value) => typeof value === "number" ? `${value.toLocaleString("th-TH", { maximumFractionDigits: 2 })}%` : ""} className="fill-foreground text-xs" />
+          {hasOverall && <Bar dataKey="overall" fill="var(--color-overall)" radius={4} maxBarSize={singleMetric ? 48 : 40} isAnimationActive={false}>
+            <LabelList position="top" formatter={(value) => typeof value === "number" ? `${value.toLocaleString("th-TH", { maximumFractionDigits: 2 })}%` : ""} className="fill-foreground text-xs" />
          </Bar>}
        </BarChart>
      </ChartContainer>