feat : big update
This commit is contained in:
@@ -51,6 +51,7 @@ type ArtifactValue = { id: string; name: string; rows: Array<{ firstArtifactKey:
|
||||
type ArtifactProfile = { sands: string[]; goblet: string[]; circlet: string[]; substats: string[]; targets: Array<{ stat: string; value: string }>; talents: Array<{ type: "NA" | "E" | "Q"; priority: number; level?: string }>; note: string | null } | null;
|
||||
type ConstellationValue = { level: number; detail: string; cumulativePercent: string };
|
||||
type CatalogConstellation = { level: number; name: string; description: string; iconUrl: string | null };
|
||||
type CatalogTalent = { type: "NA" | "E" | "Q"; name: string; description: string; iconUrl: string | null };
|
||||
type TeamValue = { title: string; rotationSeconds: string; combo: string; members: Array<{ characterKey: string; weaponKey: string | null; artifactKey: string | null; constellation: number; refinement: number; damage: string }> };
|
||||
|
||||
export interface GuideSectionEditorProps {
|
||||
@@ -60,6 +61,7 @@ export interface GuideSectionEditorProps {
|
||||
artifacts: CatalogItem[];
|
||||
characters: CatalogItem[];
|
||||
catalogConstellations: CatalogConstellation[];
|
||||
catalogTalents: CatalogTalent[];
|
||||
initial: {
|
||||
weapons: WeaponValue[];
|
||||
artifactGroups: ArtifactValue[];
|
||||
@@ -143,9 +145,12 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
|
||||
);
|
||||
}
|
||||
|
||||
function ArtifactEditor({ guide, artifacts, initial }: EditorBase) {
|
||||
function ArtifactEditor({ guide, artifacts, initial, catalogTalents }: EditorBase) {
|
||||
const profile = initial.artifactProfile;
|
||||
const [groups, setGroups] = useState(initial.artifactGroups.map((group) => ({ name: group.name, rows: group.rows.map((row) => ({ ...row })) })));
|
||||
const [groups, setGroups] = useState(() => (["Late Game", "Early Game"] as const).map((name, index) => ({
|
||||
name,
|
||||
rows: initial.artifactGroups[index]?.rows.map((row) => ({ ...row })) ?? [],
|
||||
})));
|
||||
const [sands, setSands] = useState(profile?.sands ?? []);
|
||||
const [goblet, setGoblet] = useState(profile?.goblet ?? []);
|
||||
const [circlet, setCirclet] = useState(profile?.circlet ?? []);
|
||||
@@ -155,7 +160,7 @@ function ArtifactEditor({ guide, artifacts, initial }: EditorBase) {
|
||||
const defaults = DEFAULT_TARGET_STATS.map((stat) => existing.find((target) => target.stat === stat) ?? { stat, value: "" });
|
||||
return [...defaults, ...existing.filter((target) => !DEFAULT_TARGET_STATS.includes(target.stat as (typeof DEFAULT_TARGET_STATS)[number]))];
|
||||
});
|
||||
const [talents, setTalents] = useState(profile?.talents ?? (["NA", "E", "Q"] as const).map((type, priority) => ({ type, priority: priority + 1, level: "" })));
|
||||
const [talents, setTalents] = useState(profile?.talents.length ? profile.talents : (["NA", "E", "Q"] as const).map((type, priority) => ({ type, priority: priority + 1, level: "" })));
|
||||
const [note, setNote] = useState(profile?.note ?? "");
|
||||
const value = { groups: groups.map((group) => ({ ...group, rows: group.rows.map((row) => ({ ...row, percent: Number(row.percent) })) })), sands, goblet, circlet, substats, targets: targets.filter((target) => target.stat.trim() && target.value.trim()), talents, note: note || null };
|
||||
const autosave = useAutosave({ value, valid: artifactSectionSchema.safeParse({ ...value, expectedVersion: guide.version }).success, initialVersion: guide.version, persist: (next, expectedVersion) => saveArtifactSection(guide.id, { ...next, expectedVersion }) });
|
||||
@@ -163,15 +168,14 @@ function ArtifactEditor({ guide, artifacts, initial }: EditorBase) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Artifact tier list</CardTitle><CardDescription>สร้างกลุ่มและค้นหาชุด Artifact ด้วยชื่อ ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
|
||||
<CardHeader><CardTitle>Artifact tier list</CardTitle><CardDescription>จัดชุด Artifact ในกลุ่ม Late Game และ Early Game ระบบจะบันทึกอัตโนมัติ</CardDescription></CardHeader>
|
||||
<CardContent className="flex flex-col gap-5">
|
||||
{groups.map((group, groupIndex) => <Card key={groupIndex} size="sm"><CardHeader><CardTitle><Input aria-label="ชื่อกลุ่ม Artifact" value={group.name} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, name: event.target.value } : item))} /></CardTitle><CardAction><Button variant="ghost" size="icon-sm" onClick={() => setGroups(groups.filter((_, index) => index !== groupIndex))}><Trash2Icon /><span className="sr-only">ลบกลุ่ม</span></Button></CardAction></CardHeader><CardContent className="flex flex-col gap-3">{group.rows.map((row, rowIndex) => <div key={rowIndex} className="grid gap-3 rounded-lg border p-3 lg:grid-cols-[1fr_1fr_8rem_auto]"><CatalogPicker items={artifacts} value={row.firstArtifactKey} placeholder="ค้นหาชุด Artifact แรก…" rarityBackground onChange={(firstArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate) } : item))} /><CatalogPicker items={artifacts} value={row.secondArtifactKey ?? ""} placeholder="ค้นหาชุดที่สอง (ถ้ามี)…" rarityBackground onChange={(secondArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate) } : item))} /><Input type="number" min="0" step="0.01" aria-label="Artifact percent" value={row.percent} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: event.target.value } : candidate) } : item))} /><Button variant="ghost" size="icon" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}><Trash2Icon /><span className="sr-only">ลบ Artifact</span></Button></div>)}<Button variant="outline" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: [...item.rows, { firstArtifactKey: "", secondArtifactKey: null, percent: "100" }] } : item))}><PlusIcon data-icon="inline-start" />เพิ่มชุด Artifact</Button></CardContent></Card>)}
|
||||
{groups.map((group, groupIndex) => <Card key={group.name} size="sm"><CardHeader><CardTitle>{group.name}</CardTitle></CardHeader><CardContent className="flex flex-col gap-3">{group.rows.map((row, rowIndex) => <div key={rowIndex} className="grid gap-3 rounded-lg border p-3 lg:grid-cols-[1fr_1fr_8rem_auto]"><CatalogPicker items={artifacts} value={row.firstArtifactKey} placeholder="ค้นหาชุด Artifact แรก…" rarityBackground onChange={(firstArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, firstArtifactKey } : candidate) } : item))} /><CatalogPicker items={artifacts} value={row.secondArtifactKey ?? ""} placeholder="ค้นหาชุดที่สอง (ถ้ามี)…" rarityBackground onChange={(secondArtifactKey) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, secondArtifactKey: secondArtifactKey || null } : candidate) } : item))} /><Input type="number" min="0" step="0.01" aria-label="Artifact percent" value={row.percent} onChange={(event) => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.map((candidate, inner) => inner === rowIndex ? { ...candidate, percent: event.target.value } : candidate) } : item))} /><Button variant="ghost" size="icon" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: item.rows.filter((_, inner) => inner !== rowIndex) } : item))}><Trash2Icon /><span className="sr-only">ลบ Artifact</span></Button></div>)}<Button variant="outline" onClick={() => setGroups(groups.map((item, index) => index === groupIndex ? { ...item, rows: [...item.rows, { firstArtifactKey: "", secondArtifactKey: null, percent: "100" }] } : item))}><PlusIcon data-icon="inline-start" />เพิ่มชุด Artifact</Button></CardContent></Card>)}
|
||||
</CardContent>
|
||||
<CardFooter><Button variant="outline" onClick={() => setGroups([...groups, { name: "Main", rows: [] }])}><PlusIcon data-icon="inline-start" />เพิ่มกลุ่ม</Button></CardFooter>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Recommended Stats</CardTitle><CardDescription>เลือกค่าจากรายการแทนปุ่ม และเลือก Main Stat ได้สูงสุด 2 ค่าต่อชิ้น</CardDescription></CardHeader>
|
||||
<CardContent><FieldGroup><StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={2} onChange={setSands} /><StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={2} onChange={setGoblet} /><StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={2} onChange={setCirclet} /><StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} /><FieldSet><FieldLegend>Target Stats</FieldLegend>{targets.map((target, index) => <div key={`${target.stat}-${index}`} className="grid gap-3 sm:grid-cols-[1fr_1fr_auto]"><Input value={target.stat} placeholder="ATK" aria-label={`Target stat ${index + 1}`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, stat: event.target.value } : item))} /><Input value={target.value} placeholder={target.stat === "ATK" ? "2200+" : "Recommended value"} aria-label={`${target.stat || "Target"} value`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} /><Button variant="ghost" size="icon" onClick={() => setTargets(targets.filter((_, itemIndex) => itemIndex !== index))}><Trash2Icon /><span className="sr-only">ลบเป้าหมาย</span></Button></div>)}<Button variant="outline" onClick={() => setTargets([...targets, { stat: "", value: "" }])}><PlusIcon data-icon="inline-start" />เพิ่ม Target</Button></FieldSet><FieldSet><FieldLegend>Talent Priority</FieldLegend>{orderedTalents.map((talent, index) => <div key={talent.type} className="grid grid-cols-[5rem_1fr_auto] items-center gap-3"><strong>{index + 1}. {talent.type}</strong><Input value={talent.level ?? ""} placeholder="ระดับเป้าหมาย เช่น 9+" onChange={(event) => setTalents(talents.map((item) => item.type === talent.type ? { ...item, level: event.target.value } : item))} /><RowActions index={index} length={orderedTalents.length} move={(from, to) => setTalents(moveItem(orderedTalents, from, to).map((item, priority) => ({ ...item, priority: priority + 1 })))} /></div>)}</FieldSet><Field><FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel><Textarea id="artifact-note" value={note} onChange={(event) => setNote(event.target.value)} /></Field></FieldGroup></CardContent>
|
||||
<CardContent><FieldGroup><StatSelect label="Sands / นาฬิกา" options={mainStatOptions.sands} value={sands} max={2} onChange={setSands} /><StatSelect label="Goblet / ถ้วย" options={mainStatOptions.goblet} value={goblet} max={2} onChange={setGoblet} /><StatSelect label="Circlet / หมวก" options={mainStatOptions.circlet} value={circlet} max={2} onChange={setCirclet} /><StatSelect label="Substats" options={substatOptions} value={substats} max={substatOptions.length} onChange={setSubstats} /><FieldSet><FieldLegend>Target Stats</FieldLegend>{targets.map((target, index) => <div key={`${target.stat}-${index}`} className="grid gap-3 sm:grid-cols-[1fr_1fr_auto]"><Input value={target.stat} placeholder="ATK" aria-label={`Target stat ${index + 1}`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, stat: event.target.value } : item))} /><Input value={target.value} placeholder={target.stat === "ATK" ? "2200+" : "Recommended value"} aria-label={`${target.stat || "Target"} value`} onChange={(event) => setTargets(targets.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} /><Button variant="ghost" size="icon" onClick={() => setTargets(targets.filter((_, itemIndex) => itemIndex !== index))}><Trash2Icon /><span className="sr-only">ลบเป้าหมาย</span></Button></div>)}<Button variant="outline" onClick={() => setTargets([...targets, { stat: "", value: "" }])}><PlusIcon data-icon="inline-start" />เพิ่ม Target</Button></FieldSet><FieldSet><FieldLegend>Talent Priority</FieldLegend>{orderedTalents.map((talent, index) => { const catalogTalent = catalogTalents.find((item) => item.type === talent.type); return <Card key={talent.type} size="sm"><CardHeader>{catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt="" width={48} height={48} className="rounded-lg bg-muted" /> : null}<CardTitle>{index + 1}. {catalogTalent?.name ?? talent.type}</CardTitle><CardDescription className="whitespace-pre-line">{catalogTalent?.description ?? talent.type}</CardDescription><CardAction><RowActions index={index} length={orderedTalents.length} move={(from, to) => setTalents(moveItem(orderedTalents, from, to).map((item, priority) => ({ ...item, priority: priority + 1 })))} /></CardAction></CardHeader><CardContent><Field><FieldLabel>ระดับเป้าหมาย</FieldLabel><Input value={talent.level ?? ""} placeholder="เช่น 9+" onChange={(event) => setTalents(talents.map((item) => item.type === talent.type ? { ...item, level: event.target.value } : item))} /></Field></CardContent></Card>; })}</FieldSet><Field><FieldLabel htmlFor="artifact-note">Note (optional)</FieldLabel><Textarea id="artifact-note" value={note} onChange={(event) => setNote(event.target.value)} /></Field></FieldGroup></CardContent>
|
||||
<CardFooter className="justify-end"><AutosaveStatus state={autosave} /></CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user