chore(release): 3.14.0 [skip ci]

## [3.14.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.7...v3.14.0) (2025-10-14)

### Features

* **arcade:** add Change Game functionality for room hosts ([ee39241](ee39241e3c))
* **arcade:** add game selection screen with navigation to room page ([4124f1c](4124f1cc08))

### Bug Fixes

* **player-config:** correct label positioning in player settings dialog ([554cc40](554cc4063b))

### Code Refactoring

* implement in-room game selection UI ([f07b96d](f07b96d26e))
* make game_name nullable to support in-room game selection ([a9a6cef](a9a6cefafc))
* **nav:** rename emphasizeGameContext to emphasizePlayerSelection ([6bb7016](6bb7016eea))

CHANGELOG.md

@@ -1,3 +1,68 @@
+## [3.14.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.7...v3.14.0) (2025-10-14)
+
+
+### Features
+
+* **arcade:** add Change Game functionality for room hosts ([ee39241](https://github.com/antialias/soroban-abacus-flashcards/commit/ee39241e3c9e04202592497d9987eafcb89c00c9))
+* **arcade:** add game selection screen with navigation to room page ([4124f1c](https://github.com/antialias/soroban-abacus-flashcards/commit/4124f1cc081f5cb9d6f450f3c2e0cca8a247deba))
+
+
+### Bug Fixes
+
+* **player-config:** correct label positioning in player settings dialog ([554cc40](https://github.com/antialias/soroban-abacus-flashcards/commit/554cc4063bc756c9c9cd1adf0c1964d3f2f6151b))
+
+
+### Code Refactoring
+
+* implement in-room game selection UI ([f07b96d](https://github.com/antialias/soroban-abacus-flashcards/commit/f07b96d26eb9f63f3ee55f721139c37ccc34c3df))
+* make game_name nullable to support in-room game selection ([a9a6cef](https://github.com/antialias/soroban-abacus-flashcards/commit/a9a6cefafcaf7340902328ef1cb02eb3fdd3aa84))
+* **nav:** rename emphasizeGameContext to emphasizePlayerSelection ([6bb7016](https://github.com/antialias/soroban-abacus-flashcards/commit/6bb7016eea1e8ca40204a921db4a8b8fb9a06f73))
+
+## [3.13.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.6...v3.13.7) (2025-10-14)
+
+
+### Bug Fixes
+
+* **toast:** scope animations to prevent affecting other UI elements ([245ed8a](https://github.com/antialias/soroban-abacus-flashcards/commit/245ed8a625ba848f8cd79d51bfd88600cd77f0b9))
+
+## [3.13.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.5...v3.13.6) (2025-10-14)
+
+
+### Bug Fixes
+
+* **nav:** navigate to /arcade/room (not /arcade/rooms/{id}) ([1c55f36](https://github.com/antialias/soroban-abacus-flashcards/commit/1c55f3630cb5f07b685555e41baa5a49314f15a3))
+
+## [3.13.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.4...v3.13.5) (2025-10-14)
+
+
+### Bug Fixes
+
+* **nav:** navigate to room after creation from (+) menu ([21e6e33](https://github.com/antialias/soroban-abacus-flashcards/commit/21e6e33173e7939102a7e6d6a7bd5168a97a49d6))
+
+
+### Documentation
+
+* add production deployment guide ([6d16436](https://github.com/antialias/soroban-abacus-flashcards/commit/6d164361331fae2135afd84ab6e6f38a241b9170))
+
+## [3.13.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.3...v3.13.4) (2025-10-14)
+
+
+### Bug Fixes
+
+* **api:** include members and memberPlayers in room creation response ([8320d9e](https://github.com/antialias/soroban-abacus-flashcards/commit/8320d9e730e2b9964e509847dfa504a78b721b5a))
+
+## [3.13.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.2...v3.13.3) (2025-10-14)
+
+
+### Bug Fixes
+
+* **migrations:** add migration 0009 for display_password column ([040d749](https://github.com/antialias/soroban-abacus-flashcards/commit/040d7495a0801076b252d2574023f5323540db1a))
+
+
+### Code Refactoring
+
+* replace browser alert() calls with toast notifications ([87ef356](https://github.com/antialias/soroban-abacus-flashcards/commit/87ef35682e5c129033f21b91987fc84a45f43ad3))
+
 ## [3.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.1...v3.13.2) (2025-10-14)
 
 

apps/web/.claude/DEPLOYMENT.md

@@ -0,0 +1,191 @@
+# Production Deployment Guide
+
+This document describes the production deployment infrastructure and procedures for the abaci.one web application.
+
+## Infrastructure Overview
+
+### Production Server
+- **Host**: `nas.home.network` (Synology NAS DS923+)
+- **Access**: SSH access required
+  - Must be connected to network at **730 N. Oak Park Ave**
+  - Server is not accessible from external networks
+- **Project Directory**: `/volume1/homes/antialias/projects/abaci.one`
+
+### Docker Configuration
+- **Docker binary**: `/usr/local/bin/docker`
+- **Docker Compose binary**: `/usr/local/bin/docker-compose`
+- **Container name**: `soroban-abacus-flashcards`
+- **Image**: `ghcr.io/antialias/soroban-abacus-flashcards:latest`
+
+### Auto-Deployment
+- **Watchtower** monitors and auto-updates containers
+- **Update frequency**: Every **5 minutes**
+- Watchtower pulls latest images and restarts containers automatically
+- No manual intervention required for deployments after pushing to main
+
+## Database Management
+
+### Location
+- **Database path**: `data/sqlite.db` (relative to project directory)
+- **WAL files**: `data/sqlite.db-shm` and `data/sqlite.db-wal`
+
+### Migrations
+- **Automatic**: Migrations run on server startup via `server.js`
+- **Migration folder**: `./drizzle`
+- **Process**:
+  1. Server starts
+  2. Logs: `🔄 Running database migrations...`
+  3. Drizzle migrator runs all pending migrations
+  4. Logs: `✅ Migrations complete` (on success)
+  5. Logs: `❌ Migration failed: [error]` (on failure, process exits)
+
+### Nuke and Rebuild Database
+If you need to completely reset the production database:
+
+```bash
+# SSH into the server
+ssh nas.home.network
+
+# Navigate to project directory
+cd /volume1/homes/antialias/projects/abaci.one
+
+# Stop the container
+/usr/local/bin/docker-compose down
+
+# Remove database files
+rm -f data/sqlite.db data/sqlite.db-shm data/sqlite.db-wal
+
+# Restart container (migrations will rebuild DB)
+/usr/local/bin/docker-compose up -d
+
+# Check logs to verify migration success
+/usr/local/bin/docker logs soroban-abacus-flashcards | grep -E '(Migration|Starting)'
+```
+
+## CI/CD Pipeline
+
+### GitHub Actions
+When code is pushed to `main` branch:
+
+1. **Workflows triggered**:
+   - `Build and Deploy` - Builds Docker image and pushes to GHCR
+   - `Release` - Manages semantic versioning and releases
+   - `Verify Examples` - Runs example tests
+   - `Deploy Storybooks to GitHub Pages` - Publishes Storybook
+
+2. **Image build**:
+   - Built image is tagged as `latest`
+   - Pushed to GitHub Container Registry (ghcr.io)
+   - Typically completes within 1-2 minutes
+
+3. **Deployment**:
+   - Watchtower detects new image (within 5 minutes)
+   - Pulls latest image
+   - Recreates and restarts container
+   - Total deployment time: ~5-7 minutes from push to production
+
+## Manual Deployment Procedures
+
+### Force Pull Latest Image
+If you need to immediately deploy without waiting for Watchtower:
+
+```bash
+ssh nas.home.network "cd /volume1/homes/antialias/projects/abaci.one && /usr/local/bin/docker-compose pull && /usr/local/bin/docker-compose up -d"
+```
+
+### Check Container Status
+```bash
+ssh nas.home.network "/usr/local/bin/docker ps | grep -E '(soroban|abaci)'"
+```
+
+### View Logs
+```bash
+# Recent logs
+ssh nas.home.network "/usr/local/bin/docker logs --tail 100 soroban-abacus-flashcards"
+
+# Follow logs in real-time
+ssh nas.home.network "/usr/local/bin/docker logs -f soroban-abacus-flashcards"
+
+# Search for specific patterns
+ssh nas.home.network "/usr/local/bin/docker logs soroban-abacus-flashcards" | grep -i "error"
+```
+
+### Restart Container
+```bash
+ssh nas.home.network "cd /volume1/homes/antialias/projects/abaci.one && /usr/local/bin/docker-compose restart"
+```
+
+## Deployment Script
+
+The project includes a deployment script at `nas-deployment/deploy.sh` for manual deployments.
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. Migration Failures
+**Symptom**: Container keeps restarting, logs show migration errors
+
+**Solution**:
+1. Check migration files in `drizzle/` directory
+2. Verify `drizzle/meta/_journal.json` is up to date
+3. If migrations are corrupted, may need to nuke database (see above)
+
+#### 2. Container Not Updating
+**Symptom**: Changes pushed but production still shows old code
+
+**Possible causes**:
+- GitHub Actions build failed - check workflow status with `gh run list`
+- Watchtower not running - check with `docker ps | grep watchtower`
+- Image not pulled - manually pull with `docker-compose pull`
+
+**Solution**:
+```bash
+# Force pull and restart
+ssh nas.home.network "cd /volume1/homes/antialias/projects/abaci.one && /usr/local/bin/docker-compose pull && /usr/local/bin/docker-compose up -d"
+```
+
+#### 3. Missing Database Columns
+**Symptom**: Errors like `SqliteError: no such column: "column_name"`
+
+**Cause**: Migration not registered or not run
+
+**Solution**:
+1. Verify migration exists in `drizzle/` directory
+2. Check migration is registered in `drizzle/meta/_journal.json`
+3. If migration is new, restart container to run migrations
+4. If migration is malformed, fix it and nuke database
+
+#### 4. API Returns Unexpected Response
+**Symptom**: Client shows errors but API appears to work
+
+**Debugging**:
+1. Test API directly with curl: `curl -X POST 'https://abaci.one/api/arcade/rooms' -H 'Content-Type: application/json' -d '...'`
+2. Check production logs for errors
+3. Verify container is running latest image:
+   ```bash
+   ssh nas.home.network "/usr/local/bin/docker inspect soroban-abacus-flashcards --format '{{.Created}}'"
+   ```
+4. Compare with commit timestamp: `git log --format="%ci" -1`
+
+## Environment Variables
+
+Production environment variables are configured in the docker-compose.yml file on the server. Common variables:
+
+- `NEXT_PUBLIC_URL` - Base URL for the application
+- `DATABASE_URL` - SQLite database path
+- Additional variables may be set in `.env.production` or docker-compose.yml
+
+## Network Configuration
+
+- **Reverse Proxy**: Traefik
+- **HTTPS**: Automatic via Traefik with Let's Encrypt
+- **Domain**: abaci.one
+- **Exposed Port**: 3000 (internal to Docker network)
+
+## Security Notes
+
+- Production database contains user data and should be handled carefully
+- SSH access is restricted to local network only
+- Docker container runs with appropriate user permissions
+- Secrets are managed via environment variables, not committed to repo

apps/web/drizzle/0010_make_game_name_nullable.sql

@@ -0,0 +1,42 @@
+-- Make game_name and game_config nullable to support game selection in room
+-- SQLite doesn't support ALTER COLUMN, so we need to recreate the table
+
+PRAGMA foreign_keys=OFF;--> statement-breakpoint
+
+-- Create temporary table with correct schema
+CREATE TABLE `arcade_rooms_new` (
+	`id` text PRIMARY KEY NOT NULL,
+	`code` text(6) NOT NULL,
+	`name` text(50),
+	`created_by` text NOT NULL,
+	`creator_name` text(50) NOT NULL,
+	`created_at` integer NOT NULL,
+	`last_activity` integer NOT NULL,
+	`ttl_minutes` integer DEFAULT 60 NOT NULL,
+	`access_mode` text DEFAULT 'open' NOT NULL,
+	`password` text(255),
+	`display_password` text(100),
+	`game_name` text,
+	`game_config` text,
+	`status` text DEFAULT 'lobby' NOT NULL,
+	`current_session_id` text,
+	`total_games_played` integer DEFAULT 0 NOT NULL
+);--> statement-breakpoint
+
+-- Copy all data
+INSERT INTO `arcade_rooms_new`
+SELECT `id`, `code`, `name`, `created_by`, `creator_name`, `created_at`,
+       `last_activity`, `ttl_minutes`, `access_mode`, `password`, `display_password`,
+       `game_name`, `game_config`, `status`, `current_session_id`, `total_games_played`
+FROM `arcade_rooms`;--> statement-breakpoint
+
+-- Drop old table
+DROP TABLE `arcade_rooms`;--> statement-breakpoint
+
+-- Rename new table
+ALTER TABLE `arcade_rooms_new` RENAME TO `arcade_rooms`;--> statement-breakpoint
+
+-- Recreate index
+CREATE UNIQUE INDEX `arcade_rooms_code_unique` ON `arcade_rooms` (`code`);--> statement-breakpoint
+
+PRAGMA foreign_keys=ON;

apps/web/drizzle/meta/_journal.json

@@ -64,6 +64,20 @@
       "when": 1760548800000,
       "tag": "0008_make_room_name_nullable",
       "breakpoints": true
+    },
+    {
+      "idx": 9,
+      "version": "7",
+      "when": 1760600000000,
+      "tag": "0009_add_display_password",
+      "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "7",
+      "when": 1760700000000,
+      "tag": "0010_make_game_name_nullable",
+      "breakpoints": true
     }
   ]
 }

apps/web/src/app/api/arcade/rooms/[roomId]/settings/route.ts

@@ -18,6 +18,8 @@ type RouteContext = {
  * Body:
  *   - accessMode?: 'open' | 'locked' | 'retired' | 'password' | 'restricted' | 'approval-only'
  *   - password?: string (plain text, will be hashed)
+ *   - gameName?: 'matching' | 'memory-quiz' | 'complement-race' | null (select game for room)
+ *   - gameConfig?: object (game-specific settings)
  */
 export async function PATCH(req: NextRequest, context: RouteContext) {
   try {
@@ -58,6 +60,14 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
       )
     }
 
+    // Validate gameName if provided
+    if (body.gameName !== undefined && body.gameName !== null) {
+      const validGames = ['matching', 'memory-quiz', 'complement-race']
+      if (!validGames.includes(body.gameName)) {
+        return NextResponse.json({ error: 'Invalid game name' }, { status: 400 })
+      }
+    }
+
     // Prepare update data
     const updateData: Record<string, any> = {}
 
@@ -77,6 +87,16 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
       }
     }
 
+    // Update game selection if provided
+    if (body.gameName !== undefined) {
+      updateData.gameName = body.gameName
+    }
+
+    // Update game config if provided
+    if (body.gameConfig !== undefined) {
+      updateData.gameConfig = body.gameConfig
+    }
+
     // Update room settings
     const [updatedRoom] = await db
       .update(schema.arcadeRooms)

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

@@ -70,15 +70,12 @@ export async function POST(req: NextRequest) {
     const viewerId = await getViewerId()
     const body = await req.json()
 
-    // Validate required fields (name is optional, gameName is required)
-    if (!body.gameName) {
-      return NextResponse.json({ error: 'Missing required field: gameName' }, { status: 400 })
-    }
-
-    // Validate game name
-    const validGames: GameName[] = ['matching', 'memory-quiz', 'complement-race']
-    if (!validGames.includes(body.gameName)) {
-      return NextResponse.json({ error: 'Invalid game name' }, { status: 400 })
+    // Validate game name if provided (gameName is now optional)
+    if (body.gameName) {
+      const validGames: GameName[] = ['matching', 'memory-quiz', 'complement-race']
+      if (!validGames.includes(body.gameName)) {
+        return NextResponse.json({ error: 'Invalid game name' }, { status: 400 })
+      }
     }
 
     // Validate name length (if provided)
@@ -120,8 +117,8 @@ export async function POST(req: NextRequest) {
       name: roomName,
       createdBy: viewerId,
       creatorName: displayName,
-      gameName: body.gameName,
-      gameConfig: body.gameConfig || {},
+      gameName: body.gameName || null,
+      gameConfig: body.gameConfig || null,
       ttlMinutes: body.ttlMinutes,
       accessMode: body.accessMode,
       password: body.password,
@@ -135,6 +132,16 @@ export async function POST(req: NextRequest) {
       isCreator: true,
     })
 
+    // Get members and active players for the response
+    const members = await getRoomMembers(room.id)
+    const memberPlayers = await getRoomActivePlayers(room.id)
+
+    // Convert Map to object for JSON serialization
+    const memberPlayersObj: Record<string, any[]> = {}
+    for (const [uid, players] of memberPlayers.entries()) {
+      memberPlayersObj[uid] = players
+    }
+
     // Generate join URL
     const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'
     const joinUrl = `${baseUrl}/arcade/rooms/${room.id}`
@@ -142,6 +149,8 @@ export async function POST(req: NextRequest) {
     return NextResponse.json(
       {
         room,
+        members,
+        memberPlayers: memberPlayersObj,
         joinUrl,
       },
       { status: 201 }

apps/web/src/app/arcade-rooms/[roomId]/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { io, type Socket } from 'socket.io-client'
 import { css } from '../../../../styled-system/css'
+import { useToast } from '@/components/common/ToastContext'
 import { PageWithNav } from '@/components/PageWithNav'
 import { useViewerId } from '@/hooks/useViewerId'
 import { getRoomDisplayWithEmoji } from '@/utils/room-display'
@@ -40,6 +41,7 @@ interface Player {
 export default function RoomDetailPage() {
   const params = useParams()
   const router = useRouter()
+  const { showError } = useToast()
   const roomId = params.roomId as string
   const { data: guestId } = useViewerId()
 
@@ -172,7 +174,7 @@ export default function RoomDetailPage() {
 
         // Handle specific room membership conflict
         if (errorData.code === 'ROOM_MEMBERSHIP_CONFLICT') {
-          alert(errorData.userMessage || errorData.message)
+          showError('Already in Another Room', errorData.userMessage || errorData.message)
           // Refresh the page to update room state
           await fetchRoom()
           return
@@ -193,7 +195,7 @@ export default function RoomDetailPage() {
       await fetchRoom()
     } catch (err) {
       console.error('Failed to join room:', err)
-      alert('Failed to join room')
+      showError('Failed to join room', err instanceof Error ? err.message : undefined)
     }
   }
 
@@ -213,7 +215,7 @@ export default function RoomDetailPage() {
       router.push('/arcade')
     } catch (err) {
       console.error('Failed to leave room:', err)
-      alert('Failed to leave room')
+      showError('Failed to leave room', err instanceof Error ? err.message : undefined)
     }
   }
 

apps/web/src/app/arcade-rooms/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { css } from '../../../styled-system/css'
+import { useToast } from '@/components/common/ToastContext'
 import { PageWithNav } from '@/components/PageWithNav'
 import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
@@ -23,6 +24,7 @@ interface Room {
 
 export default function RoomBrowserPage() {
   const router = useRouter()
+  const { showError, showInfo } = useToast()
   const [rooms, setRooms] = useState<Room[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -71,7 +73,7 @@ export default function RoomBrowserPage() {
       router.push(`/arcade-rooms/${data.room.id}`)
     } catch (err) {
       console.error('Failed to create room:', err)
-      alert('Failed to create room')
+      showError('Failed to create room', err instanceof Error ? err.message : undefined)
     }
   }
 
@@ -90,7 +92,7 @@ export default function RoomBrowserPage() {
 
         if (!response.ok) {
           const errorData = await response.json()
-          alert(errorData.error || 'Failed to join room')
+          showError('Failed to join room', errorData.error)
           return
         }
 
@@ -99,12 +101,15 @@ export default function RoomBrowserPage() {
       }
 
       if (room.accessMode === 'approval-only') {
-        alert('This room requires host approval. Please use the Join Room modal to request access.')
+        showInfo(
+          'Approval Required',
+          'This room requires host approval. Please use the Join Room modal to request access.'
+        )
         return
       }
 
       if (room.accessMode === 'restricted') {
-        alert('This room is invitation-only. Please ask the host for an invitation.')
+        showInfo('Invitation Only', 'This room is invitation-only. Please ask the host for an invitation.')
         return
       }
 
@@ -120,7 +125,7 @@ export default function RoomBrowserPage() {
 
         // Handle specific room membership conflict
         if (errorData.code === 'ROOM_MEMBERSHIP_CONFLICT') {
-          alert(errorData.userMessage || errorData.message)
+          showError('Already in Another Room', errorData.userMessage || errorData.message)
           // Refresh the page to update room list state
           await fetchRooms()
           return
@@ -140,7 +145,7 @@ export default function RoomBrowserPage() {
       router.push(`/arcade-rooms/${room.id}`)
     } catch (err) {
       console.error('Failed to join room:', err)
-      alert('Failed to join room')
+      showError('Failed to join room', err instanceof Error ? err.message : undefined)
     }
   }
 

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

@@ -33,7 +33,7 @@ export function MemoryPairsGame() {
     <PageWithNav
       navTitle={navTitle}
       navEmoji={navEmoji}
-      emphasizeGameContext={state.gamePhase === 'setup'}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       onExitSession={() => {
         exitSession()
         router.push('/arcade')

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

@@ -78,7 +78,7 @@ function ArcadeContent() {
 
 function ArcadePageWithRedirect() {
   return (
-    <PageWithNav navTitle="Champion Arena" navEmoji="🏟️" emphasizeGameContext={true}>
+    <PageWithNav navTitle="Champion Arena" navEmoji="🏟️" emphasizePlayerSelection={true}>
       <ArcadeContent />
     </PageWithNav>
   )

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

@@ -1,13 +1,29 @@
 'use client'
 
-import { useRoomData } from '@/hooks/useRoomData'
+import { useRouter } from 'next/navigation'
+import { useRoomData, useSetRoomGame } from '@/hooks/useRoomData'
 import { MemoryPairsGame } from '../matching/components/MemoryPairsGame'
 import { RoomMemoryPairsProvider } from '../matching/context/RoomMemoryPairsProvider'
+import { GAMES_CONFIG } from '@/components/GameSelector'
+import type { GameType } from '@/components/GameSelector'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../../styled-system/css'
+
+// Map GameType keys to internal game names
+const GAME_TYPE_TO_NAME: Record<GameType, string> = {
+  'battle-arena': 'matching',
+  'memory-lightning': 'memory-quiz',
+  'complement-race': 'complement-race',
+  'master-organizer': 'master-organizer',
+}
 
 /**
  * /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
  *
+ * Shows game selection when no game is set, then shows the game itself once selected.
+ * URL never changes - it's always /arcade/room regardless of selection, setup, or gameplay.
+ *
  * Note: We don't redirect to /arcade if no room exists to avoid navigation loops.
  * Instead, we show a friendly message with a link back to the Champion Arena.
  *
@@ -15,7 +31,9 @@ import { RoomMemoryPairsProvider } from '../matching/context/RoomMemoryPairsProv
  * so we don't need to render it here.
  */
 export default function RoomPage() {
+  const router = useRouter()
   const { roomData, isLoading } = useRoomData()
+  const { mutate: setRoomGame } = useSetRoomGame()
 
   // Show loading state
   if (isLoading) {
@@ -64,6 +82,120 @@ export default function RoomPage() {
     )
   }
 
+  // Show game selection if no game is set
+  if (!roomData.gameName) {
+    const handleGameSelect = (gameType: GameType) => {
+      const gameConfig = GAMES_CONFIG[gameType]
+      if (gameConfig.available === false) {
+        return // Don't allow selecting unavailable games
+      }
+
+      // Map GameType to internal game name
+      const internalGameName = GAME_TYPE_TO_NAME[gameType]
+
+      setRoomGame({
+        roomId: roomData.id,
+        gameName: internalGameName,
+        gameConfig: {},
+      })
+    }
+
+    return (
+      <PageWithNav
+        navTitle="Choose Game"
+        navEmoji="🎮"
+        emphasizePlayerSelection={true}
+        onExitSession={() => router.push('/arcade')}
+      >
+        <div
+          className={css({
+            minHeight: '100vh',
+            background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4',
+          })}
+        >
+          <h1
+            className={css({
+              fontSize: { base: '2xl', md: '3xl' },
+              fontWeight: 'bold',
+              color: 'white',
+              mb: '8',
+              textAlign: 'center',
+            })}
+          >
+            Choose a Game
+          </h1>
+
+          <div
+            className={css({
+              display: 'grid',
+              gridTemplateColumns: { base: '1fr', md: 'repeat(2, 1fr)' },
+              gap: '4',
+              maxWidth: '800px',
+              width: '100%',
+            })}
+          >
+            {Object.entries(GAMES_CONFIG).map(([gameType, config]) => (
+              <button
+                key={gameType}
+                onClick={() => handleGameSelect(gameType as GameType)}
+                disabled={config.available === false}
+                className={css({
+                  background: config.gradient,
+                  border: '2px solid',
+                  borderColor: config.borderColor || 'blue.200',
+                  borderRadius: '2xl',
+                  padding: '6',
+                  cursor: config.available === false ? 'not-allowed' : 'pointer',
+                  opacity: config.available === false ? 0.5 : 1,
+                  transition: 'all 0.3s ease',
+                  _hover:
+                    config.available === false
+                      ? {}
+                      : {
+                          transform: 'translateY(-4px) scale(1.02)',
+                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
+                        },
+                })}
+              >
+                <div
+                  className={css({
+                    fontSize: '4xl',
+                    mb: '2',
+                  })}
+                >
+                  {config.icon}
+                </div>
+                <h3
+                  className={css({
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'gray.900',
+                    mb: '2',
+                  })}
+                >
+                  {config.name}
+                </h3>
+                <p
+                  className={css({
+                    fontSize: 'sm',
+                    color: 'gray.600',
+                  })}
+                >
+                  {config.description}
+                </p>
+              </button>
+            ))}
+          </div>
+        </div>
+      </PageWithNav>
+    )
+  }
+
   // Render the appropriate game based on room's gameName
   switch (roomData.gameName) {
     case 'matching':
@@ -76,18 +208,25 @@ export default function RoomPage() {
     // 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',
-          }}
+        <PageWithNav
+          navTitle="Game Not Available"
+          navEmoji="⚠️"
+          emphasizePlayerSelection={true}
+          onExitSession={() => router.push('/arcade')}
         >
-          Game "{roomData.gameName}" not yet supported
-        </div>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100vh',
+              fontSize: '18px',
+              color: '#666',
+            }}
+          >
+            Game "{roomData.gameName}" not yet supported
+          </div>
+        </PageWithNav>
       )
   }
 }

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

@@ -32,7 +32,7 @@ export function MemoryPairsGame() {
       navTitle={navTitle}
       navEmoji={navEmoji}
       gameName="matching"
-      emphasizeGameContext={state.gamePhase === 'setup'}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       currentPlayerId={state.currentPlayer}
       playerScores={state.scores}
       playerStreaks={state.consecutiveMatches}

apps/web/src/components/ClientProviders.tsx

@@ -3,6 +3,7 @@
 import { AbacusDisplayProvider } from '@soroban/abacus-react'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { type ReactNode, useState } from 'react'
+import { ToastProvider } from '@/components/common/ToastContext'
 import { FullscreenProvider } from '@/contexts/FullscreenContext'
 import { GameModeProvider } from '@/contexts/GameModeContext'
 import { UserProfileProvider } from '@/contexts/UserProfileContext'
@@ -20,17 +21,19 @@ export function ClientProviders({ children }: ClientProvidersProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <AbacusDisplayProvider>
-        <AbacusSettingsSync />
-        <UserProfileProvider>
-          <GameModeProvider>
-            <FullscreenProvider>
-              {children}
-              <DeploymentInfo />
-            </FullscreenProvider>
-          </GameModeProvider>
-        </UserProfileProvider>
-      </AbacusDisplayProvider>
+      <ToastProvider>
+        <AbacusDisplayProvider>
+          <AbacusSettingsSync />
+          <UserProfileProvider>
+            <GameModeProvider>
+              <FullscreenProvider>
+                {children}
+                <DeploymentInfo />
+              </FullscreenProvider>
+            </GameModeProvider>
+          </UserProfileProvider>
+        </AbacusDisplayProvider>
+      </ToastProvider>
     </QueryClientProvider>
   )
 }

apps/web/src/components/PageWithNav.tsx

@@ -13,7 +13,7 @@ interface PageWithNavProps {
   navTitle?: string
   navEmoji?: string
   gameName?: 'matching' | 'memory-quiz' | 'complement-race' // Internal game name for API
-  emphasizeGameContext?: boolean
+  emphasizePlayerSelection?: boolean
   onExitSession?: () => void
   onSetup?: () => void
   onNewGame?: () => void
@@ -28,7 +28,7 @@ export function PageWithNav({
   navTitle,
   navEmoji,
   gameName,
-  emphasizeGameContext = false,
+  emphasizePlayerSelection = false,
   onExitSession,
   onSetup,
   onNewGame,
@@ -103,7 +103,7 @@ export function PageWithNav({
             ? 'tournament'
             : 'none'
 
-  const shouldEmphasize = emphasizeGameContext && mounted
+  const shouldEmphasize = emphasizePlayerSelection && mounted
   const showFullscreenSelection = shouldEmphasize && activePlayerCount === 0
 
   // Compute arcade session info for display

apps/web/src/components/common/ToastContext.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import * as Toast from '@radix-ui/react-toast'
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
+
+export interface ToastMessage {
+  id: string
+  type: 'success' | 'error' | 'info'
+  title: string
+  description?: string
+  duration?: number
+}
+
+interface ToastContextValue {
+  showToast: (toast: Omit<ToastMessage, 'id'>) => void
+  showSuccess: (title: string, description?: string) => void
+  showError: (title: string, description?: string) => void
+  showInfo: (title: string, description?: string) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider')
+  }
+  return context
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastMessage[]>([])
+
+  const showToast = useCallback((toast: Omit<ToastMessage, 'id'>) => {
+    const id = Math.random().toString(36).substring(7)
+    setToasts((prev) => [...prev, { ...toast, id }])
+  }, [])
+
+  const showSuccess = useCallback(
+    (title: string, description?: string) => {
+      showToast({ type: 'success', title, description, duration: 5000 })
+    },
+    [showToast]
+  )
+
+  const showError = useCallback(
+    (title: string, description?: string) => {
+      showToast({ type: 'error', title, description, duration: 7000 })
+    },
+    [showToast]
+  )
+
+  const showInfo = useCallback(
+    (title: string, description?: string) => {
+      showToast({ type: 'info', title, description, duration: 5000 })
+    },
+    [showToast]
+  )
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  const getToastStyles = (type: ToastMessage['type']) => {
+    switch (type) {
+      case 'success':
+        return {
+          background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.97), rgba(22, 163, 74, 0.97))',
+          border: '2px solid rgba(34, 197, 94, 0.6)',
+          icon: '✓',
+        }
+      case 'error':
+        return {
+          background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.97), rgba(220, 38, 38, 0.97))',
+          border: '2px solid rgba(239, 68, 68, 0.6)',
+          icon: '⚠',
+        }
+      case 'info':
+        return {
+          background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.97), rgba(37, 99, 235, 0.97))',
+          border: '2px solid rgba(59, 130, 246, 0.6)',
+          icon: 'ℹ',
+        }
+    }
+  }
+
+  return (
+    <ToastContext.Provider value={{ showToast, showSuccess, showError, showInfo }}>
+      {children}
+      <Toast.Provider swipeDirection="right">
+        {toasts.map((toast) => {
+          const styles = getToastStyles(toast.type)
+          return (
+            <Toast.Root
+              key={toast.id}
+              open={true}
+              onOpenChange={(open) => {
+                if (!open) {
+                  removeToast(toast.id)
+                }
+              }}
+              duration={toast.duration}
+              style={{
+                background: styles.background,
+                border: styles.border,
+                borderRadius: '12px',
+                padding: '16px',
+                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+                display: 'flex',
+                gap: '12px',
+                alignItems: 'flex-start',
+                minWidth: '300px',
+                maxWidth: '450px',
+                transition: 'all 0.2s ease',
+              }}
+            >
+              <div style={{ fontSize: '20px', flexShrink: 0 }}>{styles.icon}</div>
+              <div style={{ flex: 1 }}>
+                <Toast.Title
+                  style={{
+                    fontSize: '14px',
+                    fontWeight: 'bold',
+                    color: 'white',
+                    marginBottom: toast.description ? '4px' : 0,
+                  }}
+                >
+                  {toast.title}
+                </Toast.Title>
+                {toast.description && (
+                  <Toast.Description
+                    style={{
+                      fontSize: '13px',
+                      color: 'rgba(255, 255, 255, 0.9)',
+                    }}
+                  >
+                    {toast.description}
+                  </Toast.Description>
+                )}
+              </div>
+              <Toast.Close
+                style={{
+                  background: 'rgba(255, 255, 255, 0.2)',
+                  border: 'none',
+                  borderRadius: '50%',
+                  width: '24px',
+                  height: '24px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  color: 'white',
+                  fontSize: '16px',
+                  lineHeight: 1,
+                  flexShrink: 0,
+                }}
+              >
+                ×
+              </Toast.Close>
+            </Toast.Root>
+          )
+        })}
+
+        <Toast.Viewport
+          style={{
+            position: 'fixed',
+            top: '80px',
+            right: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+            zIndex: 10001,
+            maxWidth: '100vw',
+            margin: 0,
+            listStyle: 'none',
+            outline: 'none',
+          }}
+        />
+
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              @keyframes toastSlideIn {
+                from {
+                  transform: translateX(calc(100% + 25px));
+                }
+                to {
+                  transform: translateX(0);
+                }
+              }
+
+              @keyframes toastSlideOut {
+                from {
+                  transform: translateX(0);
+                }
+                to {
+                  transform: translateX(calc(100% + 25px));
+                }
+              }
+
+              @keyframes toastHide {
+                from {
+                  opacity: 1;
+                }
+                to {
+                  opacity: 0;
+                }
+              }
+
+              [data-radix-toast-viewport] [data-state='open'] {
+                animation: toastSlideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+              }
+
+              [data-radix-toast-viewport] [data-state='closed'] {
+                animation: toastHide 100ms ease-in, toastSlideOut 200ms cubic-bezier(0.32, 0, 0.67, 0);
+              }
+
+              [data-radix-toast-viewport] [data-swipe='move'] {
+                transform: translateX(var(--radix-toast-swipe-move-x));
+              }
+
+              [data-radix-toast-viewport] [data-swipe='cancel'] {
+                transform: translateX(0);
+                transition: transform 200ms ease-out;
+              }
+
+              [data-radix-toast-viewport] [data-swipe='end'] {
+                animation: toastSlideOut 100ms ease-out;
+              }
+            `,
+          }}
+        />
+      </Toast.Provider>
+    </ToastContext.Provider>
+  )
+}

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/navigation'
+import { useToast } from '@/components/common/ToastContext'
 import { InvitePlayersTab } from './InvitePlayersTab'
 import { PlayOnlineTab } from './PlayOnlineTab'
 import { addToRecentRooms } from './RecentRoomsList'
@@ -41,6 +42,7 @@ export function AddPlayerButton({
 }: AddPlayerButtonProps) {
   const popoverRef = React.useRef<HTMLDivElement>(null)
   const router = useRouter()
+  const { showError } = useToast()
 
   // Use lifted state if provided, otherwise fallback to internal state
   const [internalShowPopover, setInternalShowPopover] = React.useState(false)
@@ -60,22 +62,29 @@ export function AddPlayerButton({
   const { mutate: joinRoom } = useJoinRoom()
   const { mutateAsync: getRoomByCode } = useGetRoomByCode()
 
-  // Handler for creating a new room
+  // Handler for creating a new room (without a game - game will be selected in room)
   const handleCreateRoom = () => {
     createRoom(
       {
-        name: `${gameName} Room`,
-        gameName: gameName,
+        name: null, // Auto-generated from code
+        gameName: null, // No game selected yet - will be chosen in room
         creatorName: 'Player',
       },
       {
         onSuccess: (data) => {
-          // Popover stays open, switch to invite tab to share room code
-          setActiveTab('invite')
+          // Add to recent rooms
+          addToRecentRooms({
+            code: data.code,
+            name: data.name,
+            gameName: data.gameName,
+          })
+          // Close popover and navigate to room to choose game
+          setShowPopover(false)
+          router.push('/arcade/room')
         },
         onError: (error) => {
           console.error('Failed to create room:', error)
-          alert(`Failed to create room: ${error.message}`)
+          showError('Failed to create room', error.message)
         },
       }
     )
@@ -100,8 +109,9 @@ export function AddPlayerButton({
                 gameName: data.room.gameName,
               })
             }
-            // Close popover
+            // Close popover and navigate to room
             setShowPopover(false)
+            router.push('/arcade/room')
           },
         }
       )

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

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Modal } from '@/components/common/Modal'
+import { useToast } from '@/components/common/ToastContext'
 import type { ModerationEvent } from '@/hooks/useRoomData'
 import { useJoinRoom } from '@/hooks/useRoomData'
 
@@ -27,6 +28,7 @@ export function ModerationNotifications({
 }: ModerationNotificationsProps) {
   const router = useRouter()
   const queryClient = useQueryClient()
+  const { showError } = useToast()
   const [showToast, setShowToast] = useState(false)
   const [showJoinRequestToast, setShowJoinRequestToast] = useState(false)
   const [isAcceptingInvitation, setIsAcceptingInvitation] = useState(false)
@@ -834,7 +836,7 @@ export function ModerationNotifications({
                   router.push('/arcade/room')
                 } catch (error) {
                   console.error('Failed to join room:', error)
-                  alert(error instanceof Error ? error.message : 'Failed to join room')
+                  showError('Failed to join room', error instanceof Error ? error.message : undefined)
                   setIsAcceptingInvitation(false)
                 }
               }}

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

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import { useToast } from '@/components/common/ToastContext'
 import { useJoinRoom } from '@/hooks/useRoomData'
 
 interface PendingInvitation {
@@ -32,6 +33,7 @@ export interface PendingInvitationsProps {
  */
 export function PendingInvitations({ onInvitationChange, currentRoomId }: PendingInvitationsProps) {
   const router = useRouter()
+  const { showError } = useToast()
   const [invitations, setInvitations] = useState<PendingInvitation[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState('')
@@ -72,7 +74,7 @@ export function PendingInvitations({ onInvitationChange, currentRoomId }: Pendin
       onInvitationChange?.()
     } catch (error) {
       console.error('Failed to join room:', error)
-      alert(error instanceof Error ? error.message : 'Failed to join room')
+      showError('Failed to join room', error instanceof Error ? error.message : undefined)
     } finally {
       setActionLoading(null)
     }
@@ -97,7 +99,7 @@ export function PendingInvitations({ onInvitationChange, currentRoomId }: Pendin
       onInvitationChange?.()
     } catch (error) {
       console.error('Failed to decline invitation:', error)
-      alert(error instanceof Error ? error.message : 'Failed to decline invitation')
+      showError('Failed to decline invitation', error instanceof Error ? error.message : undefined)
     } finally {
       setActionLoading(null)
     }

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

@@ -270,75 +270,85 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
             style={{
               display: 'flex',
               gap: '8px',
+              alignItems: 'flex-start',
             }}
           >
-            <input
-              type="text"
-              value={localName}
-              onChange={(e) => handleNameChange(e.target.value)}
-              placeholder="Player Name"
-              maxLength={20}
-              style={{
-                flex: 1,
-                padding: '12px 16px',
-                fontSize: '16px',
-                border: '2px solid #e5e7eb',
-                borderRadius: '12px',
-                outline: 'none',
-                transition: 'all 0.2s ease',
-                fontWeight: '500',
-              }}
-              onFocus={(e) => {
-                e.currentTarget.style.borderColor = gradientColor
-                e.currentTarget.style.boxShadow = `0 0 0 3px ${gradientColor}20`
-              }}
-              onBlur={(e) => {
-                e.currentTarget.style.borderColor = '#e5e7eb'
-                e.currentTarget.style.boxShadow = 'none'
-              }}
-            />
-            <button
-              type="button"
-              onClick={handleGenerateNewName}
-              style={{
-                padding: '12px 16px',
-                background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
-                border: 'none',
-                borderRadius: '12px',
-                color: 'white',
-                fontSize: '20px',
-                cursor: 'pointer',
-                transition: 'all 0.2s ease',
-                flexShrink: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.transform = 'scale(1.05)'
-                e.currentTarget.style.boxShadow = `0 4px 12px ${gradientColor}40`
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.transform = 'scale(1)'
-                e.currentTarget.style.boxShadow = 'none'
-              }}
-              title="Generate random name"
-            >
-              🎲
-            </button>
-          </div>
-          <div
-            style={{
-              fontSize: '12px',
-              color: '#6b7280',
-              marginTop: '4px',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
-          >
-            <span>Click dice to generate a random name</span>
-            <span>{localName.length}/20 characters</span>
+            <div style={{ flex: 1 }}>
+              <input
+                type="text"
+                value={localName}
+                onChange={(e) => handleNameChange(e.target.value)}
+                placeholder="Player Name"
+                maxLength={20}
+                style={{
+                  width: '100%',
+                  padding: '12px 16px',
+                  fontSize: '16px',
+                  border: '2px solid #e5e7eb',
+                  borderRadius: '12px',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
+                  fontWeight: '500',
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.borderColor = gradientColor
+                  e.currentTarget.style.boxShadow = `0 0 0 3px ${gradientColor}20`
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.borderColor = '#e5e7eb'
+                  e.currentTarget.style.boxShadow = 'none'
+                }}
+              />
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: '#6b7280',
+                  marginTop: '6px',
+                }}
+              >
+                {localName.length}/20 characters
+              </div>
+            </div>
+            <div style={{ flexShrink: 0 }}>
+              <button
+                type="button"
+                onClick={handleGenerateNewName}
+                style={{
+                  padding: '12px 16px',
+                  background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
+                  border: 'none',
+                  borderRadius: '12px',
+                  color: 'white',
+                  fontSize: '20px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.transform = 'scale(1.05)'
+                  e.currentTarget.style.boxShadow = `0 4px 12px ${gradientColor}40`
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'scale(1)'
+                  e.currentTarget.style.boxShadow = 'none'
+                }}
+                title="Generate random name"
+              >
+                🎲
+              </button>
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: '#6b7280',
+                  marginTop: '6px',
+                  textAlign: 'center',
+                }}
+              >
+                Random name
+              </div>
+            </div>
           </div>
         </div>
       </div>

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

@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
-import { useLeaveRoom, useRoomData } from '@/hooks/useRoomData'
+import { useClearRoomGame, useLeaveRoom, useRoomData } from '@/hooks/useRoomData'
 import { useViewerId } from '@/hooks/useViewerId'
 import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 import { CreateRoomModal } from './CreateRoomModal'
@@ -62,6 +62,7 @@ export function RoomInfo({
   const { getRoomShareUrl, roomData } = useRoomData()
   const { data: currentUserId } = useViewerId()
   const { mutateAsync: leaveRoom } = useLeaveRoom()
+  const { mutate: clearRoomGame } = useClearRoomGame()
 
   // Use room display utility for consistent naming
   const displayName = joinCode
@@ -403,6 +404,43 @@ export function RoomInfo({
               </DropdownMenu.Item>
             )}
 
+            {/* Change Game - only show for host and only when a game is selected */}
+            {isCurrentUserCreator && roomId && roomData?.gameName && (
+              <DropdownMenu.Item
+                onSelect={() => {
+                  if (roomId) {
+                    clearRoomGame(roomId)
+                  }
+                }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'rgba(236, 72, 153, 0.2)'
+                  e.currentTarget.style.color = 'rgba(249, 168, 212, 1)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'transparent'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
+                }}
+              >
+                <span style={{ fontSize: '16px' }}>🔄</span>
+                <span>Change Game</span>
+              </DropdownMenu.Item>
+            )}
+
             {/* Moderation - only show for host */}
             {isCurrentUserCreator && roomId && (
               <DropdownMenu.Item

apps/web/src/db/schema/arcade-rooms.ts

@@ -32,11 +32,11 @@ export const arcadeRooms = sqliteTable('arcade_rooms', {
   password: text('password', { length: 255 }), // Hashed password for password-protected rooms
   displayPassword: text('display_password', { length: 100 }), // Plain text password for display to room owner
 
-  // Game configuration
+  // Game configuration (nullable to support game selection in room)
   gameName: text('game_name', {
     enum: ['matching', 'memory-quiz', 'complement-race'],
-  }).notNull(),
-  gameConfig: text('game_config', { mode: 'json' }).notNull(), // Game-specific settings
+  }),
+  gameConfig: text('game_config', { mode: 'json' }), // Game-specific settings (nullable when no game selected)
 
   // Current state
   status: text('status', {

apps/web/src/hooks/useRoomData.ts

@@ -22,7 +22,7 @@ export interface RoomData {
   id: string
   name: string
   code: string
-  gameName: string
+  gameName: string | null // Nullable to support game selection in room
   accessMode: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
   members: RoomMember[]
   memberPlayers: Record<string, RoomPlayer[]> // userId -> players
@@ -30,7 +30,7 @@ export interface RoomData {
 
 export interface CreateRoomParams {
   name: string | null
-  gameName: string
+  gameName?: string | null // Optional - rooms can be created without a game
   creatorName?: string
   gameConfig?: Record<string, unknown>
   accessMode?: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
@@ -86,9 +86,9 @@ async function createRoomApi(params: CreateRoomParams): Promise<RoomData> {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       name: params.name,
-      gameName: params.gameName,
+      gameName: params.gameName || null,
       creatorName: params.creatorName || 'Player',
-      gameConfig: params.gameConfig || { difficulty: 6 },
+      gameConfig: params.gameConfig || null,
       accessMode: params.accessMode,
       password: params.password,
     }),
@@ -558,3 +558,91 @@ export function useGetRoomByCode() {
     mutationFn: getRoomByCodeApi,
   })
 }
+
+/**
+ * Set game for a room
+ */
+async function setRoomGameApi(params: {
+  roomId: string
+  gameName: string
+  gameConfig?: Record<string, unknown>
+}): Promise<void> {
+  const response = await fetch(`/api/arcade/rooms/${params.roomId}/settings`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      gameName: params.gameName,
+      gameConfig: params.gameConfig || {},
+    }),
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to set room game')
+  }
+}
+
+/**
+ * Hook: Set game for a room
+ */
+export function useSetRoomGame() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: setRoomGameApi,
+    onSuccess: (_, variables) => {
+      // Update the cache with the new game
+      queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+        if (!prev) return null
+        return {
+          ...prev,
+          gameName: variables.gameName,
+        }
+      })
+      // Refetch to get the full updated room data
+      queryClient.invalidateQueries({ queryKey: roomKeys.current() })
+    },
+  })
+}
+
+/**
+ * Clear/reset game for a room (host only)
+ */
+async function clearRoomGameApi(roomId: string): Promise<void> {
+  const response = await fetch(`/api/arcade/rooms/${roomId}/settings`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      gameName: null,
+      gameConfig: null,
+    }),
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to clear room game')
+  }
+}
+
+/**
+ * Hook: Clear/reset game for a room (returns to game selection screen)
+ */
+export function useClearRoomGame() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: clearRoomGameApi,
+    onSuccess: () => {
+      // Update the cache to clear the game
+      queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+        if (!prev) return null
+        return {
+          ...prev,
+          gameName: null,
+        }
+      })
+      // Refetch to get the full updated room data
+      queryClient.invalidateQueries({ queryKey: roomKeys.current() })
+    },
+  })
+}

package.json

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