const player = io()

document.body.addEventListener('keyup', (event) => {
    const shape = { 68: 'rock', 70: 'paper', 83: 'scissors' }[event.keyCode]
    if (shape) player.emit('shape', shape)
})

function rename() {
    const name = prompt('请输入您的名字')
    if (name) player.emit('rename', name)
}

player.on('status', (status) => {
    const player1_name = document.querySelector('#player1 .name')
    const player2_name = document.querySelector('#player2 .name')
    player1_name.innerText = status.player1.name
    player2_name.innerText = status.player2.name
    if (status.player1.id == player.id || status.player2.id == player.id) {
        const isPlayer1 = status.player1.id == player.id
        player1_name.style.color = isPlayer1 ? 'blue' : 'red'
        player1_name.style.cursor = isPlayer1 ? 'pointer' : ''
        player1_name.onclick = isPlayer1 ? rename : null
        player1_name.title = isPlayer1 ? '点击可以改名' : ''
        player2_name.style.color = isPlayer1 ? 'red' : 'blue'
        player2_name.style.cursor = isPlayer1 ? '' : 'pointer'
        player2_name.onclick = isPlayer1 ? null : rename
        player2_name.title = isPlayer1 ? '' : '点击可以改名'
    }
    document.querySelector('#player1 .score').innerText = status.player1.score
    document.querySelector('#player2 .score').innerText = status.player2.score
    document.querySelector('#player1 .shape').style.backgroundImage = status.player1.shape ? `url(${status.player1.shape}.png)` : ''
    document.querySelector('#player2 .shape').style.backgroundImage = status.player2.shape ? `url(${status.player2.shape}.png)` : ''
    document.querySelector('#player1 .shape').style.filter = status.player1.result == 'defeated' ? 'grayscale(75%)' : ''
    document.querySelector('#player2 .shape').style.filter = status.player2.result == 'defeated' ? 'grayscale(75%)' : ''
    document.querySelector('audio').play()
})