fix: delay passenger display update until train resets

Previously, passengers would update as soon as all cars exited (at 97%+),
causing new passengers to briefly appear on the old track before it changed.

Now passengers only update when:
1. Train resets to start position (< 0) - track has changed, OR
2. Same passengers (same route gameplay updates like boarding/delivering)

This eliminates the ephemeral passengers showing up after the last car
fades out but before the new track is displayed.

Updated test to verify passengers don't change until train resets.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/games/complement-race/hooks/__tests__/useTrackManagement.test.ts

@@ -269,7 +269,7 @@ describe('useTrackManagement', () => {
     expect(result.current.displayPassengers).toBe(mockPassengers)
   })
 
-  test('updates passenger display after all cars exit', () => {
+  test('does not update passenger display until train resets', () => {
     const newPassengers: Passenger[] = [
       {
         id: 'passenger-2',
@@ -299,11 +299,17 @@ describe('useTrackManagement', () => {
       }
     )
 
-    // Change passengers, locomotive at position where last car has exited
-    // Last car exits at position 97%, so locomotive needs to be at 97 + (5*7) = 132%
+    // Change passengers, locomotive at position where all cars have exited
+    // Last car exits at position 97%, so locomotive at 132%
     rerender({ passengers: newPassengers, position: 132 })
 
-    // Display passengers should update now (all cars exited)
+    // Display passengers should NOT update yet (waiting for train reset)
+    expect(result.current.displayPassengers).toBe(mockPassengers)
+
+    // Now train resets to beginning
+    rerender({ passengers: newPassengers, position: -5 })
+
+    // Display passengers should update now (train reset)
     expect(result.current.displayPassengers).toBe(newPassengers)
   })
 

apps/web/src/app/games/complement-race/hooks/useTrackManagement.ts

@@ -72,26 +72,18 @@ export function useTrackManagement({
 
   // Manage passenger display during route transitions
   useEffect(() => {
-    // Calculate the position of the last train car
-    const lastCarPosition = trainPosition - maxCars * carSpacing
-    const fadeOutEnd = 97 // Position where cars are fully faded out
-
     // Only switch to new passengers when:
-    // 1. Train has reset to start position (< 0), OR
-    // 2. All cars (including the last one) have exited (last car position >= fadeOutEnd)
-    const allCarsExited = lastCarPosition >= fadeOutEnd
+    // 1. Train has reset to start position (< 0) - track has changed, OR
+    // 2. Same passengers (same route, gameplay updates like boarding/delivering)
     const trainReset = trainPosition < 0
+    const samePassengers = passengers === previousPassengersRef.current
 
-    if (trainReset || allCarsExited || passengers === previousPassengersRef.current) {
+    if (trainReset || samePassengers) {
       setDisplayPassengers(passengers)
       previousPassengersRef.current = passengers
     }
-    // Otherwise, if we're mid-route and passengers changed, keep showing old passengers
-    else if (passengers !== previousPassengersRef.current) {
-      // Keep displaying old passengers until all cars exit
-      // Don't update displayPassengers yet
-    }
-  }, [passengers, trainPosition, maxCars, carSpacing])
+    // Otherwise, keep displaying old passengers until train resets and track changes
+  }, [passengers, trainPosition])
 
   // Update display passengers during gameplay (same route)
   useEffect(() => {