Android build v1.1.5

src/components/CombatScreen.tsx

@@ -46,7 +46,7 @@ import {
   spellPowerMultiplier,
   spellResourceCost as modifiedSpellResourceCost,
 } from '../combat/spellModifiers'
-import { advanceCooldowns, regenerateResource, tickSeconds } from '../combat/combatTick'
+import { regenerateResource } from '../combat/combatTick'
 import { advanceMemberTick, attachJumpedBounceHeals } from '../combat/combatEngine'
 import { applyCastStateUpdate } from '../combat/combatStateTransitions'
 import { buildCombatDualScreenState } from '../combat/dualScreenPayloads'
@@ -58,7 +58,11 @@ import {
   appendCombatLog,
   type BasicFloatingCombatText,
 } from '../combat/combatPresentation'
-import { canCastSpell } from '../combat/spellCasting'
+import {
+  canCastSpell,
+  pruneExpiredCooldowns,
+  reduceCooldown,
+} from '../combat/spellCasting'
 import {
   applySpellEffectProfile,
   buildSpellTargetPlan,
@@ -69,9 +73,11 @@ import {
   useInput,
 } from '../input'
 import { useFloatingCombatText } from '../hooks/useFloatingCombatText'
+import { useSpellSlots } from '../hooks/useSpellSlots'
 import { usePartyTargeting } from '../hooks/usePartyTargeting'
 import { PartyMemberFrame } from './PartyFrames'
-import { ResourceBar, SpellBar, type SpellSlot } from './SpellBars'
+import { ResourceBar, SpellBar } from './SpellBars'
+import { barFillStyle } from './barStyles'
 import { BonusItemReward, LootRollList, RewardXpSummary } from './RewardPanels'
 import { ResultScreen } from './ResultScreen'
 import {
@@ -668,10 +674,10 @@ export function CombatScreen({
       })
       floatingHeals.forEach((event) => addFloatingHeal(event.memberId, event.value))
       resourceSpentRef.current += effectiveCost
-      const nextCooldowns = { ...current.cooldowns }
+      let nextCooldowns = current.cooldowns
       if (spell.name === 'Mend' && activeEffects.has('mend_reduces_radiance_cooldown')) {
         const radiance = spellByName.get('Radiance')
-        if (radiance) nextCooldowns[radiance.id] = Math.max(0, (nextCooldowns[radiance.id] ?? 0) - 2)
+        if (radiance) nextCooldowns = reduceCooldown(nextCooldowns, radiance.id, 2)
       }
       setCombat(applyCastStateUpdate({
         current,
@@ -855,7 +861,7 @@ export function CombatScreen({
   const runCombatTick = useCallback(() => {
       const current = combatRef.current
       const nextElapsedTicks = current.elapsedTicks + 1
-      const nextCooldowns = advanceCooldowns(current.cooldowns, tickSeconds(TICK_MS))
+      const nextCooldowns = pruneExpiredCooldowns(current.cooldowns)
       let nextResource = regenerateResource(current.resource, 2.4, maxResource)
 
       const living = current.party.filter((member) => member.health > 0)
@@ -1161,17 +1167,17 @@ export function CombatScreen({
     }).reverse(),
     [enemyCount, enemyHealth, encounter.maxHealth],
   )
-  const spellSlots = useMemo<SpellSlot[]>(() => profile.abilitySlots.map((abilityId, slotIndex) => {
-    const spell = spellByKey.get(String(slotIndex + 1))
-    return abilityId && spell
-      ? {
-        ...spell,
-        cost: spellResourceCost(spell, roguelikeUpgradeCounts, freeCastReady),
-        slotIndex,
-        remaining: cooldowns[spell.id] ?? 0,
-      }
-      : null
-  }), [cooldowns, freeCastReady, profile.abilitySlots, roguelikeUpgradeCounts, spellByKey])
+  const spellSlotCost = useCallback(
+    (spell: Spell) => spellResourceCost(spell, roguelikeUpgradeCounts, freeCastReady),
+    [freeCastReady, roguelikeUpgradeCounts],
+  )
+  const spellSlots = useSpellSlots({
+    spells,
+    abilitySlots: profile.abilitySlots,
+    cooldowns,
+    active: status === 'playing' && !paused,
+    cost: spellSlotCost,
+  })
   const dualScreenState = useMemo(() => buildCombatDualScreenState({
     difficultyName: difficulty.name,
     dungeonName: dungeon.name,
@@ -1230,9 +1236,9 @@ export function CombatScreen({
   useDualScreenPublisher(dualScreenState, dualScreenEnabled)
 
   return (
-    <main
-      className={`game-shell ${dualScreenEnabled ? 'dual-top-game-shell' : ''}`}
-      data-combat-active={paused ? 'false' : 'true'}
+      <main
+        className={`game-shell ${dualScreenEnabled ? 'dual-top-game-shell' : ''}`}
+      data-combat-active={status === 'playing' && !paused ? 'true' : 'false'}
     >
       {!dualScreenEnabled && <header className="topbar">
         <div>
@@ -1266,13 +1272,13 @@ export function CombatScreen({
                 <div className="hard-enemy-bars">
                   {enemyHealthSegments.map((segment) => (
                     <div className="bar enemy-health" key={segment.index}>
-                      <span style={{ width: `${segment.percent}%` }} />
+                      <span style={barFillStyle(segment.percent)} />
                       <em>{encounter.enemyName} {segment.index + 1}: {Math.ceil(segment.health)} / {encounter.maxHealth}</em>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="bar enemy-health"><span style={{ width: `${enemyPercent}%` }} /></div>
+                <div className="bar enemy-health"><span style={barFillStyle(enemyPercent)} /></div>
               )}
               <p>{encounter.description}</p>
             </div>