feat: add profile editing (bio, display name, stat visibility)

apps/web/src/components/game/EditProfileModal.tsx

@@ -0,0 +1,138 @@
+import type { ProfileSettings } from "@elysium/types";
+import { useState } from "react";
+import { updateProfile } from "../../api/client.js";
+import { useGame } from "../../context/GameContext.js";
+
+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: "👆" },
+  { key: "showPrestige", label: "Prestige Level", icon: "⭐" },
+  { key: "showGuildFounded", label: "Guild Founded Date", icon: "📅" },
+];
+
+export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.Element => {
+  const { state } = useGame();
+  const player = state?.player;
+
+  const [characterName, setCharacterName] = useState(player?.characterName ?? "");
+  const [bio, setBio] = useState("");
+  const [settings, setSettings] = useState<ProfileSettings>({
+    showTotalGold: true,
+    showTotalClicks: true,
+    showPrestige: true,
+    showGuildFounded: true,
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  const handleSave = async (): Promise<void> => {
+    setSaving(true);
+    setError(null);
+    try {
+      await updateProfile({ characterName, bio, profileSettings: settings });
+      setSaved(true);
+      setTimeout(onClose, 900);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const toggleSetting = (key: keyof ProfileSettings): void => {
+    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <div className="modal-overlay" role="dialog" aria-modal="true">
+      <div className="modal edit-profile-modal">
+        <div className="modal-header">
+          <h2>Edit Profile</h2>
+          <button
+            aria-label="Close"
+            className="modal-close"
+            onClick={onClose}
+            type="button"
+          >
+            ✕
+          </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>
+
+          <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>
+          </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>
+  );
+};

apps/web/src/components/game/GameLayout.tsx

@@ -7,6 +7,7 @@ import { AdventurerPanel } from "./AdventurerPanel.js";
 import { BattleModal } from "./BattleModal.js";
 import { BossPanel } from "./BossPanel.js";
 import { ClickArea } from "./ClickArea.js";
+import { EditProfileModal } from "./EditProfileModal.js";
 import { EquipmentPanel } from "./EquipmentPanel.js";
 import { OfflineModal } from "./OfflineModal.js";
 import { PrestigePanel } from "./PrestigePanel.js";
@@ -28,6 +29,7 @@ const TABS: { id: Tab; label: string }[] = [
 export const GameLayout = (): React.JSX.Element => {
   const { state, isLoading, error, battleResult, dismissBattle } = useGame();
   const [activeTab, setActiveTab] = useState<Tab>("adventurers");
+  const [editingProfile, setEditingProfile] = useState(false);
 
   if (isLoading) {
     return (
@@ -55,12 +57,16 @@ export const GameLayout = (): React.JSX.Element => {
         resources={state.resources}
         prestigeCount={state.prestige.count}
         profileUrl={profileUrl}
+        onEditProfile={() => { setEditingProfile(true); }}
       />
       <OfflineModal />
       <AchievementToast />
       {battleResult && (
         <BattleModal battle={battleResult} onDismiss={dismissBattle} />
       )}
+      {editingProfile && (
+        <EditProfileModal onClose={() => { setEditingProfile(false); }} />
+      )}
 
       <div className="game-main">
         <aside className="game-sidebar">

apps/web/src/components/game/ProfilePage.tsx

@@ -49,6 +49,8 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
     );
   }
 
+  const s = profile.profileSettings;
+
   const avatarUrl = profile.avatar
     ? `https://cdn.discordapp.com/avatars/${discordId}/${profile.avatar}.png?size=128`
     : `https://cdn.discordapp.com/embed/avatars/${parseInt(discordId, 10) % 5}.png`;
@@ -59,6 +61,27 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
     day: "numeric",
   });
 
+  const visibleStats = [
+    s.showTotalGold && {
+      icon: "🪙",
+      value: formatNumber(profile.totalGoldEarned),
+      label: "Total Gold Earned",
+      date: false,
+    },
+    s.showTotalClicks && {
+      icon: "👆",
+      value: formatNumber(profile.totalClicks),
+      label: "Total Clicks",
+      date: false,
+    },
+    s.showGuildFounded && {
+      icon: "📅",
+      value: memberSince,
+      label: "Guild Founded",
+      date: true,
+    },
+  ].filter(Boolean) as Array<{ icon: string; value: string; label: string; date: boolean }>;
+
   return (
     <div className="profile-page">
       <div className="profile-card">
@@ -71,7 +94,7 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
           <div className="profile-identity">
             <h1 className="profile-character-name">{profile.characterName}</h1>
             <p className="profile-username">@{profile.username}</p>
-            {profile.prestigeCount > 0 && (
+            {s.showPrestige && profile.prestigeCount > 0 && (
               <span className="profile-prestige-badge">
                 ⭐ Prestige {profile.prestigeCount}
               </span>
@@ -79,23 +102,23 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
           </div>
         </div>
 
-        <div className="profile-stats">
-          <div className="profile-stat">
-            <span className="profile-stat-icon">🪙</span>
-            <span className="profile-stat-value">{formatNumber(profile.totalGoldEarned)}</span>
-            <span className="profile-stat-label">Total Gold Earned</span>
+        {profile.bio && (
+          <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>
+            ))}
           </div>
-          <div className="profile-stat">
-            <span className="profile-stat-icon">👆</span>
-            <span className="profile-stat-value">{formatNumber(profile.totalClicks)}</span>
-            <span className="profile-stat-label">Total Clicks</span>
-          </div>
-          <div className="profile-stat">
-            <span className="profile-stat-icon">📅</span>
-            <span className="profile-stat-value profile-stat-date">{memberSince}</span>
-            <span className="profile-stat-label">Guild Founded</span>
-          </div>
-        </div>
+        )}
 
         <div className="profile-actions">
           <button