/**
 * Sense HAT 客户端
 */

const client = io.connect('ws://pi', { path: '/sensehat/socket.io' })
let current_color = [255, 255, 255]

client.on('action', ({ action, x, y, color, pixels }) => {
    let leds = document.querySelectorAll('.led')
    switch (action) {
        case 'clear':
            color = color || [0, 0, 0]
            leds.forEach((led, i) => {
                led.style.backgroundColor = `rgb(${String(color)})`
            })
            break
        case 'setPixel':
            leds[y * 8 + x].style.backgroundColor = `rgb(${String(color)})`
            break
        case 'setPixels':
            leds.forEach((led, i) => {
                led.style.backgroundColor = `rgb(${String(pixels[i])})`
            })
            break
        default:
            break
    }
})

document.querySelectorAll('.led').forEach(led => {
    led.addEventListener('click', (event) => {
        const { x, y } = event.target.dataset
        const color = current_color
        client.emit('action', { action: 'setPixel', x, y, color })
    })
})