Name and stuff
This commit is contained in:
parent
f129cd63a6
commit
f3959aaca0
4 changed files with 153 additions and 79 deletions
35
index.js
35
index.js
|
|
@ -1,9 +1,13 @@
|
|||
var app = require('express')();
|
||||
var express = require('express');
|
||||
var app = express();
|
||||
var http = require('http').createServer(app);
|
||||
var io = require('socket.io')(http);
|
||||
|
||||
var path = require('path');
|
||||
|
||||
var buffer = {};
|
||||
var users = {};
|
||||
var publicpath = path.join(__dirname, '/views');
|
||||
app.use('/', express.static(publicpath));
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile(__dirname + '/views/index.html');
|
||||
|
|
@ -11,15 +15,17 @@ app.get('/', (req, res) => {
|
|||
|
||||
io.on('connection', (socket) => {
|
||||
console.log('Nutzer verbunden!');
|
||||
userConnected(socket.id);
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('Nutzer verbindung unterbrochen')
|
||||
console.log(socket.id, 'Nutzer verbindung unterbrochen');
|
||||
socket.broadcast.emit('cursor_remove', { id: socket.id });
|
||||
userDisconnected(socket.id);
|
||||
});
|
||||
|
||||
socket.on('cursor_pos', function (data) {
|
||||
if (buffer[data.id] == null) {
|
||||
buffer[data.id] = data.pos;
|
||||
console.log("first fill");
|
||||
|
||||
}
|
||||
|
||||
if (data.pos.x != buffer[data.id].x) {
|
||||
|
|
@ -27,7 +33,26 @@ io.on('connection', (socket) => {
|
|||
buffer[data.id] = data.pos;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('nickname', function (data) {
|
||||
socket.broadcast.emit('nickname_set', { name: data, id: socket.id });
|
||||
});
|
||||
});
|
||||
|
||||
function userConnected(id) {
|
||||
users[id] = {
|
||||
Name: "unnamed",
|
||||
Points: 0
|
||||
};
|
||||
console.log("Add " + id);
|
||||
|
||||
|
||||
};
|
||||
|
||||
function userDisconnected(id) {
|
||||
delete users[id];
|
||||
console.log("Remove " + id);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
93
views/assets/js/client.js
Normal file
93
views/assets/js/client.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
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);
|
||||
}
|
||||
|
||||
|
||||
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('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)
|
||||
});
|
||||
});
|
||||
24
views/assets/style/main.css
Normal file
24
views/assets/style/main.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.cursor {
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cursor h1 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-size: 1vw;
|
||||
color: gray;
|
||||
|
||||
}
|
||||
|
||||
.scoreboard{
|
||||
background: rgba(34,34,34,0.2);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
|
@ -1,78 +1,10 @@
|
|||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<script src="/assets/js/client.js"></script>
|
||||
<link rel="stylesheet" href="/assets/style/main.css">
|
||||
|
||||
<body>
|
||||
<input id="nickname">
|
||||
<button onclick="getNickname()">Nick me</button>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in a new issue