generated from nhcarrigan/template
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:
@@ -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,75 +87,79 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="edit-profile-form">
|
{loadingProfile ? (
|
||||||
<label className="edit-profile-label" htmlFor="edit-char-name">
|
<p className="edit-profile-loading">Loading your profile…</p>
|
||||||
Display Name
|
) : (
|
||||||
</label>
|
<div className="edit-profile-form">
|
||||||
<input
|
<label className="edit-profile-label" htmlFor="edit-char-name">
|
||||||
className="edit-profile-input"
|
Display Name
|
||||||
id="edit-char-name"
|
</label>
|
||||||
maxLength={32}
|
<input
|
||||||
placeholder="Your character's name"
|
className="edit-profile-input"
|
||||||
type="text"
|
id="edit-char-name"
|
||||||
value={characterName}
|
maxLength={32}
|
||||||
onChange={(e) => { setCharacterName(e.target.value); }}
|
placeholder="Your character's name"
|
||||||
/>
|
type="text"
|
||||||
<span className="edit-profile-hint">{characterName.length} / 32</span>
|
value={characterName}
|
||||||
|
onChange={(e) => { setCharacterName(e.target.value); }}
|
||||||
|
/>
|
||||||
|
<span className="edit-profile-hint">{characterName.length} / 32</span>
|
||||||
|
|
||||||
<label className="edit-profile-label" htmlFor="edit-bio">
|
<label className="edit-profile-label" htmlFor="edit-bio">
|
||||||
Bio
|
Bio
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
className="edit-profile-textarea"
|
className="edit-profile-textarea"
|
||||||
id="edit-bio"
|
id="edit-bio"
|
||||||
maxLength={200}
|
maxLength={200}
|
||||||
placeholder="Tell the world about your guild… (optional)"
|
placeholder="Tell the world about your guild… (optional)"
|
||||||
rows={3}
|
rows={3}
|
||||||
value={bio}
|
value={bio}
|
||||||
onChange={(e) => { setBio(e.target.value); }}
|
onChange={(e) => { setBio(e.target.value); }}
|
||||||
/>
|
/>
|
||||||
<span className="edit-profile-hint">{bio.length} / 200</span>
|
<span className="edit-profile-hint">{bio.length} / 200</span>
|
||||||
|
|
||||||
<div className="edit-profile-section">
|
<div className="edit-profile-section">
|
||||||
<p className="edit-profile-label">Visible Stats</p>
|
<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-sublabel">Choose which stats appear on your public profile.</p>
|
||||||
<div className="stat-toggles">
|
<div className="stat-toggles">
|
||||||
{STAT_TOGGLES.map(({ key, label, icon }) => (
|
{STAT_TOGGLES.map(({ key, label, icon }) => (
|
||||||
<button
|
<button
|
||||||
key={key}
|
key={key}
|
||||||
className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
|
className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
|
||||||
onClick={() => { toggleSetting(key); }}
|
onClick={() => { toggleSetting(key); }}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span>{icon} {label}</span>
|
<span>{icon} {label}</span>
|
||||||
<span className="stat-toggle-indicator">
|
<span className="stat-toggle-indicator">
|
||||||
{settings[key] ? "✓ Shown" : "Hidden"}
|
{settings[key] ? "✓ Shown" : "Hidden"}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <p className="edit-profile-error">{error}</p>}
|
||||||
|
|
||||||
|
<div className="edit-profile-actions">
|
||||||
|
<button
|
||||||
|
className="edit-profile-cancel"
|
||||||
|
onClick={onClose}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="edit-profile-save"
|
||||||
|
disabled={saving || !characterName.trim()}
|
||||||
|
onClick={() => { void handleSave(); }}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{saved ? "✓ Saved!" : saving ? "Saving…" : "Save Profile"}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{error && <p className="edit-profile-error">{error}</p>}
|
|
||||||
|
|
||||||
<div className="edit-profile-actions">
|
|
||||||
<button
|
|
||||||
className="edit-profile-cancel"
|
|
||||||
onClick={onClose}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="edit-profile-save"
|
|
||||||
disabled={saving || !characterName.trim()}
|
|
||||||
onClick={() => { void handleSave(); }}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
{saved ? "✓ Saved!" : saving ? "Saving…" : "Save Profile"}
|
|
||||||
</button>
|
|
||||||
</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,
|
||||||
|
|||||||
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user