78 lines
1.9 KiB
HTML
78 lines
1.9 KiB
HTML
|
<script src="/socket.io/socket.io.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<canvas id="tracking"></canvas>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var socket = io();
|
||
|
|
|
||
|
|
socket.on('connect', function () {
|
||
|
|
console.log(socket.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;
|
||
|
|
|
||
|
|
};
|
||
|
|
socket.on('draw_cursor')
|
||
|
|
|
||
|
|
|
||
|
|
function mainLoop() {
|
||
|
|
socket.emit('cursor_pos', { pos: mouse.pos, id: socket.id });
|
||
|
|
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);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
setTimeout(mainLoop, 25);
|
||
|
|
|
||
|
|
}
|
||
|
|
//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;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.cursor {
|
||
|
|
position: absolute;
|
||
|
|
background: black;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
</style>
|