var socket = io();

socket.on('connect', function () {
    console.log(socket.id);

});

function getNickname() {
    var nickname = document.getElementById('nickname').value;
    console.log(nickname);
    socket.emit('nickname', nickname);
}
function test() {
    socket.emit('test');
    console.log('test');
}

function hit() {
    console.log(event.target.id);
    socket.emit('remove_target', event.target.id);
    var el = document.getElementById(event.target.id);
    el.remove();
    console.log("removeing", event.target.id);
}


document.addEventListener("DOMContentLoaded", function () {
    var mouse = {
        click: false,
        move: false,
        pos: { x: 0, y: 0 },
    };
    var canvas = document.getElementById('tracking');
    var width = window.innerWidth;
    var height = window.innerHeight;
    console.log("gg", height, width);

    //Canvas Size
    canvas.width = width;
    canvas.height = height;

    canvas.onmousemove = function (e) {
        mouse.pos.x = e.clientX / width;
        mouse.pos.y = e.clientY / height;

    };

    function mainLoop() {
        socket.emit('cursor_pos', { pos: mouse.pos, id: socket.id });

        setTimeout(mainLoop, 25);

    }

    socket.on('create_target', function (data) {
        var elementID = 'target-' + data.id;
        console.log('Creating ' + elementID);
        var target = document.createElement('div');
        target.id = elementID;
        target.className = 'target';
        target.onclick = hit;
        target.style.left = data.pos.x;
        target.style.top = data.pos.y;
        document.body.appendChild(target);
    });

    socket.on('remove_target', function (data) {
        var el = document.getElementById(data);
        el.remove();
        console.log("removeing", data)
    });

    socket.on('cursor_draw', function (data) {
        var mouse_el = CursorElement(data.id);
        mouse_el.style.left = (data.pos.x * width);
        mouse_el.style.top = (data.pos.y * height);

    });

    socket.on('nickname_set', function (data) {
        console.log(data.name, data.id);
        var elementId = 'cursor-' + data.id;
        var el_nick = document.getElementById(elementId);
        el_nick.innerHTML = "<h1>" + data.name + "</h1>";
    });

    socket.on('addUser_scoreboard', function (data) {
        var tableelement = document.getElementById('scoreboard');
        addRow(tableelement);
    });

    function addRow(tableEl) {
        let newRow = tableEl.insertRow(-1);
        let newCell = newRow.insertCell(0);
        let newText = document.createTextNode('neu');

        newCell.appendChild(newText);

    }


    //CursorElement("test");
    mainLoop();
    function CursorElement(id) {
        var elementId = 'cursor-' + id;
        var element = document.getElementById(elementId);
        if (element == null) {
            element = document.createElement('div');
            element.id = elementId;
            element.className = 'cursor';
            document.body.appendChild(element);
        }
        return element;
    }

    socket.on('cursor_remove', function (data) {
        var elementId = 'cursor-' + data.id;
        var el = document.getElementById(elementId);
        el.remove();
        console.log("removeing", data.id)
    });
});