diff --git a/TODO.md b/TODO.md index cab226b..c3c3cdf 100644 --- a/TODO.md +++ b/TODO.md @@ -18,7 +18,7 @@ - [x] The back button on the admin page should go back to the active game, not the join screen -- [ ] Add a toast pop-up for new events entering the event log, that then fades into the event log button +- [x] Add a toast pop-up for new events entering the event log, that then fades into the event log button - [ ] When you get a gat, there should be a pop up to enter a description of it, as with your name diff --git a/frontend/src/components/EventLog.svelte b/frontend/src/components/EventLog.svelte index 1b66d09..6748d74 100644 --- a/frontend/src/components/EventLog.svelte +++ b/frontend/src/components/EventLog.svelte @@ -35,6 +35,11 @@ let atBottom = true; let error = ''; let timelineVersion = null; + // Toast that briefly previews a freshly-arrived event while the log is + // collapsed, then animates down into the Event Log button. + let toast = null; // { id, message, kind } + let initialized = false; // suppresses a toast flood on the first state load + // Rollback buttons appear during a scene, for Admins and Deep players (server-enforced too). $: canRollback = state.game?.phase === 'scene' @@ -57,20 +62,24 @@ // action from a rolled-back state truncates the abandoned future and bumps the // version, which tells us to drop what we'd accumulated and reseed. const version = state.game?.rollback_timeline_version ?? 0; + let reset = false; if (timelineVersion !== null && version !== timelineVersion) { events = []; seenIds = new Set(); + reset = true; } timelineVersion = version; if (events.length === 0) { haveMore = state.events_have_more ?? polled.length >= PAGE_SIZE; } let added = false; + let newest = null; for (const e of polled) { if (!seenIds.has(e.id)) { seenIds.add(e.id); events.push(e); added = true; + newest = e; } } if (added) { @@ -79,7 +88,20 @@ await tick(); scrollToBottom(); } + // Toast only for genuinely new events (not the initial seed or a + // rollback reseed) and only while the log is closed. + if (initialized && !reset && !open && newest) { + toast = { id: newest.id, message: newest.message, kind: newest.kind || 'info' }; + } } + initialized = true; + } + + // Opening the log makes the preview redundant. + $: if (open) toast = null; + + function clearToast(id) { + if (toast && toast.id === id) toast = null; } function scrollToBottom() { @@ -149,6 +171,19 @@