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.
2026-03-06 14:14:45 -08:00
parent 7e04daa073
commit 653c36c886
5 changed files with 158 additions and 79 deletions
@@ -1,5 +1,6 @@
 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 { 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: "showTotalClicks", label: "Total Clicks", 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: "📅" },
 ];

@@ -20,16 +25,35 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.

  const [characterName, setCharacterName] = useState(player?.characterName ?? "");
  const [bio, setBio] = useState("");
-  const [settings, setSettings] = useState<ProfileSettings>({
-    showTotalGold: true,
-    showTotalClicks: true,
-    showPrestige: true,
-    showGuildFounded: true,
-  });
+  const [settings, setSettings] = useState<ProfileSettings>({ ...DEFAULT_PROFILE_SETTINGS });
+  const [loadingProfile, setLoadingProfile] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  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> => {
    setSaving(true);
    setError(null);
@@ -63,75 +87,79 @@ export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.
          </button>
        </div>

-        <div className="edit-profile-form">
-          <label className="edit-profile-label" htmlFor="edit-char-name">
-            Display Name
-          </label>
-          <input
-            className="edit-profile-input"
-            id="edit-char-name"
-            maxLength={32}
-            placeholder="Your character's name"
-            type="text"
-            value={characterName}
-            onChange={(e) => { setCharacterName(e.target.value); }}
-          />
-          <span className="edit-profile-hint">{characterName.length} / 32</span>
+        {loadingProfile ? (
+          <p className="edit-profile-loading">Loading your profile…</p>
+        ) : (
+          <div className="edit-profile-form">
+            <label className="edit-profile-label" htmlFor="edit-char-name">
+              Display Name
+            </label>
+            <input
+              className="edit-profile-input"
+              id="edit-char-name"
+              maxLength={32}
+              placeholder="Your character's name"
+              type="text"
+              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">
-            Bio
-          </label>
-          <textarea
-            className="edit-profile-textarea"
-            id="edit-bio"
-            maxLength={200}
-            placeholder="Tell the world about your guild… (optional)"
-            rows={3}
-            value={bio}
-            onChange={(e) => { setBio(e.target.value); }}
-          />
-          <span className="edit-profile-hint">{bio.length} / 200</span>
+            <label className="edit-profile-label" htmlFor="edit-bio">
+              Bio
+            </label>
+            <textarea
+              className="edit-profile-textarea"
+              id="edit-bio"
+              maxLength={200}
+              placeholder="Tell the world about your guild… (optional)"
+              rows={3}
+              value={bio}
+              onChange={(e) => { setBio(e.target.value); }}
+            />
+            <span className="edit-profile-hint">{bio.length} / 200</span>

-          <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>
-            <div className="stat-toggles">
-              {STAT_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 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>
+              <div className="stat-toggles">
+                {STAT_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>
+            </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>
-
-          {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>
  );
@@ -74,6 +74,30 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
      label: "Total Clicks",
      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 && {
      icon: "📅",
      value: memberSince,