74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import { ControllerBindingLabel } from '../../../components/ControllerIcons'
|
|
import type { ControllerIconStyle } from '../../../input'
|
|
import { IWT2_CLASS_METADATA } from '../content/classes'
|
|
import type { Iwt2EntityId, Iwt2PartyEntityState } from '../sim'
|
|
import { ArenaBar } from './ArenaBars'
|
|
|
|
export function PartyFrames({
|
|
party,
|
|
selectedPartyId,
|
|
targetBindings,
|
|
controllerIconStyle,
|
|
onTarget,
|
|
}: {
|
|
party: Iwt2PartyEntityState[]
|
|
selectedPartyId: Iwt2EntityId
|
|
targetBindings?: Array<string | null>
|
|
controllerIconStyle?: ControllerIconStyle
|
|
onTarget: (id: Iwt2EntityId) => void
|
|
}) {
|
|
return (
|
|
<aside className="iwt2-party-list" data-game-nav-active="true">
|
|
{party.map((member) => {
|
|
const meta = IWT2_CLASS_METADATA[member.classId]
|
|
const selected = member.id === selectedPartyId
|
|
const targetBinding = targetBindings?.[party.indexOf(member)]
|
|
return (
|
|
<button
|
|
className={`iwt2-party-row ${targetBinding ? 'has-target-binding' : ''} ${selected ? 'game-selected selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
data-game-selected={selected ? 'true' : undefined}
|
|
key={member.id}
|
|
onClick={() => onTarget(member.id)}
|
|
type="button"
|
|
>
|
|
{targetBinding && (
|
|
<span className="iwt2-party-target-key">
|
|
<ControllerBindingLabel
|
|
binding={targetBinding}
|
|
iconStyle={controllerIconStyle ?? 'playstation'}
|
|
/>
|
|
</span>
|
|
)}
|
|
<span className="iwt2-party-portrait" style={{ backgroundColor: meta.color }}>
|
|
<img alt="" aria-hidden="true" draggable={false} src={meta.uiIconUrl} />
|
|
</span>
|
|
<div>
|
|
<div className="iwt2-party-row-title">
|
|
<strong>{meta.name}</strong>
|
|
</div>
|
|
<ArenaBar className="hp" current={member.health} label={`${Math.ceil(member.maxHealth)}`} max={member.maxHealth} shield={member.shield} />
|
|
{member.maxMana > 0 && (
|
|
<ArenaBar className="mana" current={member.mana} max={member.maxMana} />
|
|
)}
|
|
<div className="iwt2-party-effects">
|
|
{member.hotEffects.map((effect) => (
|
|
<span className="iwt2-effect-badge hot" key={effect.id}>
|
|
{effect.label} {Math.ceil(effect.remainingSeconds)}s
|
|
</span>
|
|
))}
|
|
{member.shield > 0 && (
|
|
<span className="iwt2-effect-badge shield">
|
|
Shield {Math.ceil(member.shield)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<small className="iwt2-party-damage">Damage {Math.round(member.damageDone)}</small>
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</aside>
|
|
)
|
|
}
|