CombatTracker.tsx

``
"use client";

import { UseEncounterStore } from "@/lib/store";
import { EntityTrackerView } from "./EntityTrackerView";
import useStore from "@/lib/useStore";

export function CombatTracker() {
  const encounter = useStore(
    UseEncounterStore,
    (state) => state.current_encounter,
  );

  const gridLayout =
    "grid grid-cols-[80px_1fr_100px_80px] gap-4 items-center px-4";

  const sortedCombatants = (encounter?.entities || [])
    .flatMap((entity) =>
      entity.instances.map((instance) => ({
        ...instance,
        statblock: entity.statblock,
      })),
    )
    .sort((a, b) => b.initiative - a.initiative);


  return (
    <div className="w-full bg-slate-800/50 ...">
      {!encounter ? (
        <div className="p-8 text-slate-500 text-center">Loading...</div>
      ) : (
        <>
          <div
            className={`w-full ${gridLayout} py-3 border-b border-slate-700 bg-slate-900/50`}
          >
            <div className="text-amber-500 uppercase tracking-wider font-bold text-sm">
              Init
            </div>
            <div className="text-amber-500 uppercase tracking-wider font-bold text-sm">
              Name
            </div>
            <div className="text-amber-500 uppercase tracking-wider font-bold text-sm text-center">
              HP
            </div>
            <div className="text-amber-500 uppercase tracking-wider font-bold text-sm text-center">
              AC
            </div>
          </div>

          <div className="divide-y divide-slate-800">
            {sortedCombatants.length > 0 ? (
              sortedCombatants.map((entity) => (
                <EntityTrackerView key={entity.instance_id} {...entity} />
              ))
            ) : (
              <div className="p-8 text-center text-slate-500 italic">
                No monsters in encounter. Add some from the sidebar!
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}
```