0 ? assetUrl(getBandSmallIconUrl(chapter.bandId)) : "";
+ const start = section === "event" ? formatMasterDay(chapter.startAt, locale, timeZone) : "";
+ const end = section === "event" && chapter.endAt ? formatMasterDay(chapter.endAt, locale, timeZone) : "";
+ const dates = start && end
+ ? t(locale, "schedule.range", { start, end })
+ : start
+ ? t(locale, "schedule.from", { start })
+ : "";
+
+ return (
+
+
+
+ {section === "event" && (
+
+
+
+ )}
+
+
+ {chapter.eventId !== null && (
+
#{chapter.eventId}
+ )}
+ {bandIcon ? (
+
+ 
+ {bandLabel}
+
+ ) : bandLabel ? (
+
{bandLabel}
+ ) : null}
+
+
{chapter.name}
+ {chapter.description &&
{chapter.description}
}
+ {dates && (
+
+
+ {dates}
+
+ )}
+
+ );
+}
diff --git a/src/components/story/ChapterDetail.tsx b/src/components/story/ChapterDetail.tsx
new file mode 100644
index 00000000..4b33723a
--- /dev/null
+++ b/src/components/story/ChapterDetail.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import type { AppLocale } from "@/config/locales";
+import { t } from "@/i18n";
+import { localizePath } from "@/i18n/routing";
+import { getAssetUrl } from "@/lib/assets/url";
+import { useAssetUrl } from "@/lib/servers/use-content-server";
+import type { StoryChapterSummary } from "@/lib/story/chapters";
+import { formatPlayTime, storyEpisodeLabel } from "@/lib/story/labels";
+import { storyPath } from "@/lib/story/paths";
+import BannerImage from "@/components/shared/BannerImage";
+
+/**
+ * One chapter as its own page: the banner, the chapter's copy and its main/another/extra episode runs. This is the
+ * view the story list used to show inline, before its cards opened a chapter page.
+ */
+export default function ChapterDetail({ chapter, locale }: { chapter: StoryChapterSummary; locale: AppLocale }) {
+ const assetUrl = useAssetUrl();
+ const chapterArt = chapter.banner || chapter.image
+ ? getAssetUrl({ path: `Story/${chapter.banner ? "Banner" : "Image"}/Chapter/${chapter.banner || chapter.image}.png`, type: "raw", locale })
+ : "";
+
+ return (
+
+
+ {chapterArt &&
}
+
+
{chapter.bandName}
+
{chapter.name}
+ {chapter.description &&
{chapter.description}
}
+ {chapter.characterNames.length > 0 &&
{chapter.characterNames.join(" · ")}
}
+
{t(locale, "story.ui.episodeCount", { count: chapter.episodeCount })}
+
+
+ {chapter.runs.map((run) => (
+
+ {run.kind !== "main" &&
{t(locale, run.kind === "another" ? "story.ui.anotherStories" : "story.ui.extraStories")}
}
+ {/* Columns as wide as a banner and a title need, however narrow the content column is. */}
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/story/StoryChapterPage.tsx b/src/components/story/StoryChapterPage.tsx
new file mode 100644
index 00000000..d9beec9e
--- /dev/null
+++ b/src/components/story/StoryChapterPage.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useMemo } from "react";
+import type { AppLocale } from "@/config/locales";
+import type { GameServer } from "@/config/servers";
+import ChapterDetail from "@/components/story/ChapterDetail";
+import ServerScope from "@/components/shared/ServerScope";
+import { forServer, type ServerFaceted } from "@/lib/servers/facets";
+import { useContentServer } from "@/lib/servers/use-content-server";
+import { groupStoryChapters } from "@/lib/story/chapters";
+import type { StoryViewModel } from "@/lib/story/data";
+
+/** A chapter page: the chapter's episodes as the reader's server has them, and the server switch above them. */
+export default function StoryChapterPage({
+ locale,
+ servers,
+ initialStories,
+ chapterId,
+}: {
+ locale: AppLocale;
+ servers: GameServer[];
+ initialStories: ServerFaceted
[];
+ chapterId: number;
+}) {
+ const [server, pickServer] = useContentServer(locale, servers);
+ const stories = useMemo(() => initialStories.map((story) => forServer(story, server)), [initialStories, server]);
+ const chapter = useMemo(() => groupStoryChapters(stories).find((entry) => entry.chapterId === chapterId) ?? null, [stories, chapterId]);
+ const entityServers = useMemo(() => [...new Set(initialStories.flatMap((story) => story.servers))], [initialStories]);
+
+ return (
+
+ {chapter && }
+
+ );
+}
diff --git a/src/components/story/StoryExplorer.tsx b/src/components/story/StoryExplorer.tsx
index ff3e4191..5d94d2bb 100644
--- a/src/components/story/StoryExplorer.tsx
+++ b/src/components/story/StoryExplorer.tsx
@@ -2,7 +2,7 @@
import SiriusLoader from "@/components/shared/SiriusLoader";
import { useListSort } from "@/lib/filter/use-list-sort";
-import { sortEntries, type ListSort } from "@/lib/filter/list-sort";
+import { sortEntries } from "@/lib/filter/list-sort";
import { useEffect, useMemo, useState } from "react";
import type { AppLocale } from "@/config/locales";
import type { GameServer } from "@/config/servers";
@@ -10,7 +10,7 @@ import ServerScope from "@/components/shared/ServerScope";
import { serverReleaseFetcher } from "@/lib/assets/release";
import type { ServerFaceted } from "@/lib/servers/facets";
import { useAssetUrl, useContentServerScope, useServerList } from "@/lib/servers/use-content-server";
-import BaseFilters, { CharacterFilter, FilterButton, FilterSection } from "@/components/shared/BaseFilters";
+import BaseFilters, { BandFilter, CharacterFilter, FilterButton, FilterSection } from "@/components/shared/BaseFilters";
import CharacterAvatarStack from "@/components/shared/CharacterAvatarStack";
import CollectionViewSwitch, { useCollectionView } from "@/components/shared/CollectionViewSwitch";
import DataTable, { type DataTableColumn } from "@/components/shared/DataTable";
@@ -19,10 +19,12 @@ import { useDisplayTimeZone } from "@/lib/schedule/use-display-time-zone";
import { storyPath } from "@/lib/story/paths";
import { useQuickFilter } from "@/lib/filter/use-quick-filter";
import Modal from "@/components/shared/Modal";
+import ChapterCard from "@/components/story/ChapterCard";
import StoryScriptReader from "@/components/story/StoryScriptReader";
import StoryPlayerLink from "@/components/story/StoryPlayerLink";
import { getAssetUrl } from "@/lib/assets/url";
import { fetchAndParseStory, type ParsedStoryScript } from "@/lib/story/parser";
+import { groupStoryChapters, type StoryChapterSummary } from "@/lib/story/chapters";
import type { RawStoryCharacter, StoryCategory, StoryViewModel } from "@/lib/story/data";
import type { RawText } from "@/lib/cards/data";
import { t } from "@/i18n";
@@ -31,7 +33,7 @@ import { formatPlayTime, storyEpisodeLabel } from "@/lib/story/labels";
import { useNow } from "@/lib/schedule/use-now";
import { isSpoiler, useSpoiler } from "@/lib/settings/spoiler";
-import { inStorySection, OTHER_CATEGORIES, storyCategoryKey, type StorySection } from "@/lib/story/sections";
+import { inStorySection, OTHER_CATEGORIES, storyCategoryKey, type StoryChapterSection, type StorySection } from "@/lib/story/sections";
export { inStorySection, storyCategoryKey, type StorySection };
@@ -39,11 +41,13 @@ const LIST_VIEWS = ["grid", "table"] as const;
type ListView = typeof LIST_VIEWS[number];
const PLAY_TIME_SORT = [{ key: "playTime", labelKey: "story.ui.playTime", initialDirection: "desc" as const }];
-export default function StoryExplorer({ locale, servers, initialCategory, initialStories, initialCharacters, initialTexts }: { locale: AppLocale; servers: GameServer[]; initialCategory: StorySection; initialStories: ServerFaceted[]; initialCharacters: RawStoryCharacter[]; initialTexts: RawText[] }) {
+export default function StoryExplorer({ locale, servers, bands, initialCategory, initialStories, initialCharacters, initialTexts }: { locale: AppLocale; servers: GameServer[]; bands: Array<[number, string]>; initialCategory: StorySection; initialStories: ServerFaceted[]; initialCharacters: RawStoryCharacter[]; initialTexts: RawText[] }) {
const sort = useListSort(`story-${initialCategory}`, locale, "date", { numeric: PLAY_TIME_SORT });
const { server, pickServer, items: stories } = useServerList(locale, servers, initialStories);
const [query, setQuery] = useState("");
const [otherCategories, setOtherCategories] = useState([]);
+ // Event stories filter by their band; a chapter without one (a mixed event) takes the "mixed" option, id 0.
+ const [eventBandsFilter, setEventBandsFilter] = useState([]);
// Bond stories: the pair's lead and partner (either order) and the bond level that unlocks the episode.
const [lead, setLead] = useState(null);
const [partner, setPartner] = useState(null);
@@ -53,7 +57,7 @@ export default function StoryExplorer({ locale, servers, initialCategory, initia
const error = false;
const [, setReload] = useState(0);
const [active, setActive] = useState(null);
- const characters = initialCharacters;
+ const rawCharacters = initialCharacters;
const texts = initialTexts;
const now = useNow();
@@ -93,9 +97,26 @@ export default function StoryExplorer({ locale, servers, initialCategory, initia
() => (sort.value === "default" && initialCategory !== "main" ? [...filtered].sort(compareByStartDesc) : sortEntries(filtered, sort.value, locale)),
[filtered, sort.value, locale, initialCategory],
);
- const reset = () => { sort.onChange("default"); setQuery(""); setOtherCategories([]); setLead(null); setPartner(null); setLevels([]); };
- const categoryTotal = sectionStories.length;
- const hasActive = sort.value !== "default" || Boolean(query || otherCategories.length || lead !== null || partner !== null || levels.length);
+ // Main and event stories are browsed by chapter: the list shows one card per chapter, the chapter's own page its episodes.
+ const chapters = useMemo(() => groupStoryChapters(sectionStories), [sectionStories]);
+ // The event filter lists every band of the build; a chapter without one belongs to a mixed event.
+ const hasMixedEvents = useMemo(() => chapters.some((chapter) => chapter.bandId === 0), [chapters]);
+ const filteredChapters = useMemo(() => {
+ const needle = query.trim().toLocaleLowerCase();
+ return chapters.filter((chapter) => {
+ if (needle && !chapter.searchText.includes(needle)) return false;
+ if (eventBandsFilter.length > 0 && !eventBandsFilter.includes(chapter.bandId)) return false;
+ return true;
+ });
+ }, [chapters, query, eventBandsFilter]);
+ const sortedChapters = useMemo(() => {
+ const entries = filteredChapters.map((chapter) => ({ ...chapter, id: chapter.chapterId }));
+ return sort.value === "default" && initialCategory !== "main" ? [...entries].sort(compareByStartDesc) : sortEntries(entries, sort.value, locale);
+ }, [filteredChapters, sort.value, locale, initialCategory]);
+ const reset = () => { sort.onChange("default"); setQuery(""); setOtherCategories([]); setEventBandsFilter([]); setLead(null); setPartner(null); setLevels([]); };
+ const resultCount = initialCategory === "event" ? filteredChapters.length : filtered.length;
+ const categoryTotal = initialCategory === "event" ? chapters.length : sectionStories.length;
+ const hasActive = sort.value !== "default" || Boolean(query || otherCategories.length || eventBandsFilter.length || lead !== null || partner !== null || levels.length);
const quickFilterContent = hasFilters ? (
)}
+ ) : initialCategory === "event" ? (
+ bands.length > 0 && (
+
+ )
) : (
)}
@@ -174,7 +205,7 @@ export default function StoryExplorer({ locale, servers, initialCategory, initia
useQuickFilter(
t(locale, storyCategoryKey(initialCategory)),
quickFilterContent,
- [initialCategory, query, otherCategories, lead, partner, levels, pairCharacters, partners, friendshipLevels, filtered.length, categoryTotal, locale, sort.value],
+ [initialCategory, query, otherCategories, eventBandsFilter, bands, hasMixedEvents, lead, partner, levels, pairCharacters, partners, friendshipLevels, resultCount, categoryTotal, locale, sort.value],
);
if (initialCategory === "main") {
@@ -182,19 +213,19 @@ export default function StoryExplorer({ locale, servers, initialCategory, initia
if (error) return setReload((v) => v + 1)} />;
return (
-
+
);
}
- // Event stories are chapters too: listed by chapter, the filters and sort applying to the chapters.
+ // Event stories are chapters too: one card per event, the filters and sort applying to the chapters.
if (initialCategory === "event") {
return (
- {filtered.length === 0
+ {filteredChapters.length === 0
?
- : }
+ : }
);
@@ -223,60 +254,21 @@ export default function StoryExplorer({ locale, servers, initialCategory, initia