Android build v1.0.26

src/components/CombatScreen.tsx

@@ -35,7 +35,6 @@ import {
 } from '../dualScreen'
 
 const TICK_MS = 700
-const TARGET_RENDER_THROTTLE_MS = 180
 
 type RoguelikeMode = 'dungeon' | 'raid'
 type RoguelikeUpgradeTiming = 'boss' | 'encounter'
@@ -387,8 +386,6 @@ export function CombatScreen({
   const nextFloatingTextId = useRef(1)
   const combatRef = useRef(initialCombatState)
   const selectedIdRef = useRef(partyTemplate[0].id)
-  const selectedRenderTimeoutRef = useRef<number | null>(null)
-  const lastSelectedRenderAtRef = useRef(0)
   const { party, resource, enemyHealth, cooldowns, freeCastReady } = combatState
   const encounter = encounters[encounterIndex]
   const currentPart = getCurrentPart(encounterIndex)
@@ -438,32 +435,27 @@ export function CombatScreen({
       ? nextState(combatRef.current)
       : nextState
     combatRef.current = next
+    setSelectedId(selectedIdRef.current)
     setCombatState(next)
   }, [])
 
+  const syncSelectedTargetDom = useCallback((id: string) => {
+    document.querySelectorAll<HTMLButtonElement>('[data-party-member-id]').forEach((button) => {
+      const selected = button.dataset.partyMemberId === id
+      button.classList.toggle('selected', selected)
+      button.setAttribute('aria-pressed', String(selected))
+    })
+  }, [])
+
   const setSelectedTargetId = useCallback((id: string) => {
     if (selectedIdRef.current === id) return
     selectedIdRef.current = id
-    const now = performance.now()
-    const elapsed = now - lastSelectedRenderAtRef.current
-    if (elapsed >= TARGET_RENDER_THROTTLE_MS) {
-      lastSelectedRenderAtRef.current = now
-      setSelectedId(id)
-      return
-    }
-    if (selectedRenderTimeoutRef.current !== null) return
-    selectedRenderTimeoutRef.current = window.setTimeout(() => {
-      selectedRenderTimeoutRef.current = null
-      lastSelectedRenderAtRef.current = performance.now()
-      setSelectedId(selectedIdRef.current)
-    }, TARGET_RENDER_THROTTLE_MS - elapsed)
-  }, [])
+    syncSelectedTargetDom(id)
+  }, [syncSelectedTargetDom])
 
-  useEffect(() => () => {
-    if (selectedRenderTimeoutRef.current !== null) {
-      window.clearTimeout(selectedRenderTimeoutRef.current)
-    }
-  }, [])
+  useEffect(() => {
+    syncSelectedTargetDom(selectedIdRef.current)
+  }, [combatState, syncSelectedTargetDom])
 
   const addLog = useCallback((text: string, tone: CombatLogEntry['tone']) => {
     const entry = { id: nextLogId.current++, text, tone }
@@ -1218,17 +1210,16 @@ export function CombatScreen({
                 {party.map((member) => (
                   <button
                     className={`party-member ${selectedId === member.id ? 'selected' : ''} ${member.health <= 0 ? 'dead' : ''}`}
+                    data-party-member-id={member.id}
                     key={member.id}
                     onClick={() => setSelectedTargetId(member.id)}
                     aria-pressed={selectedId === member.id}
                     type="button"
                   >
-                    {selectedId === member.id && (
-                      <span className="target-marker" aria-hidden="true">
-                        <i />
-                        Target
-                      </span>
-                    )}
+                    <span className="target-marker" aria-hidden="true">
+                      <i />
+                      Target
+                    </span>
                     <div className="member-header">
                       <span className={`role role-${member.role.toLowerCase()}`}>{member.role[0]}</span>
                       <strong>{member.name}</strong>