refactor: move canModifyPlayers logic into provider layer

Architecture improvement to separate concerns between game components
and session management:

BEFORE:
- MemoryPairsGame component had to know about rooms vs arcade sessions
- Component imported useRoomData and useArcadeRedirect
- Logic for button visibility leaked into presentation layer

AFTER:
- canModifyPlayers added to MemoryPairsContextValue interface
- RoomMemoryPairsProvider handles the logic internally:
  * If in room (roomData?.id exists): canModifyPlayers = false (show buttons)
  * If arcade session (no room): uses useArcadeRedirect.canModifyPlayers
- MemoryPairsGame just reads canModifyPlayers from context
- Clean separation: provider knows session type, component doesn't care

FIXES:
- Room-based games now always show Setup/New Game/Quit buttons
- Arcade sessions correctly hide buttons during setup phase
- /arcade/matching was incorrectly behaving like a room (now fixed)

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

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

apps/web/src/app/arcade/matching/components/MemoryPairsGame.tsx

@@ -3,8 +3,6 @@
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef } from 'react'
 import { PageWithNav } from '@/components/PageWithNav'
-import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
-import { useRoomData } from '@/hooks/useRoomData'
 import { css } from '../../../../../styled-system/css'
 import { StandardGameLayout } from '../../../../components/StandardGameLayout'
 import { useFullscreen } from '../../../../contexts/FullscreenContext'
@@ -15,13 +13,8 @@ import { SetupPhase } from './SetupPhase'
 
 export function MemoryPairsGame() {
   const router = useRouter()
-  const { state, exitSession, resetGame, goToSetup } = useMemoryPairs()
+  const { state, exitSession, resetGame, goToSetup, canModifyPlayers } = useMemoryPairs()
   const { setFullscreenElement } = useFullscreen()
-  const { isInRoom } = useRoomData()
-  const arcadeRedirect = useArcadeRedirect({ currentGame: 'matching' })
-  // In rooms, always show buttons (canModifyPlayers = false shows buttons)
-  // In arcade sessions, use normal arcade redirect logic
-  const canModifyPlayers = isInRoom ? false : arcadeRedirect.canModifyPlayers
   const gameRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {

apps/web/src/app/arcade/matching/context/RoomMemoryPairsProvider.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, useCallback, useEffect, useMemo } from 'react'
+import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
 import { useArcadeSession } from '@/hooks/useArcadeSession'
 import { useRoomData } from '@/hooks/useRoomData'
 import { useViewerId } from '@/hooks/useViewerId'
@@ -218,6 +219,13 @@ export function RoomMemoryPairsProvider({ children }: { children: ReactNode }) {
   const { roomData } = useRoomData() // Fetch room data for room-based play
   const { activePlayerCount, activePlayers: activePlayerIds, players } = useGameMode()
 
+  // Determine if we're in a room vs arcade session
+  const isInRoom = !!roomData?.id
+
+  // For arcade sessions (not in room), use arcade redirect logic
+  // For rooms, we ignore this and always show buttons
+  const arcadeRedirect = useArcadeRedirect({ currentGame: 'matching' })
+
   // Get active player IDs directly as strings (UUIDs)
   const activePlayers = Array.from(activePlayerIds)
 
@@ -557,6 +565,9 @@ export function RoomMemoryPairsProvider({ children }: { children: ReactNode }) {
     currentGameStatistics,
     hasConfigChanged,
     canResumeGame,
+    // Room-based: always show buttons (false = show buttons)
+    // Arcade session: use arcade redirect logic to determine button visibility
+    canModifyPlayers: isInRoom ? false : arcadeRedirect.canModifyPlayers,
     startGame,
     resumeGame,
     flipCard,

apps/web/src/app/arcade/matching/context/types.ts

@@ -120,6 +120,7 @@ export interface MemoryPairsContextValue {
   currentGameStatistics: GameStatistics
   gameMode: GameMode // Derived from global context
   activePlayers: Player[] // Active player IDs from arena
+  canModifyPlayers: boolean // Whether players can be added/removed (controls button visibility)
 
   // PAUSE/RESUME: Computed pause/resume values
   hasConfigChanged?: boolean