chore(release): 3.13.2 [skip ci]

## [3.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.1...v3.13.2) (2025-10-14)

### Bug Fixes

* **arcade:** only notify room creator of join requests ([bc571e3](bc571e3d0d))

CHANGELOG.md

@@ -1,3 +1,50 @@
+## [3.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.1...v3.13.2) (2025-10-14)
+
+
+### Bug Fixes
+
+* **arcade:** only notify room creator of join requests ([bc571e3](https://github.com/antialias/soroban-abacus-flashcards/commit/bc571e3d0d11fe4142680132d551e25ca626d950))
+
+## [3.13.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.13.0...v3.13.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* **arcade:** allow room creator to rejoin restricted/approval rooms ([654ba19](https://github.com/antialias/soroban-abacus-flashcards/commit/654ba19ccca595d34ad205c036c18afb99a494c7))
+
+## [3.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.12.0...v3.13.0) (2025-10-14)
+
+
+### Features
+
+* **moderation:** add inline feedback and persistent password display ([86e3d41](https://github.com/antialias/soroban-abacus-flashcards/commit/86e3d4199628f95048b9265c9de0adfdc2934f93))
+
+## [3.12.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.11.1...v3.12.0) (2025-10-14)
+
+
+### Features
+
+* **moderation:** improve password input with copy button ([2580e47](https://github.com/antialias/soroban-abacus-flashcards/commit/2580e474d08bf91477339e998b2c70962a633f41))
+
+## [3.11.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.11.0...v3.11.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* **moderation:** improve access mode settings UX ([dd9e657](https://github.com/antialias/soroban-abacus-flashcards/commit/dd9e657db85752b32ff91ae1b33a0bf7a7628e07))
+
+## [3.11.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.10.0...v3.11.0) (2025-10-14)
+
+
+### Features
+
+* add name generator button and abacus emoji ([07212e4](https://github.com/antialias/soroban-abacus-flashcards/commit/07212e4df0c7fd4b8cccf935c48b14164df6961d))
+
+
+### Code Refactoring
+
+* make player names abacus and arithmetic themed ([97daad9](https://github.com/antialias/soroban-abacus-flashcards/commit/97daad9abb40a6f4d59ca8a4d4b671822b7b0955))
+
 ## [3.10.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.9.2...v3.10.0) (2025-10-14)
 
 

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

@@ -57,7 +57,10 @@
       "Bash(fi)",
       "Bash(then echo \"TypeScript errors found\")",
       "Bash(else echo \"✓ No TypeScript errors in join page\")",
-      "Bash(npx @biomejs/biome format:*)"
+      "Bash(npx @biomejs/biome format:*)",
+      "Bash(npx drizzle-kit generate:*)",
+      "Bash(ssh nas.home.network \"docker ps | grep -E ''soroban|abaci|web''\")",
+      "Bash(ssh:*)"
     ],
     "deny": [],
     "ask": []

apps/web/drizzle/0009_add_display_password.sql

@@ -0,0 +1,2 @@
+-- Add display_password column to arcade_rooms for showing plain text passwords to room owners
+ALTER TABLE `arcade_rooms` ADD `display_password` text(100);

apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts

@@ -88,11 +88,12 @@ export async function POST(req: NextRequest, context: RouteContext) {
       `[Join Requests] Created request for user ${viewerId} (${displayName}) to join room ${roomId}`
     )
 
-    // Broadcast to all members in the room (particularly the host) via socket
+    // Broadcast to the room host (creator) only via socket
     const io = await getSocketIO()
     if (io) {
       try {
-        io.to(`room:${roomId}`).emit('join-request-submitted', {
+        // Send notification only to the room creator's user channel
+        io.to(`user:${room.createdBy}`).emit('join-request-submitted', {
           roomId,
           request: {
             id: request.id,
@@ -103,7 +104,7 @@ export async function POST(req: NextRequest, context: RouteContext) {
         })
 
         console.log(
-          `[Join Requests] Broadcasted join-request-submitted for user ${viewerId} to room ${roomId}`
+          `[Join Requests] Broadcasted join-request-submitted to room creator ${room.createdBy}`
         )
       } catch (socketError) {
         // Log but don't fail the request if socket broadcast fails

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

@@ -83,25 +83,31 @@ export async function POST(req: NextRequest, context: RouteContext) {
       }
 
       case 'restricted': {
-        // Check for valid pending invitation
-        const invitation = await getInvitation(roomId, viewerId)
-        if (!invitation || invitation.status !== 'pending') {
-          return NextResponse.json(
-            { error: 'You need a valid invitation to join this room' },
-            { status: 403 }
-          )
+        // Room creator can always rejoin their own room
+        if (!isRoomCreator) {
+          // Check for valid pending invitation
+          const invitation = await getInvitation(roomId, viewerId)
+          if (!invitation || invitation.status !== 'pending') {
+            return NextResponse.json(
+              { error: 'You need a valid invitation to join this room' },
+              { status: 403 }
+            )
+          }
         }
         break
       }
 
       case 'approval-only': {
-        // Check for approved join request
-        const joinRequest = await getJoinRequest(roomId, viewerId)
-        if (!joinRequest || joinRequest.status !== 'approved') {
-          return NextResponse.json(
-            { error: 'Your join request must be approved by the host' },
-            { status: 403 }
-          )
+        // Room creator can always rejoin their own room without approval
+        if (!isRoomCreator) {
+          // Check for approved join request
+          const joinRequest = await getJoinRequest(roomId, viewerId)
+          if (!joinRequest || joinRequest.status !== 'approved') {
+            return NextResponse.json(
+              { error: 'Your join request must be approved by the host' },
+              { status: 403 }
+            )
+          }
         }
         break
       }

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

@@ -42,8 +42,13 @@ export async function GET(_req: NextRequest, context: RouteContext) {
     // Update room activity when viewing (keeps active rooms fresh)
     await touchRoom(roomId)
 
+    // Prepare room data - include displayPassword only for room creator
+    const roomData = canModerate
+      ? room // Creator gets full room data including displayPassword
+      : { ...room, displayPassword: undefined } // Others don't see displayPassword
+
     return NextResponse.json({
-      room,
+      room: roomData,
       members,
       memberPlayers, // Map of userId -> active Player[] for each member
       canModerate,

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

@@ -69,9 +69,11 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
     if (body.password !== undefined) {
       if (body.password === null || body.password === '') {
         updateData.password = null // Clear password
+        updateData.displayPassword = null // Also clear display password
       } else {
         const hashedPassword = await bcrypt.hash(body.password, 10)
         updateData.password = hashedPassword
+        updateData.displayPassword = body.password // Store plain text for display
       }
     }
 

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

@@ -88,10 +88,16 @@ export function ModerationPanel({
 
   // Settings state
   const [accessMode, setAccessMode] = useState<string>('open')
+  const [originalAccessMode, setOriginalAccessMode] = useState<string>('open')
   const [roomPassword, setRoomPassword] = useState('')
   const [showPasswordInput, setShowPasswordInput] = useState(false)
   const [selectedNewOwner, setSelectedNewOwner] = useState<string>('')
   const [joinRequests, setJoinRequests] = useState<any[]>([])
+  const [passwordCopied, setPasswordCopied] = useState(false)
+
+  // Inline feedback state
+  const [successMessage, setSuccessMessage] = useState<string>('')
+  const [errorMessage, setErrorMessage] = useState<string>('')
 
   // Ban modal state
   const [showBanModal, setShowBanModal] = useState(false)
@@ -180,8 +186,9 @@ export function ModerationPanel({
       }
 
       // Success - member will be removed via socket update
+      showSuccess('Player kicked from room')
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to kick player')
+      showError(err instanceof Error ? err.message : 'Failed to kick player')
     } finally {
       setActionLoading(null)
     }
@@ -218,8 +225,10 @@ export function ModerationPanel({
         const data = await bansRes.json()
         setBans(data.bans || [])
       }
+
+      showSuccess('Player banned from room')
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to ban player')
+      showError(err instanceof Error ? err.message : 'Failed to ban player')
     } finally {
       setActionLoading(null)
       setBanTargetUserId(null)
@@ -255,8 +264,10 @@ export function ModerationPanel({
         const data = await historyRes.json()
         setHistoricalMembers(data.historicalMembers || [])
       }
+
+      showSuccess('Player unbanned')
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to unban player')
+      showError(err instanceof Error ? err.message : 'Failed to unban player')
     } finally {
       setActionLoading(null)
     }
@@ -292,9 +303,9 @@ export function ModerationPanel({
         setHistoricalMembers(data.historicalMembers || [])
       }
 
-      alert(`${userName} has been unbanned and invited back to the room!`)
+      showSuccess(`${userName} has been unbanned and invited back to the room`)
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to unban player')
+      showError(err instanceof Error ? err.message : 'Failed to unban player')
     } finally {
       setActionLoading(null)
     }
@@ -322,9 +333,9 @@ export function ModerationPanel({
         setHistoricalMembers(data.historicalMembers || [])
       }
 
-      alert(`Invitation sent to ${userName}!`)
+      showSuccess(`Invitation sent to ${userName}`)
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to send invitation')
+      showError(err instanceof Error ? err.message : 'Failed to send invitation')
     } finally {
       setActionLoading(null)
     }
@@ -336,11 +347,19 @@ export function ModerationPanel({
 
     const loadSettings = async () => {
       try {
-        // Fetch current room data to get access mode
+        // Fetch current room data to get access mode and password
         const roomRes = await fetch(`/api/arcade/rooms/${roomId}`)
         if (roomRes.ok) {
           const data = await roomRes.json()
-          setAccessMode(data.room?.accessMode || 'open')
+          const currentAccessMode = data.room?.accessMode || 'open'
+          setAccessMode(currentAccessMode)
+          setOriginalAccessMode(currentAccessMode)
+
+          // Set password field if room has a password and user is the creator
+          if (currentAccessMode === 'password' && data.room?.displayPassword) {
+            setRoomPassword(data.room.displayPassword)
+            setShowPasswordInput(true)
+          }
         }
 
         // Fetch join requests if any
@@ -377,11 +396,12 @@ export function ModerationPanel({
         throw new Error(errorData.error || 'Failed to update settings')
       }
 
-      alert('Room settings updated successfully!')
+      showSuccess('Room settings updated successfully')
+      setOriginalAccessMode(accessMode) // Update original to current
       setShowPasswordInput(false)
       setRoomPassword('')
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to update settings')
+      showError(err instanceof Error ? err.message : 'Failed to update settings')
     } finally {
       setActionLoading(null)
     }
@@ -409,10 +429,10 @@ export function ModerationPanel({
         throw new Error(errorData.error || 'Failed to transfer ownership')
       }
 
-      alert(`Ownership transferred to ${newOwner.displayName}!`)
-      onClose() // Close panel since user is no longer host
+      showSuccess(`Ownership transferred to ${newOwner.displayName}`)
+      setTimeout(() => onClose(), 2000) // Close panel after showing message
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to transfer ownership')
+      showError(err instanceof Error ? err.message : 'Failed to transfer ownership')
     } finally {
       setActionLoading(null)
     }
@@ -437,9 +457,9 @@ export function ModerationPanel({
         setJoinRequests(data.requests || [])
       }
 
-      alert('Join request approved!')
+      showSuccess('Join request approved')
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to approve request')
+      showError(err instanceof Error ? err.message : 'Failed to approve request')
     } finally {
       setActionLoading(null)
     }
@@ -463,16 +483,47 @@ export function ModerationPanel({
         const data = await requestsRes.json()
         setJoinRequests(data.requests || [])
       }
+
+      showSuccess('Join request denied')
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to deny request')
+      showError(err instanceof Error ? err.message : 'Failed to deny request')
     } finally {
       setActionLoading(null)
     }
   }
 
+  const handleCopyPassword = async () => {
+    if (!roomPassword) return
+
+    try {
+      await navigator.clipboard.writeText(roomPassword)
+      setPasswordCopied(true)
+      setTimeout(() => setPasswordCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy password:', err)
+      showError('Failed to copy password to clipboard')
+    }
+  }
+
+  // Utility functions for showing feedback
+  const showSuccess = (message: string) => {
+    setSuccessMessage(message)
+    setErrorMessage('')
+    setTimeout(() => setSuccessMessage(''), 5000)
+  }
+
+  const showError = (message: string) => {
+    setErrorMessage(message)
+    setSuccessMessage('')
+    setTimeout(() => setErrorMessage(''), 5000)
+  }
+
   const pendingReports = reports.filter((r) => r.status === 'pending')
   const otherMembers = members.filter((m) => m.userId !== currentUserId)
 
+  // Check if there are unsaved changes in settings
+  const hasUnsavedAccessModeChanges = accessMode !== originalAccessMode
+
   // Group reports by reported user ID
   const reportsByUser = pendingReports.reduce(
     (acc, report) => {
@@ -513,6 +564,69 @@ export function ModerationPanel({
           Manage members, reports, and bans
         </p>
 
+        {/* Success/Error Messages */}
+        {(successMessage || errorMessage) && (
+          <div
+            style={{
+              padding: '12px 16px',
+              background: successMessage ? 'rgba(34, 197, 94, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+              border: successMessage
+                ? '1px solid rgba(34, 197, 94, 0.4)'
+                : '1px solid rgba(239, 68, 68, 0.4)',
+              borderRadius: '8px',
+              marginBottom: '16px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              animation: 'fadeIn 0.2s ease',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                flex: 1,
+              }}
+            >
+              <span style={{ fontSize: '16px' }}>{successMessage ? '✓' : '⚠'}</span>
+              <span
+                style={{
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  color: successMessage ? 'rgba(34, 197, 94, 1)' : 'rgba(239, 68, 68, 1)',
+                }}
+              >
+                {successMessage || errorMessage}
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => {
+                setSuccessMessage('')
+                setErrorMessage('')
+              }}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: successMessage ? 'rgba(34, 197, 94, 0.8)' : 'rgba(239, 68, 68, 0.8)',
+                fontSize: '18px',
+                cursor: 'pointer',
+                padding: '0 4px',
+                lineHeight: 1,
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.opacity = '1'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.opacity = '0.8'
+              }}
+            >
+              ✕
+            </button>
+          </div>
+        )}
+
         {/* Tabs */}
         <div
           style={{
@@ -1411,49 +1525,125 @@ export function ModerationPanel({
 
                     {/* Password input (conditional) */}
                     {(accessMode === 'password' || showPasswordInput) && (
-                      <input
-                        type="text"
-                        value={roomPassword}
-                        onChange={(e) => setRoomPassword(e.target.value)}
-                        placeholder="Enter room password"
+                      <div style={{ marginBottom: '12px' }}>
+                        <label
+                          style={{
+                            display: 'block',
+                            fontSize: '12px',
+                            fontWeight: '600',
+                            color: 'rgba(209, 213, 219, 0.8)',
+                            marginBottom: '6px',
+                          }}
+                        >
+                          Room Password
+                        </label>
+                        <div style={{ display: 'flex', gap: '8px' }}>
+                          <input
+                            type="text"
+                            value={roomPassword}
+                            onChange={(e) => setRoomPassword(e.target.value)}
+                            placeholder="Enter password to share with guests"
+                            style={{
+                              flex: 1,
+                              padding: '10px 12px',
+                              background: 'rgba(255, 255, 255, 0.05)',
+                              border: '1px solid rgba(75, 85, 99, 0.5)',
+                              borderRadius: '6px',
+                              color: 'rgba(209, 213, 219, 1)',
+                              fontSize: '14px',
+                              outline: 'none',
+                              transition: 'border-color 0.2s ease',
+                            }}
+                            onFocus={(e) => {
+                              e.currentTarget.style.borderColor = 'rgba(253, 186, 116, 0.6)'
+                            }}
+                            onBlur={(e) => {
+                              e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
+                            }}
+                          />
+                          <button
+                            type="button"
+                            onClick={handleCopyPassword}
+                            disabled={!roomPassword}
+                            title="Copy password to clipboard"
+                            style={{
+                              padding: '10px 16px',
+                              background: passwordCopied
+                                ? 'rgba(34, 197, 94, 0.2)'
+                                : roomPassword
+                                  ? 'rgba(59, 130, 246, 0.2)'
+                                  : 'rgba(75, 85, 99, 0.2)',
+                              color: passwordCopied
+                                ? 'rgba(34, 197, 94, 1)'
+                                : roomPassword
+                                  ? 'rgba(59, 130, 246, 1)'
+                                  : 'rgba(156, 163, 175, 1)',
+                              border: passwordCopied
+                                ? '1px solid rgba(34, 197, 94, 0.4)'
+                                : roomPassword
+                                  ? '1px solid rgba(59, 130, 246, 0.4)'
+                                  : '1px solid rgba(75, 85, 99, 0.3)',
+                              borderRadius: '6px',
+                              fontSize: '14px',
+                              fontWeight: '600',
+                              cursor: roomPassword ? 'pointer' : 'not-allowed',
+                              opacity: roomPassword ? 1 : 0.5,
+                              transition: 'all 0.2s ease',
+                              whiteSpace: 'nowrap',
+                            }}
+                            onMouseEnter={(e) => {
+                              if (roomPassword && !passwordCopied) {
+                                e.currentTarget.style.background = 'rgba(59, 130, 246, 0.3)'
+                              }
+                            }}
+                            onMouseLeave={(e) => {
+                              if (roomPassword && !passwordCopied) {
+                                e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)'
+                              }
+                            }}
+                          >
+                            {passwordCopied ? '✓ Copied!' : '📋 Copy'}
+                          </button>
+                        </div>
+                        <div
+                          style={{
+                            fontSize: '11px',
+                            color: 'rgba(156, 163, 175, 1)',
+                            marginTop: '4px',
+                          }}
+                        >
+                          Share this password with guests to allow them to join
+                        </div>
+                      </div>
+                    )}
+
+                    {hasUnsavedAccessModeChanges && (
+                      <button
+                        type="button"
+                        onClick={handleUpdateAccessMode}
+                        disabled={actionLoading === 'update-settings'}
                         style={{
                           width: '100%',
                           padding: '10px',
-                          background: 'rgba(255, 255, 255, 0.05)',
-                          border: '1px solid rgba(75, 85, 99, 0.5)',
+                          background:
+                            actionLoading === 'update-settings'
+                              ? 'rgba(75, 85, 99, 0.3)'
+                              : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                          color: 'white',
+                          border:
+                            actionLoading === 'update-settings'
+                              ? '1px solid rgba(75, 85, 99, 0.5)'
+                              : '1px solid rgba(59, 130, 246, 0.6)',
                           borderRadius: '6px',
-                          color: 'rgba(209, 213, 219, 1)',
                           fontSize: '14px',
-                          marginBottom: '12px',
+                          fontWeight: '600',
+                          cursor: actionLoading === 'update-settings' ? 'not-allowed' : 'pointer',
+                          opacity: actionLoading === 'update-settings' ? 0.5 : 1,
                         }}
-                      />
+                      >
+                        {actionLoading === 'update-settings' ? 'Updating...' : 'Update Access Mode'}
+                      </button>
                     )}
-
-                    <button
-                      type="button"
-                      onClick={handleUpdateAccessMode}
-                      disabled={actionLoading === 'update-settings'}
-                      style={{
-                        width: '100%',
-                        padding: '10px',
-                        background:
-                          actionLoading === 'update-settings'
-                            ? 'rgba(75, 85, 99, 0.3)'
-                            : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
-                        color: 'white',
-                        border:
-                          actionLoading === 'update-settings'
-                            ? '1px solid rgba(75, 85, 99, 0.5)'
-                            : '1px solid rgba(59, 130, 246, 0.6)',
-                        borderRadius: '6px',
-                        fontSize: '14px',
-                        fontWeight: '600',
-                        cursor: actionLoading === 'update-settings' ? 'not-allowed' : 'pointer',
-                        opacity: actionLoading === 'update-settings' ? 0.5 : 1,
-                      }}
-                    >
-                      {actionLoading === 'update-settings' ? 'Updating...' : 'Update Access Mode'}
-                    </button>
                   </div>
                 </div>
 
@@ -1663,23 +1853,44 @@ export function ModerationPanel({
         <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
           <button
             type="button"
-            onClick={onClose}
+            onClick={hasUnsavedAccessModeChanges ? undefined : onClose}
+            disabled={hasUnsavedAccessModeChanges}
+            title={
+              hasUnsavedAccessModeChanges
+                ? 'Please update access mode settings before closing'
+                : undefined
+            }
             style={{
               padding: '10px 20px',
-              background: 'rgba(75, 85, 99, 0.3)',
-              color: 'rgba(209, 213, 219, 1)',
-              border: '1px solid rgba(75, 85, 99, 0.5)',
+              background: hasUnsavedAccessModeChanges
+                ? 'rgba(75, 85, 99, 0.2)'
+                : 'rgba(75, 85, 99, 0.3)',
+              color: hasUnsavedAccessModeChanges
+                ? 'rgba(156, 163, 175, 1)'
+                : 'rgba(209, 213, 219, 1)',
+              border: hasUnsavedAccessModeChanges
+                ? '1px solid rgba(251, 146, 60, 0.4)'
+                : '1px solid rgba(75, 85, 99, 0.5)',
               borderRadius: '10px',
               fontSize: '14px',
               fontWeight: '600',
-              cursor: 'pointer',
+              cursor: hasUnsavedAccessModeChanges ? 'not-allowed' : 'pointer',
+              opacity: hasUnsavedAccessModeChanges ? 0.6 : 1,
               transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+              if (!hasUnsavedAccessModeChanges) {
+                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+              } else {
+                e.currentTarget.style.borderColor = 'rgba(251, 146, 60, 0.8)'
+              }
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+              if (!hasUnsavedAccessModeChanges) {
+                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+              } else {
+                e.currentTarget.style.borderColor = 'rgba(251, 146, 60, 0.4)'
+              }
             }}
           >
             Close

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { EmojiPicker } from '../../app/games/matching/components/EmojiPicker'
 import { useGameMode } from '../../contexts/GameModeContext'
+import { generateUniquePlayerName } from '../../utils/playerNames'
 
 interface PlayerConfigDialogProps {
   playerId: string
@@ -48,6 +49,15 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
     setShowEmojiPicker(false)
   }
 
+  const handleGenerateNewName = () => {
+    const allPlayers = Array.from(players.values())
+    const existingNames = allPlayers.filter((p) => p.id !== playerId).map((p) => p.name)
+    const newName = generateUniquePlayerName(existingNames)
+
+    setLocalName(newName)
+    updatePlayer(playerId, { name: newName })
+  }
+
   // Get player number for UI theming (first 4 players get special colors)
   const allPlayers = Array.from(players.values()).sort((a, b) => {
     const aTime =
@@ -256,40 +266,79 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
           >
             Name
           </label>
-          <input
-            type="text"
-            value={localName}
-            onChange={(e) => handleNameChange(e.target.value)}
-            placeholder="Player Name"
-            maxLength={20}
+          <div
             style={{
-              width: '100%',
-              padding: '12px 16px',
-              fontSize: '16px',
-              border: '2px solid #e5e7eb',
-              borderRadius: '12px',
-              outline: 'none',
-              transition: 'all 0.2s ease',
-              fontWeight: '500',
+              display: 'flex',
+              gap: '8px',
             }}
-            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'
-            }}
-          />
+          >
+            <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',
-              textAlign: 'right',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
             }}
           >
-            {localName.length}/20 characters
+            <span>Click dice to generate a random name</span>
+            <span>{localName.length}/20 characters</span>
           </div>
         </div>
       </div>

apps/web/src/constants/playerEmojis.ts

@@ -1,5 +1,8 @@
 // Available character emojis for players
 export const PLAYER_EMOJIS = [
+  // Abacus
+  '🧮',
+
   // People & Characters
   '😀',
   '😃',

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

@@ -30,6 +30,7 @@ export const arcadeRooms = sqliteTable('arcade_rooms', {
     .notNull()
     .default('open'),
   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
   gameName: text('game_name', {

apps/web/src/lib/arcade/__tests__/room-manager.test.ts

@@ -62,6 +62,7 @@ describe('Room Manager', () => {
     ttlMinutes: 60,
     accessMode: 'open',
     password: null,
+    displayPassword: null,
     gameName: 'matching',
     gameConfig: { difficulty: 6 },
     status: 'lobby',

apps/web/src/utils/playerNames.ts

@@ -4,109 +4,113 @@
  */
 
 const ADJECTIVES = [
-  'Swift',
-  'Cosmic',
-  'Radiant',
-  'Mighty',
-  'Clever',
-  'Bold',
-  'Epic',
-  'Mystic',
-  'Stellar',
-  'Fierce',
-  'Nimble',
-  'Wild',
-  'Brave',
-  'Daring',
-  'Slick',
-  'Blazing',
-  'Thunder',
-  'Crystal',
-  'Shadow',
-  'Golden',
-  'Silver',
-  'Royal',
+  // Abacus-themed adjectives
   'Ancient',
-  'Turbo',
-  'Mega',
-  'Ultra',
-  'Super',
-  'Hyper',
-  'Flash',
-  'Quantum',
-  'Atomic',
-  'Electric',
-  'Neon',
-  'Cyber',
-  'Digital',
-  'Pixel',
-  'Glitch',
-  'Retro',
-  'Ninja',
-  'Stealth',
-  'Phantom',
-  'Speedy',
-  'Lucky',
-  'Magic',
-  'Wonder',
-  'Power',
+  'Wooden',
+  'Sliding',
+  'Decimal',
+  'Binary',
+  'Counting',
+  'Soroban',
+  'Chinese',
+  'Japanese',
+  'Nimble',
+  'Clicking',
+  'Beaded',
+  'Columnar',
+  'Vertical',
+  'Horizontal',
+  'Upper',
+  'Lower',
+  'Heaven',
+  'Earth',
+  'Golden',
+  'Jade',
+  'Bamboo',
+  'Polished',
+  'Skilled',
   'Master',
-  'Legend',
-  'Champion',
-  'Titan',
+  // Arithmetic/calculation adjectives
+  'Adding',
+  'Subtracting',
+  'Multiplying',
+  'Dividing',
+  'Calculating',
+  'Computing',
+  'Estimating',
+  'Rounding',
+  'Summing',
+  'Tallying',
+  'Decimal',
+  'Fractional',
+  'Exponential',
+  'Algebraic',
+  'Geometric',
+  'Prime',
+  'Composite',
+  'Rational',
+  'Digital',
+  'Numeric',
+  'Precise',
+  'Accurate',
+  'Lightning',
+  'Rapid',
+  'Mental',
 ]
 
 const NOUNS = [
-  'Ninja',
+  // Abacus-themed nouns
+  'Counter',
+  'Abacist',
+  'Calculator',
+  'Bead',
+  'Rod',
+  'Frame',
+  'Slider',
+  'Merchant',
+  'Trader',
+  'Accountant',
+  'Bookkeeper',
+  'Clerk',
+  'Scribe',
+  'Master',
+  'Apprentice',
+  'Scholar',
+  'Student',
+  'Teacher',
+  'Sensei',
+  'Guru',
+  'Expert',
+  'Virtuoso',
+  'Prodigy',
   'Wizard',
-  'Dragon',
-  'Phoenix',
-  'Knight',
-  'Warrior',
-  'Hunter',
-  'Ranger',
-  'Mage',
-  'Rogue',
-  'Paladin',
-  'Samurai',
-  'Viking',
-  'Pirate',
-  'Tiger',
-  'Wolf',
-  'Eagle',
-  'Falcon',
-  'Bear',
-  'Lion',
-  'Panda',
-  'Fox',
-  'Hawk',
-  'Cobra',
-  'Shark',
-  'Raptor',
-  'Viper',
-  'Lynx',
-  'Panther',
-  'Jaguar',
-  'Racer',
-  'Pilot',
-  'Captain',
-  'Commander',
-  'Hero',
-  'Guardian',
-  'Defender',
-  'Striker',
-  'Blaster',
-  'Crusher',
-  'Smasher',
-  'Blitzer',
-  'Rider',
-  'Surfer',
-  'Skater',
-  'Gamer',
-  'Player',
-  'Champion',
-  'Legend',
-  'Star',
+  'Sage',
+  // Arithmetic/calculation nouns
+  'Adder',
+  'Multiplier',
+  'Divider',
+  'Solver',
+  'Mathematician',
+  'Arithmetician',
+  'Analyst',
+  'Computer',
+  'Estimator',
+  'Logician',
+  'Statistician',
+  'Numerologist',
+  'Quantifier',
+  'Tallier',
+  'Sumner',
+  'Keeper',
+  'Reckoner',
+  'Cipher',
+  'Digit',
+  'Figure',
+  'Number',
+  'Brain',
+  'Thinker',
+  'Genius',
+  'Whiz',
 ]
 
 /**

package.json

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