diff --git a/index.js b/index.js index 1741235..5be08e0 100644 --- a/index.js +++ b/index.js @@ -4,8 +4,6 @@ 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)); @@ -13,10 +11,15 @@ app.get('/', (req, res) => { res.sendFile(__dirname + '/views/index.html'); }); +var buffer = {}; +var users = {}; +var targetcount = 0; + io.on('connection', (socket) => { console.log('Nutzer verbunden!'); userConnected(socket.id); + socket.on('disconnect', () => { console.log(socket.id, 'Nutzer verbindung unterbrochen'); socket.broadcast.emit('cursor_remove', { id: socket.id }); @@ -37,8 +40,36 @@ io.on('connection', (socket) => { socket.on('nickname', function (data) { 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) { users[id] = { Name: "unnamed", diff --git a/views/assets/js/client.js b/views/assets/js/client.js index 58fd693..9678508 100644 --- a/views/assets/js/client.js +++ b/views/assets/js/client.js @@ -10,6 +10,18 @@ function getNickname() { 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 () { @@ -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) { var mouse_el = CursorElement(data.id); diff --git a/views/assets/style/main.css b/views/assets/style/main.css index 611528b..b73129b 100644 --- a/views/assets/style/main.css +++ b/views/assets/style/main.css @@ -1,8 +1,11 @@ +body{ + cursor:cell; +} .cursor { position: absolute; background: black; - width: 20px; - height: 20px; + width: 5px; + height: 5px; border-radius: 10px; text-align: center; } @@ -21,4 +24,13 @@ position: absolute; top: 0px; right: 0px; +} + +.target{ + position: absolute; + background: green; + width: 40px; + height: 40px; + border-radius: 40px; + text-align: center; } \ No newline at end of file diff --git a/views/index.html b/views/index.html index 0fd040a..27bcf29 100644 --- a/views/index.html +++ b/views/index.html @@ -5,6 +5,7 @@ + \ No newline at end of file