chore(release): 2.16.4 [skip ci]

## [2.16.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.3...v2.16.4) (2025-10-09)

### Bug Fixes

* correct Docker CMD to use root-level server.js ([48b47e9](48b47e9bdb))

CHANGELOG.md

@@ -1,3 +1,52 @@
+## [2.16.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.3...v2.16.4) (2025-10-09)
+
+
+### Bug Fixes
+
+* correct Docker CMD to use root-level server.js ([48b47e9](https://github.com/antialias/soroban-abacus-flashcards/commit/48b47e9bdb0da44746282cd7cf7599a69bf5130d))
+
+## [2.16.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.2...v2.16.3) (2025-10-09)
+
+
+### Bug Fixes
+
+* use game state playerMetadata instead of GameModeContext in UI components ([388c254](https://github.com/antialias/soroban-abacus-flashcards/commit/388c25451d11b85236c1f7682fe2f7a62a15d5eb))
+
+## [2.16.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.1...v2.16.2) (2025-10-09)
+
+
+### Bug Fixes
+
+* use only local user's players in LocalMemoryPairsProvider ([c26138f](https://github.com/antialias/soroban-abacus-flashcards/commit/c26138ffb55a237a99cb6ff399c8a2ac54a22b51))
+
+## [2.16.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.16.0...v2.16.1) (2025-10-09)
+
+
+### Bug Fixes
+
+* convert LocalMemoryPairsProvider to pure client-side with useReducer ([b128db1](https://github.com/antialias/soroban-abacus-flashcards/commit/b128db1783a8dcffe7879745c3342add2f9ffe29))
+
+## [2.16.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.15.0...v2.16.0) (2025-10-09)
+
+
+### Features
+
+* fade out hover avatar when player stops hovering ([820eeb4](https://github.com/antialias/soroban-abacus-flashcards/commit/820eeb4fb03ad8be6a86dd0a26e089052224f427))
+
+## [2.15.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.3...v2.15.0) (2025-10-09)
+
+
+### Features
+
+* implement smooth hover avatar animations with react-spring ([442c6b4](https://github.com/antialias/soroban-abacus-flashcards/commit/442c6b4529ba5c820b1fe8a64805a3d85489a8ea))
+
+## [2.14.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.2...v2.14.3) (2025-10-09)
+
+
+### Bug Fixes
+
+* enable smooth spring animations between card hovers ([8d53b58](https://github.com/antialias/soroban-abacus-flashcards/commit/8d53b589aa17ebc6d0a9251b3006fd8a90f90a61))
+
 ## [2.14.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.1...v2.14.2) (2025-10-09)
 
 

Dockerfile

@@ -50,4 +50,4 @@ ENV PORT 3000
 ENV HOSTNAME "0.0.0.0"
 
 # Start the application
-CMD ["node", "apps/web/server.js"]
+CMD ["node", "server.js"]

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

@@ -9,7 +9,9 @@
       "Bash(git push:*)",
       "Bash(git pull:*)",
       "Bash(git stash:*)",
-      "Bash(npm run format:*)"
+      "Bash(npm run format:*)",
+      "Bash(npm run pre-commit:*)",
+      "Bash(npm run type-check:*)"
     ],
     "deny": [],
     "ask": []

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

@@ -3,7 +3,7 @@
 import { useSpring, animated } from '@react-spring/web'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { css } from '../../../../../styled-system/css'
-import { useGameMode } from '../../../../contexts/GameModeContext'
+import { useViewerId } from '@/hooks/useViewerId'
 import { useMemoryPairs } from '../context/MemoryPairsContext'
 import { getGridConfiguration } from '../utils/cardGeneration'
 import { GameCard } from './GameCard'
@@ -87,22 +87,23 @@ function HoverAvatar({
   playerId,
   playerInfo,
   cardElement,
+  isPlayersTurn,
 }: {
   playerId: string
   playerInfo: { emoji: string; name: string; color?: string }
   cardElement: HTMLElement | null
+  isPlayersTurn: boolean
 }) {
   const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
+  const isFirstRender = useRef(true)
 
   // Update position when card element changes
   useEffect(() => {
     if (cardElement) {
       const rect = cardElement.getBoundingClientRect()
-      // Calculate the actual position we want the avatar centered at (top-right of card)
-      // Since we're using translate(-50%, -50%), we need the center point
-      const avatarSize = 48
-      const avatarCenterX = rect.right - 12 // 12px from right edge
-      const avatarCenterY = rect.top - 12 // 12px from top edge
+      // Calculate the center of the card for avatar positioning
+      const avatarCenterX = rect.left + rect.width / 2
+      const avatarCenterY = rect.top + rect.height / 2
 
       setPosition({
         x: avatarCenterX,
@@ -112,23 +113,25 @@ function HoverAvatar({
   }, [cardElement])
 
   // Smooth spring animation for position changes
-  // Use 'from' to set initial position when avatar first appears
   const springProps = useSpring({
-    from: position
-      ? { x: position.x, y: position.y, opacity: 0 }
-      : { x: 0, y: 0, opacity: 0 },
-    to: {
-      x: position?.x ?? 0,
-      y: position?.y ?? 0,
-      opacity: position ? 1 : 0,
-    },
+    x: position?.x ?? 0,
+    y: position?.y ?? 0,
+    opacity: position && isPlayersTurn && cardElement ? 1 : 0,
     config: {
       tension: 280,
       friction: 60,
       mass: 1,
     },
+    immediate: isFirstRender.current, // Skip animation on first render only
   })
 
+  // Clear first render flag after initial render
+  useEffect(() => {
+    if (position && isFirstRender.current) {
+      isFirstRender.current = false
+    }
+  }, [position])
+
   // Don't render until we have a position
   if (!position) return null
 
@@ -140,23 +143,23 @@ function HoverAvatar({
         left: springProps.x.to((x) => `${x}px`),
         top: springProps.y.to((y) => `${y}px`),
         opacity: springProps.opacity,
-        width: '48px',
-        height: '48px',
-        marginLeft: '-24px', // Center horizontally (half of width)
-        marginTop: '-24px', // Center vertically (half of height)
+        width: '80px',
+        height: '80px',
+        marginLeft: '-40px', // Center horizontally (half of width)
+        marginTop: '-40px', // Center vertically (half of height)
         borderRadius: '50%',
         background: playerInfo.color || 'linear-gradient(135deg, #667eea, #764ba2)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        fontSize: '28px',
+        fontSize: '48px',
         // 3D elevation effect
         boxShadow:
-          '0 8px 20px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3), 0 0 30px rgba(102, 126, 234, 0.7)',
-        border: '3px solid white',
+          '0 12px 30px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.4), 0 0 40px rgba(102, 126, 234, 0.8)',
+        border: '4px solid white',
         zIndex: 1000,
         pointerEvents: 'none',
-        filter: 'drop-shadow(0 0 8px rgba(102, 126, 234, 0.8))',
+        filter: 'drop-shadow(0 0 12px rgba(102, 126, 234, 0.9))',
       }}
       className={css({
         animation: 'hoverFloat 2s ease-in-out infinite',
@@ -170,7 +173,7 @@ function HoverAvatar({
 
 export function MemoryGrid() {
   const { state, flipCard, hoverCard, gameMode } = useMemoryPairs()
-  const { players: playerMap } = useGameMode()
+  const { data: viewerId } = useViewerId()
 
   // Track card element refs for positioning hover avatars
   const cardRefs = useRef<Map<string, HTMLElement>>(new Map())
@@ -179,9 +182,11 @@ export function MemoryGrid() {
   const isMyTurn = useMemo(() => {
     if (gameMode === 'single') return true // Always your turn in single player
 
-    const currentPlayerData = playerMap.get(state.currentPlayer)
-    return currentPlayerData?.isLocal === true
-  }, [state.currentPlayer, playerMap, gameMode])
+    // In local games, all players belong to current user, so always their turn
+    // In room games, check if current player belongs to this user
+    const currentPlayerMetadata = state.playerMetadata?.[state.currentPlayer]
+    return currentPlayerMetadata?.userId === viewerId
+  }, [state.currentPlayer, state.playerMetadata, viewerId, gameMode])
 
   // Hooks must be called before early return
   const gridConfig = useMemo(() => getGridConfiguration(state.difficulty), [state.difficulty])
@@ -197,16 +202,8 @@ export function MemoryGrid() {
 
   // Get player metadata for hover avatars
   const getPlayerHoverInfo = (playerId: string) => {
-    // Check playerMetadata first (from room members)
-    if (state.playerMetadata && state.playerMetadata[playerId]) {
-      return {
-        emoji: state.playerMetadata[playerId].emoji,
-        name: state.playerMetadata[playerId].name,
-        color: state.playerMetadata[playerId].color,
-      }
-    }
-    // Fall back to local player map
-    const player = playerMap.get(playerId)
+    // Get player info from game state metadata
+    const player = state.playerMetadata?.[playerId]
     return player
       ? {
           emoji: player.emoji,
@@ -379,26 +376,33 @@ export function MemoryGrid() {
       )}
 
       {/* Animated Hover Avatars - Rendered as fixed positioned elements that smoothly transition */}
+      {/* Render one avatar per remote player - key by playerId to keep component alive */}
       {state.playerHovers &&
         Object.entries(state.playerHovers)
-          .filter(([_, cardId]) => cardId !== null) // Only show if hovering a card
           .filter(([playerId]) => {
             // Don't show your own hover avatar (only show remote players)
-            const player = playerMap.get(playerId)
-            return player?.isLocal !== true
+            // In local games, all players belong to this user
+            // In room games, check if player belongs to different user
+            const player = state.playerMetadata?.[playerId]
+            return player?.userId !== viewerId
           })
           .map(([playerId, cardId]) => {
             const playerInfo = getPlayerHoverInfo(playerId)
+            // Get card element if player is hovering (cardId might be null)
             const cardElement = cardId ? cardRefs.current.get(cardId) : null
+            // Check if it's this player's turn
+            const isPlayersTurn = state.currentPlayer === playerId
 
-            if (!playerInfo || !cardElement) return null
+            if (!playerInfo) return null
 
+            // Render avatar even if no cardElement (it will handle hiding itself)
             return (
               <HoverAvatar
-                key={playerId}
+                key={playerId} // Key by playerId keeps component alive across card changes!
                 playerId={playerId}
                 playerInfo={playerInfo}
                 cardElement={cardElement}
+                isPlayersTurn={isPlayersTurn}
               />
             )
           })}
@@ -416,10 +420,10 @@ const gridAnimations = `
 
 @keyframes hoverFloat {
   0%, 100% {
-    transform: translate(-50%, -50%) translateY(0px);
+    transform: translateY(0px);
   }
   50% {
-    transform: translate(-50%, -50%) translateY(-6px);
+    transform: translateY(-6px);
   }
 }
 `

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

@@ -1,7 +1,6 @@
 'use client'
 
 import { css } from '../../../../../styled-system/css'
-import { useGameMode } from '../../../../contexts/GameModeContext'
 import { gamePlurals } from '../../../../utils/pluralization'
 import { useMemoryPairs } from '../context/MemoryPairsContext'
 
@@ -10,12 +9,12 @@ interface PlayerStatusBarProps {
 }
 
 export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
-  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode()
   const { state } = useMemoryPairs()
 
-  // Get active players array
-  const activePlayersData = Array.from(activePlayerIds)
-    .map((id) => playerMap.get(id))
+  // Get active players from game state (not GameModeContext)
+  // This ensures we only show players actually in this game
+  const activePlayersData = state.activePlayers
+    .map((id) => state.playerMetadata?.[id])
     .filter((p): p is NonNullable<typeof p> => p !== undefined)
 
   // Map active players to display data with scores
@@ -26,7 +25,8 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
     displayEmoji: player.emoji,
     score: state.scores[player.id] || 0,
     consecutiveMatches: state.consecutiveMatches?.[player.id] || 0,
-    isLocalPlayer: player.isLocal !== false, // Local if not explicitly marked as remote
+    // In local games all players are local, in room games check metadata
+    isLocalPlayer: state.gameMode === 'single' || state.gameMode === 'multiplayer',
   }))
 
   // Check if current player is local (your turn) or remote (waiting)

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

@@ -1,16 +1,16 @@
 'use client'
 
-import { type ReactNode, useCallback, useEffect, useMemo } from 'react'
+import { type ReactNode, useCallback, useEffect, useMemo, useReducer } from 'react'
+import { useRouter } from 'next/navigation'
 import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
-import { useArcadeSession } from '@/hooks/useArcadeSession'
 import { useViewerId } from '@/hooks/useViewerId'
-import type { GameMove } from '@/lib/arcade/validation'
-import { useGameMode } from '../../../../contexts/GameModeContext'
+import { useUserPlayers } from '@/hooks/useUserPlayers'
 import { generateGameCards } from '../utils/cardGeneration'
+import { validateMatch } from '../utils/matchValidation'
 import { MemoryPairsContext } from './MemoryPairsContext'
 import type { GameMode, GameStatistics, MemoryPairsContextValue, MemoryPairsState } from './types'
 
-// Initial state
+// Initial state for local-only games
 const initialState: MemoryPairsState = {
   cards: [],
   gameCards: [],
@@ -19,13 +19,13 @@ const initialState: MemoryPairsState = {
   difficulty: 6,
   turnTimer: 30,
   gamePhase: 'setup',
-  currentPlayer: '', // Will be set to first player ID on START_GAME
+  currentPlayer: '',
   matchedPairs: 0,
   totalPairs: 6,
   moves: 0,
   scores: {},
   activePlayers: [],
-  playerMetadata: {}, // Player metadata for cross-user visibility
+  playerMetadata: {},
   consecutiveMatches: {},
   gameStartTime: null,
   gameEndTime: null,
@@ -35,38 +35,43 @@ const initialState: MemoryPairsState = {
   isProcessingMove: false,
   showMismatchFeedback: false,
   lastMatchedPair: null,
-  // PAUSE/RESUME: Initialize paused game fields
   originalConfig: undefined,
   pausedGamePhase: undefined,
   pausedGameState: undefined,
-  // HOVER: Initialize hover state
   playerHovers: {},
 }
 
-/**
- * Optimistic move application (client-side prediction)
- * The server will validate and send back the authoritative state
- */
-function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): MemoryPairsState {
-  switch (move.type) {
+// Action types for local reducer
+type LocalAction =
+  | { type: 'START_GAME'; cards: any[]; activePlayers: string[]; playerMetadata: any }
+  | { type: 'FLIP_CARD'; cardId: string }
+  | { type: 'MATCH_FOUND'; cardIds: [string, string]; playerId: string }
+  | { type: 'MATCH_FAILED'; cardIds: [string, string] }
+  | { type: 'CLEAR_MISMATCH' }
+  | { type: 'SWITCH_PLAYER' }
+  | { type: 'GO_TO_SETUP' }
+  | { type: 'SET_CONFIG'; field: string; value: any }
+  | { type: 'RESUME_GAME' }
+  | { type: 'HOVER_CARD'; playerId: string; cardId: string | null }
+  | { type: 'END_GAME' }
+
+// Pure client-side reducer with complete game logic
+function localMemoryPairsReducer(state: MemoryPairsState, action: LocalAction): MemoryPairsState {
+  switch (action.type) {
     case 'START_GAME':
-      // Generate cards and initialize game
       return {
         ...state,
         gamePhase: 'playing',
-        gameCards: move.data.cards,
-        cards: move.data.cards,
+        gameCards: action.cards,
+        cards: action.cards,
         flippedCards: [],
         matchedPairs: 0,
         moves: 0,
-        scores: move.data.activePlayers.reduce((acc: any, p: string) => ({ ...acc, [p]: 0 }), {}),
-        consecutiveMatches: move.data.activePlayers.reduce(
-          (acc: any, p: string) => ({ ...acc, [p]: 0 }),
-          {}
-        ),
-        activePlayers: move.data.activePlayers,
-        playerMetadata: move.data.playerMetadata || {}, // Include player metadata
-        currentPlayer: move.data.activePlayers[0] || '',
+        scores: action.activePlayers.reduce((acc: any, p: string) => ({ ...acc, [p]: 0 }), {}),
+        consecutiveMatches: action.activePlayers.reduce((acc: any, p: string) => ({ ...acc, [p]: 0 }), {}),
+        activePlayers: action.activePlayers,
+        playerMetadata: action.playerMetadata,
+        currentPlayer: action.activePlayers[0] || '',
         gameStartTime: Date.now(),
         gameEndTime: null,
         currentMoveStartTime: Date.now(),
@@ -74,7 +79,6 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
         isProcessingMove: false,
         showMismatchFeedback: false,
         lastMatchedPair: null,
-        // PAUSE/RESUME: Save original config and clear paused state
         originalConfig: {
           gameType: state.gameType,
           difficulty: state.difficulty,
@@ -85,8 +89,7 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
       }
 
     case 'FLIP_CARD': {
-      // Optimistically flip the card
-      const card = state.gameCards.find((c) => c.id === move.data.cardId)
+      const card = state.gameCards.find((c) => c.id === action.cardId)
       if (!card) return state
 
       const newFlippedCards = [...state.flippedCards, card]
@@ -94,15 +97,69 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
       return {
         ...state,
         flippedCards: newFlippedCards,
-        currentMoveStartTime:
-          state.flippedCards.length === 0 ? Date.now() : state.currentMoveStartTime,
-        isProcessingMove: newFlippedCards.length === 2, // Processing if 2 cards flipped
+        currentMoveStartTime: state.flippedCards.length === 0 ? Date.now() : state.currentMoveStartTime,
+        isProcessingMove: newFlippedCards.length === 2,
         showMismatchFeedback: false,
       }
     }
 
+    case 'MATCH_FOUND': {
+      const [id1, id2] = action.cardIds
+      const updatedCards = state.gameCards.map((card) =>
+        card.id === id1 || card.id === id2
+          ? { ...card, matched: true, matchedBy: action.playerId }
+          : card
+      )
+
+      const newMatchedPairs = state.matchedPairs + 1
+      const newScores = {
+        ...state.scores,
+        [action.playerId]: (state.scores[action.playerId] || 0) + 1,
+      }
+      const newConsecutiveMatches = {
+        ...state.consecutiveMatches,
+        [action.playerId]: (state.consecutiveMatches[action.playerId] || 0) + 1,
+      }
+
+      // Check if game is complete
+      const gameComplete = newMatchedPairs >= state.totalPairs
+
+      return {
+        ...state,
+        gameCards: updatedCards,
+        cards: updatedCards,
+        flippedCards: [],
+        matchedPairs: newMatchedPairs,
+        moves: state.moves + 1,
+        scores: newScores,
+        consecutiveMatches: newConsecutiveMatches,
+        lastMatchedPair: action.cardIds,
+        isProcessingMove: false,
+        showMismatchFeedback: false,
+        gamePhase: gameComplete ? 'results' : state.gamePhase,
+        gameEndTime: gameComplete ? Date.now() : null,
+        // Player keeps their turn on match
+      }
+    }
+
+    case 'MATCH_FAILED': {
+      // Reset consecutive matches for current player
+      const newConsecutiveMatches = {
+        ...state.consecutiveMatches,
+        [state.currentPlayer]: 0,
+      }
+
+      return {
+        ...state,
+        moves: state.moves + 1,
+        showMismatchFeedback: true,
+        isProcessingMove: true,
+        consecutiveMatches: newConsecutiveMatches,
+        // Don't clear flipped cards yet - CLEAR_MISMATCH will do that
+      }
+    }
+
     case 'CLEAR_MISMATCH': {
-      // Clear mismatched cards and feedback
       return {
         ...state,
         flippedCards: [],
@@ -111,14 +168,24 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
       }
     }
 
+    case 'SWITCH_PLAYER': {
+      const currentIndex = state.activePlayers.indexOf(state.currentPlayer)
+      const nextIndex = (currentIndex + 1) % state.activePlayers.length
+      const nextPlayer = state.activePlayers[nextIndex]
+
+      return {
+        ...state,
+        currentPlayer: nextPlayer,
+        currentMoveStartTime: Date.now(),
+      }
+    }
+
     case 'GO_TO_SETUP': {
-      // Return to setup phase - pause game if coming from playing/results
       const isPausingGame = state.gamePhase === 'playing' || state.gamePhase === 'results'
 
       return {
         ...state,
         gamePhase: 'setup',
-        // PAUSE: Save game state if pausing from active game
         pausedGamePhase: isPausingGame ? state.gamePhase : undefined,
         pausedGameState: isPausingGame
           ? {
@@ -128,12 +195,11 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
               moves: state.moves,
               scores: state.scores,
               activePlayers: state.activePlayers,
-              playerMetadata: state.playerMetadata,
+              playerMetadata: state.playerMetadata || {},
               consecutiveMatches: state.consecutiveMatches,
               gameStartTime: state.gameStartTime,
             }
           : undefined,
-        // Reset visible game state
         gameCards: [],
         cards: [],
         flippedCards: [],
@@ -155,16 +221,12 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
     }
 
     case 'SET_CONFIG': {
-      // Update configuration field optimistically
-      const { field, value } = move.data as { field: string; value: any }
       const clearPausedGame = !!state.pausedGamePhase
 
       return {
         ...state,
-        [field]: value,
-        // Update totalPairs if difficulty changes
-        ...(field === 'difficulty' ? { totalPairs: value } : {}),
-        // Clear paused game if config changed
+        [action.field]: action.value,
+        ...(action.field === 'difficulty' ? { totalPairs: action.value } : {}),
         ...(clearPausedGame
           ? { pausedGamePhase: undefined, pausedGameState: undefined, originalConfig: undefined }
           : {}),
@@ -172,9 +234,8 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
     }
 
     case 'RESUME_GAME': {
-      // Resume paused game
       if (!state.pausedGamePhase || !state.pausedGameState) {
-        return state // No paused game, no-op
+        return state
       }
 
       return {
@@ -190,140 +251,142 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
         playerMetadata: state.pausedGameState.playerMetadata,
         consecutiveMatches: state.pausedGameState.consecutiveMatches,
         gameStartTime: state.pausedGameState.gameStartTime,
-        // Clear paused state
         pausedGamePhase: undefined,
         pausedGameState: undefined,
       }
     }
 
     case 'HOVER_CARD': {
-      // Update player hover state for networked presence
       return {
         ...state,
         playerHovers: {
           ...state.playerHovers,
-          [move.playerId]: move.data.cardId,
+          [action.playerId]: action.cardId,
         },
       }
     }
 
+    case 'END_GAME': {
+      return {
+        ...state,
+        gamePhase: 'results',
+        gameEndTime: Date.now(),
+      }
+    }
+
     default:
       return state
   }
 }
 
-// Provider component for LOCAL play (no network sync)
+// Provider component for LOCAL-ONLY play (no network, no arcade session)
 export function LocalMemoryPairsProvider({ children }: { children: ReactNode }) {
+  const router = useRouter()
   const { data: viewerId } = useViewerId()
-  // NOTE: We deliberately do NOT call useRoomData() for local play
-  const { activePlayerCount, activePlayers: activePlayerIds, players } = useGameMode()
 
-  // Use arcade redirect to determine button visibility for arcade sessions
+  // LOCAL-ONLY: Get only the current user's players (no room members)
+  const { data: userPlayers = [] } = useUserPlayers()
+
+  // Use arcade redirect to determine button visibility
   const { canModifyPlayers } = useArcadeRedirect({ currentGame: 'matching' })
 
-  // Get active player IDs directly as strings (UUIDs)
-  const activePlayers = Array.from(activePlayerIds)
+  // Build players map from current user's players only
+  const players = useMemo(() => {
+    const map = new Map()
+    userPlayers.forEach((player) => {
+      map.set(player.id, {
+        id: player.id,
+        name: player.name,
+        emoji: player.emoji,
+        color: player.color,
+        isLocal: true,
+      })
+    })
+    return map
+  }, [userPlayers])
+
+  // Get active player IDs from current user's players only
+  const activePlayers = useMemo(() => {
+    return userPlayers.filter((p) => p.isActive).map((p) => p.id)
+  }, [userPlayers])
 
   // Derive game mode from active player count
-  const gameMode = activePlayerCount > 1 ? 'multiplayer' : 'single'
+  const gameMode = activePlayers.length > 1 ? 'multiplayer' : 'single'
 
-  // NO LOCAL STATE - Configuration lives in session state
-  // Changes are sent as moves and synchronized (even in local mode for consistency)
+  // Pure client-side state with useReducer
+  const [state, dispatch] = useReducer(localMemoryPairsReducer, initialState)
 
-  // Arcade session integration WITHOUT room sync
-  const {
-    state,
-    sendMove,
-    connected: _connected,
-    exitSession,
-  } = useArcadeSession<MemoryPairsState>({
-    userId: viewerId || '',
-    roomId: undefined, // CRITICAL: No roomId means no network sync
-    initialState,
-    applyMove: applyMoveOptimistically,
-  })
-
-  // Handle mismatch feedback timeout
+  // Handle mismatch feedback timeout and player switching
   useEffect(() => {
     if (state.showMismatchFeedback && state.flippedCards.length === 2) {
-      // After 1.5 seconds, send CLEAR_MISMATCH
-      // Server will validate that cards are still in mismatch state before clearing
       const timeout = setTimeout(() => {
-        sendMove({
-          type: 'CLEAR_MISMATCH',
-          playerId: state.currentPlayer,
-          data: {},
-        })
+        dispatch({ type: 'CLEAR_MISMATCH' })
+        // Switch to next player after mismatch
+        dispatch({ type: 'SWITCH_PLAYER' })
       }, 1500)
 
       return () => clearTimeout(timeout)
     }
-  }, [state.showMismatchFeedback, state.flippedCards.length, sendMove, state.currentPlayer])
+  }, [state.showMismatchFeedback, state.flippedCards.length])
+
+  // Handle automatic match checking when 2 cards flipped
+  useEffect(() => {
+    if (state.flippedCards.length === 2 && !state.showMismatchFeedback) {
+      const [card1, card2] = state.flippedCards
+      const isMatch = validateMatch(card1, card2)
+
+      const timeout = setTimeout(() => {
+        if (isMatch.isValid) {
+          dispatch({
+            type: 'MATCH_FOUND',
+            cardIds: [card1.id, card2.id],
+            playerId: state.currentPlayer,
+          })
+          // Player keeps turn on match - no SWITCH_PLAYER
+        } else {
+          dispatch({
+            type: 'MATCH_FAILED',
+            cardIds: [card1.id, card2.id],
+          })
+          // SWITCH_PLAYER will happen after CLEAR_MISMATCH timeout
+        }
+      }, 600) // Small delay to show both cards
+
+      return () => clearTimeout(timeout)
+    }
+  }, [state.flippedCards, state.showMismatchFeedback, state.currentPlayer])
 
   // Computed values
   const isGameActive = state.gamePhase === 'playing'
 
   const canFlipCard = useCallback(
     (cardId: string): boolean => {
-      console.log('[LocalProvider][canFlipCard] Checking card:', {
-        cardId,
-        isGameActive,
-        isProcessingMove: state.isProcessingMove,
-        currentPlayer: state.currentPlayer,
-        flippedCardsCount: state.flippedCards.length,
-      })
-
       if (!isGameActive || state.isProcessingMove) {
-        console.log('[LocalProvider][canFlipCard] Blocked: game not active or processing')
         return false
       }
 
       const card = state.gameCards.find((c) => c.id === cardId)
       if (!card || card.matched) {
-        console.log('[LocalProvider][canFlipCard] Blocked: card not found or already matched')
         return false
       }
 
-      // Can't flip if already flipped
       if (state.flippedCards.some((c) => c.id === cardId)) {
-        console.log('[LocalProvider][canFlipCard] Blocked: card already flipped')
         return false
       }
 
-      // Can't flip more than 2 cards
       if (state.flippedCards.length >= 2) {
-        console.log('[LocalProvider][canFlipCard] Blocked: 2 cards already flipped')
         return false
       }
 
-      // In local play, we allow the current player to flip
-      // Authorization is simpler - just check if it's this player's turn
+      // In local play, all local players can flip during their turn
       const currentPlayerData = players.get(state.currentPlayer)
-      console.log('[LocalProvider][canFlipCard] Authorization check:', {
-        currentPlayerId: state.currentPlayer,
-        currentPlayerFound: !!currentPlayerData,
-        currentPlayerIsLocal: currentPlayerData?.isLocal,
-      })
-
-      // Block if current player is explicitly marked as remote (shouldn't happen in local play)
       if (currentPlayerData && currentPlayerData.isLocal === false) {
-        console.log(
-          '[LocalProvider][canFlipCard] BLOCKED: Current player is remote (unexpected in local play)'
-        )
         return false
       }
 
-      console.log('[LocalProvider][canFlipCard] ALLOWED: All checks passed')
       return true
     },
-    [
-      isGameActive,
-      state.isProcessingMove,
-      state.gameCards,
-      state.flippedCards,
-      state.currentPlayer,
-      players,
-    ]
+    [isGameActive, state.isProcessingMove, state.gameCards, state.flippedCards, state.currentPlayer, players]
   )
 
   const currentGameStatistics: GameStatistics = useMemo(
@@ -341,7 +404,6 @@ export function LocalMemoryPairsProvider({ children }: { children: ReactNode })
     [state.moves, state.matchedPairs, state.totalPairs, state.gameStartTime, state.gameEndTime]
   )
 
-  // PAUSE/RESUME: Computed values for pause/resume functionality
   const hasConfigChanged = useMemo(() => {
     if (!state.originalConfig) return false
     return (
@@ -355,16 +417,13 @@ export function LocalMemoryPairsProvider({ children }: { children: ReactNode })
     return !!state.pausedGamePhase && !!state.pausedGameState && !hasConfigChanged
   }, [state.pausedGamePhase, state.pausedGameState, hasConfigChanged])
 
-  // Action creators - send moves to arcade session
+  // Action creators
   const startGame = useCallback(() => {
-    // Must have at least one active player
     if (activePlayers.length === 0) {
       console.error('[LocalMemoryPairs] Cannot start game without active players')
       return
     }
 
-    // Capture player metadata from local players map
-    // This ensures all room members can display player info even if they don't own the players
     const playerMetadata: { [playerId: string]: any } = {}
     for (const playerId of activePlayers) {
       const playerData = players.get(playerId)
@@ -379,56 +438,31 @@ export function LocalMemoryPairsProvider({ children }: { children: ReactNode })
       }
     }
 
-    // Use current session state configuration (no local state!)
     const cards = generateGameCards(state.gameType, state.difficulty)
-    // Use first active player as playerId for START_GAME move
-    const firstPlayer = activePlayers[0]
-    sendMove({
+    dispatch({
       type: 'START_GAME',
-      playerId: firstPlayer,
-      data: {
-        cards,
-        activePlayers,
-        playerMetadata,
-      },
+      cards,
+      activePlayers,
+      playerMetadata,
     })
-  }, [state.gameType, state.difficulty, activePlayers, players, viewerId, sendMove])
+  }, [state.gameType, state.difficulty, activePlayers, players, viewerId])
 
   const flipCard = useCallback(
     (cardId: string) => {
-      console.log('[LocalProvider] flipCard called:', {
-        cardId,
-        viewerId,
-        currentPlayer: state.currentPlayer,
-        activePlayers: state.activePlayers,
-        gamePhase: state.gamePhase,
-        canFlip: canFlipCard(cardId),
-      })
-
       if (!canFlipCard(cardId)) {
-        console.log('[LocalProvider] Cannot flip card - canFlipCard returned false')
         return
       }
-
-      const move = {
-        type: 'FLIP_CARD' as const,
-        playerId: state.currentPlayer, // Use the current player ID from game state (database player ID)
-        data: { cardId },
-      }
-      console.log('[LocalProvider] Sending FLIP_CARD move via sendMove:', move)
-      sendMove(move)
+      dispatch({ type: 'FLIP_CARD', cardId })
     },
-    [canFlipCard, sendMove, viewerId, state.currentPlayer, state.activePlayers, state.gamePhase]
+    [canFlipCard]
   )
 
   const resetGame = useCallback(() => {
-    // Must have at least one active player
     if (activePlayers.length === 0) {
       console.error('[LocalMemoryPairs] Cannot reset game without active players')
       return
     }
 
-    // Capture player metadata from local players map
     const playerMetadata: { [playerId: string]: any } = {}
     for (const playerId of activePlayers) {
       const playerData = players.get(playerId)
@@ -443,114 +477,71 @@ export function LocalMemoryPairsProvider({ children }: { children: ReactNode })
       }
     }
 
-    // Use current session state configuration (no local state!)
     const cards = generateGameCards(state.gameType, state.difficulty)
-    // Use first active player as playerId for START_GAME move
-    const firstPlayer = activePlayers[0]
-    sendMove({
+    dispatch({
       type: 'START_GAME',
-      playerId: firstPlayer,
-      data: {
-        cards,
-        activePlayers,
-        playerMetadata,
-      },
+      cards,
+      activePlayers,
+      playerMetadata,
     })
-  }, [state.gameType, state.difficulty, activePlayers, players, viewerId, sendMove])
+  }, [state.gameType, state.difficulty, activePlayers, players, viewerId])
 
-  const setGameType = useCallback(
-    (gameType: typeof state.gameType) => {
-      // Use first active player as playerId, or empty string if none
-      const playerId = activePlayers[0] || ''
-      sendMove({
-        type: 'SET_CONFIG',
-        playerId,
-        data: { field: 'gameType', value: gameType },
-      })
-    },
-    [activePlayers, sendMove]
-  )
+  const setGameType = useCallback((gameType: typeof state.gameType) => {
+    dispatch({ type: 'SET_CONFIG', field: 'gameType', value: gameType })
+  }, [])
 
-  const setDifficulty = useCallback(
-    (difficulty: typeof state.difficulty) => {
-      const playerId = activePlayers[0] || ''
-      sendMove({
-        type: 'SET_CONFIG',
-        playerId,
-        data: { field: 'difficulty', value: difficulty },
-      })
-    },
-    [activePlayers, sendMove]
-  )
+  const setDifficulty = useCallback((difficulty: typeof state.difficulty) => {
+    dispatch({ type: 'SET_CONFIG', field: 'difficulty', value: difficulty })
+  }, [])
 
-  const setTurnTimer = useCallback(
-    (turnTimer: typeof state.turnTimer) => {
-      const playerId = activePlayers[0] || ''
-      sendMove({
-        type: 'SET_CONFIG',
-        playerId,
-        data: { field: 'turnTimer', value: turnTimer },
-      })
-    },
-    [activePlayers, sendMove]
-  )
+  const setTurnTimer = useCallback((turnTimer: typeof state.turnTimer) => {
+    dispatch({ type: 'SET_CONFIG', field: 'turnTimer', value: turnTimer })
+  }, [])
 
   const resumeGame = useCallback(() => {
-    // PAUSE/RESUME: Resume paused game if config unchanged
     if (!canResumeGame) {
       console.warn('[LocalMemoryPairs] Cannot resume - no paused game or config changed')
       return
     }
-
-    const playerId = activePlayers[0] || state.currentPlayer || ''
-    sendMove({
-      type: 'RESUME_GAME',
-      playerId,
-      data: {},
-    })
-  }, [canResumeGame, activePlayers, state.currentPlayer, sendMove])
+    dispatch({ type: 'RESUME_GAME' })
+  }, [canResumeGame])
 
   const goToSetup = useCallback(() => {
-    // Send GO_TO_SETUP move
-    const playerId = activePlayers[0] || state.currentPlayer || ''
-    sendMove({
-      type: 'GO_TO_SETUP',
-      playerId,
-      data: {},
-    })
-  }, [activePlayers, state.currentPlayer, sendMove])
+    dispatch({ type: 'GO_TO_SETUP' })
+  }, [])
 
   const hoverCard = useCallback(
     (cardId: string | null) => {
-      // HOVER: Send hover state for networked presence
-      // Use current player as the one hovering
       const playerId = state.currentPlayer || activePlayers[0] || ''
-      if (!playerId) return // No active player to send hover for
+      if (!playerId) return
 
-      sendMove({
+      dispatch({
         type: 'HOVER_CARD',
         playerId,
-        data: { cardId },
+        cardId,
       })
     },
-    [state.currentPlayer, activePlayers, sendMove]
+    [state.currentPlayer, activePlayers]
   )
 
-  // NO MORE effectiveState merging! Just use session state directly with gameMode added
+  const exitSession = useCallback(() => {
+    router.push('/arcade')
+  }, [router])
+
   const effectiveState = { ...state, gameMode } as MemoryPairsState & { gameMode: GameMode }
 
   const contextValue: MemoryPairsContextValue = {
     state: effectiveState,
     dispatch: () => {
-      // No-op - replaced with sendMove
-      console.warn('dispatch() is deprecated in arcade mode, use action creators instead')
+      // No-op - local provider uses action creators instead
+      console.warn('dispatch() is not available in local mode, use action creators instead')
     },
     isGameActive,
     canFlipCard,
     currentGameStatistics,
     hasConfigChanged,
     canResumeGame,
-    canModifyPlayers, // Arcade sessions: use arcade redirect logic
+    canModifyPlayers,
     startGame,
     resumeGame,
     flipCard,

package.json

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