elysium/apps/web/src/components/ui/ResourceBar.tsx

import type { Resource } from "@elysium/types";
import { useGame } from "../../context/GameContext.js";
import { RESOURCE_CAP } from "../../engine/tick.js";

interface ResourceBarProps {
  resources: Resource;
  runestones: number;
  prestigeCount: number;
  profileUrl: string;
  onEditProfile: () => void;
  lastSavedAt: number | null;
  isSyncing: boolean;
  onForceSync: () => Promise<void>;
}

const formatRelativeTime = (timestamp: number): string => {
  const seconds = Math.floor((Date.now() - timestamp) / 1000);
  if (seconds < 10) return "just now";
  if (seconds < 60) return `${seconds}s ago`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  return `${hours}h ago`;
};

const RESOURCE_FULL_TOOLTIP = "This resource is full! Consider spending some or prestiging to keep earning.";

export const ResourceBar = ({
  resources,
  runestones,
  prestigeCount,
  profileUrl,
  onEditProfile,
  lastSavedAt,
  isSyncing,
  onForceSync,
}: ResourceBarProps): React.JSX.Element => {
  const { formatNumber, syncError } = useGame();
  const anyFull = [resources.gold, resources.essence, resources.crystals].some((v) => v >= RESOURCE_CAP);
  return (
  <>
  <header className="resource-bar">
    <div className={`resource${resources.gold >= RESOURCE_CAP ? " resource-full" : ""}`}>
      <span className="resource-icon">🪙</span>
      <span className="resource-value">{formatNumber(resources.gold)}</span>
      <span className="resource-label">Gold</span>
      {resources.gold >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
    </div>
    <div className={`resource${resources.essence >= RESOURCE_CAP ? " resource-full" : ""}`}>
      <span className="resource-icon">✨</span>
      <span className="resource-value">{formatNumber(resources.essence)}</span>
      <span className="resource-label">Essence</span>
      {resources.essence >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
    </div>
    <div className={`resource${resources.crystals >= RESOURCE_CAP ? " resource-full" : ""}`}>
      <span className="resource-icon">💎</span>
      <span className="resource-value">{formatNumber(resources.crystals)}</span>
      <span className="resource-label">Crystals</span>
      {resources.crystals >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
    </div>
    <div className="resource">
      <span className="resource-icon">🔮</span>
      <span className="resource-value">{formatNumber(runestones)}</span>
      <span className="resource-label">Runestones</span>
    </div>
    {prestigeCount > 0 && (
      <div className="prestige-badge">
        ⭐ Prestige {prestigeCount}
      </div>
    )}
    <div className="profile-buttons">
      <a
        className="profile-link-button"
        href="https://donate.nhcarrigan.com"
        rel="noreferrer"
        target="_blank"
        title="Support the developer"
      >
        💜 Donate
      </a>
      <a
        className="profile-link-button"
        href="https://chat.nhcarrigan.com"
        rel="noreferrer"
        target="_blank"
        title="Join our Discord"
      >
        💬 Discord
      </a>
      {syncError !== null ? (
        <span className="save-status save-error" title={syncError}>
          ❌ Save failed
        </span>
      ) : lastSavedAt !== null ? (
        <span className="save-status" title={new Date(lastSavedAt).toLocaleString()}>
          ☁️ {formatRelativeTime(lastSavedAt)}
        </span>
      ) : null}
      <button
        className="force-save-button"
        disabled={isSyncing}
        onClick={onForceSync}
        title="Force cloud save"
        type="button"
      >
        {isSyncing ? "⏳" : "💾"}
      </button>
      <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>
  {anyFull && (
    <div className="resource-cap-notice">
      ⚠️ One or more resources are full! Consider spending some or prestiging to keep earning.
    </div>
  )}
  </>
  );
};