xiaomaodiaoyu/public/client.js

const player = io()
let myNumber = 0
let autoPlayer = 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 = '🎴'.repeat(players[0] || 0)
    player2.innerText = '🎴'.repeat(players[1] || 0)
    player3.innerText = '🎴'.repeat(players[2] || 0)
    currentPlayerNumber.innerText = current + 1
    buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black'
    cardsDisplay.innerHTML = ''
    for (let cid of cards) {
        let card = document.createElement('card-t')
        card.setAttribute('cid', cid)
        card.setAttribute('backcolor', cid[1] == 1 ? 'black' : 'red')
        card.setAttribute('backtext', 'JOKER')
        cardsDisplay.appendChild(card)
    }
})

buttonAuto.addEventListener('click', () => {
    if (autoPlayer != 0) {
        clearInterval(autoPlayer)
        autoPlayer = 0
        buttonAuto.style.color = 'black'
    } else {
        autoPlayer = setInterval(() => player.emit('go'), 1000)
        buttonAuto.style.color = 'red'
    }
})