@@ -292,10 +292,44 @@ function Overview({ roundInfo, seasonInfo }) {
292292
293293function GameHistory ( { roundInfo } ) {
294294 const isPhoneDevice = useIsPhoneDevice ( ) ;
295+ const [ playerFilter , setPlayerFilter ] = useState ( "" ) ;
296+
297+ // Parse "player1, player2" and resolve to userIds from round participants
298+ const getFilterUserIds = ( ) => {
299+ const parts = playerFilter . split ( "," ) . map ( ( s ) => s . trim ( ) ) . filter ( Boolean ) ;
300+ if ( parts . length !== 2 ) return null ;
301+ const users = roundInfo ?. users || { } ;
302+ const matchedIds = [ ] ;
303+ const usedIds = new Set ( ) ;
304+ for ( const part of parts ) {
305+ const lower = part . toLowerCase ( ) ;
306+ const found = Object . entries ( users ) . find (
307+ ( [ id , data ] ) =>
308+ data ?. user ?. name &&
309+ data . user . name . toLowerCase ( ) . includes ( lower ) &&
310+ ! usedIds . has ( id )
311+ ) ;
312+ if ( found ) {
313+ matchedIds . push ( found [ 0 ] ) ;
314+ usedIds . add ( found [ 0 ] ) ;
315+ }
316+ }
317+ return matchedIds . length === 2 ? matchedIds : null ;
318+ } ;
319+
320+ const filterUserIds = getFilterUserIds ( ) ;
321+ let gameCompletionsFiltered = roundInfo ?. gameCompletions || [ ] ;
322+ if ( filterUserIds ) {
323+ const [ id1 , id2 ] = filterUserIds ;
324+ gameCompletionsFiltered = gameCompletionsFiltered . filter ( ( gc ) => {
325+ const playerIds = new Set ( gc . pointsEarnedByPlayers . map ( ( p ) => String ( p . userId ) ) ) ;
326+ return playerIds . has ( String ( id1 ) ) && playerIds . has ( String ( id2 ) ) ;
327+ } ) ;
328+ }
295329
296330 let currentRoundGamesByDay = { } ;
297331 if ( roundInfo ) {
298- for ( let gameCompletion of roundInfo . gameCompletions ) {
332+ for ( let gameCompletion of gameCompletionsFiltered ) {
299333 if ( currentRoundGamesByDay [ gameCompletion . day ] === undefined ) {
300334 currentRoundGamesByDay [ gameCompletion . day ] = [ ] ;
301335 }
@@ -305,6 +339,16 @@ function GameHistory({ roundInfo }) {
305339
306340 return (
307341 < Stack direction = "column" spacing = { 1 } >
342+ < SearchBar
343+ value = { playerFilter }
344+ placeholder = "Search for games with 2 players"
345+ onInput = { setPlayerFilter }
346+ />
347+ { filterUserIds && (
348+ < Typography variant = "body2" color = "text.secondary" >
349+ Showing { gameCompletionsFiltered . length } game(s) with both players
350+ </ Typography >
351+ ) }
308352 { Object . keys ( currentRoundGamesByDay ) . map ( ( day ) => (
309353 < Stack direction = "column" spacing = { 1 } key = { day } >
310354 < Typography variant = "h3" > Day { day } </ Typography >
0 commit comments