Initial commit

components/automatic-action-notice.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { Bell, BellOff } from 'lucide-react';
+import { FACTIONS, type FactionId } from '@/game/catalog';
+import { Button } from './ui/button';
+
+export type AutomaticActionEvent = {
+  id: string;
+  seq: number;
+  faction: FactionId;
+  name: string;
+};
+
+const PREFERENCE_KEY = 'dune.automatic-action-notices';
+const PREFERENCE_EVENT = 'dune-automatic-action-notices-preference';
+const MAX_QUEUED_NOTICES = 250;
+let memoryPreference: boolean | undefined;
+function readPreference() {
+  if (memoryPreference !== undefined) return memoryPreference;
+  try {
+    return localStorage.getItem(PREFERENCE_KEY) !== 'false';
+  } catch {
+    return true;
+  }
+}
+function subscribePreference(listener: () => void) {
+  window.addEventListener(PREFERENCE_EVENT, listener);
+  return () => window.removeEventListener(PREFERENCE_EVENT, listener);
+}
+const serverPreference = () => true;
+
+/** Cosmetic feedback only. Supply public events with increasing, room-local sequences. */
+export function AutomaticActionNotice({
+  events,
+}: {
+  events: readonly AutomaticActionEvent[];
+}) {
+  const enabled = useSyncExternalStore(
+    subscribePreference,
+    readPreference,
+    serverPreference,
+  );
+  // The first snapshot establishes a baseline. Refreshing never replays history.
+  const seenSeq = useRef(
+    events.reduce((last, event) => Math.max(last, event.seq), -1),
+  );
+  const queue = useRef<AutomaticActionEvent[]>([]);
+  const active = useRef<AutomaticActionEvent | null>(null);
+  const [notice, setNotice] = useState<
+    (AutomaticActionEvent & { fading: boolean }) | null
+  >(null);
+  const [completed, setCompleted] = useState(0);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const clearTimers = useCallback(() => {
+    for (const timer of timers.current) clearTimeout(timer);
+    timers.current = [];
+  }, []);
+
+  const showNext = useCallback(() => {
+    if (active.current) return;
+    if (!readPreference()) {
+      queue.current = [];
+      return;
+    }
+    const next = queue.current.shift();
+    if (!next) return;
+    active.current = next;
+    clearTimers();
+    timers.current = [
+      setTimeout(() => {
+        setNotice({ ...next, fading: false });
+      }, 0),
+      setTimeout(() => {
+        setNotice((current) =>
+          current?.id === next.id ? { ...current, fading: true } : current,
+        );
+      }, 1250),
+      setTimeout(() => {
+        active.current = null;
+        setNotice(null);
+        setCompleted((count) => count + 1);
+      }, 1500),
+    ];
+  }, [clearTimers]);
+
+  useEffect(() => {
+    const fresh = events
+      .filter((event) => event.seq > seenSeq.current)
+      .toSorted((a, b) => a.seq - b.seq);
+    const additions: AutomaticActionEvent[] = [];
+    for (const event of fresh) {
+      if (event.seq <= seenSeq.current) continue;
+      seenSeq.current = event.seq;
+      additions.push(event);
+    }
+    // Disabled notices are consumed, so enabling cannot replay missed events.
+    if (!readPreference()) return;
+    const capacity = MAX_QUEUED_NOTICES - (active.current ? 1 : 0);
+    // Preserve the active notice and retain the newest pending events on overflow.
+    queue.current = [...queue.current, ...additions].slice(-capacity);
+    showNext();
+  }, [events, showNext, completed]);
+
+  useEffect(
+    () => () => {
+      clearTimers();
+      queue.current = [];
+      active.current = null;
+    },
+    [clearTimers],
+  );
+
+  const toggle = () => {
+    const next = !enabled;
+    memoryPreference = next;
+    clearTimers();
+    queue.current = [];
+    active.current = null;
+    setNotice(null);
+    try {
+      localStorage.setItem(PREFERENCE_KEY, String(next));
+      memoryPreference = undefined;
+    } catch {
+      // Do not turn a cosmetic preference into an error or blocking dialog.
+    }
+    window.dispatchEvent(new Event(PREFERENCE_EVENT));
+  };
+  const house = notice
+    ? FACTIONS.find((candidate) => candidate.id === notice.faction)
+    : undefined;
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="min-h-11 max-w-full whitespace-normal motion-reduce:transition-none"
+        aria-label="Automatic action notices"
+        aria-pressed={enabled}
+        onClick={toggle}
+      >
+        {enabled ? <Bell aria-hidden="true" /> : <BellOff aria-hidden="true" />}
+        Automatic action notices
+        <span aria-hidden="true">{enabled ? 'On' : 'Off'}</span>
+      </Button>
+      <output
+        aria-live="polite"
+        aria-atomic="true"
+        className="pointer-events-none fixed top-[max(1rem,env(safe-area-inset-top))] left-1/2 z-40 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2"
+      >
+        {enabled && notice && (
+          <span
+            className={`block rounded-xl border border-[#807456] border-l-4 bg-[#141814]/95 px-4 py-3 text-[#f5ecda] shadow-xl transition-opacity duration-250 motion-reduce:opacity-100 motion-reduce:transition-none ${notice.fading ? 'opacity-0' : 'opacity-100'}`}
+            style={{ borderLeftColor: house?.color ?? '#d4b77b' }}
+          >
+            <span
+              className="block text-xs font-semibold tracking-wider uppercase"
+              style={{ color: house?.color ?? '#d4b77b' }}
+            >
+              {house?.name ?? 'Automatic action'}
+            </span>
+            <span className="mt-1 block break-words text-sm font-medium leading-5">
+              {notice.name}
+            </span>
+          </span>
+        )}
+      </output>
+    </>
+  );
+}