122 lines
No EOL
3.2 KiB
JavaScript
122 lines
No EOL
3.2 KiB
JavaScript
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)
|
|
});
|
|
}); |