generated from nhcarrigan/template
hikari
f9c925b9fc
- 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
114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
/**
|
|
* @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 };
|