Android build v1.1.16

src/modes/iwt2/Iwt2BottomDisplay.tsx

@@ -2,7 +2,8 @@ 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 } from './content/healerAbilities'
+import { abilitiesForHealer, IWT2_HEALER_METADATA } from './content/healerAbilities'
+import { loadIwt2Save } from './save/iwt2Repository'
 
 export function Iwt2BottomDisplay() {
   const {
@@ -13,7 +14,9 @@ export function Iwt2BottomDisplay() {
   const activeBindings = lastDevice === 'controller'
     ? bindings.controller
     : DEFAULT_BINDINGS.controller
-  const abilities = abilitiesForHealer('field_medic')
+  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 (
@@ -21,7 +24,7 @@ export function Iwt2BottomDisplay() {
       <section className="dual-controls-resource iwt2-bottom-resource">
         <div>
           <p className="eyebrow">I Want To Heal 2</p>
-          <strong>Field Medic</strong>
+          <strong>{healer.name}</strong>
         </div>
         <div className="dual-controls-mana">
           <span>Mana 100 / 100</span>
@@ -34,23 +37,23 @@ export function Iwt2BottomDisplay() {
             const action = IWT2_TARGET_ACTIONS[index] ?? 'targetParty1'
             const label = target.id === 'healer' ? 'Player' : target.name.replace(' Tank', '')
             return (
-              <button type="button" key={target.id}>
+              <div className="dual-control-chip" key={target.id}>
                 <ControllerBindingLabel
                   binding={activeBindings[action]}
                   iconStyle="playstation"
                 />{' '}
                 {label}
-              </button>
+              </div>
             )
           })
         ) : (
           <>
-            <button type="button">
+            <div className="dual-control-chip">
               <ControllerBindingLabel binding="Button12" iconStyle="playstation" /> Previous Target
-            </button>
-            <button type="button">
+            </div>
+            <div className="dual-control-chip">
               Next Target <ControllerBindingLabel binding="Button13" iconStyle="playstation" />
-            </button>
+            </div>
           </>
         )}
       </section>
@@ -58,7 +61,7 @@ export function Iwt2BottomDisplay() {
         {abilities.map((ability, index) => {
           const action = IWT2_ABILITY_ACTIONS[index] ?? 'ability1'
           return (
-            <button className="spell iwt2-bottom-spell" key={ability.id} type="button">
+            <div className="spell iwt2-bottom-spell" key={ability.id}>
               <kbd>
                 <ControllerBindingLabel
                   binding={activeBindings[action]}
@@ -69,7 +72,7 @@ export function Iwt2BottomDisplay() {
               <span className={`spell-icon spell-${ability.kind}`}>{ability.icon}</span>
               <strong>{ability.name}</strong>
               <small>{ability.manaCost} Mana</small>
-            </button>
+            </div>
           )
         })}
       </section>