From a46bda2669d8bf57f4684793757865ba66efad07 Mon Sep 17 00:00:00 2001
From: Alpha <moritz@cliffbreak.de>
Date: Fri, 2 Aug 2019 15:58:34 +0200
Subject: [PATCH] add stuff

---
 index.js                    | 35 +++++++++++++++++++++++++++++++++--
 views/assets/js/client.js   | 29 +++++++++++++++++++++++++++++
 views/assets/style/main.css | 16 ++++++++++++++--
 views/index.html            |  1 +
 4 files changed, 77 insertions(+), 4 deletions(-)

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 @@
 <body>
     <input id="nickname">
     <button onclick="getNickname()">Nick me</button>
+    <button onclick="test()">test</button>
 
     <canvas id="tracking"></canvas>
 </body>
\ No newline at end of file