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,159 @@
+/**
+ * @file Apotheosis panel component for the final prestige layer.
+ * @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 { type JSX, useState } from "react";
+import { useGame } from "../../context/gameContext.js";
+import { TRANSCENDENCE_UPGRADES } from "../../data/transcendenceUpgrades.js";
+
+const totalEchoUpgrades = TRANSCENDENCE_UPGRADES.length;
+
+/**
+ * Renders the apotheosis panel for achieving the final game milestone.
+ * @returns The JSX element.
+ */
+const ApotheosisPanel = (): JSX.Element => {
+  const { state, apotheosis } = useGame();
+  const [ isPending, setIsPending ] = useState(false);
+  const [ result, setResult ] = useState<number | null>(null);
+  const [ error, setError ] = useState<string | null>(null);
+
+  if (state === null) {
+    return (
+      <section className="panel">
+        <p>{"Loading..."}</p>
+      </section>
+    );
+  }
+
+  const purchasedIds = state.transcendence?.purchasedUpgradeIds ?? [];
+  const purchasedCount = TRANSCENDENCE_UPGRADES.filter((upgrade) => {
+    return purchasedIds.includes(upgrade.id);
+  }).length;
+  const isEligible = purchasedCount >= totalEchoUpgrades;
+  const apotheosisCount = state.apotheosis?.count ?? 0;
+
+  async function handleApotheosis(): Promise<void> {
+    setIsPending(true);
+    setError(null);
+    try {
+      const data = await apotheosis();
+      setResult(data.newApotheosisCount);
+    } catch (caughtError) {
+      setError(
+        caughtError instanceof Error
+          ? caughtError.message
+          : "Apotheosis failed",
+      );
+    } finally {
+      setIsPending(false);
+    }
+  }
+
+  function handleApotheosisClick(): void {
+    void handleApotheosis();
+  }
+
+  const plural = apotheosisCount === 1
+    ? ""
+    : "s";
+
+  return (
+    <section className="panel apotheosis-panel">
+      <h2>{"✨ Apotheosis"}</h2>
+
+      <p className="apotheosis-intro">
+        {"Apotheosis is the final act — a complete dissolution of everything"
+          + " you have built. Prestige, Transcendence, Echoes, upgrades,"
+          + " equipment, resources: all of it returns to nothing."
+          + " In exchange, you receive only one thing:"}
+      </p>
+      <p className="apotheosis-reward">
+        {"The "}
+        <strong>{"✨ Apotheosis"}</strong>
+        {" badge. Proof that you have done it all."}
+      </p>
+      <p className="apotheosis-intro">
+        {"Apotheosis can be achieved multiple times. Each cycle requires"
+          + " you to purchase every Transcendence upgrade again before the"
+          + " next Apotheosis becomes available. There is no mechanical"
+          + " benefit — only the knowledge that you have reached the"
+          + " pinnacle, dissolved it, and climbed back up."}
+      </p>
+
+      {apotheosisCount > 0
+        && <div className="apotheosis-count">
+          <span>
+            {"You have achieved Apotheosis "}
+            <strong>{apotheosisCount}</strong>
+            {" time"}
+            {plural}
+            {"."}
+          </span>
+        </div>
+      }
+
+      <div className="apotheosis-status">
+        <p>
+          {"Transcendence upgrades purchased: "}
+          <strong>
+            {purchasedCount}
+            {" / "}
+            {totalEchoUpgrades}
+          </strong>
+        </p>
+        {isEligible
+          ? null
+          : <p className="apotheosis-missing">
+            {"🔒 Purchase all "}
+            {totalEchoUpgrades}
+            {" Transcendence upgrades to unlock Apotheosis. ("}
+            {totalEchoUpgrades - purchasedCount}
+            {" remaining)"}
+          </p>
+        }
+        {isEligible
+          ? <p className="apotheosis-ready">
+            {"✅ All Transcendence upgrades purchased. You are ready."}
+          </p>
+          : null}
+      </div>
+
+      {isEligible
+        ? <div className="prestige-form">
+          <p>
+            {"This action is "}
+            <strong>{"permanent and irreversible"}</strong>
+            {"."}
+          </p>
+          <button
+            className="apotheosis-button"
+            disabled={isPending}
+            onClick={handleApotheosisClick}
+            type="button"
+          >
+            {isPending
+              ? "Ascending..."
+              : "✨ Achieve Apotheosis"}
+          </button>
+          {error === null
+            ? null
+            : <p className="error">{error}</p>}
+          {result !== null
+            && <p className="success">
+              {"Apotheosis achieved. This is cycle "}
+              <strong>{result}</strong>
+              {". The infinite loop continues."}
+            </p>
+          }
+        </div>
+        : null}
+    </section>
+  );
+};
+
+export { ApotheosisPanel };