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,383 @@
+/**
+ * @file Boss panel component for viewing and challenging zone bosses.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable react/no-multi-comp -- Sub-component is tightly coupled to the panel */
+/* eslint-disable max-lines-per-function -- Complex component with many render paths */
+/* eslint-disable complexity -- Boss card requires many conditional render paths */
+/* eslint-disable max-statements -- Boss panel requires many variable declarations */
+/* eslint-disable max-lines -- Boss panel with sub-component and helper function */
+import { type JSX, useState } from "react";
+import { useGame } from "../../context/gameContext.js";
+import { LockToggle } from "../ui/lockToggle.js";
+import { ZoneSelector } from "./zoneSelector.js";
+import type { Boss, GameState } from "@elysium/types";
+
+interface BossCardProperties {
+  readonly boss:          Boss;
+  readonly prestigeCount: number;
+  readonly onChallenge:   (bossId: string)=> void;
+  readonly isChallenging: boolean;
+  readonly unlockHint:    string | undefined;
+  readonly formatNumber:  (n: number)=> string;
+}
+
+/**
+ * Renders a single boss card.
+ * @param props - The boss card properties.
+ * @param props.boss - The boss data.
+ * @param props.prestigeCount - The current prestige count for lock checking.
+ * @param props.onChallenge - Callback to challenge this boss.
+ * @param props.isChallenging - Whether this boss is currently being challenged.
+ * @param props.unlockHint - Optional hint for how to unlock this boss.
+ * @param props.formatNumber - The number formatting utility function.
+ * @returns The JSX element.
+ */
+const BossCard = ({
+  boss,
+  prestigeCount,
+  onChallenge,
+  isChallenging,
+  unlockHint,
+  formatNumber,
+}: BossCardProperties): JSX.Element => {
+  const scaled = boss.currentHp * 100;
+  const hpPercent = scaled / boss.maxHp;
+  const isPrestigeLocked = boss.prestigeRequirement > prestigeCount;
+  const canChallenge
+    = (boss.status === "available" || boss.status === "in_progress")
+    && !isChallenging;
+
+  function handleChallenge(): void {
+    onChallenge(boss.id);
+  }
+
+  return (
+    <div className={`boss-card boss-${boss.status}`}>
+      <div className="boss-info">
+        <h3>{boss.name}</h3>
+        <p>{boss.description}</p>
+        {isPrestigeLocked && boss.status === "locked"
+          ? <p className="prestige-lock">
+            {"🔒 Requires Prestige "}
+            {boss.prestigeRequirement}
+          </p>
+          : null}
+        {!isPrestigeLocked
+        && boss.status === "locked"
+        && unlockHint !== undefined
+          ? <p className="unlock-hint">{unlockHint}</p>
+          : null}
+      </div>
+
+      {boss.status !== "locked" && boss.status !== "defeated"
+        && <div className="boss-hp">
+          <div className="hp-bar">
+            <div
+              className="hp-fill"
+              style={{ width: `${hpPercent.toFixed(1)}%` }}
+            />
+          </div>
+          <span className="hp-text">
+            {formatNumber(boss.currentHp)}
+            {" / "}
+            {formatNumber(boss.maxHp)}
+            {" HP"}
+          </span>
+        </div>
+      }
+
+      <div className="boss-meta">
+        <span className="boss-dps">
+          {"💢 Boss DPS: "}
+          {formatNumber(boss.damagePerSecond)}
+        </span>
+      </div>
+
+      <div className="boss-rewards">
+        <span>
+          {"🪙 "}
+          {formatNumber(boss.goldReward)}
+        </span>
+        {boss.essenceReward > 0
+          && <span>
+            {"✨ "}
+            {formatNumber(boss.essenceReward)}
+          </span>
+        }
+        {boss.crystalReward > 0
+          && <span>
+            {"💎 "}
+            {formatNumber(boss.crystalReward)}
+          </span>
+        }
+        {boss.equipmentRewards.length > 0
+          && <span>
+            {"🗡️ "}
+            {boss.equipmentRewards.length}
+            {" Equipment"}
+          </span>
+        }
+        {boss.status !== "defeated" && boss.bountyRunestones > 0
+          && <span className="boss-bounty">
+            {"🔮 "}
+            {boss.bountyRunestones}
+            {" (first kill)"}
+          </span>
+        }
+      </div>
+
+      {(boss.status === "available" || boss.status === "in_progress")
+        && <button
+          className="attack-button"
+          disabled={!canChallenge}
+          onClick={handleChallenge}
+          type="button"
+        >
+          {isChallenging
+            ? "⚔️ Battling…"
+            : "⚔️ Challenge"}
+        </button>
+      }
+
+      {boss.status === "defeated"
+        && <span className="boss-badge defeated">{"☠️ Defeated"}</span>
+      }
+    </div>
+  );
+};
+
+/**
+ * Computes party DPS and HP from the current game state.
+ * @param state - The full game state.
+ * @returns The computed party DPS and HP values.
+ */
+const computePartyStats = (
+  state: GameState,
+): {
+  partyDps: number;
+  partyHp:  number;
+} => {
+  const { upgrades, adventurers, equipment, prestige } = state;
+  let globalMultiplier = 1;
+  for (const upgrade of upgrades) {
+    const { purchased, target, multiplier } = upgrade;
+    if (purchased && target === "global") {
+      globalMultiplier = globalMultiplier * multiplier;
+    }
+  }
+  const prestigeBonus = prestige.count * 0.1;
+  const prestigeMultiplier = 1 + prestigeBonus;
+  const equipmentCombatMultiplier = equipment.
+    filter((item) => {
+      return item.equipped && item.bonus.combatMultiplier !== undefined;
+    }).
+    reduce((multiplier, item) => {
+      return multiplier * (item.bonus.combatMultiplier ?? 1);
+    }, 1);
+
+  let partyDps = 0;
+  let partyHp = 0;
+  for (const adventurer of adventurers) {
+    const { count, id: adventurerId, combatPower, level } = adventurer;
+    if (count === 0) {
+      continue;
+    }
+    let adventurerMultiplier = 1;
+    for (const upgrade of upgrades) {
+      const {
+        purchased,
+        target,
+        multiplier,
+        adventurerId: upgradeAdventurerId,
+      } = upgrade;
+      if (
+        purchased
+        && target === "adventurer"
+        && upgradeAdventurerId === adventurerId
+      ) {
+        adventurerMultiplier = adventurerMultiplier * multiplier;
+      }
+    }
+    const dps
+      = combatPower
+      * count
+      * adventurerMultiplier
+      * globalMultiplier
+      * prestigeMultiplier;
+    partyDps = partyDps + dps;
+    const hp = level * 50 * count;
+    partyHp = partyHp + hp;
+  }
+  partyDps = partyDps * equipmentCombatMultiplier;
+  return { partyDps, partyHp };
+};
+
+/**
+ * Renders the boss panel with zone selection and boss list.
+ * @returns The JSX element.
+ */
+const BossPanel = (): JSX.Element => {
+  const { state, challengeBoss, formatNumber, toggleAutoBoss } = useGame();
+  const [ challengingBossId, setChallengingBossId ] = useState<string | null>(
+    null,
+  );
+  const [ activeZoneId, setActiveZoneId ] = useState("verdant_vale");
+  const [ showLocked, setShowLocked ] = useState(true);
+
+  if (state === null) {
+    return (
+      <section className="panel">
+        <p>{"Loading..."}</p>
+      </section>
+    );
+  }
+
+  async function handleChallenge(bossId: string): Promise<void> {
+    setChallengingBossId(bossId);
+    try {
+      await challengeBoss(bossId);
+    } finally {
+      setChallengingBossId(null);
+    }
+  }
+
+  function handleChallengeClick(bossId: string): void {
+    void handleChallenge(bossId);
+  }
+
+  const { zones, bosses, quests, autoBoss, prestige: playerPrestige } = state;
+  const zoneBosses = bosses.filter((boss) => {
+    return boss.zoneId === activeZoneId;
+  });
+  const lockedCount = zoneBosses.filter((boss) => {
+    return boss.status === "locked";
+  }).length;
+  const visibleBosses = showLocked
+    ? zoneBosses
+    : zoneBosses.filter((boss) => {
+      return boss.status !== "locked";
+    });
+
+  const bossUnlockHints = new Map<string, string>();
+  for (const zone of zones) {
+    const { id: zoneId, unlockBossId, unlockQuestId } = zone;
+    const allZoneBosses = bosses.filter((boss) => {
+      return boss.zoneId === zoneId;
+    });
+    for (let index = 0; index < allZoneBosses.length; index = index + 1) {
+      const boss = allZoneBosses[index];
+      if (boss === undefined || boss.status !== "locked") {
+        continue;
+      }
+      if (index === 0) {
+        const parts: Array<string> = [];
+        if (unlockBossId !== null) {
+          const gateBoss = bosses.find((candidate) => {
+            return candidate.id === unlockBossId;
+          });
+          if (gateBoss !== undefined) {
+            parts.push(`⚔️ Defeat: ${gateBoss.name}`);
+          }
+        }
+        if (unlockQuestId !== null) {
+          const gateQuest = quests.find((candidate) => {
+            return candidate.id === unlockQuestId;
+          });
+          if (gateQuest !== undefined) {
+            parts.push(`📜 Complete: ${gateQuest.name}`);
+          }
+        }
+        if (parts.length > 0) {
+          bossUnlockHints.set(boss.id, parts.join(" & "));
+        }
+      } else {
+        const previousBoss = allZoneBosses[index - 1];
+        if (previousBoss !== undefined) {
+          bossUnlockHints.set(boss.id, `⚔️ Defeat: ${previousBoss.name} first`);
+        }
+      }
+    }
+  }
+
+  function handleToggle(): void {
+    setShowLocked((current) => {
+      return !current;
+    });
+  }
+
+  const autoBossOn = autoBoss === true;
+  const { partyDps, partyHp } = computePartyStats(state);
+  const { count: prestigeCount } = playerPrestige;
+
+  return (
+    <section className="panel boss-panel">
+      <div className="panel-header">
+        <h2>{"Boss Encounters"}</h2>
+        <div className="panel-header-controls">
+          <button
+            className={`auto-toggle-btn ${
+              autoBossOn
+                ? "auto-toggle-on"
+                : "auto-toggle-off"
+            }`}
+            onClick={toggleAutoBoss}
+            title="Automatically challenge the highest available boss"
+            type="button"
+          >
+            {"🤖 Auto: "}
+            {autoBossOn
+              ? "ON"
+              : "OFF"}
+          </button>
+          <LockToggle
+            lockedCount={lockedCount}
+            onToggle={handleToggle}
+            showLocked={showLocked}
+          />
+        </div>
+      </div>
+
+      <ZoneSelector
+        activeZoneId={activeZoneId}
+        onSelectZone={setActiveZoneId}
+        zones={zones}
+      />
+
+      <div className="party-combat-stats">
+        <div className="combat-stat">
+          <span className="stat-label">{"⚔️ Party DPS"}</span>
+          <span className="stat-value">{formatNumber(partyDps)}</span>
+        </div>
+        <div className="combat-stat">
+          <span className="stat-label">{"❤️ Party HP"}</span>
+          <span className="stat-value">{formatNumber(partyHp)}</span>
+        </div>
+      </div>
+
+      <div className="boss-list">
+        {visibleBosses.map((boss) => {
+          const { id: bossId } = boss;
+          return (
+            <BossCard
+              boss={boss}
+              formatNumber={formatNumber}
+              isChallenging={challengingBossId === bossId}
+              key={bossId}
+              onChallenge={handleChallengeClick}
+              prestigeCount={prestigeCount}
+              unlockHint={bossUnlockHints.get(bossId)}
+            />
+          );
+        })}
+        {visibleBosses.length === 0
+          && <p className="empty-zone">{"No bosses to show in this zone."}</p>
+        }
+      </div>
+    </section>
+  );
+};
+
+export { BossPanel };