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
@@ -14,6 +14,8 @@ model Player {
  discriminator   String
  avatar          String?
  characterName   String  @default("")
+  bio             String  @default("")
+  profileSettings Json?
  createdAt       Float
  lastSavedAt     Float
  totalGoldEarned Float   @default(0)
@@ -1,9 +1,32 @@
-import type { GameState } from "@elysium/types";
+import type {
+  GameState,
+  ProfileSettings,
+  UpdateProfileRequest,
+} from "@elysium/types";
 import { Hono } from "hono";
 import { prisma } from "../db/client.js";
+import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
+import { authMiddleware } from "../middleware/auth.js";

 export const profileRouter = new Hono();

+const parseProfileSettings = (raw: unknown): ProfileSettings => {
+  if (
+    raw !== null &&
+    typeof raw === "object" &&
+    !Array.isArray(raw)
+  ) {
+    const obj = raw as Record<string, unknown>;
+    return {
+      showTotalGold: obj.showTotalGold !== false,
+      showTotalClicks: obj.showTotalClicks !== false,
+      showPrestige: obj.showPrestige !== false,
+      showGuildFounded: obj.showGuildFounded !== false,
+    };
+  }
+  return { ...DEFAULT_PROFILE_SETTINGS };
+};
+
 profileRouter.get("/:discordId", async (context) => {
  const { discordId } = context.req.param();

@@ -18,14 +41,46 @@ profileRouter.get("/:discordId", async (context) => {

  const state = gameStateRecord?.state as unknown as GameState | undefined;
  const prestigeCount = state?.prestige.count ?? 0;
+  const profileSettings = parseProfileSettings(player.profileSettings);

  return context.json({
    characterName: player.characterName,
    username: player.username,
    avatar: player.avatar ?? null,
+    bio: player.bio ?? "",
+    profileSettings,
    prestigeCount,
    totalGoldEarned: player.totalGoldEarned,
    totalClicks: player.totalClicks,
    createdAt: player.createdAt,
  });
 });
+
+profileRouter.put("/", authMiddleware, async (context) => {
+  const discordId = context.get("discordId") as string;
+  const body = await context.req.json<UpdateProfileRequest>();
+
+  const characterName = (body.characterName ?? "").trim().slice(0, 32);
+  const bio = (body.bio ?? "").trim().slice(0, 200);
+  const profileSettings: ProfileSettings = {
+    showTotalGold: body.profileSettings?.showTotalGold !== false,
+    showTotalClicks: body.profileSettings?.showTotalClicks !== false,
+    showPrestige: body.profileSettings?.showPrestige !== false,
+    showGuildFounded: body.profileSettings?.showGuildFounded !== false,
+  };
+
+  if (!characterName) {
+    return context.json({ error: "Character name cannot be empty" }, 400);
+  }
+
+  const updated = await prisma.player.update({
+    where: { discordId },
+    data: { characterName, bio, profileSettings },
+  });
+
+  return context.json({
+    characterName: updated.characterName,
+    bio: updated.bio,
+    profileSettings,
+  });
+});
@@ -8,6 +8,8 @@ import type {
  PublicProfileResponse,
  SaveRequest,
  SaveResponse,
+  UpdateProfileRequest,
+  UpdateProfileResponse,
 } from "@elysium/types";

 const BASE_URL = "/api";
@@ -79,3 +81,11 @@ export const getPublicProfile = async (
  discordId: string,
 ): Promise<PublicProfileResponse> =>
  request<PublicProfileResponse>(`/profile/${discordId}`);
+
+export const updateProfile = async (
+  body: UpdateProfileRequest,
+): Promise<UpdateProfileResponse> =>
+  request<UpdateProfileResponse>("/profile", {
+    method: "PUT",
+    body: JSON.stringify(body),
+  });
@@ -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>
+  );
+};
@@ -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">
@@ -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
@@ -5,9 +5,15 @@ interface ResourceBarProps {
  resources: Resource;
  prestigeCount: number;
  profileUrl: string;
+  onEditProfile: () => void;
 }

-export const ResourceBar = ({ resources, prestigeCount, profileUrl }: ResourceBarProps): React.JSX.Element => (
+export const ResourceBar = ({
+  resources,
+  prestigeCount,
+  profileUrl,
+  onEditProfile,
+}: ResourceBarProps): React.JSX.Element => (
  <header className="resource-bar">
    <div className="resource">
      <span className="resource-icon">🪙</span>
@@ -34,14 +40,24 @@ export const ResourceBar = ({ resources, prestigeCount, profileUrl }: ResourceBa
        ⭐ Prestige {prestigeCount}
      </div>
    )}
-    <a
-      className="profile-link-button"
-      href={profileUrl}
-      rel="noreferrer"
-      target="_blank"
-      title="View your public profile"
-    >
-      👤 Profile
-    </a>
+    <div className="profile-buttons">
+      <a
+        className="profile-link-button"
+        href={profileUrl}
+        rel="noreferrer"
+        target="_blank"
+        title="View your public profile"
+      >
+        👤 Profile
+      </a>
+      <button
+        className="profile-edit-button"
+        onClick={onEditProfile}
+        title="Edit your profile"
+        type="button"
+      >
+        ✏️
+      </button>
+    </div>
  </header>
 );
@@ -1107,7 +1107,14 @@ body {
  font-size: 0.85rem;
 }

-/* ── Profile link button in ResourceBar ────────────────────────────────── */
+/* ── Profile buttons in ResourceBar ────────────────────────────────────── */
+
+.profile-buttons {
+  align-items: center;
+  display: flex;
+  gap: 0.35rem;
+  margin-left: auto;
+}

 .profile-link-button {
  align-items: center;
@@ -1118,7 +1125,6 @@ body {
  display: flex;
  font-size: 0.8rem;
  gap: 0.3rem;
-  margin-left: auto;
  padding: 0.3rem 0.8rem;
  text-decoration: none;
  transition: all 0.2s;
@@ -1131,6 +1137,27 @@ body {
  color: var(--colour-text);
 }

+.profile-edit-button {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(147, 51, 234, 0.4);
+  border-radius: 50%;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.85rem;
+  height: 2rem;
+  line-height: 1;
+  padding: 0;
+  transition: all 0.2s;
+  width: 2rem;
+}
+
+.profile-edit-button:hover {
+  background: rgba(147, 51, 234, 0.2);
+  border-color: var(--colour-primary);
+  color: var(--colour-text);
+}
+
 /* ── Public Profile Page ────────────────────────────────────────────────── */

 .profile-page {
@@ -1270,6 +1297,17 @@ body {
  opacity: 0.85;
 }

+.profile-bio {
+  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
+  border-top: 1px solid rgba(147, 51, 234, 0.2);
+  color: var(--colour-text-muted);
+  font-size: 0.9rem;
+  font-style: italic;
+  line-height: 1.5;
+  margin-bottom: 1.25rem;
+  padding: 0.75rem 0;
+}
+
 .profile-loading,
 .profile-error {
  color: var(--colour-text-muted);
@@ -1280,6 +1318,178 @@ body {
  text-align: center;
 }

+/* ── Edit Profile Modal ─────────────────────────────────────────────────── */
+
+.edit-profile-modal {
+  max-width: 480px;
+  text-align: left;
+  width: 100%;
+}
+
+.modal-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.modal-header h2 {
+  margin: 0;
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0.25rem;
+  transition: color 0.15s;
+}
+
+.modal-close:hover {
+  color: var(--colour-text);
+}
+
+.edit-profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.edit-profile-label {
+  color: var(--colour-text);
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+.edit-profile-sublabel {
+  color: var(--colour-text-muted);
+  font-size: 0.78rem;
+  margin: 0;
+}
+
+.edit-profile-input,
+.edit-profile-textarea {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(147, 51, 234, 0.4);
+  border-radius: 0.4rem;
+  color: var(--colour-text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  padding: 0.5rem 0.75rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.edit-profile-input:focus,
+.edit-profile-textarea:focus {
+  border-color: var(--colour-primary);
+  outline: none;
+}
+
+.edit-profile-hint {
+  color: var(--colour-text-muted);
+  font-size: 0.72rem;
+  text-align: right;
+}
+
+.edit-profile-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 0.25rem;
+}
+
+.stat-toggles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.stat-toggle-btn {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(147, 51, 234, 0.25);
+  border-radius: 0.4rem;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: 0.85rem;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  transition: all 0.15s;
+}
+
+.stat-toggle-on {
+  background: rgba(147, 51, 234, 0.12);
+  border-color: rgba(147, 51, 234, 0.5);
+  color: var(--colour-text);
+}
+
+.stat-toggle-indicator {
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.stat-toggle-on .stat-toggle-indicator {
+  color: var(--colour-success);
+}
+
+.edit-profile-error {
+  color: var(--colour-error);
+  font-size: 0.82rem;
+}
+
+.edit-profile-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.edit-profile-cancel {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.4rem;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  flex: 1;
+  font-family: inherit;
+  font-size: 0.9rem;
+  padding: 0.6rem;
+  transition: border-color 0.2s;
+}
+
+.edit-profile-cancel:hover {
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+.edit-profile-save {
+  background: var(--colour-primary);
+  border: none;
+  border-radius: 0.4rem;
+  color: #fff;
+  cursor: pointer;
+  flex: 2;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.6rem;
+  transition: opacity 0.2s;
+}
+
+.edit-profile-save:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.edit-profile-save:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 /* ── Panel Header (title + lock toggle row) ────────────────────────────── */

 .panel-header {