(DEFAULT_SORT);
+ const { set: expanded, toggle: toggleExpanded } = useToggleSet();
useEffect(() => {
+ const controller = new AbortController();
setLoading(true);
setError(null);
- Promise.all(quests.map((q) => fetchQuestData(eventId, q.questId)))
+ Promise.all(quests.map((q) => fetchQuestData(eventId, q.questId, controller.signal)))
.then((results) => setQuestData(results.filter((d): d is QuestData => d !== null)))
- .catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)))
- .finally(() => setLoading(false));
+ .catch((e: unknown) => {
+ if (e instanceof DOMException && e.name === "AbortError") return;
+ setError(e instanceof Error ? e.message : String(e));
+ })
+ .finally(() => {
+ if (!controller.signal.aborted) setLoading(false);
+ });
+ return () => controller.abort();
}, [eventId, quests]);
- if (loading) return 読み込み中...
;
- if (error) return エラー: {error}
;
-
- const toggleSort = (key: SortKey) => {
- setSort((prev) => {
- if (prev.key !== key) return { key, dir: "desc" };
- return { key, dir: prev.dir === "desc" ? "asc" : "desc" };
- });
- };
+ const rawRows = useMemo(() => aggregateReporters(questData, exclusions), [questData, exclusions]);
+ const rows = useMemo(() => sortRows(rawRows, sort), [rawRows, sort]);
- const rawRows = aggregateReporters(questData, exclusions);
- const rows = sortRows(rawRows, sort);
+ if (loading || error) return ;
const totalReporters = rows.length;
const totalReports = rows.reduce((s, r) => s + r.reportCount, 0);
const totalRuns = rows.reduce((s, r) => s + r.totalRuns, 0);
@@ -150,14 +169,7 @@ export function ReporterSummary({ eventId, quests, exclusions }: Props) {
|
{i + 1} |
- {r.xId && r.xId !== "anonymous" ? (
-
- {r.reporter}
-
- ) : (
- r.reporter
- )}
+
+ {r.reporter}
+
|
- {r.xId && r.xId !== "anonymous" ? (
-
- {r.xId}
-
- ) : (
- r.xId
- )}
+
+ {r.xId}
+
|
{r.reportCount.toLocaleString()} |
{r.totalRuns.toLocaleString()} |
diff --git a/viewer/src/components/SummaryTable.tsx b/viewer/src/components/SummaryTable.tsx
index a259366..858d0bb 100644
--- a/viewer/src/components/SummaryTable.tsx
+++ b/viewer/src/components/SummaryTable.tsx
@@ -1,3 +1,4 @@
+import { MAX_EVENT_BONUS } from "../constants";
import {
calcEventItemExpected,
classifyStats,
@@ -11,8 +12,6 @@ interface Props {
stats: ItemStats[];
}
-const MAX_EVENT_BONUS = 12;
-
function EventItemExpectedTable({ eventItems }: { eventItems: ItemStats[] }) {
const rows = calcEventItemExpected(eventItems);
if (rows.length === 0) return null;
diff --git a/viewer/src/constants.ts b/viewer/src/constants.ts
new file mode 100644
index 0000000..c4e6af6
--- /dev/null
+++ b/viewer/src/constants.ts
@@ -0,0 +1,11 @@
+/** イベントボーナスの最大値（+0〜+12） */
+export const MAX_EVENT_BONUS = 12;
+
+/** イベントアイテム例: "ミトン(x3)" */
+export const RE_EVENT_ITEM = /\(x(\d+)\)$/;
+
+/** ポイント例: "ポイント(+600)" */
+export const RE_POINT = /^ポイント\(\+(\d+)\)$/;
+
+/** QP例: "QP(+150000)" */
+export const RE_QP = /^QP\(\+(\d+)\)$/;
diff --git a/viewer/src/formatters.test.ts b/viewer/src/formatters.test.ts
index 32e1a31..8a14399 100644
--- a/viewer/src/formatters.test.ts
+++ b/viewer/src/formatters.test.ts
@@ -1,5 +1,12 @@
+import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, test } from "vitest";
-import { formatDateTime, formatPeriod, formatTimestamp } from "./formatters";
+import {
+ formatDateTime,
+ formatItemHeader,
+ formatNote,
+ formatPeriod,
+ formatTimestamp,
+} from "./formatters";
describe("formatDateTime", () => {
test("ISO 文字列を日本語ローカライズ形式に変換する", () => {
@@ -39,3 +46,44 @@ describe("formatPeriod", () => {
expect(result).toContain("2026");
});
});
+
+describe("formatNote", () => {
+ test("fgosccnt URL がなければ元の文字列を返す", () => {
+ expect(formatNote("メモなし")).toBe("メモなし");
+ });
+
+ test("fgosccnt URL をリンク化する", () => {
+ const url = "https://fgojunks.max747.org/fgosccnt/results/abc123";
+ const html = renderToStaticMarkup(formatNote(`結果: ${url} 以上`));
+ expect(html).toContain(`href="${url}"`);
+ expect(html).toContain("fgosccnt");
+ expect(html).toContain("結果: ");
+ expect(html).toContain(" 以上");
+ });
+
+ test("URL のみの場合でもリンク化する", () => {
+ const url = "https://fgojunks.max747.org/fgosccnt/results/xyz";
+ const html = renderToStaticMarkup(formatNote(url));
+ expect(html).toContain(`href="${url}"`);
+ });
+});
+
+describe("formatItemHeader", () => {
+ test("修飾子がなければ元の文字列を返す", () => {
+ expect(formatItemHeader("騎士の誓い")).toBe("騎士の誓い");
+ });
+
+ test("(xN) 修飾子を改行で区切る", () => {
+ const html = renderToStaticMarkup(formatItemHeader("ぐん肥(x3)"));
+ expect(html).toContain("ぐん肥");
+ expect(html).toContain("
");
+ expect(html).toContain("(x3)");
+ });
+
+ test("(+N) 修飾子を改行で区切る", () => {
+ const html = renderToStaticMarkup(formatItemHeader("ポイント(+600)"));
+ expect(html).toContain("ポイント");
+ expect(html).toContain("
");
+ expect(html).toContain("(+600)");
+ });
+});
diff --git a/viewer/src/formatters.ts b/viewer/src/formatters.ts
deleted file mode 100644
index 22229f6..0000000
--- a/viewer/src/formatters.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { EventPeriod } from "./types";
-
-export function formatDateTime(iso: string): string {
- const d = new Date(iso);
- return d.toLocaleString("ja-JP", {
- year: "numeric",
- month: "2-digit",
- day: "2-digit",
- hour: "2-digit",
- minute: "2-digit",
- timeZone: "Asia/Tokyo",
- });
-}
-
-export function formatTimestamp(iso: string): string {
- return new Date(iso).toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" });
-}
-
-export function formatPeriod(period: EventPeriod): string {
- return `${formatDateTime(period.start)} 〜 ${formatDateTime(period.end)}`;
-}
diff --git a/viewer/src/formatters.tsx b/viewer/src/formatters.tsx
new file mode 100644
index 0000000..26bab7b
--- /dev/null
+++ b/viewer/src/formatters.tsx
@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import type { EventPeriod } from "./types";
+
+const RE_FGOSCCNT = /https:\/\/fgojunks\.max747\.org\/fgosccnt\/results\/\S+/;
+const RE_MODIFIER = /(\((?:x|\+)\d+\))$/;
+
+/** メモ欄の fgosccnt URL をリンク化して返す */
+export function formatNote(note: string): ReactNode {
+ const m = RE_FGOSCCNT.exec(note);
+ if (!m) return note;
+ const before = note.slice(0, m.index);
+ const after = note.slice(m.index + m[0].length);
+ return (
+ <>
+ {before}
+
+ fgosccnt
+
+ {after}
+
+ );
+}
+
+/** アイテム名の修飾子部分（"(x3)" 等）を改行で区切って返す */
+export function formatItemHeader(name: string): ReactNode {
+ const m = RE_MODIFIER.exec(name);
+ if (!m) return name;
+ const base = name.slice(0, m.index);
+ return (
+ <>
+ {base}
+
+ {m[1]}
+
+ );
+}
+
+export function formatDateTime(iso: string): string {
+ const d = new Date(iso);
+ return d.toLocaleString("ja-JP", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: "2-digit",
+ minute: "2-digit",
+ timeZone: "Asia/Tokyo",
+ });
+}
+
+export function formatTimestamp(iso: string): string {
+ return new Date(iso).toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" });
+}
+
+export function formatPeriod(period: EventPeriod): string {
+ return `${formatDateTime(period.start)} 〜 ${formatDateTime(period.end)}`;
+}
diff --git a/viewer/src/hooks/useSortState.ts b/viewer/src/hooks/useSortState.ts
new file mode 100644
index 0000000..994530f
--- /dev/null
+++ b/viewer/src/hooks/useSortState.ts
@@ -0,0 +1,39 @@
+import { useCallback, useState } from "react";
+import type { SortDir } from "../types";
+
+/**
+ * null 許容のソート状態フック。
+ * 同キー押下で asc → desc → null とサイクルし、別キー押下で asc から開始する。
+ * ReportTable 向け。
+ */
+export function useSortState() {
+ const [sort, setSort] = useState<{ key: K; dir: SortDir } | null>(null);
+
+ const toggleSort = useCallback((key: K) => {
+ setSort((prev) => {
+ if (!prev || prev.key !== key) return { key, dir: "asc" };
+ if (prev.dir === "asc") return { key, dir: "desc" };
+ return null;
+ });
+ }, []);
+
+ return { sort, toggleSort };
+}
+
+/**
+ * 常にソート状態を維持するフック（null に戻らない）。
+ * 同キー押下で desc ↔ asc をトグルし、別キー押下で desc から開始する。
+ * ReporterSummary 向け。
+ */
+export function useFixedSortState(initial: { key: K; dir: SortDir }) {
+ const [sort, setSort] = useState(initial);
+
+ const toggleSort = useCallback((key: K) => {
+ setSort((prev) => {
+ if (prev.key !== key) return { key, dir: "desc" };
+ return { key, dir: prev.dir === "desc" ? "asc" : "desc" };
+ });
+ }, []);
+
+ return { sort, toggleSort };
+}
diff --git a/viewer/src/hooks/useToggleSet.ts b/viewer/src/hooks/useToggleSet.ts
new file mode 100644
index 0000000..c7d72d7
--- /dev/null
+++ b/viewer/src/hooks/useToggleSet.ts
@@ -0,0 +1,20 @@
+import { useCallback, useState } from "react";
+
+/**
+ * Set<string> のトグル管理フック。
+ * アコーディオン展開状態などに使用する。
+ */
+export function useToggleSet() {
+ const [set, setSet] = useState>(new Set());
+
+ const toggle = useCallback((item: string) => {
+ setSet((prev) => {
+ const next = new Set(prev);
+ if (next.has(item)) next.delete(item);
+ else next.add(item);
+ return next;
+ });
+ }, []);
+
+ return { set, toggle };
+}
diff --git a/viewer/src/main.tsx b/viewer/src/main.tsx
index 99f20a3..b0bd28c 100644
--- a/viewer/src/main.tsx
+++ b/viewer/src/main.tsx
@@ -1,6 +1,6 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
-import { Navigate, RouterProvider, createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
import { AppLayout } from "./AppLayout";
import { EventItemSummaryPage } from "./pages/EventItemSummaryPage";
import { EventRedirect } from "./pages/EventRedirect";
diff --git a/viewer/src/pages/EventItemSummaryPage.tsx b/viewer/src/pages/EventItemSummaryPage.tsx
index 4e2b27e..6c0d808 100644
--- a/viewer/src/pages/EventItemSummaryPage.tsx
+++ b/viewer/src/pages/EventItemSummaryPage.tsx
@@ -4,6 +4,8 @@ import type { LayoutContext } from "../AppLayout";
import { aggregate } from "../aggregate";
import { fetchQuestData } from "../api";
import { EventItemSummaryView, type QuestExpected } from "../components/EventItemSummaryView";
+import { LoadingError } from "../components/LoadingError";
+import { parseLevel } from "../routeUtils";
import { calcEventItemExpected, classifyStats } from "../summaryUtils";
export function EventItemSummaryPage() {
@@ -19,12 +21,17 @@ export function EventItemSummaryPage() {
useEffect(() => {
if (!event) return;
+ const controller = new AbortController();
setLoading(true);
setError(null);
- const sortedQuests = [...event.quests].sort((a, b) => Number(a.level) - Number(b.level));
+ const sortedQuests = [...event.quests].sort(
+ (a, b) => parseLevel(a.level) - parseLevel(b.level),
+ );
- Promise.all(sortedQuests.map((q) => fetchQuestData(event.eventId, q.questId)))
+ Promise.all(
+ sortedQuests.map((q) => fetchQuestData(event.eventId, q.questId, controller.signal)),
+ )
.then((results) => {
const qe: QuestExpected[] = [];
for (let i = 0; i < sortedQuests.length; i++) {
@@ -42,14 +49,19 @@ export function EventItemSummaryPage() {
}
setQuestExpected(qe);
})
- .catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)))
- .finally(() => setLoading(false));
+ .catch((e: unknown) => {
+ if (e instanceof DOMException && e.name === "AbortError") return;
+ setError(e instanceof Error ? e.message : String(e));
+ })
+ .finally(() => {
+ if (!controller.signal.aborted) setLoading(false);
+ });
+ return () => controller.abort();
}, [event, exclusions]);
if (!eventId) return null;
if (!event) return ;
- if (loading) return 読み込み中...
;
- if (error) return エラー: {error}
;
+ if (loading || error) return ;
return (
<>
diff --git a/viewer/src/reportTableUtils.test.ts b/viewer/src/reportTableUtils.test.ts
index b6b9198..068fab3 100644
--- a/viewer/src/reportTableUtils.test.ts
+++ b/viewer/src/reportTableUtils.test.ts
@@ -1,6 +1,6 @@
import { describe, expect, test } from "vitest";
-import { getReporterName, sortReports } from "./reportTableUtils";
import type { SortState } from "./reportTableUtils";
+import { getReporterName, sortReports } from "./reportTableUtils";
import type { Report } from "./types";
function makeReport(overrides: Partial = {}): Report {
diff --git a/viewer/src/reportTableUtils.ts b/viewer/src/reportTableUtils.ts
index 4b910d7..7e513ce 100644
--- a/viewer/src/reportTableUtils.ts
+++ b/viewer/src/reportTableUtils.ts
@@ -1,7 +1,6 @@
-import type { Report } from "./types";
+import type { Report, SortDir } from "./types";
export type SortKey = "reporter" | "runcount" | "timestamp";
-export type SortDir = "asc" | "desc";
export type SortState = { key: SortKey; dir: SortDir } | null;
export function getReporterName(r: Report): string {
diff --git a/viewer/src/reporterSummaryUtils.test.ts b/viewer/src/reporterSummaryUtils.test.ts
index 0b64243..54e2121 100644
--- a/viewer/src/reporterSummaryUtils.test.ts
+++ b/viewer/src/reporterSummaryUtils.test.ts
@@ -1,6 +1,6 @@
import { describe, expect, test } from "vitest";
-import { aggregateReporters, sortRows } from "./reporterSummaryUtils";
import type { ReporterRow, SortState } from "./reporterSummaryUtils";
+import { aggregateReporters, sortRows } from "./reporterSummaryUtils";
import type { ExclusionsMap, QuestData } from "./types";
function makeQuestData(
diff --git a/viewer/src/reporterSummaryUtils.ts b/viewer/src/reporterSummaryUtils.ts
index e890d51..0dac7c6 100644
--- a/viewer/src/reporterSummaryUtils.ts
+++ b/viewer/src/reporterSummaryUtils.ts
@@ -1,4 +1,4 @@
-import type { ExclusionsMap, QuestData } from "./types";
+import type { ExclusionsMap, QuestData, SortDir } from "./types";
export interface ReportDetail {
reportId: string;
@@ -17,7 +17,6 @@ export interface ReporterRow {
}
export type SortKey = "reportCount" | "totalRuns";
-export type SortDir = "asc" | "desc";
export type SortState = { key: SortKey; dir: SortDir };
export const DEFAULT_SORT: SortState = { key: "totalRuns", dir: "desc" };
diff --git a/viewer/src/routeUtils.test.ts b/viewer/src/routeUtils.test.ts
index 1e0d3fe..7c68c1b 100644
--- a/viewer/src/routeUtils.test.ts
+++ b/viewer/src/routeUtils.test.ts
@@ -60,11 +60,10 @@ describe("getHighestQuest", () => {
expect(getHighestQuest([mid, low, high])).toBe(high);
});
- it("90+ のような文字列レベルを正しく扱う", () => {
+ it("90+ は 90 より高いレベルとして扱う", () => {
const q90 = makeQuest("q90", "90");
const q90plus = makeQuest("q90+", "90+");
- // Number("90+") は NaN なので、ソート結果は実装依存だが壊れないことを確認
- expect(getHighestQuest([q90, q90plus])).toBeDefined();
+ expect(getHighestQuest([q90, q90plus])).toBe(q90plus);
});
it("元の配列を変更しない", () => {
diff --git a/viewer/src/routeUtils.ts b/viewer/src/routeUtils.ts
index b6d269a..6e2a703 100644
--- a/viewer/src/routeUtils.ts
+++ b/viewer/src/routeUtils.ts
@@ -6,8 +6,13 @@ export function getLatestEvent(events: EventData[]): EventData | undefined {
)[0];
}
+export function parseLevel(level: string): number {
+ const base = Number.parseInt(level, 10);
+ return level.endsWith("+") ? base + 0.5 : base;
+}
+
export function getHighestQuest(quests: Quest[]): Quest | undefined {
if (quests.length === 0) return undefined;
- const sorted = [...quests].sort((a, b) => Number(a.level) - Number(b.level));
+ const sorted = [...quests].sort((a, b) => parseLevel(a.level) - parseLevel(b.level));
return sorted[sorted.length - 1];
}
diff --git a/viewer/src/summaryUtils.ts b/viewer/src/summaryUtils.ts
index 174f1d0..4883b6a 100644
--- a/viewer/src/summaryUtils.ts
+++ b/viewer/src/summaryUtils.ts
@@ -1,9 +1,6 @@
+import { RE_EVENT_ITEM, RE_POINT, RE_QP } from "./constants";
import type { ItemStats } from "./types";
-const RE_BOX_COUNT = /\(x(\d+)\)$/;
-const RE_QP_BONUS = /^QP\(\+(\d+)\)$/;
-const RE_POINT_BONUS = /^ポイント\(\+(\d+)\)$/;
-
export function classifyStats(stats: ItemStats[]) {
const normal: ItemStats[] = [];
const eventItems: ItemStats[] = [];
@@ -11,11 +8,11 @@ export function classifyStats(stats: ItemStats[]) {
const qp: ItemStats[] = [];
for (const s of stats) {
- if (RE_BOX_COUNT.test(s.itemName)) {
+ if (RE_EVENT_ITEM.test(s.itemName)) {
eventItems.push(s);
- } else if (RE_QP_BONUS.test(s.itemName)) {
+ } else if (RE_QP.test(s.itemName)) {
qp.push(s);
- } else if (RE_POINT_BONUS.test(s.itemName)) {
+ } else if (RE_POINT.test(s.itemName)) {
points.push(s);
} else {
normal.push(s);
@@ -26,19 +23,19 @@ export function classifyStats(stats: ItemStats[]) {
}
export function extractBaseName(name: string): string {
- const mBox = RE_BOX_COUNT.exec(name);
+ const mBox = RE_EVENT_ITEM.exec(name);
if (mBox) return name.slice(0, mBox.index);
- if (RE_POINT_BONUS.test(name)) return "ポイント";
- if (RE_QP_BONUS.test(name)) return "QP";
+ if (RE_POINT.test(name)) return "ポイント";
+ if (RE_QP.test(name)) return "QP";
return name;
}
export function extractModifier(name: string): number {
- const mBox = RE_BOX_COUNT.exec(name);
+ const mBox = RE_EVENT_ITEM.exec(name);
if (mBox) return Number.parseInt(mBox[1], 10);
- const mPoint = RE_POINT_BONUS.exec(name);
+ const mPoint = RE_POINT.exec(name);
if (mPoint) return Number.parseInt(mPoint[1], 10);
- const mQp = RE_QP_BONUS.exec(name);
+ const mQp = RE_QP.exec(name);
if (mQp) return Number.parseInt(mQp[1], 10);
return 0;
}
diff --git a/viewer/src/types.ts b/viewer/src/types.ts
index 88e3f84..420df5d 100644
--- a/viewer/src/types.ts
+++ b/viewer/src/types.ts
@@ -46,6 +46,8 @@ export interface Exclusion {
export type ExclusionsMap = Record;
+export type SortDir = "asc" | "desc";
+
export interface ItemStats {
itemName: string;
totalDrops: number;