feat : update

2026-09-07 22:05:35 +07:00
parent f13979a86f
commit bdf29c930e
14 changed files with 4464 additions and 83 deletions
@@ -220,6 +220,7 @@ type WeaponValue = {
 };
 type WeaponGroupValue = {
  id: string;
+  name: string | null;
  note: string | null;
  rows: WeaponValue[];
 };
@@ -1105,9 +1106,10 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
  const [groups, setGroups] = useState(() => {
    const source = initial.weaponGroups.length
      ? initial.weaponGroups
-      : [{ id: "weapon-condition-default", note: null, rows: [] }];
+      : [{ id: "weapon-condition-default", name: null, note: null, rows: [] }];
    return source.map((group) => ({
      clientId: group.id,
+      name: group.name ?? "",
      note: group.note ?? "",
      rows: group.rows.map((row) => ({
      clientId: row.id,
@@ -1128,6 +1130,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
  const value = {
    note: note.trim() || null,
    groups: groups.map((group) => ({
+      name: group.name.trim() || null,
      note: group.note.trim() || null,
      rows: group.rows.map((row) => ({
        weaponKey: row.weaponKey,
@@ -1157,7 +1160,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
      parseEditorDraft<typeof localDraft>(candidate, ["groups"], ["note"]),
    restoreLocalDraft: (draft) => {
      setNote(draft.note);
-      setGroups(draft.groups);
+      setGroups(draft.groups.map((group) => ({ ...group, name: group.name ?? "" })));
      setActiveGroupIndex(draft.activeGroupIndex ?? 0);
    },
  });
@@ -1190,13 +1193,26 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
          />
        </Field>
        <div className="flex flex-wrap gap-2">
-          {groups.map((group, index) => (
-            <Button key={group.clientId} type="button" variant={index === activeGroupIndex ? "default" : "outline"} onClick={() => setActiveGroupIndex(index)}>
-              Condition {index + 1}
-            </Button>
-          ))}
+          <ToggleGroup
+            aria-label="เลือกเงื่อนไขอาวุธ"
+            variant="outline"
+            value={[String(activeGroupIndex)]}
+            onValueChange={(values) => {
+              if (values[0]) setActiveGroupIndex(Number(values[0]));
+            }}
+          >
+            {groups.map((group, index) => (
+              <ToggleGroupItem
+                key={group.clientId}
+                value={String(index)}
+                className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+              >
+                {group.name.trim() || `Condition ${index + 1}`}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
          <Button type="button" variant="outline" disabled={groups.length >= 20} onClick={() => {
-            setGroups([...groups, { clientId: createClientId("weapon-condition"), note: "", rows: [] }]);
+            setGroups([...groups, { clientId: createClientId("weapon-condition"), name: "", note: "", rows: [] }]);
            setActiveGroupIndex(groups.length);
          }}>
            <PlusIcon data-icon="inline-start" />เพิ่ม Condition
@@ -1212,6 +1228,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                ...groups,
                {
                  clientId: createClientId("weapon-condition"),
+                  name: source.name,
                  note: source.note,
                  rows: source.rows.map((row) => ({
                    ...row,
@@ -1225,6 +1242,18 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
            <CopyIcon data-icon="inline-start" />Duplicate Condition
          </Button>
        </div>
+        <Field>
+          <FieldLabel htmlFor={`weapon-condition-name-${groups[activeGroupIndex]?.clientId}`}>
+            Condition name (optional)
+          </FieldLabel>
+          <Input
+            id={`weapon-condition-name-${groups[activeGroupIndex]?.clientId}`}
+            maxLength={120}
+            placeholder={`Condition ${activeGroupIndex + 1}`}
+            value={groups[activeGroupIndex]?.name ?? ""}
+            onChange={(event) => setGroups(groups.map((group, index) => index === activeGroupIndex ? { ...group, name: event.target.value } : group))}
+          />
+        </Field>
        <Field>
          <FieldLabel htmlFor={`weapon-condition-note-${groups[activeGroupIndex]?.clientId}`}>
            Condition note (optional)
@@ -1706,7 +1735,8 @@ function ArtifactEditor({
  };
  return (
    <div className="flex flex-col gap-6">
-      <Card>
+      <div className="grid items-start gap-6 xl:grid-cols-2">
+      <Card className="order-1">
        <CardHeader>
          <CardTitle>Artifact tier list</CardTitle>
          <CardDescription>
@@ -1714,7 +1744,7 @@ function ArtifactEditor({
            ระบบจะบันทึกอัตโนมัติ
          </CardDescription>
        </CardHeader>
-        <CardContent className="grid gap-5 md:grid-cols-2">
+        <CardContent className="flex flex-col gap-5">
          {groups.map((group, groupIndex) => (
            <Card key={group.name} size="sm">
              <CardHeader>
@@ -1964,16 +1994,13 @@ function ArtifactEditor({
          ))}
        </CardContent>
      </Card>
-      <Card>
-        <CardHeader>
+      <Card className="order-3">
+        <CardHeader className="bg-primary text-center text-primary-foreground">
          <CardTitle>Recommended Stats</CardTitle>
-          <CardDescription>
-            เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 3 ค่าต่อชิ้น
-          </CardDescription>
        </CardHeader>
        <CardContent>
          <FieldGroup>
-            <div className="grid gap-4 sm:grid-cols-3">
+            <div className="grid overflow-hidden rounded-xl border sm:grid-cols-3">
              <StatSelect
                label="Sands / นาฬิกา"
                options={mainStatOptions.sands}
@@ -2008,14 +2035,30 @@ function ArtifactEditor({
              elementIconUrls={elementIconUrls}
              priorityColors
            />
+          </FieldGroup>
+        </CardContent>
+      </Card>
+      <Card className="order-2 xl:row-span-2 xl:h-full">
+        <CardHeader>
+          <CardTitle>Target Stats</CardTitle>
+          <CardDescription>
+            ตั้งค่าเป้าหมายค่าสถานะสำหรับแต่ละ Condition
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
            <FieldSet>
              <FieldLegend>Target Stats</FieldLegend>
              <div className="flex flex-wrap gap-2">
-                {targetGroups.map((group, index) => (
-                  <Button key={group.clientId} type="button" variant={index === activeTargetGroupIndex ? "default" : "outline"} onClick={() => setActiveTargetGroupIndex(index)}>
-                    Condition {index + 1}
-                  </Button>
-                ))}
+                <ToggleGroup variant="outline" value={[String(activeTargetGroupIndex)]} onValueChange={(values) => {
+                  if (values[0]) setActiveTargetGroupIndex(Number(values[0]));
+                }}>
+                  {targetGroups.map((group, index) => (
+                    <ToggleGroupItem key={group.clientId} value={String(index)} className="aria-pressed:bg-primary aria-pressed:text-primary-foreground">
+                      Condition {index + 1}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
                <Button type="button" variant="outline" disabled={targetGroups.length >= 20} onClick={() => {
                  setTargetGroups([...targetGroups, { clientId: createClientId("target-condition"), note: "", rows: targetStatDefaults.map((target) => ({ ...target })) }]);
                  setActiveTargetGroupIndex(targetGroups.length);
@@ -2043,7 +2086,7 @@ function ArtifactEditor({
                        <Field
                          key={stat}
                          orientation="horizontal"
-                          className="items-center"
+                          className="items-center rounded-md bg-muted/40 px-3 py-2"
                        >
                          <FieldLabel className="flex w-32 shrink-0 items-center gap-2">
                            <StatIcons values={[stat]} />
@@ -2080,6 +2123,19 @@ function ArtifactEditor({
                }}><Trash2Icon data-icon="inline-start" />ลบ Condition นี้</Button>
              ) : null}
            </FieldSet>
+          </FieldGroup>
+        </CardContent>
+      </Card>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Talent Upgrade</CardTitle>
+          <CardDescription>
+            จัดลำดับ Talent เลือกระดับเป้าหมาย และกำหนดความสำคัญ
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
            <FieldSet>
              <FieldLegend>Talent Priority</FieldLegend>
              <DndContext
@@ -2159,6 +2215,12 @@ function ArtifactEditor({
                </SortableContext>
              </DndContext>
            </FieldSet>
+          </FieldGroup>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel>
              <Textarea
@@ -2223,6 +2285,7 @@ function ConstellationEditor({
      rows: makeRows(group.rows),
    }));
  });
+  const [activeConstellationGroupIndex, setActiveConstellationGroupIndex] = useState(0);
  const value = {
    note: note.trim() || null,
    groups: groups.map((group) => ({
@@ -2279,7 +2342,27 @@ function ConstellationEditor({
            onChange={(event) => setNote(event.target.value)}
          />
        </Field>
-        {groups.map((group, groupIndex) => (
+        <ToggleGroup
+          aria-label="เลือกเงื่อนไขกลุ่มดาว"
+          variant="outline"
+          value={[String(activeConstellationGroupIndex)]}
+          onValueChange={(values) => {
+            if (values[0]) setActiveConstellationGroupIndex(Number(values[0]));
+          }}
+        >
+          {groups.map((group, index) => (
+            <ToggleGroupItem
+              key={group.clientId}
+              value={String(index)}
+              className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
+            >
+              Condition {index + 1}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+        {groups[activeConstellationGroupIndex] ? [groups[activeConstellationGroupIndex]].map((group) => {
+          const groupIndex = activeConstellationGroupIndex;
+          return (
          <Card key={group.clientId} size="sm">
            <CardHeader>
              <CardTitle>Condition {groupIndex + 1}</CardTitle>
@@ -2294,13 +2377,10 @@ function ConstellationEditor({
                    }
                    title={`ลบ Condition ${groupIndex + 1}?`}
                    description="เปอร์เซ็นต์กลุ่มดาวทั้งหมดในเงื่อนไขนี้จะถูกลบออก"
-                    onConfirm={() =>
-                      setGroups(
-                        groups.filter(
-                          (item) => item.clientId !== group.clientId,
-                        ),
-                      )
-                    }
+                    onConfirm={() => {
+                      setGroups(groups.filter((item) => item.clientId !== group.clientId));
+                      setActiveConstellationGroupIndex(Math.max(0, groupIndex - 1));
+                    }}
                  >
                    <Trash2Icon />
                    <span className="sr-only">
@@ -2444,14 +2524,14 @@ function ConstellationEditor({
              </div>
            </CardContent>
          </Card>
-        ))}
+        );}) : null}
      </CardContent>
      <CardFooter className="flex-wrap justify-between gap-3">
        <Button
          type="button"
          variant="outline"
          disabled={groups.length >= 20}
-          onClick={() =>
+          onClick={() => {
            setGroups([
              ...groups,
              {
@@ -2460,7 +2540,8 @@ function ConstellationEditor({
                rows: makeRows(),
              },
            ])
-          }
+            setActiveConstellationGroupIndex(groups.length);
+          }}
        >
          <PlusIcon data-icon="inline-start" />
          เพิ่ม Condition