feat: unify toast styles and add quest/milestone toast notifications

- Merge .codex-toast and .achievement-toast into a single .game-toast class - Fix storyToast inner class names and replace <button> wrapper with <div> - Add QuestCompleteToast and QuestFailedToast components - Add MilestoneToast for prestige, transcendence, and apotheosis events - Move shared toast container to gameLayout so all toasts stack in one column - Wire quest detection in GameContext to store full Quest objects for toast names - Trigger prestige toast from both auto-prestige and manual prestige panel
2026-03-08 18:47:42 -07:00
parent 290c06de83
commit f9c925b9fc
10 changed files with 380 additions and 47 deletions
@@ -0,0 +1,113 @@
+/**
+ * @file Quest toast notification component for completed and failed quests.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable react/no-multi-comp -- Sub-components are tightly coupled to their containers */
+import { type JSX, useEffect } from "react";
+import { useGame } from "../../context/gameContext.js";
+import type { Quest } from "@elysium/types";
+
+interface QuestToastItemProperties {
+  readonly quest:      Quest;
+  readonly onDismiss:  (id: string)=> void;
+  // eslint-disable-next-line react/require-default-props -- Default value set in destructuring
+  readonly isFailure?: boolean;
+}
+
+/**
+ * Renders a single quest toast notification.
+ * @param props - The toast item properties.
+ * @param props.quest - The quest to display.
+ * @param props.onDismiss - Callback to dismiss the toast.
+ * @param props.isFailure - Whether this is a failure toast.
+ * @returns The JSX element.
+ */
+const QuestToastItem = ({
+  quest,
+  onDismiss,
+  isFailure = false,
+}: QuestToastItemProperties): JSX.Element => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onDismiss(quest.id);
+    }, 4000);
+    return (): void => {
+      clearTimeout(timer);
+    };
+  }, [ quest.id, onDismiss ]);
+
+  function handleClick(): void {
+    onDismiss(quest.id);
+  }
+
+  return (
+    <div className="game-toast" onClick={handleClick}>
+      <span className="toast-icon">{isFailure
+        ? "💀"
+        : "📜"}</span>
+      <div className="toast-content">
+        <span className="toast-label">{isFailure
+          ? "Quest Failed!"
+          : "✨ Quest Complete!"}</span>
+        <span className="toast-name">{quest.name}</span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Renders the quest complete toast container.
+ * @returns The JSX element or null if there are no pending quest toasts.
+ */
+const QuestCompleteToast = (): JSX.Element | null => {
+  const { completedQuestToasts, dismissCompletedQuest } = useGame();
+
+  if (completedQuestToasts.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {completedQuestToasts.map((quest) => {
+        return (
+          <QuestToastItem
+            key={quest.id}
+            onDismiss={dismissCompletedQuest}
+            quest={quest}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+/**
+ * Renders the quest failed toast container.
+ * @returns The JSX element or null if there are no pending failure toasts.
+ */
+const QuestFailedToast = (): JSX.Element | null => {
+  const { failedQuestToasts, dismissFailedQuest } = useGame();
+
+  if (failedQuestToasts.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {failedQuestToasts.map((quest) => {
+        return (
+          <QuestToastItem
+            isFailure={true}
+            key={quest.id}
+            onDismiss={dismissFailedQuest}
+            quest={quest}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export { QuestCompleteToast, QuestFailedToast };