feat: add lifetime stats to player profile

Introduce six lifetime stat fields (gold, clicks, bosses, quests,
adventurers, achievements) that accumulate across all prestige and
transcendence resets and are never cleared.

- schema: add six new Float fields to the Player model
- prestige route: capture current-run totals and increment lifetime
  fields before resetting per-run counters to zero
- profile route: return lifetime fields as the All Time section data;
  add four new ProfileSettings toggles for visibility control
- ProfilePage: display lifetime bosses/quests/adventurers/achievements
  in All Time section; remove GameProvider dependency by importing
  formatNumber directly (fixes crash on public profile pages)
- EditProfileModal: add four new All Time stat toggles
- types: update Player, ProfileSettings, and PublicProfileResponse
This commit is contained in:
2026-03-07 02:08:41 -08:00
committed by Naomi Carrigan
parent 3cded34f4b
commit 298e1f4604
9 changed files with 213 additions and 39 deletions
@@ -8,14 +8,29 @@ interface EditProfileModalProps {
onClose: () => void;
}
const STAT_TOGGLES: { key: keyof ProfileSettings; label: string; icon: string }[] = [
{ key: "showTotalGold", label: "Total Gold Earned", icon: "πŸͺ™" },
{ key: "showTotalClicks", label: "Total Clicks", icon: "πŸ‘†" },
interface StatToggle {
key: keyof ProfileSettings;
label: string;
icon: string;
}
const CURRENT_RUN_TOGGLES: StatToggle[] = [
{ key: "showCurrentGold", label: "Gold Earned This Run", icon: "πŸͺ™" },
{ key: "showCurrentClicks", label: "Clicks This Run", icon: "πŸ‘†" },
{ key: "showPrestige", label: "Prestige Level", icon: "⭐" },
{ key: "showBossesDefeated", label: "Bosses Defeated", icon: "πŸ’€" },
{ key: "showQuestsCompleted", label: "Quests Completed", icon: "πŸ“œ" },
{ key: "showAdventurersRecruited", label: "Adventurers Recruited", icon: "βš”οΈ" },
{ key: "showAchievementsUnlocked", label: "Achievements Unlocked", icon: "πŸ†" },
];
const ALL_TIME_TOGGLES: StatToggle[] = [
{ key: "showTotalGold", label: "Total Gold Earned", icon: "πŸͺ™" },
{ key: "showTotalClicks", label: "Total Clicks", icon: "πŸ‘†" },
{ key: "showLifetimeBossesDefeated", label: "Bosses Defeated", icon: "πŸ’€" },
{ key: "showLifetimeQuestsCompleted", label: "Quests Completed", icon: "πŸ“œ" },
{ key: "showLifetimeAdventurersRecruited", label: "Adventurers Recruited", icon: "βš”οΈ" },
{ key: "showLifetimeAchievementsUnlocked", label: "Achievements Unlocked", icon: "πŸ†" },
{ key: "showGuildFounded", label: "Guild Founded Date", icon: "πŸ“…" },
];
@@ -126,8 +141,27 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
<div className="edit-profile-section">
<p className="edit-profile-label">Visible Stats</p>
<p className="edit-profile-sublabel">Choose which stats appear on your public profile.</p>
<p className="edit-profile-stat-group-heading">Current Run</p>
<div className="stat-toggles">
{STAT_TOGGLES.map(({ key, label, icon }) => (
{CURRENT_RUN_TOGGLES.map(({ key, label, icon }) => (
<button
key={key}
className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
onClick={() => { toggleSetting(key); }}
type="button"
>
<span>{icon} {label}</span>
<span className="stat-toggle-indicator">
{settings[key] ? "βœ“ Shown" : "Hidden"}
</span>
</button>
))}
</div>
<p className="edit-profile-stat-group-heading">All Time</p>
<div className="stat-toggles">
{ALL_TIME_TOGGLES.map(({ key, label, icon }) => (
<button
key={key}
className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
+82 -22
View File
@@ -1,13 +1,19 @@
import type { PublicProfileResponse } from "@elysium/types";
import { useEffect, useState } from "react";
import { useGame } from "../../context/GameContext.js";
import { formatNumber } from "../../utils/format.js";
interface ProfilePageProps {
discordId: string;
}
interface StatEntry {
icon: string;
value: string;
label: string;
date: boolean;
}
export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element => {
const { formatNumber } = useGame();
const [profile, setProfile] = useState<PublicProfileResponse | null>(null);
const [error, setError] = useState<string | null>(null);
const [copied, setCopied] = useState(false);
@@ -51,6 +57,7 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
}
const s = profile.profileSettings;
const fmt = (n: number): string => formatNumber(n, s.numberFormat);
const avatarUrl = profile.avatar
? `https://cdn.discordapp.com/avatars/${discordId}/${profile.avatar}.png?size=128`
@@ -62,17 +69,17 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
day: "numeric",
});
const visibleStats = [
s.showTotalGold && {
const currentRunStats = [
s.showCurrentGold && {
icon: "πŸͺ™",
value: formatNumber(profile.totalGoldEarned),
label: "Total Gold Earned",
value: fmt(profile.currentRunGold),
label: "Gold Earned",
date: false,
},
s.showTotalClicks && {
s.showCurrentClicks && {
icon: "πŸ‘†",
value: formatNumber(profile.totalClicks),
label: "Total Clicks",
value: fmt(profile.currentRunClicks),
label: "Clicks",
date: false,
},
s.showBossesDefeated && {
@@ -89,7 +96,7 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
},
s.showAdventurersRecruited && {
icon: "βš”οΈ",
value: formatNumber(profile.adventurersRecruited),
value: fmt(profile.adventurersRecruited),
label: "Adventurers Recruited",
date: false,
},
@@ -99,13 +106,66 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
label: "Achievements Unlocked",
date: false,
},
].filter(Boolean) as StatEntry[];
const allTimeStats = [
s.showTotalGold && {
icon: "πŸͺ™",
value: fmt(profile.totalGoldEarned),
label: "Total Gold Earned",
date: false,
},
s.showTotalClicks && {
icon: "πŸ‘†",
value: fmt(profile.totalClicks),
label: "Total Clicks",
date: false,
},
s.showLifetimeBossesDefeated && {
icon: "πŸ’€",
value: String(profile.lifetimeBossesDefeated),
label: "Bosses Defeated",
date: false,
},
s.showLifetimeQuestsCompleted && {
icon: "πŸ“œ",
value: String(profile.lifetimeQuestsCompleted),
label: "Quests Completed",
date: false,
},
s.showLifetimeAdventurersRecruited && {
icon: "βš”οΈ",
value: fmt(profile.lifetimeAdventurersRecruited),
label: "Adventurers Recruited",
date: false,
},
s.showLifetimeAchievementsUnlocked && {
icon: "πŸ†",
value: String(profile.lifetimeAchievementsUnlocked),
label: "Achievements Unlocked",
date: false,
},
s.showGuildFounded && {
icon: "πŸ“…",
value: memberSince,
label: "Guild Founded",
date: true,
},
].filter(Boolean) as Array<{ icon: string; value: string; label: string; date: boolean }>;
].filter(Boolean) as StatEntry[];
const renderStats = (stats: StatEntry[]): React.JSX.Element => (
<div className="profile-stats">
{stats.map((stat) => (
<div key={stat.label} className="profile-stat">
<span className="profile-stat-icon">{stat.icon}</span>
<span className={`profile-stat-value ${stat.date ? "profile-stat-date" : ""}`}>
{stat.value}
</span>
<span className="profile-stat-label">{stat.label}</span>
</div>
))}
</div>
);
return (
<div className="profile-page">
@@ -131,17 +191,17 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
<p className="profile-bio">{profile.bio}</p>
)}
{visibleStats.length > 0 && (
<div className="profile-stats">
{visibleStats.map((stat) => (
<div key={stat.label} className="profile-stat">
<span className="profile-stat-icon">{stat.icon}</span>
<span className={`profile-stat-value ${stat.date ? "profile-stat-date" : ""}`}>
{stat.value}
</span>
<span className="profile-stat-label">{stat.label}</span>
</div>
))}
{currentRunStats.length > 0 && (
<div className="profile-stats-section">
<h3 className="profile-stats-heading">Current Run</h3>
{renderStats(currentRunStats)}
</div>
)}
{allTimeStats.length > 0 && (
<div className="profile-stats-section">
<h3 className="profile-stats-heading">All Time</h3>
{renderStats(allTimeStats)}
</div>
)}