guandan.dev

import { Card as Card_Type, Rank } from '../game/types'

import { Card } from './Card'

import { use_is_mobile } from '../hooks/use_is_mobile'

interface Table_Props {

  cards: Card_Type[]

  level: Rank

  combo_type: string

  last_play_seat?: number | null

}

export function Table({ cards, level, combo_type, last_play_seat }: Table_Props) {

  const is_mobile = use_is_mobile()

  const card_width = is_mobile ? 56 : 70

  const overlap = is_mobile ? 32 : 40

  const show_highlight = last_play_seat !== null && last_play_seat !== undefined && cards.length > 0

  return (

    <div

      style={{

        display: 'flex',

        flexDirection: 'column',

        alignItems: 'center',

        justifyContent: 'center',

        minHeight: is_mobile ? 100 : 180,

        padding: is_mobile ? 8 : 20,

        borderRadius: 12,

        transition: 'background-color 0.2s ease, box-shadow 0.2s ease',

        backgroundColor: show_highlight ? 'rgba(76, 175, 80, 0.15)' : 'transparent',

        boxShadow: show_highlight ? '0 0 20px rgba(76, 175, 80, 0.4)' : 'none',

      }}

    >

      <div

        style={{

          display: 'flex',

          position: 'relative',

          width: cards.length > 0 ? card_width + (cards.length - 1) * overlap : 100,

          height: is_mobile ? 80 : 100,

          justifyContent: 'center',

        }}

      >

        {cards.length > 0 ? (

          cards.map((card, index) => (

            <div

              key={`table-${card.Id}`}

              style={{

                position: 'absolute',

                left: index * overlap,

                zIndex: index,

              }}

            >

              <Card

                card={card}

                level={level}

                selected={false}

                on_click={() => {}}

                size={is_mobile ? 'small' : 'normal'}

              />

            </div>

          ))

        ) : (

          <div

            style={{

              display: 'flex',

              alignItems: 'center',

              justifyContent: 'center',

              color: '#666',

              fontSize: is_mobile ? 12 : 14,

              opacity: 0.5,

            }}

          >

            No cards played

          </div>

        )}

      </div>

      {combo_type && (

        <div

          style={{

            marginTop: is_mobile ? 6 : 12,

            padding: is_mobile ? '3px 8px' : '4px 12px',

            backgroundColor: '#333',

            color: '#fff',

            borderRadius: 4,

            fontSize: is_mobile ? 10 : 12,

            textTransform: 'uppercase',

          }}

        >

          {combo_type}

        </div>

      )}

    </div>

  )

}