generated from nhcarrigan/template
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
/**
|
|
* @file Modal prompting players to join the NHCarrigan Discord community.
|
|
* @copyright nhcarrigan
|
|
* @license Naomi's Public License
|
|
* @author Naomi Carrigan
|
|
*/
|
|
import { useCallback, useState, type JSX } from "react";
|
|
import { useGame } from "../../context/gameContext.js";
|
|
|
|
const sessionKey = "elysium_join_community_dismissed";
|
|
|
|
/**
|
|
* Renders a modal prompting the player to join the NHCarrigan Discord server.
|
|
* Shown once per session when the player is not already in the guild.
|
|
* @returns The JSX element or null if the player is in the guild or dismissed.
|
|
*/
|
|
const JoinCommunityModal = (): JSX.Element | null => {
|
|
const { inGuild } = useGame();
|
|
const [ dismissed, setDismissed ] = useState(
|
|
() => {
|
|
return sessionStorage.getItem(sessionKey) === "true";
|
|
},
|
|
);
|
|
|
|
const handleDismiss = useCallback((): void => {
|
|
sessionStorage.setItem(sessionKey, "true");
|
|
setDismissed(true);
|
|
}, []);
|
|
|
|
if (inGuild || dismissed) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="modal-overlay">
|
|
<div className="modal">
|
|
<h2>{"Join Our Community!"}</h2>
|
|
<p>
|
|
{"Did you know Elysium has an active Discord community? "}
|
|
{"Join to chat with other players, get updates, and earn "}
|
|
{"the exclusive Elysian role!"}
|
|
</p>
|
|
<p className="modal-note">
|
|
{"You already earn the Elysian role just by playing — "}
|
|
{"joining lets us show it off in the server!"}
|
|
</p>
|
|
<div className="modal-actions">
|
|
<a
|
|
className="modal-close-button"
|
|
href="https://discord.gg/KKe7BaEnQB"
|
|
onClick={handleDismiss}
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
{"Join Discord"}
|
|
</a>
|
|
<button
|
|
className="modal-close-button"
|
|
onClick={handleDismiss}
|
|
type="button"
|
|
>
|
|
{"Maybe later"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { JoinCommunityModal };
|