add stuff
This commit is contained in:
parent
f3959aaca0
commit
a46bda2669
4 changed files with 77 additions and 4 deletions
35
index.js
35
index.js
|
|
@ -4,8 +4,6 @@ var http = require('http').createServer(app);
|
||||||
var io = require('socket.io')(http);
|
var io = require('socket.io')(http);
|
||||||
var path = require('path');
|
var path = require('path');
|
||||||
|
|
||||||
var buffer = {};
|
|
||||||
var users = {};
|
|
||||||
var publicpath = path.join(__dirname, '/views');
|
var publicpath = path.join(__dirname, '/views');
|
||||||
app.use('/', express.static(publicpath));
|
app.use('/', express.static(publicpath));
|
||||||
|
|
||||||
|
|
@ -13,10 +11,15 @@ app.get('/', (req, res) => {
|
||||||
res.sendFile(__dirname + '/views/index.html');
|
res.sendFile(__dirname + '/views/index.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var buffer = {};
|
||||||
|
var users = {};
|
||||||
|
var targetcount = 0;
|
||||||
|
|
||||||
io.on('connection', (socket) => {
|
io.on('connection', (socket) => {
|
||||||
console.log('Nutzer verbunden!');
|
console.log('Nutzer verbunden!');
|
||||||
userConnected(socket.id);
|
userConnected(socket.id);
|
||||||
|
|
||||||
|
|
||||||
socket.on('disconnect', () => {
|
socket.on('disconnect', () => {
|
||||||
console.log(socket.id, 'Nutzer verbindung unterbrochen');
|
console.log(socket.id, 'Nutzer verbindung unterbrochen');
|
||||||
socket.broadcast.emit('cursor_remove', { id: socket.id });
|
socket.broadcast.emit('cursor_remove', { id: socket.id });
|
||||||
|
|
@ -37,8 +40,36 @@ io.on('connection', (socket) => {
|
||||||
socket.on('nickname', function (data) {
|
socket.on('nickname', function (data) {
|
||||||
socket.broadcast.emit('nickname_set', { name: data, id: socket.id });
|
socket.broadcast.emit('nickname_set', { name: data, id: socket.id });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
socket.on('remove_target', function (data) {
|
||||||
|
socket.broadcast.emit('remove_target', data);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('test', function () {
|
||||||
|
createTarget();
|
||||||
|
});
|
||||||
|
|
||||||
|
function createTarget() {
|
||||||
|
var pos = {};
|
||||||
|
pos.x = getRandomArbitrary(10, 720);
|
||||||
|
pos.y = getRandomArbitrary(10, 720);
|
||||||
|
function getRandomArbitrary(min, max) {
|
||||||
|
return Math.random() * (max - min) + min;
|
||||||
|
}
|
||||||
|
spawnTarget(pos);
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnTarget(pos) {
|
||||||
|
targetcount++;
|
||||||
|
socket.emit('create_target', { id: targetcount, pos: pos });
|
||||||
|
socket.broadcast.emit('create_target', { id: targetcount, pos: pos });
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function userConnected(id) {
|
function userConnected(id) {
|
||||||
users[id] = {
|
users[id] = {
|
||||||
Name: "unnamed",
|
Name: "unnamed",
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,18 @@ function getNickname() {
|
||||||
console.log(nickname);
|
console.log(nickname);
|
||||||
socket.emit('nickname', 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 () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
@ -40,6 +52,23 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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) {
|
socket.on('cursor_draw', function (data) {
|
||||||
var mouse_el = CursorElement(data.id);
|
var mouse_el = CursorElement(data.id);
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,11 @@
|
||||||
|
body{
|
||||||
|
cursor:cell;
|
||||||
|
}
|
||||||
.cursor {
|
.cursor {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: black;
|
background: black;
|
||||||
width: 20px;
|
width: 5px;
|
||||||
height: 20px;
|
height: 5px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -21,4 +24,13 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.target{
|
||||||
|
position: absolute;
|
||||||
|
background: green;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<body>
|
<body>
|
||||||
<input id="nickname">
|
<input id="nickname">
|
||||||
<button onclick="getNickname()">Nick me</button>
|
<button onclick="getNickname()">Nick me</button>
|
||||||
|
<button onclick="test()">test</button>
|
||||||
|
|
||||||
<canvas id="tracking"></canvas>
|
<canvas id="tracking"></canvas>
|
||||||
</body>
|
</body>
|
||||||
Loading…
Reference in a new issue