const player = io()
let myNumber = 0

player.on('alert', (message) => {
    alert(message)
})

player.on('onlineNumber', (number) => {
    onlineNumber.innerText = number
})

player.on('playersNumber', (number) => {
    playersNumber.innerText = number
})

player.on('join', (number) => {
    myNumber = number
    playerNumber.innerText = number
    buttonJoin.innerText = number == 0 ? '加入' : '退出'
    buttonJoin.style.color = number == 0 ? 'red' : 'black'
})

player.on('status', (status) => {
    const { players, cards, current } = status
    player1.innerText = makeCards(players[0] || 0)
    player2.innerText = makeCards(players[1] || 0)
    player3.innerText = makeCards(players[2] || 0)
    currentPlayerNumber.innerText = current + 1
    buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black'
    cardsDisplay.innerText = cards
})

function makeCards(n) {
    if (n == 0) return ''
    return '['.repeat(n) + ']'
}