const storybookFoundation = window.SpaceExplorerFoundation || {};
const storybookSafeArray = storybookFoundation.safeArray || ((value) =>
Array.isArray(value) ? value : []);
function normalizeStoryBookId(bookId) {
return String(bookId || "").trim();
}
function storyProgressKey(bookId) {
return "planets_story_progress_" + normalizeStoryBookId(bookId);
}
function storyPageCount(pagesOrLength) {
const pagesLength = Array.isArray(pagesOrLength)
? pagesOrLength.length
: Number(pagesOrLength);
return Number.isFinite(pagesLength) ? Math.max(0, Math.trunc(pagesLength)) : 0;
}
function storyBookExists(bookId) {
const normalizedBookId = normalizeStoryBookId(bookId);
return Boolean(normalizedBookId && STORYBOOKS[normalizedBookId]);
}
function resolveStoryBookId(bookId) {
const normalizedBookId = normalizeStoryBookId(bookId);
if (storyBookExists(normalizedBookId)) return normalizedBookId;
const firstShelfBookId = storybookSafeArray(STORY_SHELF_ORDER)
.map(normalizeStoryBookId)
.find(storyBookExists);
return storyBookExists("starHome") ? "starHome" : firstShelfBookId || "";
}
function storyBookFor(bookId) {
return STORYBOOKS[resolveStoryBookId(bookId)] || null;
}
function storyBookFallbackNotice(requestedBookId, resolvedBookId) {
const normalizedRequestedId = normalizeStoryBookId(requestedBookId);
return normalizedRequestedId && normalizedRequestedId !== resolvedBookId
? "That book floated away, so we opened another story."
: "";
}
function normalizeStoryClassToken(value, fallback = "star-home") {
const normalized = String(value || fallback)
.trim()
.toLowerCase()
.replace(/[^a-z0-9_-]+/g, "-")
.replace(/^-+|-+$/g, "");
return normalized || fallback;
}
function isStoryPage(page) {
return Boolean(
page &&
(String(page.text || "").trim() ||
String(page.image || "").trim() ||
String(page.audio || "").trim()),
);
}
function normalizeStoryPage(page) {
return {
...page,
text: String(page.text || "").trim(),
image: String(page.image || "").trim(),
audio: String(page.audio || "").trim(),
};
}
function normalizeStoryWord(word) {
if (typeof word === "string") {
const label = word.trim();
return label ? { label, audio: "" } : null;
}
if (!word || typeof word !== "object") return null;
const label = String(word.label || word.text || "").trim();
const audio = String(word.audio || "").trim();
return label ? { label, audio } : null;
}
function storyWordsForPage(page) {
return storybookSafeArray(page && page.words)
.map(normalizeStoryWord)
.filter(Boolean);
}
function storyPagesFor(story) {
return storybookSafeArray(story && story.pages)
.filter(isStoryPage)
.map(normalizeStoryPage);
}
function clampStoryPage(page, pagesLength) {
const pageCount = storyPageCount(pagesLength);
if (!pageCount) return 0;
const numericPage = Number(page);
const nextPage = Number.isFinite(numericPage) ? Math.trunc(numericPage) : 0;
return Math.max(0, Math.min(pageCount - 1, nextPage));
}
function normalizeStoryProgress(page, pagesOrLength) {
return clampStoryPage(page, storyPageCount(pagesOrLength));
}
function nextStoryPage(page, step, pagesOrLength) {
const numericStep = Number(step);
const safeStep = Number.isFinite(numericStep) ? Math.trunc(numericStep) : 0;
return normalizeStoryProgress(Number(page) + safeStep, pagesOrLength);
}
function storyCoverFor(story, pages) {
const safePages = storybookSafeArray(pages);
return (story && story.coverImage) || (safePages[0] && safePages[0].image) || "";
}
function storyShelfStatus(pages, resumePage) {
const pageCount = storyPageCount(storybookSafeArray(pages));
const safeResumePage = normalizeStoryProgress(resumePage, pageCount);
if (!pageCount) return "Loading";
if (safeResumePage === pageCount - 1) return "Finished";
if (safeResumePage > 0) return `Resume page ${safeResumePage + 1}`;
return `${pageCount} pages`;
}
function readStoryProgress(bookId, maxPages) {
const pageCount = storyPageCount(maxPages);
const normalizedBookId = normalizeStoryBookId(bookId);
if (!normalizedBookId || !pageCount) return 0;
return readStorageInt(storyProgressKey(normalizedBookId), 0, 0, pageCount - 1);
}
function writeStoryProgress(bookId, page, pagesOrLength) {
const normalizedBookId = normalizeStoryBookId(bookId);
const pageCount = storyPageCount(pagesOrLength);
if (!normalizedBookId || !pageCount) return 0;
const safePage = normalizeStoryProgress(page, pageCount);
writeStorageValue(storyProgressKey(normalizedBookId), String(safePage));
return safePage;
}
function storyShelfBooks() {
return storybookSafeArray(STORY_SHELF_ORDER)
.map(normalizeStoryBookId)
.filter(storyBookExists)
.map((id) => {
const story = STORYBOOKS[id];
const pages = storyPagesFor(story);
const coverImage = storyCoverFor(story, pages);
const resumePage = readStoryProgress(id, storyPageCount(pages));
return { id, story, pages, coverImage, resumePage };
});
}
function StoryBookPage({ book, onExit, onShelf }) {
const requestedBookId = book;
const bookId = resolveStoryBookId(book);
const story = storyBookFor(bookId);
const pages = storyPagesFor(story);
const [isOpening, setIsOpening] = useState(true);
const [page, setPage] = useState(() =>
readStoryProgress(bookId, pages.length),
);
const current = pages[page] || pages[0];
const wordButtons = storyWordsForPage(current);
const bookClass = normalizeStoryClassToken(story && story.imageShape);
const hasAudio = hasNarrationClip(current && current.audio);
const fallbackNotice = storyBookFallbackNotice(requestedBookId, bookId);
const pageCue =
page === 0
? "First page"
: page === pages.length - 1
? "The end"
: "Keep going";
const bigNextLabel =
page === pages.length - 1
? "Read again"
: page === 0
? "Start turning"
: "Next page";
const storyComplete = pages.length > 0 && page === pages.length - 1;
const go = (step) => {
if (!pages.length) return;
setPage((p) => nextStoryPage(p, step, pages));
playKidSound("boop");
};
const goToPage = (nextPage) => {
if (!pages.length) return;
setPage(normalizeStoryProgress(nextPage, pages));
playKidSound("boop");
};
// Round-2 fix: track which bookId the current `page` state actually belongs
// to so the persistence effect doesn't write the previous book's page number
// into the newly-mounted book's key during the brief window between bookId
// changing and setPage(readStoryProgress(...)) committing. We update the ref
// only after `page` has been resynced to match the new bookId — which we
// detect by comparing the post-render page against the freshly-loaded value.
const persistedBookRef = useRef(bookId);
useEffect(() => {
const restoredPage = readStoryProgress(bookId, pages.length);
setPage(restoredPage);
setIsOpening(true);
const timer = window.setTimeout(() => setIsOpening(false), 820);
return () => window.clearTimeout(timer);
}, [bookId, pages.length]);
useEffect(() => {
// Only persist once the in-state `page` is known to belong to the current
// bookId. The first render after a bookId switch has the previous book's
// page still in state; skip that one. After setPage commits, this effect
// runs again with the correct page and bookId in sync.
if (persistedBookRef.current !== bookId) {
persistedBookRef.current = bookId;
return;
}
writeStoryProgress(bookId, page, pages);
}, [bookId, page, pages.length]);
useEffect(() => {
const nearbyPages = [pages[page + 1], pages[page - 1]];
nearbyPages.forEach((item) => {
if (!item || !item.image) return;
const image = new Image();
image.decoding = "async";
image.src = item.image;
});
}, [page, pages]);
// Auto-play this page's narration, but let the child turn pages.
// Stop any old clip immediately so the next page never speaks over stale audio.
useEffect(() => {
stopNarration();
if (!hasAudio) return stopNarration;
const timer = window.setTimeout(() => {
playNarration(current.audio);
}, STORY_NARRATION_DELAY_MS);
return () => {
window.clearTimeout(timer);
stopNarration();
};
}, [page, current && current.audio, hasAudio]);
useEffect(() => {
return stopNarration;
}, []);
// Round-3: Escape now flows through the shared escape-stack helper so
// App.jsx's base handler doesn't double-fire. Arrows/space/enter stay
// on a per-storybook listener since they're local to the page nav UI.
useEscapeHandler(onExit, true);
useWindowKeyHandler((e) => {
if (e.key === "ArrowRight" || e.key === " " || e.key === "Enter") {
e.preventDefault();
// Round-2 fix: keyboard parity with the bigNext button — wrap from the
// last page back to the first instead of soft-locking on the last page.
if (page === pages.length - 1) {
goToPage(0);
} else {
go(1);
}
} else if (e.key === "ArrowLeft") {
e.preventDefault();
go(-1);
}
});
const replay = () => {
if (hasAudio) playNarration(current.audio);
};
const returnToShelf = typeof onShelf === "function" ? onShelf : onExit;
if (!current) {
return (
{story ? "Story pages are loading." : "Story book is unavailable."}
{story
? "Pick another book and try this one again."
: "Return to the shelf and choose a different book."}