From f3959aaca00d823798aefe8b437af3dc87651254 Mon Sep 17 00:00:00 2001 From: Alpha Date: Sun, 28 Jul 2019 23:33:48 +0200 Subject: [PATCH] Name and stuff --- index.js | 35 ++++++++++++-- views/assets/js/client.js | 93 +++++++++++++++++++++++++++++++++++++ views/assets/style/main.css | 24 ++++++++++ views/index.html | 80 +++---------------------------- 4 files changed, 153 insertions(+), 79 deletions(-) create mode 100644 views/assets/js/client.js create mode 100644 views/assets/style/main.css diff --git a/index.js b/index.js index 789fa72..1741235 100644 --- a/index.js +++ b/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,8 +33,27 @@ 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); +}; + http.listen(1234, () => { diff --git a/views/assets/js/client.js b/views/assets/js/client.js new file mode 100644 index 0000000..58fd693 --- /dev/null +++ b/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 = "

" + data.name + "

"; + }); + + 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) + }); +}); \ No newline at end of file diff --git a/views/assets/style/main.css b/views/assets/style/main.css new file mode 100644 index 0000000..611528b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/views/index.html b/views/index.html index a17997f..0fd040a 100644 --- a/views/index.html +++ b/views/index.html @@ -1,78 +1,10 @@ - + + + + + - - - - - \ No newline at end of file + \ No newline at end of file