feat: refactor room addressing to /arcade/room

Simplify room URL structure so users access their room's game at
/arcade/room instead of /arcade/rooms/[roomId]/[game]. Since users can
only be in one room at a time (modal room enforcement), this provides a
cleaner addressing model.

Changes:
- useRoomData now fetches user's current room from /api/arcade/rooms/current
- Created /api/arcade/rooms/current endpoint to get user's active room
- Created /arcade/room page that renders the appropriate game for the room
- Removed URL parsing logic in favor of backend room lookup
- Socket connection and real-time updates still work with new structure

Next step: Extend GameModeContext to merge players from all room members
so gameplay uses the union of all active players in the room.

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

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

apps/web/src/app/api/arcade/rooms/current/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server'
+import { getUserRooms } from '@/lib/arcade/room-membership'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
+
+/**
+ * GET /api/arcade/rooms/current
+ * Returns the user's current room (if any)
+ */
+export async function GET() {
+  try {
+    const userId = await getViewerId()
+
+    // Get all rooms user is in (should be at most 1 due to modal room enforcement)
+    const roomIds = await getUserRooms(userId)
+
+    if (roomIds.length === 0) {
+      return NextResponse.json({ room: null }, { status: 200 })
+    }
+
+    const roomId = roomIds[0]
+
+    // Get room data
+    const room = await getRoomById(roomId)
+    if (!room) {
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
+    }
+
+    // Get members
+    const members = await getRoomMembers(roomId)
+
+    // Get active players for all members
+    const memberPlayers = await getRoomActivePlayers(roomId)
+
+    // Convert Map to object for JSON serialization
+    const memberPlayersObj: Record<string, any[]> = {}
+    for (const [uid, players] of memberPlayers.entries()) {
+      memberPlayersObj[uid] = players
+    }
+
+    return NextResponse.json({
+      room,
+      members,
+      memberPlayers: memberPlayersObj,
+    })
+  } catch (error) {
+    console.error('[Current Room API] Error:', error)
+    return NextResponse.json({ error: 'Failed to fetch current room' }, { status: 500 })
+  }
+}

apps/web/src/app/arcade/room/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+import { ArcadeGuardedPage } from '@/components/ArcadeGuardedPage'
+import { useRoomData } from '@/hooks/useRoomData'
+import { MemoryPairsGame } from '../matching/components/MemoryPairsGame'
+import { ArcadeMemoryPairsProvider } from '../matching/context/ArcadeMemoryPairsContext'
+
+/**
+ * /arcade/room - Renders the game for the user's current room
+ * Since users can only be in one room at a time, this is a simple singular route
+ */
+export default function RoomPage() {
+  const router = useRouter()
+  const { roomData, isLoading } = useRoomData()
+
+  // Redirect to arcade if no room
+  useEffect(() => {
+    if (!isLoading && !roomData) {
+      console.log('[RoomPage] No active room, redirecting to /arcade')
+      router.push('/arcade')
+    }
+  }, [isLoading, roomData, router])
+
+  // Show loading state
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: '#666',
+        }}
+      >
+        Loading room...
+      </div>
+    )
+  }
+
+  // Show nothing while redirecting
+  if (!roomData) {
+    return null
+  }
+
+  // Render the appropriate game based on room's gameName
+  switch (roomData.gameName) {
+    case 'matching':
+      return (
+        <ArcadeGuardedPage>
+          <ArcadeMemoryPairsProvider>
+            <MemoryPairsGame />
+          </ArcadeMemoryPairsProvider>
+        </ArcadeGuardedPage>
+      )
+
+    // TODO: Add other games (complement-race, memory-quiz, etc.)
+    default:
+      return (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+            fontSize: '18px',
+            color: '#666',
+          }}
+        >
+          Game "{roomData.gameName}" not yet supported
+        </div>
+      )
+  }
+}

apps/web/src/hooks/useRoomData.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { usePathname } from 'next/navigation'
 import { io, type Socket } from 'socket.io-client'
+import { useViewerId } from './useViewerId'
 
 export interface RoomMember {
   id: string
@@ -27,21 +27,55 @@ export interface RoomData {
 }
 
 /**
- * Hook to fetch and subscribe to room data when on a room page
- * Returns null if not on a room page
+ * Hook to fetch and subscribe to the user's current room data
+ * Returns null if user is not in any room
  */
 export function useRoomData() {
-  const pathname = usePathname()
+  const { data: userId } = useViewerId()
   const [socket, setSocket] = useState<Socket | null>(null)
   const [roomData, setRoomData] = useState<RoomData | null>(null)
   const [isLoading, setIsLoading] = useState(false)
 
-  // Extract roomId from pathname like /arcade/rooms/[roomId]/...
-  const roomId = pathname?.match(/\/arcade\/rooms\/([^/]+)/)?.[1]
-
-  // Initialize socket connection when on a room page
+  // Fetch the user's current room
   useEffect(() => {
-    if (!roomId) {
+    if (!userId) {
+      setRoomData(null)
+      return
+    }
+
+    setIsLoading(true)
+
+    // Fetch current room data
+    fetch('/api/arcade/rooms/current')
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch current room')
+        return res.json()
+      })
+      .then((data) => {
+        if (data.room) {
+          setRoomData({
+            id: data.room.id,
+            name: data.room.name,
+            code: data.room.code,
+            gameName: data.room.gameName,
+            members: data.members || [],
+            memberPlayers: data.memberPlayers || {},
+          })
+        } else {
+          setRoomData(null)
+        }
+        setIsLoading(false)
+      })
+      .catch((error) => {
+        console.error('Failed to fetch room data:', error)
+        setRoomData(null)
+        setIsLoading(false)
+      })
+  }, [userId])
+
+  // Initialize socket connection when user has a room
+  useEffect(() => {
+    if (!roomData?.id || !userId) {
       if (socket) {
         socket.disconnect()
         setSocket(null)
@@ -50,47 +84,49 @@ export function useRoomData() {
     }
 
     const sock = io({ path: '/api/socket' })
+
+    sock.on('connect', () => {
+      console.log('[useRoomData] Socket connected, joining room:', roomData.id)
+      // Join the room to receive updates
+      sock.emit('join-room', { roomId: roomData.id, userId })
+    })
+
+    sock.on('disconnect', () => {
+      console.log('[useRoomData] Socket disconnected')
+    })
+
     setSocket(sock)
 
     return () => {
-      sock.disconnect()
+      if (sock.connected) {
+        // Leave the room before disconnecting
+        sock.emit('leave-room', { roomId: roomData.id, userId })
+        sock.disconnect()
+      }
     }
-  }, [roomId])
-
-  useEffect(() => {
-    if (!roomId) {
-      setRoomData(null)
-      return
-    }
-
-    setIsLoading(true)
-
-    // Fetch initial room data
-    fetch(`/api/arcade/rooms/${roomId}`)
-      .then((res) => {
-        if (!res.ok) throw new Error('Failed to fetch room')
-        return res.json()
-      })
-      .then((data) => {
-        setRoomData({
-          id: data.room.id,
-          name: data.room.name,
-          code: data.room.code,
-          gameName: data.room.gameName,
-          members: data.members || [],
-          memberPlayers: data.memberPlayers || {},
-        })
-        setIsLoading(false)
-      })
-      .catch((error) => {
-        console.error('Failed to fetch room data:', error)
-        setIsLoading(false)
-      })
-  }, [roomId])
+  }, [roomData?.id, userId])
 
   // Subscribe to real-time updates via socket
   useEffect(() => {
-    if (!socket || !roomId) return
+    if (!socket || !roomData?.id) return
+
+    const handleRoomJoined = (data: {
+      roomId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      console.log('[useRoomData] Received room-joined event:', data)
+      if (data.roomId === roomData.id) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
 
     const handleMemberJoined = (data: {
       roomId: string
@@ -98,7 +134,8 @@ export function useRoomData() {
       members: RoomMember[]
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      if (data.roomId === roomId) {
+      console.log('[useRoomData] Received member-joined event:', data)
+      if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
           return {
@@ -116,7 +153,8 @@ export function useRoomData() {
       members: RoomMember[]
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      if (data.roomId === roomId) {
+      console.log('[useRoomData] Received member-left event:', data)
+      if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
           return {
@@ -132,7 +170,8 @@ export function useRoomData() {
       roomId: string
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      if (data.roomId === roomId) {
+      console.log('[useRoomData] Received room-players-updated event:', data)
+      if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
           return {
@@ -143,20 +182,22 @@ export function useRoomData() {
       }
     }
 
+    socket.on('room-joined', handleRoomJoined)
     socket.on('member-joined', handleMemberJoined)
     socket.on('member-left', handleMemberLeft)
     socket.on('room-players-updated', handleRoomPlayersUpdated)
 
     return () => {
+      socket.off('room-joined', handleRoomJoined)
       socket.off('member-joined', handleMemberJoined)
       socket.off('member-left', handleMemberLeft)
       socket.off('room-players-updated', handleRoomPlayersUpdated)
     }
-  }, [socket, roomId])
+  }, [socket, roomData?.id])
 
   return {
     roomData,
     isLoading,
-    isInRoom: !!roomId,
+    isInRoom: !!roomData,
   }
 }