stellar/client/src/components/Hud.tsx

import { type GameState } from "../game/types";

const objectives = [
  "Clear lower-tier debris to unlock heavier targets",
  "Meteorites and larger bodies only absorb after their mass gate",
  "Persist profile data in M3"
];

interface HudProps {
  gameState: GameState;
}

export function Hud({ gameState }: HudProps) {
  return (
    <aside className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-cyan-950/30 backdrop-blur">
      <div className="mb-6">
        <p className="text-xs uppercase tracking-[0.3em] text-glow/70">Mission Board</p>
        <h2 className="mt-2 text-2xl font-semibold text-white">Sector Absorption</h2>
      </div>

      <dl className="grid grid-cols-2 gap-3 text-sm">
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Mass</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.mass.toFixed(0)}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Tier</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.tier}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">XP</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.xp}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Pull Radius</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.pullRadius.toFixed(0)}m</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">FPS</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.fps.toFixed(0)}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Consumed</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.consumedObjects}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Objects Left</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.objectsRemaining}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Max Prey</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.preyTier}</dd>
        </div>
        <div className="rounded-2xl bg-black/20 p-3">
          <dt className="text-slate-400">Next Unlock</dt>
          <dd className="mt-1 text-xl font-semibold">{gameState.nextUnlock ?? "Complete"}</dd>
        </div>
      </dl>

      <div className="mt-6">
        <p className="text-xs uppercase tracking-[0.3em] text-amber-300/70">Next Steps</p>
        <ul className="mt-3 space-y-3 text-sm text-slate-200">
          {objectives.map((objective) => (
            <li key={objective} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
              {objective}
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
}