82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import { ControllerBindingLabel } from '../../components/ControllerIcons'
|
|
import { DEFAULT_BINDINGS, useInput } from '../../input'
|
|
import { IWT2_CLASS_METADATA, IWT2_PARTY_ORDER } from './content/classes'
|
|
import { IWT2_ABILITY_ACTIONS, IWT2_TARGET_ACTIONS } from './content/controls'
|
|
import { abilitiesForHealer, IWT2_HEALER_METADATA } from './content/healerAbilities'
|
|
import { loadIwt2Save } from './save/iwt2Repository'
|
|
|
|
export function Iwt2BottomDisplay() {
|
|
const {
|
|
bindings,
|
|
directPartyTargeting,
|
|
lastDevice,
|
|
} = useInput()
|
|
const activeBindings = lastDevice === 'controller'
|
|
? bindings.controller
|
|
: DEFAULT_BINDINGS.controller
|
|
const save = loadIwt2Save()
|
|
const abilities = abilitiesForHealer(save.character.healerStyle)
|
|
const healer = IWT2_HEALER_METADATA[save.character.healerStyle]
|
|
const partyTargets = IWT2_PARTY_ORDER.map((classId) => IWT2_CLASS_METADATA[classId])
|
|
|
|
return (
|
|
<main className="dual-bottom-display iwt2-bottom-display">
|
|
<section className="dual-controls-resource iwt2-bottom-resource">
|
|
<div>
|
|
<p className="eyebrow">I Want To Heal 2</p>
|
|
<strong>{healer.name}</strong>
|
|
</div>
|
|
<div className="dual-controls-mana">
|
|
<span>Mana 100 / 100</span>
|
|
<div className="bar mana-bar"><span style={{ width: '100%' }} /></div>
|
|
</div>
|
|
</section>
|
|
<section className={`dual-controls-targets ${directPartyTargeting ? 'direct' : ''}`} aria-label="Party targets">
|
|
{directPartyTargeting ? (
|
|
partyTargets.map((target, index) => {
|
|
const action = IWT2_TARGET_ACTIONS[index] ?? 'targetParty1'
|
|
const label = target.id === 'healer' ? 'Player' : target.name.replace(' Tank', '')
|
|
return (
|
|
<div className="dual-control-chip" key={target.id}>
|
|
<ControllerBindingLabel
|
|
binding={activeBindings[action]}
|
|
iconStyle="playstation"
|
|
/>{' '}
|
|
{label}
|
|
</div>
|
|
)
|
|
})
|
|
) : (
|
|
<>
|
|
<div className="dual-control-chip">
|
|
<ControllerBindingLabel binding="Button12" iconStyle="playstation" /> Previous Target
|
|
</div>
|
|
<div className="dual-control-chip">
|
|
Next Target <ControllerBindingLabel binding="Button13" iconStyle="playstation" />
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
<section className="dual-controls-spells iwt2-bottom-spell-grid" aria-label="Spells and cooldowns">
|
|
{abilities.map((ability, index) => {
|
|
const action = IWT2_ABILITY_ACTIONS[index] ?? 'ability1'
|
|
return (
|
|
<div className="spell iwt2-bottom-spell" key={ability.id}>
|
|
<kbd>
|
|
<ControllerBindingLabel
|
|
binding={activeBindings[action]}
|
|
compact
|
|
iconStyle="playstation"
|
|
/>
|
|
</kbd>
|
|
<span className={`spell-icon spell-${ability.kind}`}>{ability.icon}</span>
|
|
<strong>{ability.name}</strong>
|
|
<small>{ability.manaCost} Mana</small>
|
|
</div>
|
|
)
|
|
})}
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|