\n ...render using sim...\n

\n `;\n};\n```\n\nWait, useEffect needs to be imported. And logRef scroll effect can be in component or hook. Let me keep it in component since it needs DOM ref.\n\nAlso, I should import useEffect in SimulationRunner.js.\n\nActually, the logRef scroll effect could be in the hook too. But it's fine in component.\n\nLet me write SimulationRunner.js fully.\n\nAlso, I need to update TacticalView because it currently uses `onCheckSideRoom` prop but the prop name in SimulationRunner.js is `onCheckSideRoom=${...}`. In my hook I named the handler `handleCheckSideRoom`, so I'll pass that as `onCheckSideRoom`.\n\nLet me also make sure I import `useEffect` in SimulationRunner.js.\n\nOne more thing: the useTacticalSimulation hook has the deployment + simulation useEffect with empty deps `[]`. But it uses `mission` from props, which is fine since hook is called with stable mission during a mission. The effect runs once per mission.\n\nBut the linter might complain about missing deps. Since we intentionally want it once, it's OK. We can add eslint-disable comment.\n\nActually in the current code it already has `// eslint-disable-next-line react-hooks/exhaustive-deps` so I'll keep that.\n\nWait, my hook uses `useEffect(() => {...}, [])` which is fine but I also have other useEffects. The main one with empty deps will run once. Inside it, closures over `swatPos`, `enemies`, `simSquad` etc will be stale. But I use refs for currentRoomIndex and controlMode, and the helper functions in ctx use refs/getters where needed.\n\nFor `swatPos`, moveSwat uses `swatPosRef.set` to update state, and ctx.swatPosRef.get returns latest swatPos. But inside the loop, I use `const currentPos = { ...swatPos };` which is stale! I should use `ctx.swatPosRef.get()` instead.\n\nSimilarly, when updating simSquad in the deployment, I use setSimSquad updater which is fine.\n\nIn runFallback, I use `const currentPos = { ...swatPos };` - this should be `ctx.swatPosRef.get()`.\n\nLet me fix that.\n\nAlso in the loop, `currentRoomEnemies = initialEnemies.filter(...)` - initialEnemies is captured from initialization. But enemies can die, so we should use `enemiesRef.get()` or `enemies` state. Actually `initialEnemies` is the array that was set to state. Since enemies are objects, filtering initialEnemies and checking `.alive` should work because the objects are mutated in state? Wait no, React state should be immutable. But Combat.js uses `enemiesRef.set(enemiesRef.get().map(...))` so it creates new arrays but the objects inside might be mutated or replaced.\n\nActually, `initializeEnemies` returns an array of enemy objects. `setEnemies(initialEnemies)` stores that array. When Combat.js updates, it does `enemiesRef.set(enemiesRef.get().map(e => ...))` which creates a new array. So `initialEnemies` (the original array) is no longer the current state after the first update. But the objects inside might still be referenced if they weren't replaced. However, when an enemy dies, Combat.js returns `{ ...e, hp: 0, alive: false, status: enemyOutcome }` which creates a new object. So the object in initialEnemies is no longer the same as the one in state.\n\nTherefore, `initialEnemies.filter(e => e.room === ... && e.alive)` will check the original objects, not the updated state. This is a bug.\n\nI should use `enemies.filter(...)` or `enemiesRef.get().filter(...)`. But inside the async loop, `enemies` from closure is stale. So I should use `enemiesRef.get()` (ctx.enemiesRef.get()).\n\nIn my hook, ctx.enemiesRef.get returns latest enemies. So I'll use that.\n\nLet me update the loop to use `ctx.enemiesRef.get()` for current enemies.\n\nAlso, when checking `currentRoomEnemies.length > 0`, use the latest.\n\nAnd in the combat loop, use `currentRoomEnemies` array directly. But if an enemy dies during combatRound, the array still contains the old object. combatRound uses enemy.id and looks up in enemiesRef, so it's OK.\n\nActually, I realize the existing logic has more bugs, but my goal is to refactor while preserving behavior. However, some bugs (like stale closures) prevent basic functionality. I think fixing them is necessary for \"easier to build on.\"\n\nLet me write the corrected version.\n\nIn runSim:\n```js\nconst currentEnemies = ctx.enemiesRef.get();\nconst currentRoomEnemies = currentEnemies.filter(e => e.room === roomIndexToClear && e.alive);\n```\n\nAlso for the breaching condition, use currentRoomEnemies.\n\nOK let me finalize.\n\nOne more thing: in the loop, after breaching/entering, the code does:\n```js\nfor (const enemy of currentRoomEnemies) {\n if (statusRef.current !== 'active') break;\n await combatRound(enemy.id, ctx);\n}\n```\n\nThis iterates over the original currentRoomEnemies array. If all enemies are killed in the first combatRound, the subsequent iterations will find no alive enemy and combatRound will break early. So it's OK.\n\nBut wait, combatRound is called per enemy and inside it loops until that enemy is dead. If there are multiple enemies, it processes them sequentially. That seems intended.\n\nActually, combatRound has an outer while loop that finds the enemy by id and fights it. So calling combatRound for each enemy id will handle each one.\n\nOK.\n\nNow, let me think about whether I should also split TacticalView.js or other files. The user specifically asked about SimulationRunner.js being large. So I'll focus on that.\n\nLet me also ensure I use proper tombstone comments in SimulationRunner.js.\n\nLet me write the final files.\n\nOne issue: `moveSwat` function from Combat.js uses `swatPosRef.set(target)` which sets state. But it doesn't return a promise that waits for the state update. It just `await delay(1000)`. That's fine, it's just animation timing.\n\nActually, let me check moveSwat:\n```js\nexport async function moveSwat(target, ctx) {\n const { swatPosRef, delay, addLog } = ctx;\n swatPosRef.set(target);\n await delay(1000);\n}\n```\n\nIt sets state then waits 1 second. Good.\n\nNow, writing the files.\n\nAlso need to make sure `onCheckSideRoom` in useTacticalSimulation passes ctx with `moveSwat` and `combatRound`. Currently I pass those explicitly. Good.\n\nAlso, the `onCheckSideRoom` function from MissionOrders.js expects `ctx.mission`. I pass `mission` in the object but not as `ctx.mission`. Let me check MissionOrders.js:\n\n```js\nexport const onCheckSideRoom = async (doorInfo, ctx) => {\n const { simSquad, setSimSquad, enemies, addLog, delay, swatPos, setSwatPos, moveSwat, combatRound } = ctx;\n ...\n const roomHeight = (70 / ctx.mission.rooms);\n```\n\nSo it accesses `ctx.mission`. I need to include `mission` in the object. In my handleCheckSideRoom I pass `{ simSquad, setSimSquad, enemies, addLog, delay, swatPos, setSwatPos, moveSwat, combatRound }` but not `mission`. I need to add it.\n\nLet me fix that.\n\nSimilarly, orderOfficerToRoom and orderGroupToRoom use `mission` from the context object passed to them. In my handleMapClick, I pass `{ setSimSquad, addLog, mission, swatPos, setSwatPos }` for orderOfficerToRoom and `{ setSimSquad, addLog, mission, swatPos, setSwatPos, setGroupTargetRoom }` for orderGroupToRoom. That's correct.\n\nOK.\n\nLet me also note that in the current SimulationRunner.js, the `onCheckSideRoom` handler passes `moveSwat` and `combatRound` but not `mission` explicitly - wait, it does:\n```js\nonCheckSideRoom=${(doorInfo) => onCheckSideRoom(doorInfo, {\n simSquad, setSimSquad, enemies, addLog, delay, swatPos, setSwatPos, moveSwat, combatRound\n})}\n```\n\nNo `mission` in there! But MissionOrders.js uses `ctx.mission`. So this is another existing bug. My refactor will fix it by including mission.\n\nOK let me write everything now.\n\nI think this is a solid refactor plan. Let me output the files.\n\nFiles to create/modify:\n1. Create `useTacticalSimulation.js` (new file)\n2. Modify `SimulationRunner.js` (slim component)\n\nThat's it. SimulationEngineCore.js and TacticalSimRunner.js don't need changes.\n\nLet me write the code.\n\nuseTacticalSimulation.js\n```useTacticalSimulation.js\n```\n\nSimulationRunner.js\n```SimulationRunner.js\n```\n\nSummary: I extracted the bulk of `SimulationRunner.js` into a new `useTacticalSimulation.js` hook that owns all mission state, the deployment animation, simulation loop, effects, and control handlers. `SimulationRunner.js` is now a thin presentational component with tombstone comments noting the moved code. I also fixed stale-closure bugs in the loop by syncing `currentRoomIndex`, `controlMode`, and `groupTargetRoom` to refs, and added missing `mission`, `finishMission`, and `setCapturedCount` entries to the combat context so captured enemies and squad wipes work correctly.","page_description","cursor","eyJpZCI6InNwNmNoM25uYWdxN25iOHFfc2hxIn0","token","included",[],"about",{"_193":-5},"parent","routes/browser/layout","actionData","errors"]

SWAT Commander