chore: community feedback fixes and UI improvements (#102)

## Summary Addresses all community feedback tickets from the last deploy, plus several UI improvements made during the same session. ### Bug fixes & balance - **#97** — Fix auto-adventurer tier priority: sort by combat power instead of current cost so the highest-tier affordable unit is always purchased - **#98** — Add Dark Templar adventurer (80k CP) to bridge the Volcanic Depths progression wall; rewire upgrade and quest rewards accordingly - **#99** — Reorder and buff Shadow Assassin (55k CP, level 12) so Witch Coven feels rewarding rather than a regression - **#100** — Display effective Gold/s (all multipliers applied) in the resource bar - **#101** — Add Peasant tier 2 (10x, essence) and tier 3 (50x, crystals) upgrades for meaningful late-game scaling ### Other fixes - Sync game state to server before auto-boss challenges (matching manual challenge behaviour) - Refresh Discord avatar hash on every game load via bot token so stale CDN URLs are corrected automatically ### UI improvements - Replace Donate / Discord / Support / View Profile / Edit Profile buttons with a single avatar dropdown menu - Collapse all resources except Gold into a click-to-toggle dropdown; orange alert dot appears when a hidden resource is capped ## Closes Closes #97 Closes #98 Closes #99 Closes #100 Closes #101 Reviewed-on: #102 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
2026-03-23 16:07:25 -07:00
parent 7bd6b2d3e3
commit 3ac1d566cb
13 changed files with 698 additions and 191 deletions
@@ -4,12 +4,14 @@
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
+/* eslint-disable max-lines -- Resource bar has many resource and action elements */
 /* eslint-disable max-lines-per-function -- Large header with many resource and action elements */
+/* eslint-disable max-statements -- Resource bar requires many local computations and handlers */
 /* eslint-disable complexity -- Many conditional resource and badge render paths */
+import { useState, type FocusEvent, type JSX } from "react";
 import { useGame } from "../../context/gameContext.js";
-import { RESOURCE_CAP } from "../../engine/tick.js";
+import { RESOURCE_CAP, computeGoldPerSecond } from "../../engine/tick.js";
 import type { Resource } from "@elysium/types";
-import type { JSX } from "react";

 interface ResourceBarProperties {
  readonly resources:          Resource;
@@ -17,7 +19,6 @@ interface ResourceBarProperties {
  readonly prestigeCount:      number;
  readonly transcendenceCount: number;
  readonly apotheosisCount:    number;
-  readonly profileUrl:         string;
  readonly onEditProfile:      ()=> void;
  readonly lastSavedAt:        number | null;
  readonly isSyncing:          boolean;
@@ -58,7 +59,6 @@ const resourceFullTooltip = [
 * @param props.prestigeCount - The number of prestiges completed.
 * @param props.transcendenceCount - The number of transcendences completed.
 * @param props.apotheosisCount - The number of apotheoses completed.
- * @param props.profileUrl - The URL of the player's public profile.
 * @param props.onEditProfile - Callback to open the edit profile modal.
 * @param props.lastSavedAt - Timestamp of the last cloud save.
 * @param props.isSyncing - Whether a sync is currently in progress.
@@ -71,84 +71,168 @@ const ResourceBar = ({
  prestigeCount,
  transcendenceCount,
  apotheosisCount,
-  profileUrl,
  onEditProfile,
  lastSavedAt,
  isSyncing,
  onForceSync,
 }: ResourceBarProperties): JSX.Element => {
  const { formatNumber, syncError, state } = useGame();
+  const [ isProfileOpen, setIsProfileOpen ] = useState(false);
+  const [ isResourcesOpen, setIsResourcesOpen ] = useState(false);
+
  const { gold, essence, crystals } = resources;
  let partyCombatPower = 0;
+  let goldPerSecond = 0;
  if (state !== null) {
    for (const adventurer of state.adventurers) {
      const contribution = adventurer.combatPower * adventurer.count;
      partyCombatPower = partyCombatPower + contribution;
    }
+    goldPerSecond = computeGoldPerSecond(state);
  }
-  const resourceValues = [ gold, essence, crystals ];
-  const anyFull = resourceValues.some((v) => {
-    return v >= RESOURCE_CAP;
-  });
+
+  let avatarUrl: string | null = null;
+  if (state !== null) {
+    avatarUrl = state.player.avatar === null
+      ? `https://cdn.discordapp.com/embed/avatars/${String(Number.parseInt(state.player.discordId, 10) % 5)}.png`
+      : `https://cdn.discordapp.com/avatars/${state.player.discordId}/${state.player.avatar}.png?size=64`;
+  }
+  const profileUrl = state === null
+    ? "#"
+    : `/profile/${state.player.discordId}`;
+
  const goldFull = gold >= RESOURCE_CAP;
  const essenceFull = essence >= RESOURCE_CAP;
  const crystalsFull = crystals >= RESOURCE_CAP;
+  const anyFull = goldFull || essenceFull || crystalsFull;
+  const hiddenResourcesFull = essenceFull || crystalsFull;

  function handleForceSync(): void {
    void onForceSync();
  }

+  function handleToggleResources(): void {
+    setIsResourcesOpen((previous) => {
+      return !previous;
+    });
+  }
+
+  function handleResourceBlur(event: FocusEvent<HTMLDivElement>): void {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setIsResourcesOpen(false);
+    }
+  }
+
+  function handleToggleProfile(): void {
+    setIsProfileOpen((previous) => {
+      return !previous;
+    });
+  }
+
+  function handleProfileBlur(event: FocusEvent<HTMLDivElement>): void {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setIsProfileOpen(false);
+    }
+  }
+
+  function handleEditProfile(): void {
+    setIsProfileOpen(false);
+    onEditProfile();
+  }
+
  return (
    <>
      <header className="resource-bar">
-        <div className={`resource${goldFull
-          ? " resource-full"
-          : ""}`}>
-          <span className="resource-icon">{"🪙"}</span>
-          <span className="resource-value">{formatNumber(gold)}</span>
-          <span className="resource-label">{"Gold"}</span>
-          {goldFull
-            ? <span className="resource-cap-badge" title={resourceFullTooltip}>
-              {"FULL"}
-            </span>
+        <div
+          className="resource-menu"
+          onBlur={handleResourceBlur}
+        >
+          <button
+            className={`resource resource-toggle${goldFull
+              ? " resource-full"
+              : ""}`}
+            onClick={handleToggleResources}
+            title="Click to see all resources"
+            type="button"
+          >
+            <span className="resource-icon">{"🪙"}</span>
+            <span className="resource-value">{formatNumber(gold)}</span>
+            <span className="resource-label">{"Gold"}</span>
+            {goldFull
+              ? <span
+                className="resource-cap-badge"
+                title={resourceFullTooltip}
+              >
+                {"FULL"}
+              </span>
+              : null}
+            {hiddenResourcesFull
+              ? <span
+                className="resource-alert-dot"
+                title={"One or more resources are full!"}
+              />
+              : null}
+          </button>
+          {isResourcesOpen
+            ? <div className="resources-dropdown">
+              <div className="resource">
+                <span className="resource-icon">{"📈"}</span>
+                <span className="resource-value">
+                  {formatNumber(goldPerSecond)}
+                </span>
+                <span className="resource-label">{"Gold/s"}</span>
+              </div>
+              <div className={`resource${essenceFull
+                ? " resource-full"
+                : ""}`}>
+                <span className="resource-icon">{"✨"}</span>
+                <span className="resource-value">
+                  {formatNumber(essence)}
+                </span>
+                <span className="resource-label">{"Essence"}</span>
+                {essenceFull
+                  ? <span
+                    className="resource-cap-badge"
+                    title={resourceFullTooltip}
+                  >
+                    {"FULL"}
+                  </span>
+                  : null}
+              </div>
+              <div className={`resource${crystalsFull
+                ? " resource-full"
+                : ""}`}>
+                <span className="resource-icon">{"💎"}</span>
+                <span className="resource-value">
+                  {formatNumber(crystals)}
+                </span>
+                <span className="resource-label">{"Crystals"}</span>
+                {crystalsFull
+                  ? <span
+                    className="resource-cap-badge"
+                    title={resourceFullTooltip}
+                  >
+                    {"FULL"}
+                  </span>
+                  : null}
+              </div>
+              <div className="resource">
+                <span className="resource-icon">{"🔮"}</span>
+                <span className="resource-value">
+                  {formatNumber(runestones)}
+                </span>
+                <span className="resource-label">{"Runestones"}</span>
+              </div>
+              <div className="resource">
+                <span className="resource-icon">{"⚔️"}</span>
+                <span className="resource-value">
+                  {formatNumber(partyCombatPower)}
+                </span>
+                <span className="resource-label">{"Combat Power"}</span>
+              </div>
+            </div>
            : null}
        </div>
-        <div className={`resource${essenceFull
-          ? " resource-full"
-          : ""}`}>
-          <span className="resource-icon">{"✨"}</span>
-          <span className="resource-value">{formatNumber(essence)}</span>
-          <span className="resource-label">{"Essence"}</span>
-          {essenceFull
-            ? <span className="resource-cap-badge" title={resourceFullTooltip}>
-              {"FULL"}
-            </span>
-            : null}
-        </div>
-        <div className={`resource${crystalsFull
-          ? " resource-full"
-          : ""}`}>
-          <span className="resource-icon">{"💎"}</span>
-          <span className="resource-value">{formatNumber(crystals)}</span>
-          <span className="resource-label">{"Crystals"}</span>
-          {crystalsFull
-            ? <span className="resource-cap-badge" title={resourceFullTooltip}>
-              {"FULL"}
-            </span>
-            : null}
-        </div>
-        <div className="resource">
-          <span className="resource-icon">{"🔮"}</span>
-          <span className="resource-value">{formatNumber(runestones)}</span>
-          <span className="resource-label">{"Runestones"}</span>
-        </div>
-        <div className="resource">
-          <span className="resource-icon">{"⚔️"}</span>
-          <span className="resource-value">
-            {formatNumber(partyCombatPower)}
-          </span>
-          <span className="resource-label">{"Combat Power"}</span>
-        </div>
        {apotheosisCount > 0
          && <div className="apotheosis-badge">
            {"✨ Apotheosis "}
@@ -167,34 +251,7 @@ const ResourceBar = ({
            {prestigeCount}
          </div>
        }
-        <div className="profile-buttons">
-          <a
-            className="profile-link-button"
-            href="https://donate.nhcarrigan.com"
-            rel="noreferrer"
-            target="_blank"
-            title="Support the developer"
-          >
-            {"💜"} <span className="btn-label">{"Donate"}</span>
-          </a>
-          <a
-            className="profile-link-button"
-            href="https://chat.nhcarrigan.com"
-            rel="noreferrer"
-            target="_blank"
-            title="Join our Discord"
-          >
-            {"💬"} <span className="btn-label">{"Discord"}</span>
-          </a>
-          <a
-            className="profile-link-button"
-            href="https://support.nhcarrigan.com"
-            rel="noreferrer"
-            target="_blank"
-            title="Get support on our forum"
-          >
-            {"🆘"} <span className="btn-label">{"Support"}</span>
-          </a>
+        <div className="resource-bar-actions">
          {syncError === null
            ? null
            : <span className="save-status save-error" title={syncError}>
@@ -221,23 +278,69 @@ const ResourceBar = ({
              ? "⏳"
              : "💾"}
          </button>
-          <a
-            className="profile-link-button"
-            href={profileUrl}
-            rel="noreferrer"
-            target="_blank"
-            title="View your public profile"
-          >
-            {"👤"} <span className="btn-label">{"Profile"}</span>
-          </a>
-          <button
-            className="profile-edit-button"
-            onClick={onEditProfile}
-            title="Edit your profile"
-            type="button"
-          >
-            {"✏️"}
-          </button>
+          {avatarUrl === null
+            ? null
+            : <div
+              className="profile-menu"
+              onBlur={handleProfileBlur}
+            >
+              <button
+                className="profile-avatar-button"
+                onClick={handleToggleProfile}
+                title="Account"
+                type="button"
+              >
+                <img
+                  alt="Profile"
+                  className="profile-avatar-img"
+                  src={avatarUrl}
+                />
+              </button>
+              {isProfileOpen
+                ? <div className="profile-dropdown">
+                  <a
+                    className="profile-dropdown-item"
+                    href={profileUrl}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {"👤 View Profile"}
+                  </a>
+                  <button
+                    className="profile-dropdown-item"
+                    onClick={handleEditProfile}
+                    type="button"
+                  >
+                    {"✏️ Edit Profile"}
+                  </button>
+                  <hr className="profile-dropdown-divider" />
+                  <a
+                    className="profile-dropdown-item"
+                    href="https://donate.nhcarrigan.com"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {"💜 Donate"}
+                  </a>
+                  <a
+                    className="profile-dropdown-item"
+                    href="https://chat.nhcarrigan.com"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {"💬 Discord"}
+                  </a>
+                  <a
+                    className="profile-dropdown-item"
+                    href="https://support.nhcarrigan.com"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {"🆘 Support"}
+                  </a>
+                </div>
+                : null}
+            </div>}
        </div>
      </header>
      {anyFull