const player = io()
let my_number = 0
let auto_play = false

buttonAuto.addEventListener('click', () => {
    auto_play = !auto_play
    if (auto_play) player.emit('go')
    buttonAuto.style.color = auto_play ? 'red' : 'black'
})

player.on('online', (number) => (online.innerText = number))
player.on('players', (number) => (players.innerText = number))

player.on('alert', (message) => {
    const alert = document.createElement('li')
    alert.innerText = message
    messages.appendChild(alert)
    while (messages.childElementCount > 5) messages.childNodes[0].remove()
})

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

player.on('status', (status) => {
    const { players, cards, current } = status
    // 更新玩家剩余牌数的显示
    player1.innerText = '🎴'.repeat(players[0] || 0)
    player2.innerText = '🎴'.repeat(players[1] || 0)
    player3.innerText = '🎴'.repeat(players[2] || 0)
    // 更新桌面上牌的显示
    table.innerHTML = ''
    for (let cid of cards) {
        let card = document.createElement('card-t')
        card.setAttribute('cid', cid)
        card.setAttribute('backtext', 'JOKER')
        card.setAttribute('backcolor', cid[1] == 1 ? 'black' : 'red')
        table.appendChild(card)
    }
    // 依据当前玩家更新相关显示
    currentPlayerNumber.innerText = current
    if (my_number > 0 && my_number == current) {
        if (auto_play) player.emit('go')
        else buttonGo.style.color = 'red'
    } else {
        buttonGo.style.color = 'black'
    }
})