Files
initiative/apps/web/src/App.tsx

68 lines
1.6 KiB
TypeScript

import { ActionBar } from "./components/action-bar";
import { CombatantRow } from "./components/combatant-row";
import { TurnNavigation } from "./components/turn-navigation";
import { useEncounter } from "./hooks/use-encounter";
export function App() {
const {
encounter,
advanceTurn,
retreatTurn,
addCombatant,
removeCombatant,
editCombatant,
setInitiative,
setHp,
adjustHp,
setAc,
toggleCondition,
toggleConcentration,
} = useEncounter();
return (
<div className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 px-4 py-8">
{/* Header */}
<header className="space-y-1">
<h1 className="text-2xl font-bold tracking-tight">
Initiative Tracker
</h1>
</header>
{/* Turn Navigation */}
<TurnNavigation
encounter={encounter}
onAdvanceTurn={advanceTurn}
onRetreatTurn={retreatTurn}
/>
{/* Combatant List */}
<div className="flex flex-1 flex-col gap-1">
{encounter.combatants.length === 0 ? (
<p className="py-12 text-center text-sm text-muted-foreground">
No combatants yet add one to get started
</p>
) : (
encounter.combatants.map((c, i) => (
<CombatantRow
key={c.id}
combatant={c}
isActive={i === encounter.activeIndex}
onRename={editCombatant}
onSetInitiative={setInitiative}
onRemove={removeCombatant}
onSetHp={setHp}
onAdjustHp={adjustHp}
onSetAc={setAc}
onToggleCondition={toggleCondition}
onToggleConcentration={toggleConcentration}
/>
))
)}
</div>
{/* Action Bar */}
<ActionBar onAddCombatant={addCombatant} />
</div>
);
}