<template>
  <div>
    <h1>21点游戏</h1>
    <div class="game-board">
      <div class="player-section">
        <h2>玩家</h2>
        <p>得分: {{ playerScore }}</p>
        <div class="cards">
          <img v-for="card in playerCards" :key="card.id" :src="card.image" />
        </div>
        <button v-if="!gameOver" @click="playerHit">抽牌</button>
        <button v-if="!gameOver" @click="playerStand">结束回合</button>
      </div>
      <div class="dealer-section">
        <h2>庄家</h2>
        <p>得分: {{ dealerScore }}</p>
        <div class="cards">
          <div class="card-back" v-if="!gameOver">
            <div></div>
          </div>
          <img class="dealer-card" v-for="(card, index) in dealerCards" :key="card.id" :src="index === 0 && !dealerCardRevealed ? 'card-back.png' : card.image" />
        </div>
        <button v-if="!gameOver && !dealerCardRevealed" @click="revealDealerCard">翻开牌</button>
      </div>
    </div>
    <p v-if="gameResult">{{ gameResult }}</p>
    <button v-if="gameOver" @click="restart">重新开始</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deck: [],
      playerCards: [],
      dealerCards: [],
      playerScore: 0,
      dealerScore: 0,
      gameOver: false,
      gameResult: '',
      dealerCardRevealed: false
    }
  },
  created() {
    this.initializeDeck()
    this.dealCards()
  },
  methods: {
    initializeDeck() {
      const suits = ['hearts', 'diamonds', 'clubs', 'spades']
      const ranks = ['ace', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'jack', 'queen', 'king']

      for (let suit of suits) {
        for (let rank of ranks) {
          const name = rank === '10' ? 't' + suit.charAt(0) : rank.charAt(0) + suit.charAt(0)
          const image = `./cards/${name}.png`
          this.deck.push({ suit, rank, value: this.cardValue(rank), name, image })
        }
      }

      this.shuffleDeck()
    },
    shuffleDeck() {
      for (let i = this.deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i  + 1))
        const temp = this.deck[i]
        this.deck[i] = this.deck[j]
        this.deck[j] = temp
      }
    },
    cardValue(rank) {
      switch (rank) {
        case 'ace':
          return 11
        case 'jack':
        case 'queen':
        case 'king':
          return 10
        default:
          return parseInt(rank)
      }
    },
    dealCards() {
      this.playerCards.push(this.deck.pop())
      this.dealerCards.push(this.deck.pop())
      this.playerCards.push(this.deck.pop())
      this.dealerCards.push(this.deck.pop())

      this.calculateScores()
    },
    calculateScores() {
      let playerScore = 0
      let hasAce = false

      for (let card of this.playerCards) {
        playerScore += card.value
        if (card.rank === 'ace') {
          hasAce = true
        }
      }

      if (playerScore > 21 && hasAce) {
        playerScore -= 10
      }

      this.playerScore = playerScore

      let dealerScore = 0
      hasAce = false

      for (let card of this.dealerCards) {
        dealerScore += card.value
        if (card.rank === 'ace') {
          hasAce = true
        }
      }

      if (dealerScore > 21 && hasAce) {
        dealerScore -= 10
      }

      this.dealerScore = dealerScore

      if (this.playerScore === 21) {
        this.gameOver = true
        this.gameResult = '恭喜，你获得了21点！'
        return
      }

      if (this.dealerScore === 21) {
        this.gameOver = true
        this.gameResult = '很遗憾，庄家获得了21点。'
        return
      }

      if (this.playerScore > 21) {
        this.gameOver = true
        this.gameResult = '很遗憾，你输了。'
        return
      }

      if (this.dealerScore > 21) {
        this.gameOver = true
        this.gameResult = '恭喜，你赢了！'
        return
      }
    },
    playerHit() {
      this.playerCards.push(this.deck.pop())
      this.calculateScores()
    },
    playerStand() {
      this.dealerTurn()
    },
    dealerTurn() {
      this.dealerCardRevealed = true

      while (this.dealerScore < 17) {
        this.dealerCards.push(this.deck.pop())
        this.calculateScores()
      }

      if (this.dealerScore > this.playerScore && this.dealerScore <= 21) {
        this.gameOver = true
        this.gameResult = '很遗憾，你输了。'
      } else if (this.dealerScore < this.playerScore || this.dealerScore > 21) {
        this.gameOver = true
        this.gameResult = '恭喜，你赢了！'
      } else {
        this.gameOver = true
        this.gameResult = '平局。'
      }
    },
    revealDealerCard() {
      this.dealerCardRevealed = true
      this.calculateScores()
    },
    restart() {
      this.deck = []
      this.playerCards = []
      this.dealerCards = []
      this.playerScore = 0
      this.dealerScore = 0
      this.gameOver = false
      this.gameResult = ''
      this.dealerCardRevealed = false

      this.initializeDeck()
      this.dealCards()
    }
  }
}
</script>

<style>
.cards {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cards img {
  height: 170px;
  margin-right: 10px;
}
.dealer-card {
  margin-right: 10px;
}
.card-back {
  position: relative;
  width: 170px;
  height: 242px;
}
.card-back div {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 242px;
  background: url(./cards/card-back.png) no-repeat center center / contain;
}
</style>
