generated from nhcarrigan/template
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:
@@ -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"}`}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user