guandan.dev

import { motion } from 'framer-motion'

import { Card as Card_Type, Rank, get_rank_symbol, get_suit_symbol, is_red_suit, Suit_Joker, Rank_Red_Joker } from '../game/types'

import { Hand } from './Hand'

import { Table } from './Table'

import { Card_Back } from './Card'

interface Play_Log_Entry {

  seat: number

  cards: Card_Type[]

  combo_type: string

  is_pass: boolean

}

interface Game_Props {

  hand: Card_Type[]

  level: Rank

  selected_ids: Set<number>

  on_card_click: (id: number) => void

  on_play: () => void

  on_pass: () => void

  table_cards: Card_Type[]

  combo_type: string

  current_turn: number

  my_seat: number

  can_pass: boolean

  player_card_counts: number[]

  team_levels: [number, number]

  play_log: Play_Log_Entry[]

  players_map: Record<number, string>

  last_play_seat: number | null

}

export function Game({

  hand,

  level,

  selected_ids,

  on_card_click,

  on_play,

  on_pass,

  table_cards,

  combo_type,

  current_turn,

  my_seat,

  can_pass,

  player_card_counts,

  team_levels,

  play_log,

  players_map,

  last_play_seat,

}: Game_Props) {

  const is_my_turn = current_turn === my_seat

  const relative_positions = get_relative_positions(my_seat)

  return (

    <div style={styles.container}>

      <div style={styles.info_bar}>

        <div style={styles.level_badge}>

          Level: {get_rank_symbol(level)}

        </div>

        <div style={styles.team_scores}>

          <span style={{ color: '#2196f3' }}>Team 1: {get_rank_symbol(team_levels[0] as Rank)}</span>

          <span style={{ marginLeft: 16, color: '#e91e63' }}>Team 2: {get_rank_symbol(team_levels[1] as Rank)}</span>

        </div>

      </div>

      <div style={styles.main_layout}>

        <div style={styles.game_area}>

          <div style={styles.opponent_top}>

            <Opponent_Hand

              count={player_card_counts[relative_positions.top]}

              is_turn={current_turn === relative_positions.top}

              just_played={last_play_seat === relative_positions.top}

              seat={relative_positions.top}

              name={players_map[relative_positions.top]}

            />

          </div>

          <div style={styles.middle_row}>

            <div style={styles.opponent_side}>

              <Opponent_Hand

                count={player_card_counts[relative_positions.left]}

                is_turn={current_turn === relative_positions.left}

                just_played={last_play_seat === relative_positions.left}

                seat={relative_positions.left}

                vertical

                name={players_map[relative_positions.left]}

              />

            </div>

            <div style={styles.table_area}>

              <Table cards={table_cards} level={level} combo_type={combo_type} last_play_seat={last_play_seat} />

            </div>

            <div style={styles.opponent_side}>

            <Opponent_Hand

              count={player_card_counts[relative_positions.right]}

              is_turn={current_turn === relative_positions.right}

              just_played={last_play_seat === relative_positions.right}

              seat={relative_positions.right}

              vertical

              name={players_map[relative_positions.right]}

            />

          </div>

          </div>

          <div style={styles.my_area}>

          <Hand

            cards={hand}

            level={level}

            selected_ids={selected_ids}

            on_card_click={on_card_click}

          />

          <div style={styles.actions}>

            <motion.button

              whileHover={{ scale: 1.05 }}

              whileTap={{ scale: 0.95 }}

              onClick={on_play}

              disabled={!is_my_turn || selected_ids.size === 0 || hand.length === 0}

              style={{

                ...styles.action_button,

                backgroundColor: is_my_turn && selected_ids.size > 0 && hand.length > 0 ? '#28a745' : '#444',

              }}

            >

              Play

            </motion.button>

            <motion.button

              whileHover={{ scale: 1.05 }}

              whileTap={{ scale: 0.95 }}

              onClick={on_pass}

              disabled={!is_my_turn || !can_pass || hand.length === 0}

              style={{

                ...styles.action_button,

                backgroundColor: is_my_turn && can_pass && hand.length > 0 ? '#dc3545' : '#444',

              }}

            >

              Pass

            </motion.button>

          </div>

          {is_my_turn && hand.length > 0 && (

            <motion.div

              initial={{ opacity: 0 }}

              animate={{ opacity: 1 }}

              style={styles.turn_indicator}

            >

              Your turn!

            </motion.div>

          )}

          {hand.length === 0 && (

            <motion.div

              initial={{ opacity: 0 }}

              animate={{ opacity: 1 }}

              style={{ ...styles.turn_indicator, backgroundColor: '#28a745' }}

            >

              You finished!

            </motion.div>

          )}

          </div>

        </div>

        <div style={styles.play_log}>

          <div style={styles.play_log_title}>Play Log</div>

          {play_log.map((entry, i) => (

            <motion.div

              key={i}

              initial={{ opacity: 0, x: 20 }}

              animate={{ opacity: 1, x: 0 }}

              style={styles.play_log_entry}

            >

              <span style={{ color: entry.seat % 2 === 0 ? '#2196f3' : '#e91e63', fontWeight: 'bold' }}>

                {players_map[entry.seat] || `Seat ${entry.seat + 1}`}:

              </span>{' '}

              {entry.is_pass ? (

                <span style={{ color: '#888' }}>Pass</span>

              ) : (

                <span>

                  {entry.cards.map((c, j) => (

                    <span key={j} style={{ color: c.Suit === Suit_Joker ? (c.Rank === Rank_Red_Joker ? '#dc3545' : '#000') : is_red_suit(c.Suit) ? '#dc3545' : '#000' }}>

                      {get_rank_symbol(c.Rank)}{get_suit_symbol(c.Suit)}{j < entry.cards.length - 1 ? ' ' : ''}

                    </span>

                  ))}

                  {entry.combo_type && <span style={{ color: '#888', marginLeft: 4 }}>({entry.combo_type})</span>}

                </span>

              )}

            </motion.div>

          ))}

        </div>

      </div>

    </div>

  )

}

interface Opponent_Hand_Props {

  count: number

  is_turn: boolean

  just_played?: boolean

  seat: number

  vertical?: boolean

  name?: string

}

function Opponent_Hand({ count, is_turn, just_played, seat, vertical, name }: Opponent_Hand_Props) {

  const display_count = Math.min(count, 10)

  const overlap = vertical ? 15 : 20

  const get_highlight_style = () => {

    if (just_played) return { backgroundColor: 'rgba(76, 175, 80, 0.3)', border: '2px solid #4caf50' }

    if (is_turn) return { backgroundColor: 'rgba(255,193,7,0.2)', border: '2px solid #ffc107' }

    return { backgroundColor: 'transparent', border: '2px solid transparent' }

  }

  return (

    <div

      style={{

        display: 'flex',

        flexDirection: vertical ? 'column' : 'row',

        alignItems: 'center',

        gap: 8,

        padding: 8,

        borderRadius: 8,

        transition: 'all 0.2s ease',

        ...get_highlight_style(),

      }}

    >

      <div

        style={{

          display: 'flex',

          flexDirection: vertical ? 'column' : 'row',

          position: 'relative',

          width: vertical ? 50 : 50 + (display_count - 1) * overlap,

          height: vertical ? 70 + (display_count - 1) * overlap : 70,

        }}

      >

        {Array.from({ length: display_count }).map((_, i) => (

          <div

            key={i}

            style={{

              position: 'absolute',

              left: vertical ? 0 : i * overlap,

              top: vertical ? i * overlap : 0,

              transform: 'scale(0.7)',

              transformOrigin: 'top left',

            }}

          >

            <Card_Back />

          </div>

        ))}

      </div>

      <div style={{ color: '#fff', fontSize: 12 }}>

        {name || `Seat ${seat + 1}`}: {count}

      </div>

    </div>

  )

}

function get_relative_positions(my_seat: number) {

  return {

    top: (my_seat + 2) % 4,

    left: (my_seat + 1) % 4,

    right: (my_seat + 3) % 4,

  }

}

const styles: Record<string, React.CSSProperties> = {

  container: {

    display: 'flex',

    flexDirection: 'column',

    height: '100vh',

    backgroundColor: '#0f3460',

  },

  info_bar: {

    display: 'flex',

    justifyContent: 'space-between',

    alignItems: 'center',

    padding: '12px 24px',

    backgroundColor: '#16213e',

  },

  level_badge: {

    padding: '8px 16px',

    backgroundColor: '#ffc107',

    color: '#000',

    borderRadius: 8,

    fontWeight: 'bold',

  },

  team_scores: {

    color: '#fff',

    fontSize: 14,

  },

  game_area: {

    flex: 1,

    display: 'flex',

    flexDirection: 'column',

    padding: 20,

  },

  opponent_top: {

    display: 'flex',

    justifyContent: 'center',

    marginBottom: 20,

  },

  middle_row: {

    flex: 1,

    display: 'flex',

    alignItems: 'center',

  },

  opponent_side: {

    width: 120,

    display: 'flex',

    justifyContent: 'center',

  },

  table_area: {

    flex: 1,

    display: 'flex',

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: 'rgba(0,0,0,0.2)',

    borderRadius: 16,

    margin: '0 20px',

  },

  my_area: {

    display: 'flex',

    flexDirection: 'column',

    alignItems: 'center',

    paddingTop: 20,

    borderTop: '2px solid #333',

  },

  actions: {

    display: 'flex',

    gap: 16,

    marginTop: 16,

  },

  action_button: {

    padding: '12px 32px',

    fontSize: 16,

    border: 'none',

    borderRadius: 8,

    color: '#fff',

    cursor: 'pointer',

  },

  turn_indicator: {

    marginTop: 12,

    padding: '8px 16px',

    backgroundColor: '#ffc107',

    color: '#000',

    borderRadius: 8,

    fontWeight: 'bold',

  },

  main_layout: {

    display: 'flex',

    flex: 1,

    overflow: 'hidden',

  },

  play_log: {

    width: 220,

    backgroundColor: '#16213e',

    padding: 12,

    overflowY: 'auto',

    borderLeft: '2px solid #333',

  },

  play_log_title: {

    color: '#fff',

    fontSize: 14,

    fontWeight: 'bold',

    marginBottom: 12,

    paddingBottom: 8,

    borderBottom: '1px solid #333',

  },

  play_log_entry: {

    fontSize: 12,

    color: '#fff',

    padding: '6px 0',

    borderBottom: '1px solid rgba(255,255,255,0.1)',

  },

}