feat: add community role grant and join prompt for players

- Grant Elysian Discord role to players on OAuth login (new and returning) - Add inGuild flag to Player schema, seeded from role grant response - Connect Discord Gateway WebSocket to keep inGuild in sync on join/leave - Return inGuild from load endpoint; expose in game context - Show join community modal once per session when inGuild is false
2026-03-24 18:10:22 -07:00
parent b48beef474
commit 5025948530
13 changed files with 549 additions and 3 deletions
@@ -0,0 +1,70 @@
+/**
+ * @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/nhcarrigan"
+            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 };