feat: initial prototype — core game systems (#30)

## Summary This PR represents the full v1 prototype, implementing the core game systems for Elysium. - Full idle/clicker RPG loop: resource collection, crafting, boss fights, exploration, and quests - Adventurer hiring with batch size selector and progressive tier cost scaling - Prestige, transcendence, and apotheosis systems with auto-prestige support - Character sheet, titles, leaderboards, companion system, and daily login bonuses - Auto-quest and auto-boss toggles - Discord webhook notifications on prestige/transcendence/apotheosis - Discord role awarded on apotheosis - Responsive design and overarching story/lore system - In-game sound effects and browser notifications for key events - Support link button in the resource bar - Full test coverage (100% on `apps/api` and `packages/types`) - CI pipeline: lint → build → test ## Closes Closes #1 Closes #2 Closes #3 Closes #4 Closes #5 Closes #6 Closes #7 Closes #8 Closes #9 Closes #10 Closes #11 Closes #12 Closes #13 Closes #14 Closes #16 Closes #19 Closes #20 Closes #21 Closes #22 Closes #23 Closes #24 Closes #25 Closes #26 Closes #27 Closes #29 ✨ This issue was created with help from Hikari~ 🌸 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Reviewed-on: #30 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
2026-03-08 15:53:39 -07:00
parent c69e155de3
commit 29c817230d
172 changed files with 50706 additions and 0 deletions
@@ -0,0 +1,179 @@
+/**
+ * @file Story panel component displaying the main questline narrative.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Complex component with many render paths */
+/* eslint-disable complexity -- Complex component with many conditional render paths */
+import { STORY_CHAPTERS } from "@elysium/types";
+import { type JSX, useState } from "react";
+import { useGame } from "../../context/gameContext.js";
+
+/**
+ * Substitutes the character name placeholder in story text.
+ * @param text - The story text with placeholders.
+ * @param characterName - The player's character name.
+ * @returns The text with placeholders replaced.
+ */
+const substituteCharacterName = (
+  text: string,
+  characterName: string,
+): string => {
+  const fallback = characterName === ""
+    ? "the guild leader"
+    : characterName;
+  return text.replaceAll("{characterName}", fallback);
+};
+
+/**
+ * Renders the story panel with chapter navigation and content.
+ * @returns The JSX element.
+ */
+const StoryPanel = (): JSX.Element => {
+  const { state, completeChapter } = useGame();
+  const [ activeChapterIndex, setActiveChapterIndex ] = useState(0);
+
+  if (state === null) {
+    return (
+      <div className="story-panel">
+        <p>{"Loading…"}</p>
+      </div>
+    );
+  }
+
+  const unlockedIds = state.story?.unlockedChapterIds ?? [];
+  const completedChapters = state.story?.completedChapters ?? [];
+  const { characterName } = state.player;
+
+  const activeChapter = STORY_CHAPTERS[activeChapterIndex];
+  const isUnlocked = unlockedIds.includes(activeChapter?.id ?? "");
+  const completion
+    = activeChapter === undefined
+      ? null
+      : completedChapters.find((completedChapter) => {
+        return completedChapter.chapterId === activeChapter.id;
+      }) ?? null;
+  const isUnread = isUnlocked && completion === null;
+
+  return (
+    <div className="story-panel">
+      <div className="story-chapter-tabs">
+        {STORY_CHAPTERS.map((chapter, index) => {
+          const unlocked = unlockedIds.includes(chapter.id);
+          const completed = completedChapters.some((completedChapter) => {
+            return completedChapter.chapterId === chapter.id;
+          });
+          const unread = unlocked && !completed;
+          function handleChapterSelect(): void {
+            setActiveChapterIndex(index);
+          }
+          return (
+            <button
+              aria-label={
+                unlocked
+                  ? chapter.title
+                  : `Chapter ${String(index + 1)} (locked)`
+              }
+              className={[
+                "story-tab-btn",
+                activeChapterIndex === index
+                  ? "active"
+                  : "",
+                unlocked
+                  ? ""
+                  : "locked",
+              ].join(" ")}
+              key={chapter.id}
+              onClick={handleChapterSelect}
+              type="button"
+            >
+              {index + 1}
+              {unread
+                ? <span className="story-unread-dot" />
+                : null}
+            </button>
+          );
+        })}
+      </div>
+
+      {activeChapter === undefined
+        ? null
+        : <div className="story-chapter-view">
+          {isUnlocked
+            ? <>
+              <h2 className="story-chapter-title">
+                {"Chapter "}
+                {activeChapterIndex + 1}
+                {": "}
+                {activeChapter.title}
+              </h2>
+              <div className="story-chapter-content">
+                {substituteCharacterName(activeChapter.content, characterName).
+                  split("\n\n").
+                  map((paragraph, paraIndex) => {
+                    // eslint-disable-next-line react/no-array-index-key -- Static content paragraphs have no stable id
+                    return <p key={paraIndex}>{paragraph}</p>;
+                  })}
+              </div>
+
+              {completion === null && isUnread
+                ? <div className="story-choices">
+                  <p className="story-choices-prompt">{"What do you do?"}</p>
+                  {activeChapter.choices.map((storyChoice) => {
+                    const chapterForClosure = activeChapter;
+                    function handleChoice(): void {
+                      completeChapter(chapterForClosure.id, storyChoice.id);
+                    }
+                    return (
+                      <button
+                        className="story-choice-btn"
+                        key={storyChoice.id}
+                        onClick={handleChoice}
+                        type="button"
+                      >
+                        {storyChoice.label}
+                      </button>
+                    );
+                  })}
+                </div>
+                : null}
+              {completion === null
+                ? null
+                : <div className="story-choice-result">
+                  <p className="story-choice-label">
+                    <strong>{"Your choice:"}</strong>{" "}
+                    {
+                      activeChapter.choices.find((storyChoice) => {
+                        return storyChoice.id === completion.choiceId;
+                      })?.label
+                    }
+                  </p>
+                  <p className="story-choice-outcome">
+                    {substituteCharacterName(
+                      activeChapter.choices.find((storyChoice) => {
+                        return storyChoice.id === completion.choiceId;
+                      })?.outcome ?? "",
+                      characterName,
+                    )}
+                  </p>
+                </div>
+              }
+            </>
+            : <div className="story-locked">
+              <p className="story-locked-title">
+                {"Chapter "}
+                {activeChapterIndex + 1}
+              </p>
+              <p className="story-locked-hint">
+                {"🔒 This chapter has not yet been unlocked."}
+              </p>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  );
+};
+
+export { StoryPanel };