import * as React from "react" ; import { CombatantState } from "../../common/CombatantState" ; import { EncounterState } from "../../common/EncounterState" ; import { CombatantRow } from "./CombatantRow" ; import { InitiativeListHeader } from "./InitiativeListHeader" ; export function InitiativeList ( props ) { const encounterState = props . encounterState ; return ( < div className = "initiative-list" > < h2 > Combatants by Initiative < /h2> < table className = "combatants" > < InitiativeListHeader encounterActive = { encounterState . ActiveCombatantId != null } /> < tbody > { encounterState . Combatants . map ( ( combatantState , index ) => { const siblingCount = props . combatantCountsByName [ combatantState . StatBlock . Name ] || 1 ; return ( < CombatantRow key = { combatantState . Id } combatantState = { combatantState } isActive = { encounterState . ActiveCombatantId == combatantState . Id } isSelected = { props . selectedCombatantIds . some ( id => id == combatantState . Id ) } showIndexLabel = { siblingCount > 1 } initiativeIndex = { index } / > ) ; } ) } < /tbody> < /table> < /div>); }