chore(release): 2.7.3 [skip ci]

## [2.7.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.2...v2.7.3) (2025-10-08)

### Bug Fixes

* set room sessions to use /arcade/room URL ([9dac431](9dac431c1f))

CHANGELOG.md

@@ -1,3 +1,45 @@
+## [2.7.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.2...v2.7.3) (2025-10-08)
+
+
+### Bug Fixes
+
+* set room sessions to use /arcade/room URL ([9dac431](https://github.com/antialias/soroban-abacus-flashcards/commit/9dac431c1f91c246f67a059cda3cff6cbef40a43))
+
+## [2.7.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.1...v2.7.2) (2025-10-08)
+
+
+### Bug Fixes
+
+* add hasAttemptedFetch flag to prevent premature redirect ([c30f585](https://github.com/antialias/soroban-abacus-flashcards/commit/c30f58581028878350282cad5231d614590d9f2b))
+
+## [2.7.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.0...v2.7.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* resolve race condition in /arcade/room redirect ([5ed2ab2](https://github.com/antialias/soroban-abacus-flashcards/commit/5ed2ab21cab408147081a493c8dd6b1de48b2d01))
+
+## [2.7.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.6.0...v2.7.0) (2025-10-08)
+
+
+### Features
+
+* extend GameModeContext to support room-based multiplayer ([ee6094d](https://github.com/antialias/soroban-abacus-flashcards/commit/ee6094d59d26a9e80ba5d023ca6dc13143bea308))
+
+## [2.6.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.5.0...v2.6.0) (2025-10-08)
+
+
+### Features
+
+* refactor room addressing to /arcade/room ([e7d2a73](https://github.com/antialias/soroban-abacus-flashcards/commit/e7d2a73ddf2048691325a18e3d71a7ece444c131))
+
+## [2.5.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.6...v2.5.0) (2025-10-08)
+
+
+### Features
+
+* display room info and network players in mini app nav ([5e3261f](https://github.com/antialias/soroban-abacus-flashcards/commit/5e3261f3bec8c19ec88c9a35a7e6ef8eda88a55e))
+
 ## [2.4.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.5...v2.4.6) (2025-10-08)
 
 

apps/web/.claude/settings.local.json

@@ -34,7 +34,8 @@
       "Bash(npm run pre-commit:*)",
       "Bash(npm run:*)",
       "Bash(git pull:*)",
-      "Bash(git stash:*)"
+      "Bash(git stash:*)",
+      "Bash(members of the room\" requirement for room-based gameplay.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")"
     ],
     "deny": [],
     "ask": []

apps/web/socket-server.ts

@@ -142,7 +142,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
             await createArcadeSession({
               userId: data.userId,
               gameName: 'matching',
-              gameUrl: '/arcade/matching',
+              gameUrl: '/arcade/room', // Room-based sessions use /arcade/room
               initialState,
               activePlayers,
               roomId: room.id,

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

@@ -0,0 +1,62 @@
+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()
+    console.log('[Current Room API] Fetching for user:', userId)
+
+    // Get all rooms user is in (should be at most 1 due to modal room enforcement)
+    const roomIds = await getUserRooms(userId)
+    console.log('[Current Room API] User rooms:', roomIds)
+
+    if (roomIds.length === 0) {
+      console.log('[Current Room API] User is not in any room')
+      return NextResponse.json({ room: null }, { status: 200 })
+    }
+
+    const roomId = roomIds[0]
+
+    // Get room data
+    const room = await getRoomById(roomId)
+    if (!room) {
+      console.log('[Current Room API] Room not found:', roomId)
+      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
+    }
+
+    console.log('[Current Room API] Returning room:', {
+      roomId: room.id,
+      roomName: room.name,
+      memberCount: members.length,
+    })
+
+    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,82 @@
+'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()
+
+  // Debug logging
+  useEffect(() => {
+    console.log('[RoomPage] State:', { isLoading, hasRoomData: !!roomData, roomData })
+  }, [isLoading, roomData])
+
+  // 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/components/PageWithNav.tsx

@@ -3,6 +3,8 @@
 import React from 'react'
 import { useGameMode } from '../contexts/GameModeContext'
 import { useArcadeGuard } from '../hooks/useArcadeGuard'
+import { useRoomData } from '../hooks/useRoomData'
+import { useViewerId } from '../hooks/useViewerId'
 import { AppNavBar } from './AppNavBar'
 import { GameContextNav } from './nav/GameContextNav'
 import { PlayerConfigDialog } from './nav/PlayerConfigDialog'
@@ -30,6 +32,8 @@ export function PageWithNav({
 }: PageWithNavProps) {
   const { players, activePlayers, setActive, activePlayerCount } = useGameMode()
   const { hasActiveSession, activeSession } = useArcadeGuard({ enabled: false }) // Don't redirect, just get info
+  const { roomData, isInRoom } = useRoomData()
+  const { data: viewerId } = useViewerId()
   const [mounted, setMounted] = React.useState(false)
   const [configurePlayerId, setConfigurePlayerId] = React.useState<string | null>(null)
 
@@ -80,17 +84,33 @@ export function PageWithNav({
 
   // Compute arcade session info for display
   const roomInfo =
-    hasActiveSession && activeSession
+    isInRoom && roomData
       ? {
-          gameName: activeSession.currentGame,
-          playerCount: activePlayerCount, // TODO: Get actual player count from session when available
+          roomName: roomData.name,
+          gameName: roomData.gameName,
+          playerCount: roomData.members.length,
         }
-      : undefined
+      : hasActiveSession && activeSession
+        ? {
+            gameName: activeSession.currentGame,
+            playerCount: activePlayerCount,
+          }
+        : undefined
 
-  // Compute network players (other players in the arcade session)
-  // For now, we don't have this info in activeSession, so return empty array
-  // TODO: When arcade room system is implemented, fetch other players from session
-  const networkPlayers: Array<{ id: string; emoji?: string; name?: string }> = []
+  // Compute network players (other players in the room, excluding current user)
+  const networkPlayers: Array<{ id: string; emoji?: string; name?: string }> =
+    isInRoom && roomData
+      ? roomData.members
+          .filter((member) => member.userId !== viewerId)
+          .flatMap((member) => {
+            const memberPlayerList = roomData.memberPlayers[member.userId] || []
+            return memberPlayerList.map((player) => ({
+              id: player.id,
+              emoji: player.emoji,
+              name: `${player.name} (${member.displayName})`,
+            }))
+          })
+      : []
 
   // Create nav content if title is provided
   const navContent = navTitle ? (

apps/web/src/components/nav/GameContextNav.tsx

@@ -22,6 +22,7 @@ interface NetworkPlayer {
 }
 
 interface ArcadeRoomInfo {
+  roomName?: string
   gameName: string
   playerCount: number
 }
@@ -134,6 +135,7 @@ export function GameContextNav({
         {/* Room Info - show when in arcade session */}
         {roomInfo && !showFullscreenSelection && (
           <RoomInfo
+            roomName={roomInfo.roomName}
             gameName={roomInfo.gameName}
             playerCount={roomInfo.playerCount}
             shouldEmphasize={shouldEmphasize}

apps/web/src/components/nav/RoomInfo.tsx

@@ -1,4 +1,5 @@
 interface RoomInfoProps {
+  roomName?: string
   gameName: string
   playerCount: number
   shouldEmphasize: boolean
@@ -7,7 +8,7 @@ interface RoomInfoProps {
 /**
  * Displays current arcade room/session information
  */
-export function RoomInfo({ gameName, playerCount, shouldEmphasize }: RoomInfoProps) {
+export function RoomInfo({ roomName, gameName, playerCount, shouldEmphasize }: RoomInfoProps) {
   return (
     <div
       style={{
@@ -53,7 +54,7 @@ export function RoomInfo({ gameName, playerCount, shouldEmphasize }: RoomInfoPro
             letterSpacing: '0.5px',
           }}
         >
-          Arcade Session
+          {roomName ? 'Room' : 'Arcade Session'}
         </div>
         <div
           style={{
@@ -61,7 +62,7 @@ export function RoomInfo({ gameName, playerCount, shouldEmphasize }: RoomInfoPro
             fontWeight: 'bold',
           }}
         >
-          {gameName}
+          {roomName || gameName}
         </div>
       </div>
 

apps/web/src/contexts/GameModeContext.tsx

@@ -8,6 +8,8 @@ import {
   useUpdatePlayer,
   useUserPlayers,
 } from '@/hooks/useUserPlayers'
+import { useRoomData } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
 import { getNextPlayerColor } from '../types/player'
 
 // Client-side Player type (compatible with old type)
@@ -66,28 +68,72 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
   const { mutate: createPlayer } = useCreatePlayer()
   const { mutate: updatePlayerMutation } = useUpdatePlayer()
   const { mutate: deletePlayer } = useDeletePlayer()
+  const { roomData } = useRoomData()
+  const { data: viewerId } = useViewerId()
 
   const [isInitialized, setIsInitialized] = useState(false)
 
-  // Convert DB players to Map
-  const players = useMemo(() => {
+  // Convert DB players to Map (local players)
+  const localPlayers = useMemo(() => {
     const map = new Map<string, Player>()
     dbPlayers.forEach((dbPlayer) => {
-      map.set(dbPlayer.id, toClientPlayer(dbPlayer))
+      map.set(dbPlayer.id, {
+        ...toClientPlayer(dbPlayer),
+        isLocal: true,
+      })
     })
     return map
   }, [dbPlayers])
 
-  // Track active players from DB isActive status
+  // When in a room, merge all players from all room members
+  const players = useMemo(() => {
+    const map = new Map<string, Player>(localPlayers)
+
+    if (roomData) {
+      // Add players from other room members (marked as remote)
+      Object.entries(roomData.memberPlayers).forEach(([userId, memberPlayers]) => {
+        // Skip the current user's players (already in localPlayers)
+        if (userId === viewerId) return
+
+        memberPlayers.forEach((roomPlayer) => {
+          map.set(roomPlayer.id, {
+            id: roomPlayer.id,
+            name: roomPlayer.name,
+            emoji: roomPlayer.emoji,
+            color: roomPlayer.color,
+            createdAt: Date.now(),
+            isActive: true, // Players in memberPlayers are active
+            isLocal: false, // Remote player
+          })
+        })
+      })
+    }
+
+    return map
+  }, [localPlayers, roomData, viewerId])
+
+  // Track active players (local + room members when in a room)
   const activePlayers = useMemo(() => {
     const set = new Set<string>()
-    dbPlayers.forEach((player) => {
-      if (player.isActive) {
-        set.add(player.id)
-      }
-    })
+
+    if (roomData) {
+      // In room mode: all players from all members are active
+      Object.values(roomData.memberPlayers).forEach((memberPlayers) => {
+        memberPlayers.forEach((player) => {
+          set.add(player.id)
+        })
+      })
+    } else {
+      // Solo mode: only local active players
+      dbPlayers.forEach((player) => {
+        if (player.isActive) {
+          set.add(player.id)
+        }
+      })
+    }
+
     return set
-  }, [dbPlayers])
+  }, [dbPlayers, roomData])
 
   // Initialize with default players if none exist
   useEffect(() => {
@@ -125,15 +171,33 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
   }
 
   const updatePlayer = (id: string, updates: Partial<Player>) => {
-    updatePlayerMutation({ id, updates })
+    const player = players.get(id)
+    // Only allow updating local players
+    if (player?.isLocal) {
+      updatePlayerMutation({ id, updates })
+    } else {
+      console.warn('[GameModeContext] Cannot update remote player:', id)
+    }
   }
 
   const removePlayer = (id: string) => {
-    deletePlayer(id)
+    const player = players.get(id)
+    // Only allow removing local players
+    if (player?.isLocal) {
+      deletePlayer(id)
+    } else {
+      console.warn('[GameModeContext] Cannot remove remote player:', id)
+    }
   }
 
   const setActive = (id: string, active: boolean) => {
-    updatePlayerMutation({ id, updates: { isActive: active } })
+    const player = players.get(id)
+    // Only allow changing active status of local players
+    if (player?.isLocal) {
+      updatePlayerMutation({ id, updates: { isActive: active } })
+    } else {
+      console.warn('[GameModeContext] Cannot change active status of remote player:', id)
+    }
   }
 
   const getActivePlayers = (): Player[] => {

apps/web/src/hooks/useRoomData.ts

@@ -0,0 +1,216 @@
+import { useEffect, useState } from 'react'
+import { io, type Socket } from 'socket.io-client'
+import { useViewerId } from './useViewerId'
+
+export interface RoomMember {
+  id: string
+  userId: string
+  displayName: string
+  isOnline: boolean
+  isCreator: boolean
+}
+
+export interface RoomPlayer {
+  id: string
+  name: string
+  emoji: string
+  color: string
+}
+
+export interface RoomData {
+  id: string
+  name: string
+  code: string
+  gameName: string
+  members: RoomMember[]
+  memberPlayers: Record<string, RoomPlayer[]> // userId -> players
+}
+
+/**
+ * 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 { data: userId, isPending: isUserIdPending } = useViewerId()
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [roomData, setRoomData] = useState<RoomData | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasAttemptedFetch, setHasAttemptedFetch] = useState(false)
+
+  // Fetch the user's current room
+  useEffect(() => {
+    if (!userId) {
+      console.log('[useRoomData] No userId, clearing room data')
+      setRoomData(null)
+      setHasAttemptedFetch(false)
+      return
+    }
+
+    console.log('[useRoomData] Fetching current room for user:', userId)
+    setIsLoading(true)
+    setHasAttemptedFetch(false)
+
+    // Fetch current room data
+    fetch('/api/arcade/rooms/current')
+      .then((res) => {
+        console.log('[useRoomData] API response status:', res.status)
+        if (!res.ok) throw new Error('Failed to fetch current room')
+        return res.json()
+      })
+      .then((data) => {
+        console.log('[useRoomData] API response data:', data)
+        if (data.room) {
+          const roomData = {
+            id: data.room.id,
+            name: data.room.name,
+            code: data.room.code,
+            gameName: data.room.gameName,
+            members: data.members || [],
+            memberPlayers: data.memberPlayers || {},
+          }
+          console.log('[useRoomData] Setting room data:', roomData)
+          setRoomData(roomData)
+        } else {
+          console.log('[useRoomData] No room in response, clearing room data')
+          setRoomData(null)
+        }
+        setIsLoading(false)
+        setHasAttemptedFetch(true)
+      })
+      .catch((error) => {
+        console.error('[useRoomData] Failed to fetch room data:', error)
+        setRoomData(null)
+        setIsLoading(false)
+        setHasAttemptedFetch(true)
+      })
+  }, [userId])
+
+  // Initialize socket connection when user has a room
+  useEffect(() => {
+    if (!roomData?.id || !userId) {
+      if (socket) {
+        socket.disconnect()
+        setSocket(null)
+      }
+      return
+    }
+
+    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 () => {
+      if (sock.connected) {
+        // Leave the room before disconnecting
+        sock.emit('leave-room', { roomId: roomData.id, userId })
+        sock.disconnect()
+      }
+    }
+  }, [roomData?.id, userId])
+
+  // Subscribe to real-time updates via socket
+  useEffect(() => {
+    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
+      userId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      console.log('[useRoomData] Received member-joined event:', data)
+      if (data.roomId === roomData.id) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
+
+    const handleMemberLeft = (data: {
+      roomId: string
+      userId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      console.log('[useRoomData] Received member-left event:', data)
+      if (data.roomId === roomData.id) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
+
+    const handleRoomPlayersUpdated = (data: {
+      roomId: string
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      console.log('[useRoomData] Received room-players-updated event:', data)
+      if (data.roomId === roomData.id) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
+
+    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, roomData?.id])
+
+  return {
+    roomData,
+    // Loading if: userId is pending, currently fetching, or have userId but haven't tried fetching yet
+    isLoading: isUserIdPending || isLoading || (!!userId && !hasAttemptedFetch),
+    isInRoom: !!roomData,
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "2.4.6",
+  "version": "2.7.3",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [