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,169 @@
+/**
+ * @file Achievement panel component displaying all game achievements.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable react/no-multi-comp -- Sub-component is tightly coupled to this panel */
+import { type JSX, useState } from "react";
+import { useGame } from "../../context/gameContext.js";
+import { LockToggle } from "../ui/lockToggle.js";
+import type { Achievement } from "@elysium/types";
+
+/**
+ * Returns the plural form of a word based on a count.
+ * @param count - The count to check.
+ * @param word - The base word to pluralise.
+ * @returns The pluralised word string.
+ */
+const pluralise = (count: number, word: string): string => {
+  return count > 1
+    ? `${word}s`
+    : word;
+};
+
+/**
+ * Generates a human-readable condition description for an achievement.
+ * @param achievement - The achievement to describe.
+ * @param formatNumber - The number formatting utility function.
+ * @returns A string describing the achievement condition.
+ */
+const conditionDescription = (
+  achievement: Achievement,
+  formatNumber: (n: number)=> string,
+): string => {
+  const { condition } = achievement;
+  switch (condition.type) {
+    case "totalGoldEarned":
+      return `Earn ${formatNumber(condition.amount)} total gold`;
+    case "totalClicks":
+      return `Click ${formatNumber(condition.amount)} times`;
+    case "bossesDefeated":
+      return `Defeat ${String(condition.amount)} ${pluralise(condition.amount, "boss")}`;
+    case "questsCompleted":
+      return `Complete ${String(condition.amount)} ${pluralise(condition.amount, "quest")}`;
+    case "adventurerTotal":
+      return `Recruit ${formatNumber(condition.amount)} total adventurers`;
+    case "prestigeCount":
+      return `Prestige ${String(condition.amount)} ${pluralise(condition.amount, "time")}`;
+    case "equipmentOwned":
+      return `Own ${String(condition.amount)} equipment ${pluralise(condition.amount, "item")}`;
+    default:
+      return "Unknown condition";
+  }
+};
+
+interface AchievementCardProperties {
+  readonly achievement:  Achievement;
+  readonly formatNumber: (n: number)=> string;
+}
+
+/**
+ * Renders a single achievement card.
+ * @param props - The achievement card properties.
+ * @param props.achievement - The achievement to display.
+ * @param props.formatNumber - The number formatting utility function.
+ * @returns The JSX element.
+ */
+const AchievementCard = ({
+  achievement,
+  formatNumber,
+}: AchievementCardProperties): JSX.Element => {
+  const isUnlocked = achievement.unlockedAt !== null;
+  const crystals = achievement.reward?.crystals;
+
+  return (
+    <div className={`achievement-card ${isUnlocked
+      ? "unlocked"
+      : "locked"}`}>
+      <div className="achievement-icon">{achievement.icon}</div>
+      <div className="achievement-info">
+        <h3>{achievement.name}</h3>
+        <p>{achievement.description}</p>
+        <p className="achievement-condition">
+          {conditionDescription(achievement, formatNumber)}
+        </p>
+        {crystals !== undefined
+          && <p className="achievement-reward">
+            {"💎 +"}
+            {crystals}
+            {" Crystals"}
+          </p>
+        }
+      </div>
+      <div className="achievement-status">
+        {isUnlocked
+          ? <span className="achievement-unlocked-badge">{"✓ Unlocked"}</span>
+          : <span className="achievement-locked-badge">{"🔒"}</span>
+        }
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Renders the achievement panel with all achievements.
+ * @returns The JSX element.
+ */
+// eslint-disable-next-line max-lines-per-function -- Achievement panel renders many achievement states
+const AchievementPanel = (): JSX.Element => {
+  const { state, formatNumber } = useGame();
+  const [ showLocked, setShowLocked ] = useState(true);
+
+  if (state === null) {
+    return (
+      <section className="panel">
+        <p>{"Loading..."}</p>
+      </section>
+    );
+  }
+
+  const achievementList = state.achievements;
+  const unlocked = achievementList.filter((a) => {
+    return a.unlockedAt !== null;
+  });
+  const locked = achievementList.filter((a) => {
+    return a.unlockedAt === null;
+  });
+  const visible = showLocked
+    ? achievementList
+    : unlocked;
+
+  function handleToggle(): void {
+    setShowLocked((current) => {
+      return !current;
+    });
+  }
+
+  return (
+    <section className="panel achievement-panel">
+      <div className="panel-header">
+        <h2>{"Achievements"}</h2>
+        <LockToggle
+          lockedCount={locked.length}
+          onToggle={handleToggle}
+          showLocked={showLocked}
+        />
+      </div>
+      <p className="achievement-progress">
+        {unlocked.length}
+        {" / "}
+        {achievementList.length}
+        {" unlocked"}
+      </p>
+      <div className="achievement-list">
+        {visible.map((achievement) => {
+          return (
+            <AchievementCard
+              achievement={achievement}
+              formatNumber={formatNumber}
+              key={achievement.id}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export { AchievementPanel };