All files / web/src/lib/arcade/matching-pairs-framework/components GenericGamePhase.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useMemo } from 'react'
import { useUserId } from '@/hooks/useUserId'
import { MemoryGrid } from '@/components/matching/MemoryGrid'
import { css } from '../../../../../styled-system/css'
import { FlipCard } from './FlipCard'
import type {
  BaseMatchingCard,
  BaseMatchingConfig,
  MatchingPairsContextValue,
  MatchingPairsVariant,
} from '../types'
import { useGameMode } from '@/contexts/GameModeContext'

export interface GenericGamePhaseProps<
  TCard extends BaseMatchingCard,
  TConfig extends BaseMatchingConfig,
> {
  ctx: MatchingPairsContextValue<TCard, TConfig>
  variant: MatchingPairsVariant<TCard, TConfig>
}

export function GenericGamePhase<
  TCard extends BaseMatchingCard,
  TConfig extends BaseMatchingConfig,
>({ ctx, variant }: GenericGamePhaseProps<TCard, TConfig>) {
  const { state, flipCard, hoverCard, gameMode } = ctx
  const { data: viewerId } = useUserId()
  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode()

  const config = state as unknown as TConfig
  const gridConfig = useMemo(() => variant.getGridConfig(config), [variant, config])

  // Build active players array for FlipCard
  const activePlayers = useMemo(
    () =>
      Array.from(activePlayerIds)
        .map((id) => playerMap.get(id))
        .filter((p): p is NonNullable<typeof p> => p !== undefined)
        .map((p) => ({ id: p.id, emoji: p.emoji })),
    [activePlayerIds, playerMap]
  )

  const CardFront = variant.CardFront
  const quickTip = variant.getQuickTip?.(config)

  return (
    <div
      className={css({
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
      })}
    >
      <div
        className={css({
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          minHeight: 0,
          overflow: 'hidden',
        })}
      >
        <MemoryGrid
          state={state}
          gridConfig={gridConfig}
          flipCard={flipCard}
          enableMultiplayerPresence={gameMode === 'multiplayer'}
          hoverCard={hoverCard}
          viewerId={viewerId}
          gameMode={gameMode}
          shouldDimCard={variant.shouldDimCard}
          renderCard={({ card, isFlipped, isMatched, onClick, disabled }) => {
            const backStyle = variant.getCardBackStyle(card, isMatched)

            // Determine player-specific matched card style
            let matchedCardStyle: { gradient: string } | null = null
            if (isMatched && card.matchedBy) {
              const playerIndex = activePlayers.findIndex((p) => p.id === card.matchedBy)
              if (playerIndex === 0) {
                matchedCardStyle = { gradient: 'linear-gradient(135deg, #74b9ff, #0984e3)' }
              } else if (playerIndex === 1) {
                matchedCardStyle = { gradient: 'linear-gradient(135deg, #fd79a8, #e84393)' }
              }
            }

            return (
              <FlipCard
                card={card}
                isFlipped={isFlipped}
                isMatched={isMatched}
                onClick={onClick}
                disabled={disabled}
                renderFront={() => <CardFront card={card} />}
                cardBackStyle={backStyle}
                matchedCardStyle={matchedCardStyle}
                activePlayers={activePlayers}
              />
            )
          }}
        />
      </div>

      {/* Quick Tip */}
      {state.moves === 0 && quickTip && (
        <div
          className={css({
            textAlign: 'center',
            marginTop: '12px',
            padding: '8px 16px',
            background: 'rgba(248, 250, 252, 0.7)',
            borderRadius: '8px',
            border: '1px solid rgba(226, 232, 240, 0.6)',
            display: { base: 'none', lg: 'block' },
            flexShrink: 0,
          })}
        >
          <p
            className={css({
              fontSize: '13px',
              color: 'gray.600',
              margin: 0,
              fontWeight: 'medium',
            })}
          >
            💡 {quickTip}
          </p>
        </div>
      )}
    </div>
  )
}