feat: add more profile stats and auto-populate edit modal

Exposes four new stats on public profiles (bosses defeated, quests
completed, adventurers recruited, achievements unlocked) with
corresponding visibility toggles. The edit modal now auto-populates
the character name, bio, and settings from the server on open.
This commit is contained in:
2026-03-06 14:14:45 -08:00
committed by Naomi Carrigan
parent 7e04daa073
commit 653c36c886
5 changed files with 158 additions and 79 deletions
+22 -7
View File
@@ -3,25 +3,25 @@ import type {
ProfileSettings, ProfileSettings,
UpdateProfileRequest, UpdateProfileRequest,
} from "@elysium/types"; } from "@elysium/types";
import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
import { Hono } from "hono"; import { Hono } from "hono";
import { prisma } from "../db/client.js"; import { prisma } from "../db/client.js";
import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
import { authMiddleware } from "../middleware/auth.js"; import { authMiddleware } from "../middleware/auth.js";
export const profileRouter = new Hono(); export const profileRouter = new Hono();
const parseProfileSettings = (raw: unknown): ProfileSettings => { const parseProfileSettings = (raw: unknown): ProfileSettings => {
if ( if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
raw !== null &&
typeof raw === "object" &&
!Array.isArray(raw)
) {
const obj = raw as Record<string, unknown>; const obj = raw as Record<string, unknown>;
return { return {
showTotalGold: obj.showTotalGold !== false, showTotalGold: obj.showTotalGold !== false,
showTotalClicks: obj.showTotalClicks !== false, showTotalClicks: obj.showTotalClicks !== false,
showPrestige: obj.showPrestige !== false, showPrestige: obj.showPrestige !== false,
showGuildFounded: obj.showGuildFounded !== false, showGuildFounded: obj.showGuildFounded !== false,
showBossesDefeated: obj.showBossesDefeated !== false,
showQuestsCompleted: obj.showQuestsCompleted !== false,
showAdventurersRecruited: obj.showAdventurersRecruited !== false,
showAchievementsUnlocked: obj.showAchievementsUnlocked !== false,
}; };
} }
return { ...DEFAULT_PROFILE_SETTINGS }; return { ...DEFAULT_PROFILE_SETTINGS };
@@ -43,6 +43,13 @@ profileRouter.get("/:discordId", async (context) => {
const prestigeCount = state?.prestige.count ?? 0; const prestigeCount = state?.prestige.count ?? 0;
const profileSettings = parseProfileSettings(player.profileSettings); const profileSettings = parseProfileSettings(player.profileSettings);
const bossesDefeated = state?.bosses.filter((b) => b.status === "defeated").length ?? 0;
const questsCompleted = state?.quests.filter((q) => q.status === "completed").length ?? 0;
const adventurersRecruited =
state?.adventurers.reduce((sum, a) => sum + a.count, 0) ?? 0;
const achievementsUnlocked =
(state?.achievements ?? []).filter((a) => a.unlockedAt !== null).length;
return context.json({ return context.json({
characterName: player.characterName, characterName: player.characterName,
username: player.username, username: player.username,
@@ -52,6 +59,10 @@ profileRouter.get("/:discordId", async (context) => {
prestigeCount, prestigeCount,
totalGoldEarned: player.totalGoldEarned, totalGoldEarned: player.totalGoldEarned,
totalClicks: player.totalClicks, totalClicks: player.totalClicks,
bossesDefeated,
questsCompleted,
adventurersRecruited,
achievementsUnlocked,
createdAt: player.createdAt, createdAt: player.createdAt,
}); });
}); });
@@ -67,6 +78,10 @@ profileRouter.put("/", authMiddleware, async (context) => {
showTotalClicks: body.profileSettings?.showTotalClicks !== false, showTotalClicks: body.profileSettings?.showTotalClicks !== false,
showPrestige: body.profileSettings?.showPrestige !== false, showPrestige: body.profileSettings?.showPrestige !== false,
showGuildFounded: body.profileSettings?.showGuildFounded !== false, showGuildFounded: body.profileSettings?.showGuildFounded !== false,
showBossesDefeated: body.profileSettings?.showBossesDefeated !== false,
showQuestsCompleted: body.profileSettings?.showQuestsCompleted !== false,
showAdventurersRecruited: body.profileSettings?.showAdventurersRecruited !== false,
showAchievementsUnlocked: body.profileSettings?.showAchievementsUnlocked !== false,
}; };
if (!characterName) { if (!characterName) {
@@ -75,7 +90,7 @@ profileRouter.put("/", authMiddleware, async (context) => {
const updated = await prisma.player.update({ const updated = await prisma.player.update({
where: { discordId }, where: { discordId },
data: { characterName, bio, profileSettings }, data: { characterName, bio, profileSettings: profileSettings as object },
}); });
return context.json({ return context.json({
@@ -1,5 +1,6 @@
import type { ProfileSettings } from "@elysium/types"; import type { ProfileSettings } from "@elysium/types";
import { useState } from "react"; import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
import { useEffect, useState } from "react";
import { updateProfile } from "../../api/client.js"; import { updateProfile } from "../../api/client.js";
import { useGame } from "../../context/GameContext.js"; import { useGame } from "../../context/GameContext.js";
@@ -11,6 +12,10 @@ const STAT_TOGGLES: { key: keyof ProfileSettings; label: string; icon: string }[
{ key: "showTotalGold", label: "Total Gold Earned", icon: "🪙" }, { key: "showTotalGold", label: "Total Gold Earned", icon: "🪙" },
{ key: "showTotalClicks", label: "Total Clicks", icon: "👆" }, { key: "showTotalClicks", label: "Total Clicks", icon: "👆" },
{ key: "showPrestige", label: "Prestige Level", 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: "🏆" },
{ key: "showGuildFounded", label: "Guild Founded Date", icon: "📅" }, { key: "showGuildFounded", label: "Guild Founded Date", icon: "📅" },
]; ];
@@ -20,16 +25,35 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
const [characterName, setCharacterName] = useState(player?.characterName ?? ""); const [characterName, setCharacterName] = useState(player?.characterName ?? "");
const [bio, setBio] = useState(""); const [bio, setBio] = useState("");
const [settings, setSettings] = useState<ProfileSettings>({ const [settings, setSettings] = useState<ProfileSettings>({ ...DEFAULT_PROFILE_SETTINGS });
showTotalGold: true, const [loadingProfile, setLoadingProfile] = useState(true);
showTotalClicks: true,
showPrestige: true,
showGuildFounded: true,
});
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
// Fetch current profile to auto-populate bio and settings
useEffect(() => {
if (!player?.discordId) return;
fetch(`/api/profile/${player.discordId}`)
.then(async (res) => {
if (!res.ok) return;
const data = (await res.json()) as {
bio: string;
profileSettings: ProfileSettings;
characterName: string;
};
setBio(data.bio ?? "");
setSettings({ ...DEFAULT_PROFILE_SETTINGS, ...data.profileSettings });
setCharacterName(data.characterName ?? player.characterName ?? "");
})
.catch(() => {
// Fall back to local state if fetch fails — not a blocking error
})
.finally(() => {
setLoadingProfile(false);
});
}, [player?.discordId, player?.characterName]);
const handleSave = async (): Promise<void> => { const handleSave = async (): Promise<void> => {
setSaving(true); setSaving(true);
setError(null); setError(null);
@@ -63,6 +87,9 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
</button> </button>
</div> </div>
{loadingProfile ? (
<p className="edit-profile-loading">Loading your profile</p>
) : (
<div className="edit-profile-form"> <div className="edit-profile-form">
<label className="edit-profile-label" htmlFor="edit-char-name"> <label className="edit-profile-label" htmlFor="edit-char-name">
Display Name Display Name
@@ -132,6 +159,7 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
</button> </button>
</div> </div>
</div> </div>
)}
</div> </div>
</div> </div>
); );
@@ -74,6 +74,30 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
label: "Total Clicks", label: "Total Clicks",
date: false, date: false,
}, },
s.showBossesDefeated && {
icon: "💀",
value: String(profile.bossesDefeated),
label: "Bosses Defeated",
date: false,
},
s.showQuestsCompleted && {
icon: "📜",
value: String(profile.questsCompleted),
label: "Quests Completed",
date: false,
},
s.showAdventurersRecruited && {
icon: "⚔️",
value: formatNumber(profile.adventurersRecruited),
label: "Adventurers Recruited",
date: false,
},
s.showAchievementsUnlocked && {
icon: "🏆",
value: String(profile.achievementsUnlocked),
label: "Achievements Unlocked",
date: false,
},
s.showGuildFounded && { s.showGuildFounded && {
icon: "📅", icon: "📅",
value: memberSince, value: memberSince,
+4
View File
@@ -75,6 +75,10 @@ export interface PublicProfileResponse {
prestigeCount: number; prestigeCount: number;
totalGoldEarned: number; totalGoldEarned: number;
totalClicks: number; totalClicks: number;
bossesDefeated: number;
questsCompleted: number;
adventurersRecruited: number;
achievementsUnlocked: number;
createdAt: number; createdAt: number;
} }
@@ -3,6 +3,10 @@ export interface ProfileSettings {
showTotalClicks: boolean; showTotalClicks: boolean;
showPrestige: boolean; showPrestige: boolean;
showGuildFounded: boolean; showGuildFounded: boolean;
showBossesDefeated: boolean;
showQuestsCompleted: boolean;
showAdventurersRecruited: boolean;
showAchievementsUnlocked: boolean;
} }
export const DEFAULT_PROFILE_SETTINGS: ProfileSettings = { export const DEFAULT_PROFILE_SETTINGS: ProfileSettings = {
@@ -10,4 +14,8 @@ export const DEFAULT_PROFILE_SETTINGS: ProfileSettings = {
showTotalClicks: true, showTotalClicks: true,
showPrestige: true, showPrestige: true,
showGuildFounded: true, showGuildFounded: true,
showBossesDefeated: true,
showQuestsCompleted: true,
showAdventurersRecruited: true,
showAchievementsUnlocked: true,
}; };