Name and stuff

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);
+};
 
 
 

views/assets/js/client.js

@@ -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)
+    });
+});

views/assets/style/main.css

@@ -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;
+}

views/index.html

@@ -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>