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

2026-03-06 13:56:12 -08:00
parent 32c13f73c4
commit 7e04daa073
11 changed files with 525 additions and 30 deletions
@@ -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>
+  );
+};