chore(release): 2.16.2 [skip ci]

## [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](c26138ffb5))

CHANGELOG.md

@@ -1,3 +1,86 @@
+## [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)
+
+
+### Bug Fixes
+
+* correct avatar positioning to prevent fly-in animation ([573d0df](https://github.com/antialias/soroban-abacus-flashcards/commit/573d0df20dcdac41021c46feb423dbf3782728f6))
+
+## [2.14.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.0...v2.14.1) (2025-10-09)
+
+
+### Bug Fixes
+
+* prevent avatar fly-in and hide local player's own hover ([7f65a67](https://github.com/antialias/soroban-abacus-flashcards/commit/7f65a67cef3d7f0ebce1bd7417972a6138acfc46))
+
+## [2.14.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.13.0...v2.14.0) (2025-10-09)
+
+
+### Features
+
+* improve hover avatars with smooth animation and 3D elevation ([71b11f4](https://github.com/antialias/soroban-abacus-flashcards/commit/71b11f4ef08a5f9c3f1c1aaabca21ef023d5c0ce))
+
+## [2.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.12.3...v2.13.0) (2025-10-09)
+
+
+### Features
+
+* implement networked hover presence for multiplayer gameplay ([62f3730](https://github.com/antialias/soroban-abacus-flashcards/commit/62f3730542334a0580f5dad1c73adc333614ee58))
+
+
+### Code Refactoring
+
+* move canModifyPlayers logic into provider layer ([db9f909](https://github.com/antialias/soroban-abacus-flashcards/commit/db9f9096b446b078e1b4dfe970723bef54a6f4ae))
+* properly separate LocalMemoryPairsProvider and RoomMemoryPairsProvider ([98822ec](https://github.com/antialias/soroban-abacus-flashcards/commit/98822ecda52bf004d9950e3f4c92c834fd820e49))
+
+## [2.12.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.12.2...v2.12.3) (2025-10-09)
+
+
+### Bug Fixes
+
+* always show game control buttons in room-based sessions ([14ba422](https://github.com/antialias/soroban-abacus-flashcards/commit/14ba422919abd648e2a134ce167a5e6fd9f84e73))
+
+## [2.12.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.12.1...v2.12.2) (2025-10-09)
+
+
+### Bug Fixes
+
+* use RoomMemoryPairsProvider in room page ([c279731](https://github.com/antialias/soroban-abacus-flashcards/commit/c27973191f0144604e17a8a14adf0a88df476e27))
+
 ## [2.12.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.12.0...v2.12.1) (2025-10-09)
 
 

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

@@ -1,7 +1,9 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+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 { useMemoryPairs } from '../context/MemoryPairsContext'
 import { getGridConfiguration } from '../utils/cardGeneration'
 import { GameCard } from './GameCard'
@@ -80,8 +82,109 @@ function useGridDimensions(gridConfig: any, totalCards: number) {
   return gridDimensions
 }
 
+// Animated hover avatar component
+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 center of the card for avatar positioning
+      const avatarCenterX = rect.left + rect.width / 2
+      const avatarCenterY = rect.top + rect.height / 2
+
+      setPosition({
+        x: avatarCenterX,
+        y: avatarCenterY,
+      })
+    }
+  }, [cardElement])
+
+  // Smooth spring animation for position changes
+  const springProps = useSpring({
+    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
+
+  return (
+    <animated.div
+      style={{
+        position: 'fixed',
+        // Don't use translate, just position directly at the calculated point
+        left: springProps.x.to((x) => `${x}px`),
+        top: springProps.y.to((y) => `${y}px`),
+        opacity: springProps.opacity,
+        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: '48px',
+        // 3D elevation effect
+        boxShadow:
+          '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 12px rgba(102, 126, 234, 0.9))',
+      }}
+      className={css({
+        animation: 'hoverFloat 2s ease-in-out infinite',
+      })}
+      title={`${playerInfo.name} is considering this card`}
+    >
+      {playerInfo.emoji}
+    </animated.div>
+  )
+}
+
 export function MemoryGrid() {
-  const { state, flipCard } = useMemoryPairs()
+  const { state, flipCard, hoverCard, gameMode } = useMemoryPairs()
+  const { players: playerMap } = useGameMode()
+
+  // Track card element refs for positioning hover avatars
+  const cardRefs = useRef<Map<string, HTMLElement>>(new Map())
+
+  // Check if it's the local player's turn
+  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])
 
   // Hooks must be called before early return
   const gridConfig = useMemo(() => getGridConfiguration(state.difficulty), [state.difficulty])
@@ -95,6 +198,36 @@ export function MemoryGrid() {
     flipCard(cardId)
   }
 
+  // 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)
+    return player
+      ? {
+          emoji: player.emoji,
+          name: player.name,
+          color: player.color,
+        }
+      : null
+  }
+
+  // Set card ref callback
+  const setCardRef = (cardId: string) => (element: HTMLDivElement | null) => {
+    if (element) {
+      cardRefs.current.set(cardId, element)
+    } else {
+      cardRefs.current.delete(cardId)
+    }
+  }
+
   return (
     <div
       className={css({
@@ -162,6 +295,7 @@ export function MemoryGrid() {
           return (
             <div
               key={card.id}
+              ref={setCardRef(card.id)}
               className={css({
                 aspectRatio: '3/4',
                 // Fully responsive card sizing - no fixed pixel sizes
@@ -172,7 +306,20 @@ export function MemoryGrid() {
                 opacity: isDimmed ? 0.3 : 1,
                 transition: 'opacity 0.3s ease',
                 filter: isDimmed ? 'grayscale(0.7)' : 'none',
+                position: 'relative',
               })}
+              onMouseEnter={() => {
+                // Only send hover if it's your turn and card is not matched
+                if (hoverCard && !isMatched && isMyTurn) {
+                  hoverCard(card.id)
+                }
+              }}
+              onMouseLeave={() => {
+                // Clear hover state when mouse leaves card
+                if (hoverCard && !isMatched && isMyTurn) {
+                  hoverCard(null)
+                }
+              }}
             >
               <GameCard
                 card={card}
@@ -233,23 +380,62 @@ 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(([playerId]) => {
+            // Don't show your own hover avatar (only show remote players)
+            const player = playerMap.get(playerId)
+            return player?.isLocal !== true
+          })
+          .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) return null
+
+            // Render avatar even if no cardElement (it will handle hiding itself)
+            return (
+              <HoverAvatar
+                key={playerId} // Key by playerId keeps component alive across card changes!
+                playerId={playerId}
+                playerInfo={playerInfo}
+                cardElement={cardElement}
+                isPlayersTurn={isPlayersTurn}
+              />
+            )
+          })}
     </div>
   )
 }
 
-// Add shake animation for mismatch feedback
-const shakeAnimation = `
+// Add animations for mismatch feedback and hover avatars
+const gridAnimations = `
 @keyframes shake {
   0%, 100% { transform: translate(-50%, -50%) translateX(0); }
   25% { transform: translate(-50%, -50%) translateX(-5px); }
   75% { transform: translate(-50%, -50%) translateX(5px); }
 }
+
+@keyframes hoverFloat {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
 `
 
 // Inject animation styles
 if (typeof document !== 'undefined' && !document.getElementById('memory-grid-animations')) {
   const style = document.createElement('style')
   style.id = 'memory-grid-animations'
-  style.textContent = shakeAnimation
+  style.textContent = gridAnimations
   document.head.appendChild(style)
 }

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

@@ -3,7 +3,6 @@
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef } from 'react'
 import { PageWithNav } from '@/components/PageWithNav'
-import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
 import { css } from '../../../../../styled-system/css'
 import { StandardGameLayout } from '../../../../components/StandardGameLayout'
 import { useFullscreen } from '../../../../contexts/FullscreenContext'
@@ -14,9 +13,8 @@ import { SetupPhase } from './SetupPhase'
 
 export function MemoryPairsGame() {
   const router = useRouter()
-  const { state, exitSession, resetGame } = useMemoryPairs()
+  const { state, exitSession, resetGame, goToSetup, canModifyPlayers } = useMemoryPairs()
   const { setFullscreenElement } = useFullscreen()
-  const { canModifyPlayers } = useArcadeRedirect({ currentGame: 'matching' })
   const gameRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -37,11 +35,14 @@ export function MemoryPairsGame() {
         exitSession()
         router.push('/arcade')
       }}
-      onSetup={() => {
-        // Exit current session and return to arcade (which will redirect to setup)
-        exitSession()
-        router.push('/arcade/matching')
-      }}
+      onSetup={
+        goToSetup
+          ? () => {
+              // Transition to setup phase (will pause game if active)
+              goToSetup()
+            }
+          : undefined
+      }
       onNewGame={() => {
         resetGame()
       }}

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

@@ -1,15 +1,16 @@
 'use client'
 
-import { type ReactNode, useCallback, useEffect, useMemo } from 'react'
-import { useArcadeSession } from '@/hooks/useArcadeSession'
+import { type ReactNode, useCallback, useEffect, useMemo, useReducer } from 'react'
+import { useRouter } from 'next/navigation'
+import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
 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: [],
@@ -18,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,
@@ -34,36 +35,43 @@ const initialState: MemoryPairsState = {
   isProcessingMove: false,
   showMismatchFeedback: false,
   lastMatchedPair: null,
-  // PAUSE/RESUME: Initialize paused game fields
   originalConfig: undefined,
   pausedGamePhase: undefined,
   pausedGameState: undefined,
+  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(),
@@ -71,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,
@@ -82,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]
@@ -91,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: [],
@@ -108,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
           ? {
@@ -125,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: [],
@@ -152,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 }
           : {}),
@@ -169,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 {
@@ -187,126 +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': {
+      return {
+        ...state,
+        playerHovers: {
+          ...state.playerHovers,
+          [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()
 
-  // Get active player IDs directly as strings (UUIDs)
-  const activePlayers = Array.from(activePlayerIds)
+  // 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' })
+
+  // 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(
@@ -324,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 (
@@ -338,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)
@@ -362,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)
@@ -426,97 +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 - synchronized across all room members
-    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) => {
+      const playerId = state.currentPlayer || activePlayers[0] || ''
+      if (!playerId) return
+
+      dispatch({
+        type: 'HOVER_CARD',
+        playerId,
+        cardId,
+      })
+    },
+    [state.currentPlayer, activePlayers]
+  )
+
+  const exitSession = useCallback(() => {
+    router.push('/arcade')
+  }, [router])
 
-  // NO MORE effectiveState merging! Just use session state directly with gameMode added
   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,
     startGame,
     resumeGame,
     flipCard,
@@ -525,6 +550,7 @@ export function LocalMemoryPairsProvider({ children }: { children: ReactNode })
     setGameType,
     setDifficulty,
     setTurnTimer,
+    hoverCard,
     exitSession,
     gameMode,
     activePlayers,

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, useCallback, useEffect, useMemo } from 'react'
+import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
 import { useArcadeSession } from '@/hooks/useArcadeSession'
 import { useRoomData } from '@/hooks/useRoomData'
 import { useViewerId } from '@/hooks/useViewerId'
@@ -213,6 +214,8 @@ function applyMoveOptimistically(state: MemoryPairsState, move: GameMove): Memor
 }
 
 // Provider component for ROOM-BASED play (with network sync)
+// NOTE: This provider should ONLY be used for room-based multiplayer games.
+// For arcade sessions without rooms, use LocalMemoryPairsProvider instead.
 export function RoomMemoryPairsProvider({ children }: { children: ReactNode }) {
   const { data: viewerId } = useViewerId()
   const { roomData } = useRoomData() // Fetch room data for room-based play
@@ -557,6 +560,7 @@ export function RoomMemoryPairsProvider({ children }: { children: ReactNode }) {
     currentGameStatistics,
     hasConfigChanged,
     canResumeGame,
+    canModifyPlayers: false, // Room-based games: always show buttons (false = show buttons)
     startGame,
     resumeGame,
     flipCard,

apps/web/src/app/arcade/matching/context/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Central export point for arcade matching game context
+ * Re-exports the hook from the appropriate provider
+ */
+
+// Export the hook (works with both local and room providers)
+export { useMemoryPairs } from './MemoryPairsContext'
+
+// Export the room provider (networked multiplayer)
+export { RoomMemoryPairsProvider } from './RoomMemoryPairsProvider'
+
+// Export types
+export type {
+  GameCard,
+  GameMode,
+  GamePhase,
+  GameType,
+  MemoryPairsState,
+  MemoryPairsContextValue,
+} from './types'

apps/web/src/app/arcade/matching/context/types.ts

@@ -120,6 +120,7 @@ export interface MemoryPairsContextValue {
   currentGameStatistics: GameStatistics
   gameMode: GameMode // Derived from global context
   activePlayers: Player[] // Active player IDs from arena
+  canModifyPlayers: boolean // Whether players can be added/removed (controls button visibility)
 
   // PAUSE/RESUME: Computed pause/resume values
   hasConfigChanged?: boolean

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

@@ -1,13 +1,13 @@
 import { ArcadeGuardedPage } from '@/components/ArcadeGuardedPage'
 import { MemoryPairsGame } from './components/MemoryPairsGame'
-import { RoomMemoryPairsProvider } from './context/RoomMemoryPairsProvider'
+import { LocalMemoryPairsProvider } from './context/LocalMemoryPairsProvider'
 
 export default function MatchingPage() {
   return (
     <ArcadeGuardedPage>
-      <RoomMemoryPairsProvider>
+      <LocalMemoryPairsProvider>
         <MemoryPairsGame />
-      </RoomMemoryPairsProvider>
+      </LocalMemoryPairsProvider>
     </ArcadeGuardedPage>
   )
 }

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

@@ -2,7 +2,7 @@
 
 import { useRoomData } from '@/hooks/useRoomData'
 import { MemoryPairsGame } from '../matching/components/MemoryPairsGame'
-import { ArcadeMemoryPairsProvider } from '../matching/context/ArcadeMemoryPairsContext'
+import { RoomMemoryPairsProvider } from '../matching/context/RoomMemoryPairsProvider'
 
 /**
  * /arcade/room - Renders the game for the user's current room
@@ -68,9 +68,9 @@ export default function RoomPage() {
   switch (roomData.gameName) {
     case 'matching':
       return (
-        <ArcadeMemoryPairsProvider>
+        <RoomMemoryPairsProvider>
           <MemoryPairsGame />
-        </ArcadeMemoryPairsProvider>
+        </RoomMemoryPairsProvider>
       )
 
     // TODO: Add other games (complement-race, memory-quiz, etc.)

package.json

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