antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(complement-race): update passenger display when state changes

Browse Source 
Fix visual desync where delivered passengers remained displayed at stations.

The displayPassengers state only updated when train was at start (< 0%)
or in middle of track (10-90%). Passengers delivered at positions > 90%
(e.g., trainPos 103-130%) weren't reflected in the UI even though server
state was correct.

Now detects when passenger states change (boarding or delivery via
claimedBy/deliveredBy fields) and updates display immediately regardless
of train position. This ensures passenger cards disappear from HUD as
soon as passengers are delivered.

Also updated test files to use multiplayer Passenger type with
claimedBy/deliveredBy/carIndex/timestamp instead of old
isBoarded/isDelivered format.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-17 17:31:00 -05:00
parent 79db410b09
commit 511636400c
4 changed files with 101 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/app/arcade/complement-race/components/RaceTrack/__tests__/GameHUD.test.tsx
View File

@@ -1,6 +1,6 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, test, vi } from 'vitest'
import type { Passenger, Station } from '../../../lib/gameTypes'
import type { Passenger, Station } from '@/arcade-games/complement-race/types'
import { GameHUD } from '../GameHUD'
// Mock child components
@@ -33,9 +33,11 @@ describe('GameHUD', () => {
avatar: '👨',
originStationId: 'station-1',
destinationStationId: 'station-2',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
}
const defaultProps = {

86
apps/web/src/app/arcade/complement-race/hooks/__tests__/useTrackManagement.passenger-display.test.ts
View File

@@ -1,6 +1,6 @@
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, test, vi } from 'vitest'
import type { Passenger, Station } from '../../lib/gameTypes'
import type { Passenger, Station } from '@/arcade-games/complement-race/types'
import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
import { useTrackManagement } from '../useTrackManagement'
@@ -47,7 +47,7 @@ describe('useTrackManagement - Passenger Display', () => {
{ id: 'station3', name: 'Station 3', icon: '🏪', emoji: '🏪', position: 80 },
]
// Mock passengers - initial set
// Mock passengers - initial set (multiplayer format)
mockPassengers = [
{
id: 'p1',
@@ -55,9 +55,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👩',
originStationId: 'station1',
destinationStationId: 'station2',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
{
id: 'p2',
@@ -65,9 +67,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👨',
originStationId: 'station2',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -111,18 +115,18 @@ describe('useTrackManagement - Passenger Display', () => {
// Initially 2 passengers
expect(result.current.displayPassengers).toHaveLength(2)
expect(result.current.displayPassengers[0].isBoarded).toBe(false)
expect(result.current.displayPassengers[0].claimedBy).toBe(null)
// Board first passenger
const boardedPassengers = mockPassengers.map((p) =>
p.id === 'p1' ? { ...p, isBoarded: true } : p
p.id === 'p1' ? { ...p, claimedBy: 'player1', carIndex: 0 } : p
)
rerender({ passengers: boardedPassengers, position: 25 })
// Should show updated passengers
expect(result.current.displayPassengers).toHaveLength(2)
expect(result.current.displayPassengers[0].isBoarded).toBe(true)
expect(result.current.displayPassengers[0].claimedBy).toBe('player1')
})
test('passengers do NOT update during route transition (train moving)', () => {
@@ -153,9 +157,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👴',
originStationId: 'station1',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -196,9 +202,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👴',
originStationId: 'station1',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -239,9 +247,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👴',
originStationId: 'station1',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -316,18 +326,18 @@ describe('useTrackManagement - Passenger Display', () => {
// Initially 2 passengers, neither delivered
expect(result.current.displayPassengers).toHaveLength(2)
expect(result.current.displayPassengers[0].isDelivered).toBe(false)
expect(result.current.displayPassengers[0].deliveredBy).toBe(null)
// Deliver first passenger
const deliveredPassengers = mockPassengers.map((p) =>
p.id === 'p1' ? { ...p, isBoarded: true, isDelivered: true } : p
p.id === 'p1' ? { ...p, claimedBy: 'player1', carIndex: 0, deliveredBy: 'player1' } : p
)
rerender({ passengers: deliveredPassengers, position: 55 })
// Should show updated passengers immediately
expect(result.current.displayPassengers).toHaveLength(2)
expect(result.current.displayPassengers[0].isDelivered).toBe(true)
expect(result.current.displayPassengers[0].deliveredBy).toBe('player1')
})
test('multiple rapid passenger updates during same route', () => {
@@ -350,25 +360,27 @@ describe('useTrackManagement - Passenger Display', () => {
expect(result.current.displayPassengers).toHaveLength(2)
// Board p1
let updated = mockPassengers.map((p) => (p.id === 'p1' ? { ...p, isBoarded: true } : p))
let updated = mockPassengers.map((p) =>
p.id === 'p1' ? { ...p, claimedBy: 'player1', carIndex: 0 } : p
)
rerender({ passengers: updated, position: 26 })
expect(result.current.displayPassengers[0].isBoarded).toBe(true)
expect(result.current.displayPassengers[0].claimedBy).toBe('player1')
// Board p2
updated = updated.map((p) => (p.id === 'p2' ? { ...p, isBoarded: true } : p))
updated = updated.map((p) => (p.id === 'p2' ? { ...p, claimedBy: 'player1', carIndex: 1 } : p))
rerender({ passengers: updated, position: 52 })
expect(result.current.displayPassengers[1].isBoarded).toBe(true)
expect(result.current.displayPassengers[1].claimedBy).toBe('player1')
// Deliver p1
updated = updated.map((p) => (p.id === 'p1' ? { ...p, isDelivered: true } : p))
updated = updated.map((p) => (p.id === 'p1' ? { ...p, deliveredBy: 'player1' } : p))
rerender({ passengers: updated, position: 53 })
expect(result.current.displayPassengers[0].isDelivered).toBe(true)
expect(result.current.displayPassengers[0].deliveredBy).toBe('player1')
// All updates should have been reflected
expect(result.current.displayPassengers[0].isBoarded).toBe(true)
expect(result.current.displayPassengers[0].isDelivered).toBe(true)
expect(result.current.displayPassengers[1].isBoarded).toBe(true)
expect(result.current.displayPassengers[1].isDelivered).toBe(false)
expect(result.current.displayPassengers[0].claimedBy).toBe('player1')
expect(result.current.displayPassengers[0].deliveredBy).toBe('player1')
expect(result.current.displayPassengers[1].claimedBy).toBe('player1')
expect(result.current.displayPassengers[1].deliveredBy).toBe(null)
})
test('EDGE CASE: new passengers at position 0 with old route', () => {
@@ -402,9 +414,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👴',
originStationId: 'station1',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -445,9 +459,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👴',
originStationId: 'station1',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -483,9 +499,11 @@ describe('useTrackManagement - Passenger Display', () => {
avatar: '👴',
originStationId: 'station1',
destinationStationId: 'station3',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]

35
apps/web/src/app/arcade/complement-race/hooks/__tests__/useTrackManagement.test.ts
View File

@@ -1,6 +1,6 @@
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, test, vi } from 'vitest'
import type { Passenger, Station } from '../../lib/gameTypes'
import type { Passenger, Station } from '@/arcade-games/complement-race/types'
import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
import { useTrackManagement } from '../useTrackManagement'
@@ -60,9 +60,11 @@ describe('useTrackManagement', () => {
avatar: '👨',
originStationId: 'station-1',
destinationStationId: 'station-2',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -155,6 +157,8 @@ describe('useTrackManagement', () => {
pathRef: mockPathRef,
stations: mockStations,
passengers: mockPassengers,
maxCars: 3,
carSpacing: 7,
})
)
@@ -174,6 +178,8 @@ describe('useTrackManagement', () => {
pathRef: mockPathRef,
stations: mockStations,
passengers: mockPassengers,
maxCars: 3,
carSpacing: 7,
}),
{
initialProps: { route: 1, position: 0 },
@@ -200,6 +206,8 @@ describe('useTrackManagement', () => {
pathRef: mockPathRef,
stations: mockStations,
passengers: mockPassengers,
maxCars: 3,
carSpacing: 7,
}),
{
initialProps: { route: 1, position: 0 },
@@ -227,6 +235,8 @@ describe('useTrackManagement', () => {
pathRef: mockPathRef,
stations: mockStations,
passengers: mockPassengers,
maxCars: 3,
carSpacing: 7,
}),
{
initialProps: { route: 1, position: -5 },
@@ -250,9 +260,11 @@ describe('useTrackManagement', () => {
avatar: '👩',
originStationId: 'station-1',
destinationStationId: 'station-2',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -287,12 +299,15 @@ describe('useTrackManagement', () => {
const newPassengers: Passenger[] = [
{
id: 'passenger-2',
name: 'Passenger 2',
avatar: '👩',
originStationId: 'station-1',
destinationStationId: 'station-2',
isBoarded: false,
isDelivered: false,
isUrgent: false,
claimedBy: null,
deliveredBy: null,
carIndex: null,
timestamp: Date.now(),
},
]
@@ -328,7 +343,9 @@ describe('useTrackManagement', () => {
})
test('updates passengers immediately during same route', () => {
const updatedPassengers: Passenger[] = [{ ...mockPassengers[0], isBoarded: true }]
const updatedPassengers: Passenger[] = [
{ ...mockPassengers[0], claimedBy: 'player1', carIndex: 0 },
]
const { result, rerender } = renderHook(
({ passengers, position }) =>
@@ -368,6 +385,8 @@ describe('useTrackManagement', () => {
pathRef: mockPathRef,
stations: mockStations,
passengers: mockPassengers,
maxCars: 3,
carSpacing: 7,
})
)

22
apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts
View File

@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'
import type { Passenger, Station } from '../lib/gameTypes'
import type { Passenger, Station } from '@/arcade-games/complement-race/types'
import { generateLandmarks, type Landmark } from '../lib/landmarks'
import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'
@@ -78,21 +78,33 @@ export function useTrackManagement({
useEffect(() => {
// Only switch to new passengers when:
// 1. Train has reset to start position (< 0) - track has changed, OR
// 2. Same route AND train is in middle of track (10-90%) - gameplay updates like boarding/delivering
// 2. Same route AND (in middle of track OR passengers have changed state)
const trainReset = trainPosition < 0
const sameRoute = currentRoute === displayRouteRef.current
const inMiddleOfTrack = trainPosition >= 10 && trainPosition < 90 // Avoid start/end transition zones
// Detect if passenger states have changed (boarding or delivery)
// This allows updates even when train is past 90% threshold
const passengerStatesChanged =
sameRoute &&
passengers.some((p) => {
const oldPassenger = displayPassengers.find((dp) => dp.id === p.id)
return (
oldPassenger &&
(oldPassenger.claimedBy !== p.claimedBy || oldPassenger.deliveredBy !== p.deliveredBy)
)
})
if (trainReset) {
// Train reset - update to new route's passengers
setDisplayPassengers(passengers)
displayRouteRef.current = currentRoute
} else if (sameRoute && inMiddleOfTrack) {
// Same route and train in middle of track - update passengers for gameplay changes (boarding/delivery)
} else if (sameRoute && (inMiddleOfTrack || passengerStatesChanged)) {
// Same route and either in middle of track OR passenger states changed - update for gameplay
setDisplayPassengers(passengers)
}
// Otherwise, keep displaying old passengers until train resets
}, [passengers, trainPosition, currentRoute])
}, [passengers, displayPassengers, trainPosition, currentRoute])
// Generate ties and rails when path is ready
useEffect(() => {