const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const ws = new WebSocket('ws://127.0.0.1:12345');
let playerId;
let players = {};
let blackout = false;

const keysPressed = {};
let speedX = 0;
let speedY = 0;
let maxSpeed = 5;
let acceleration = 0.1;
let deceleration = 0.5;

let lastSentTime = 0;
const sendInterval = 50; //ping

ws.onopen = () => {
    console.log('Подключение установлено');
};

ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('message:', data);

    if (data.type === 'init') {
        playerId = data.id;
        players = data.players;
        Object.keys(players).forEach(id => {
            players[id].lastX = players[id].x;
            players[id].lastY = players[id].y;
            players[id].renderX = players[id].x;
            players[id].renderY = players[id].y;
        });
        drawPlayers();
    } else if (data.type === 'update') {
        if (!players[data.id]) {
            players[data.id] = { x: data.x, y: data.y, lastX: data.x, lastY: data.y, renderX: data.x, renderY: data.y };
        } else {
            players[data.id].lastX = players[data.id].x;
            players[data.id].lastY = players[data.id].y;
            players[data.id].x = data.x;
            players[data.id].y = data.y;
        }
        drawPlayers();
    } else if (data.type === 'remove') {
        delete players[data.id];
        drawPlayers();
    } else if (data.type === 'blackout') {
        blackout = true;
        drawPlayers();
    }
};

//RENDER

function drawPlayers() {
    console.log('Рисование игроков', players);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (const id in players) {
        if (players.hasOwnProperty(id)) {
            const player = players[id];

            player.renderX += (player.x - player.renderX) * 0.2;
            player.renderY += (player.y - player.renderY) * 0.2;

            console.log(`Рисование игрока ${id} на (${player.renderX}, ${player.renderY})`);
            ctx.beginPath();
            ctx.arc(player.renderX, player.renderY, 10, 0, 2 * Math.PI);
            ctx.fillStyle = blackout ? 'black' : (id === playerId ? 'blue' : 'red');
            ctx.fill();
        }
    }
}

//CONTROL

document.addEventListener('keydown', (event) => {
    keysPressed[event.code] = true;

    if (event.code === 'KeyB') {
        console.log('blackout');
        ws.send(JSON.stringify({ type: 'blackout' }));
    }
});

document.addEventListener('keyup', (event) => {
    delete keysPressed[event.code];
});

function handleMovement() {
    const keyMap = {
        'KeyW': { dx: 0, dy: -1 },
        'KeyA': { dx: -1, dy: 0 },
        'KeyS': { dx: 0, dy: 1 },
        'KeyD': { dx: 1, dy: 0 }
    };

    let accelerationX = 0;
    let accelerationY = 0;

    for (const key in keysPressed) {
        if (keyMap[key]) {
            accelerationX += keyMap[key].dx;
            accelerationY += keyMap[key].dy;
        }
    }

    speedX += accelerationX * acceleration;
    speedY += accelerationY * acceleration;

    speedX = Math.min(Math.max(speedX, -maxSpeed), maxSpeed);
    speedY = Math.min(Math.max(speedY, -maxSpeed), maxSpeed);

    const currentTime = Date.now();
    if (currentTime - lastSentTime > sendInterval) {
        if (speedX !== 0 || speedY !== 0) {
            console.log(`move: ${JSON.stringify({ type: 'move', dx: speedX, dy: speedY })}`);
            ws.send(JSON.stringify({ type: 'move', dx: speedX, dy: speedY }));
            lastSentTime = currentTime;
        }
    }

    if (accelerationX === 0) {
        speedX *= (1 - deceleration);
    }
    if (accelerationY === 0) {
        speedY *= (1 - deceleration);
    }
}

function update() {
    handleMovement();
    drawPlayers();
    requestAnimationFrame(update);
}

update();


window.addEventListener('blur', () => {
    console.log('no focus');
    Object.keys(keysPressed).forEach(key => {
        delete keysPressed[key];
    });
});

window.addEventListener('focus', () => {
    console.log('focus');
    drawPlayers();
});

window.addEventListener('beforeunload', () => {
    ws.close();
});