◉ ADMIN CRASH
{String(this.state.error?.stack || this.state.error?.message || this.state.error)}
{this.state.info?.componentStack && (
<>
COMPONENT STACK
{this.state.info.componentStack}
)}
);
}
return this.props.children;
}
}
function App() {
const [view, setView] = React.useState("room");
const [selectedChapter, setSelectedChapter] = React.useState(null);
const [selectedArc, setSelectedArc] = React.useState(null);
const [galleryInitialId, setGalleryInitialId] = React.useState(null);
const [tweaksOn, setTweaksOn] = React.useState(false);
const [vhsCount, setVhsCount] = React.useState(TWEAK_DEFAULTS.vhsCount);
const [readIds, setReadIds] = React.useState(() => loadReadCache());
// TV menu auth state. Initial value reads localStorage cache so the UI doesn't
// flicker on reload; the useEffect below verifies against the server (Supabase
// session cookie) and corrects the state if the cache is stale.
const [user, setUser] = React.useState(() => loadUser());
const [tvScreen, setTvScreen] = React.useState(() => (loadUser() ? "home" : "start"));
React.useEffect(() => {
if (typeof window.refreshUser !== "function") return;
window.refreshUser().then((serverUser) => {
if (JSON.stringify(serverUser) !== JSON.stringify(user)) {
setUser(serverUser);
setTvScreen(serverUser ? "home" : "start");
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// When user logs in → fetch read ids from server. Logged out → clear.
React.useEffect(() => {
if (!user) {
setReadIds(new Set());
saveReadCache(new Set());
try {
localStorage.removeItem("trooper_user_cards_cache_v3");
localStorage.removeItem("trooper_novel_cache_v3");
} catch (e) {}
} else {
fetchReadIds().then((set) => setReadIds(set));
}
// Tell card/novel hooks to refresh from server too.
window.dispatchEvent(new CustomEvent("trooper:user-changed"));
}, [user?.handle]);
// Toast for card-add errors (so we don't silently lose drops in production).
const [cardError, setCardError] = React.useState(null);
React.useEffect(() => {
const onErr = (e) => {
const msg = e?.detail?.errorMsg || "Error guardando carta";
setCardError(msg);
setTimeout(() => setCardError(null), 8000);
};
window.addEventListener("trooper:card-error", onErr);
return () => window.removeEventListener("trooper:card-error", onErr);
}, []);
// Admin mode toggle: "lector" | "admin" — only visible when user.isAdmin
const [adminMode, setAdminMode] = React.useState("lector");
// Card system state
const [novelStore] = window.NovelStore.useNovelStore();
const userCards = window.CardSystem.useUserCards();
const [albumOpen, setAlbumOpen] = React.useState(false);
const [dropQueue, setDropQueue] = React.useState([]);
// Defensive: refresca user cards y novel store al togglear EDITOR↔LECTOR
// por si quedó algún listener desincronizado tras los remounts.
const adminModeMountedRef = React.useRef(false);
React.useEffect(() => {
if (!adminModeMountedRef.current) {
adminModeMountedRef.current = true;
return;
}
window.dispatchEvent(new CustomEvent("trooper:user-changed"));
}, [adminMode]);
const allCards = novelStore.cards || [];
// Solo cuenta entradas que aún apuntan a una carta existente (evita huérfanos
// de user_cards cuando una carta fue borrada vía admin antes del cascade).
const ownedCount = allCards.filter(c => userCards[c.id]).length;
// Clear admin mode when logging out
React.useEffect(() => {
if (!user?.isAdmin) setAdminMode("lector");
}, [user]);
// When the user logs out, return to the room view
React.useEffect(() => {
if (!user) {
setView("room");
setGalleryInitialId(null);
setSelectedChapter(null);
setSelectedArc(null);
}
}, [user]);
const markRead = (chapterId) => {
setReadIds(prev => {
if (prev.has(chapterId)) return prev;
const next = new Set(prev);
next.add(chapterId);
saveReadCache(next);
postReadId(chapterId);
return next;
});
};
React.useEffect(() => {
const onMsg = (e) => {
const d = e.data || {};
if (d.type === "__activate_edit_mode") setTweaksOn(true);
if (d.type === "__deactivate_edit_mode") setTweaksOn(false);
};
window.addEventListener("message", onMsg);
window.parent.postMessage({ type: "__edit_mode_available" }, "*");
return () => window.removeEventListener("message", onMsg);
}, []);
const updateVhsCount = (n) => {
setVhsCount(n);
window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { vhsCount: n } }, "*");
};
const openGallery = (id) => {
setGalleryInitialId(id);
setView("gallery");
};
const closeGallery = () => {
setView("room");
setGalleryInitialId(null);
};
// Solo transición visual al lector. La lógica de "marcar leído + dropear cartas"
// ahora vive en handleScrolledToBottom — se dispara cuando el usuario llega al
// final del capítulo, no al abrirlo.
const startRead = (chapter, arc) => {
setSelectedChapter(chapter);
setSelectedArc(arc);
setView("zooming");
setTimeout(() => setView("reader"), 1200);
};
// Llamado por el Reader cuando el scroll llega al fondo del capítulo (o el
// contenido entra completo en pantalla sin necesidad de scroll). Solo dispara
// drops la PRIMERA vez que el cap se completa.
const handleScrolledToBottom = (chapter, arc) => {
if (!chapter || !arc) return;
const wasRead = readIds.has(chapter.id);
markRead(chapter.id);
if (wasRead) return;
const cards = novelStore.cards || [];
const drops = window.CardSystem.evaluateChapterDrops(cards, arc.id, chapter.id);
const arcAfter = (novelStore.arcs || []).find(a => String(a.id) === String(arc.id));
const allChapterIds = (arcAfter?.chapters || []).map(c => c.id);
const newReadSet = new Set([...readIds, chapter.id]);
const arcComplete = allChapterIds.length > 0 && allChapterIds.every(id => newReadSet.has(id));
const arcDrops = arcComplete ? window.CardSystem.evaluateArcDrops(cards, arc.id) : [];
const all = [...drops, ...arcDrops];
if (all.length) {
const queue = all.map(c => {
const isDup = !!userCards[c.id];
window.CardSystem.addCardToCollection(c.id);
return { ...c, _duplicate: isDup };
});
setDropQueue(queue);
}
};
// Compute the "next chapter" (in the same arc, or first chapter of the next
// arc) based on the reader-filtered arc list (so we never offer to navigate
// to an unwritten chapter).
const computeNext = (chapter, arc) => {
if (!chapter || !arc) return null;
const filtered = window.NovelStore.filterForReader(novelStore);
const arcIdx = filtered.findIndex(a => String(a.id) === String(arc.id));
if (arcIdx === -1) return null;
const cur = filtered[arcIdx];
const chIdx = cur.chapters.findIndex(c => String(c.id) === String(chapter.id));
if (chIdx === -1) return null;
if (chIdx + 1 < cur.chapters.length) {
return { chapter: cur.chapters[chIdx + 1], arc: cur, sameArc: true };
}
if (arcIdx + 1 < filtered.length) {
const nextArc = filtered[arcIdx + 1];
if (nextArc.chapters.length) {
return { chapter: nextArc.chapters[0], arc: nextArc, sameArc: false };
}
}
return null;
};
// Compute the previous chapter (in same arc, or last chapter of the previous
// arc), mirroring computeNext.
const computePrevious = (chapter, arc) => {
if (!chapter || !arc) return null;
const filtered = window.NovelStore.filterForReader(novelStore);
const arcIdx = filtered.findIndex(a => String(a.id) === String(arc.id));
if (arcIdx === -1) return null;
const cur = filtered[arcIdx];
const chIdx = cur.chapters.findIndex(c => String(c.id) === String(chapter.id));
if (chIdx === -1) return null;
if (chIdx > 0) {
return { chapter: cur.chapters[chIdx - 1], arc: cur, sameArc: true };
}
if (arcIdx > 0) {
const prevArc = filtered[arcIdx - 1];
if (prevArc.chapters.length) {
return {
chapter: prevArc.chapters[prevArc.chapters.length - 1],
arc: prevArc,
sameArc: false,
};
}
}
return null;
};
// Swap chapter in the open reader (no zoom transition).
const swapChapter = (chapter, arc) => {
setSelectedChapter(chapter);
setSelectedArc(arc);
};
// closeReader regresa a la galería (no al cuarto), preservando el arco
// actual como inicial pa' que la galería abra enfocada en él. La galería
// mantiene su propio estado interno (vista ARCOS / LÍNEA DE TIEMPO).
const closeReader = () => {
const arcId = selectedArc?.id ?? galleryInitialId;
setSelectedChapter(null);
setSelectedArc(null);
setGalleryInitialId(arcId);
setView("gallery");
};
const next = computeNext(selectedChapter, selectedArc);
const previous = computePrevious(selectedChapter, selectedArc);
return (