diff --git a/static/conscrit.html b/static/conscrit.html index e37f007..00302f0 100644 --- a/static/conscrit.html +++ b/static/conscrit.html @@ -27,13 +27,12 @@ } - +

-

@@ -44,24 +43,19 @@ setup_map(); ////////////////////////////////////////////////////////////////////////////// - // UPDATE MAP + // SOCKET - setup_socket_not_admin(); + id = "%ID"; // %ID will be replaced by the real id. setup_socket_common(); + setup_socket_not_admin(); ////////////////////////////////////////////////////////////////////////////// - // SETTINGS -- NAME AND COLOR - - document.querySelector('#setName').addEventListener('click', function(){ - const input = document.querySelector('#name'); - - socket.emit("setName", {"name": input.value}); - }); + // SETTINGS -- CODE document.querySelector('#sendMessage').addEventListener('click', function(){ const input = document.querySelector('#message'); - socket.emit("message", {"content": input.value}); + socket.emit("code", {"content": input.value}); }); ////////////////////////////////////////////////////////////////////////////// diff --git a/static/utils.js b/static/utils.js index 6288122..1fa3028 100644 --- a/static/utils.js +++ b/static/utils.js @@ -1,13 +1,10 @@ var protocol = location.protocol; var server = location.hostname; var port = location.port; -var socket = io.connect({rejectUnauthorized: false}, - protocol+"://"+server+":"+port); - -var id = -1; -var names = []; -var colors = []; -var markers = []; +var socket; +var id; +var colors = {}; +var markers = {}; var CircleIcon = L.Icon.extend({ options: { @@ -18,14 +15,14 @@ var CircleIcon = L.Icon.extend({ }); var icons = [ - new CircleIcon({ iconUrl: 'def.png' }), - new CircleIcon({ iconUrl: 'track.png' }), - new CircleIcon({ iconUrl: 'purple.png' }), - new CircleIcon({ iconUrl: 'green.png' }), - new CircleIcon({ iconUrl: 'orange.png' }) + new CircleIcon({ iconUrl: '/def.png' }), + new CircleIcon({ iconUrl: '/track.png' }), + new CircleIcon({ iconUrl: '/purple.png' }), + new CircleIcon({ iconUrl: '/green.png' }), + new CircleIcon({ iconUrl: '/orange.png' }) ]; var self_icons = icons; -var self_invisible = new CircleIcon({ iconUrl: 'invi.png' }); +var self_invisible = new CircleIcon({ iconUrl: '/invi.png' }); ////////////////////////////////////////////////////////////////////////////// // INIT MAP @@ -54,9 +51,12 @@ function setup_map(){ } ////////////////////////////////////////////////////////////////////////////// -// UPDATE MAP +// SOCKET function setup_socket_common(){ + socket = io.connect({rejectUnauthorized: false, auth: {id: id}}, + protocol+"://"+server+":"+port); + socket.on("moving", function(data){ console.log("moving", data); if(!(data.id in markers)){ @@ -70,8 +70,7 @@ function setup_socket_common(){ markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map); if(data.id == id) markers[data.id].setZIndexOffset(10000); - if(data.id in names) - markers[data.id].bindPopup(names[data.id]); + markers[data.id].bindPopup(data.id); } else{ markers[data.id].setLatLng(data.position); } @@ -81,13 +80,6 @@ function setup_socket_common(){ alert(data.content); }); - socket.on("setName", function(data){ - console.log("setName", data); - names[data.id] = data.name; - if(data.id in markers) - markers[data.id].bindPopup(data.name); - }); - socket.on("remove", function(data){ if(data.id in markers) markers[data.id].remove(); @@ -99,15 +91,6 @@ function setup_socket_common(){ } function setup_socket_not_admin(){ - socket.on("yourId", function(data){ - console.log("yourId", data); - id = data.id; - if(!(id in colors)) - colors[id] = 0; - if(id in markers) - markers[id].setIcon(self_icons[colors[id]]); - }); - socket.on("changeColor", function(data){ console.log("changeColor", data); if(data.id in colors && colors[data.id] == -1 && data.id in markers) diff --git a/traque.js b/traque.js index b1b2ba7..43a10f7 100644 --- a/traque.js +++ b/traque.js @@ -1,20 +1,18 @@ /* struct equipe { - "name" : string, + "id" : string, "pos" : [lat : float, long : float], "color" : int, - "socket" : socket + "room" : socket.io room, "shown" : bool } Les messages à transmettre par le client : -- geoLoc(position) -- changeColor(color) -- setName(id) +- position, HTTP "/log?id=%ID&lat=%LAT&lon=%LON" +- code(code) Les messages à transmettre par le serveur : - moving(id, position) - changeColor(id, color) -- setName(id, name) */ // Textes d'interaction avec les conscrits @@ -27,8 +25,8 @@ var MSG_TRACKER = "Vous pouvez maintenant traquer !"; var MSG_INVISIBLE = "Les autres équipes ne peuvent plus vous voir !"; var invisible_delay = 3*60*1000; -var equipes = []; -var admins = []; +var equipes = {}; +var admins = {}; var invisi = {}; // require = include @@ -56,24 +54,33 @@ var server = http.createServer(option, function(req, res){ if(q.pathname.includes("..")) filename = "static/dotdot.html"; - if(q.pathname == "/") - filename = "static/conscrit.html"; + if(q.pathname.startsWith("/conscrit/")){ + id = q.pathname.substring("/conscrit/".length); + return fs.readFile("static/conscrit.html", 'utf8', function(err, data){ + if(err) + throw new Error("where conscrit.html is !?"); + + res.writeHead(200, {'Content-Type': 'text/html'}); + res.write(data.replaceAll("%ID", id)); + return res.end(); + }); + } if(q.pathname == "/log"){ //position logging console.log("team " + q.query.id + " moved to (" + q.query.lat + "," + q.query.lon + ")"); //current impl (to be changed) - var socket = equipes[q.query.id]; + var equipe = equipes[q.query.id]; var position = [q.query.lat, q.query.lon]; - socket.position = position; - if(socket.shown) + equipe.pos = position; + if(equipe.shown) for(i in equipes) - equipes[i].emit('moving', {"id": socket.id, "position": position}); + equipes[i].room.emit('moving', {"id": equipe.id, "position": position}); else { - socket.emit('moving', {"id": socket.id, "position": position}); - for(i in admins) - admins[i].emit('moving', {"id": socket.id, "position": position}) + equipe.room.emit('moving', {"id": equipe.id, "position": position}); +// for(i in admins) +// admins[i].emit('moving', {"id": equipe.id, "position": position}) } @@ -96,107 +103,131 @@ var server = http.createServer(option, function(req, res){ console.log("Setup io server"); const { Server } = require("socket.io"); var io = new Server(server); +var team_nsp = io.of("/");//TODO: separate admin and player console.log("Setup handlers"); -io.sockets.on('connection', function(socket){ - console.log("connection !"); -//ici essentiellement tout est a refaire - socket.id = equipes.length; - equipes.push(socket); - socket.shown = true; - socket.admin = false; - socket.color = 0; - socket.position = [0,0]; - socket.on('admin', function(){ - socket.admin = true; - socket.shown = false; - admins.push(socket); - for(i in equipes) - equipes[i].emit('changeColor', {"id": socket.id, "color": -1}); - socket.on('newTracker', function(d){ - for(i in equipes) - equipes[i].emit('newTracker', d); - }); - }); - socket.on('changeColor', function(d){ - socket.color = d.color - 0; - if(d.color == -1) - socket.shown = false; - else{ - if(!socket.shown) - for(i in equipes) - equipes[i].emit('moving', {"id": socket.id, "position": socket.position}); - socket.shown = true; - } - for(i in equipes) - equipes[i].emit('changeColor', {"id": socket.id, "color": d.color}); - }); - socket.on('message', function(d){ - d.content = d.content.toLowerCase(); - if(d.content == PWD_TRACKED){ - d.color = 0; - socket.emit('popup', {"content": MSG_TRACKED}); - } else if(d.content == PWD_TRACKER){ - d.color = 1; - socket.emit('popup', {"content": MSG_TRACKER}); - } else if(d.content == PWD_INVISIBLE){ - d.color = -1; - socket.emit('popup', {"content": MSG_INVISIBLE}); - } else if((d.content in invisi) && invisi[d.content]){ - invisi[d.content] = false; - old_color = socket.color; - d.color = -1; - socket.emit('popup', {"content": MSG_INVISIBLE}); - setTimeout(function(s,c){ - for(i in equipes){ - equipes[i].emit('moving', {"id": s.id, "position": s.position}); - equipes[i].emit('changeColor', {"id": s.id, "color": c, "debug": "timeout"}); - } - s.color = c; - }, invisible_delay, socket, old_color); - } else { - socket.emit('popup', {"content": MSG_BAD}); - return; - } - socket.color = d.color - 0; - if(d.color == -1) - socket.shown = false; - else{ - if(!socket.shown) - for(i in equipes) - equipes[i].emit('moving', {"id": socket.id, "position": socket.position}); - socket.shown = true; - } - for(i in equipes) - equipes[i].emit('changeColor', {"id": socket.id, "color": d.color}); - }); - socket.on('popup', function(d){ - for(i in equipes) - equipes[i].emit('popup', {"content": d.content}); - }); - socket.on('setName', function(d){ - socket.name = d.name; - for(i in equipes) - equipes[i].emit('setName', {"id": socket.id, "name": d.name}); - }); - socket.on('newCode', function(d){ - invisi[d.code] = true; - }); - socket.on("disconnect", function(_){ - console.log(socket.id + " disconnect"); - socket.shown = false; - for(i in equipes) - equipes[i].emit('remove', {"id": socket.id}); - }); +team_nsp.on('connection', function(socket){ + var id = socket.handshake.auth.id; + console.log("connection of " + id + " !"); + + socket.join(id); + if(!(id in equipes)){ + var equipe = {}; + equipe.shown = true; + equipe.pos = [0,0]; + equipe.color = 0; + equipe.id = id; + equipe.room = team_nsp.to(id); + equipes[id] = equipe; + } + + socket.on("code", function(d){ /*TODO*/ }); - socket.emit('yourId', {"id": socket.id}); for(i in equipes){ if(!equipes[i].shown) continue; - socket.emit('setName', {"id": i, "name": equipes[i].name}); + socket.emit('moving', {"id": i, "position": equipes[i].pos}); socket.emit('changeColor', {"id": i, "color": equipes[i].color}); - socket.emit('moving', {"id": i, "position": equipes[i].position}); } + + +//ici essentiellement tout est a refaire +// socket.id = equipes.length; +// equipes.push(socket); +// socket.shown = true; +// socket.admin = false; +// socket.color = 0; +// socket.position = [0,0]; +// socket.on('admin', function(){ +// socket.admin = true; +// socket.shown = false; +// admins.push(socket); +// for(i in equipes) +// equipes[i].emit('changeColor', {"id": socket.id, "color": -1}); +// socket.on('newTracker', function(d){ +// for(i in equipes) +// equipes[i].emit('newTracker', d); +// }); +// }); +// socket.on('changeColor', function(d){ +// socket.color = d.color - 0; +// if(d.color == -1) +// socket.shown = false; +// else{ +// if(!socket.shown) +// for(i in equipes) +// equipes[i].emit('moving', {"id": socket.id, "position": socket.position}); +// socket.shown = true; +// } +// for(i in equipes) +// equipes[i].emit('changeColor', {"id": socket.id, "color": d.color}); +// }); +// socket.on('message', function(d){ +// d.content = d.content.toLowerCase(); +// if(d.content == PWD_TRACKED){ +// d.color = 0; +// socket.emit('popup', {"content": MSG_TRACKED}); +// } else if(d.content == PWD_TRACKER){ +// d.color = 1; +// socket.emit('popup', {"content": MSG_TRACKER}); +// } else if(d.content == PWD_INVISIBLE){ +// d.color = -1; +// socket.emit('popup', {"content": MSG_INVISIBLE}); +// } else if((d.content in invisi) && invisi[d.content]){ +// invisi[d.content] = false; +// old_color = socket.color; +// d.color = -1; +// socket.emit('popup', {"content": MSG_INVISIBLE}); +// setTimeout(function(s,c){ +// for(i in equipes){ +// equipes[i].emit('moving', {"id": s.id, "position": s.position}); +// equipes[i].emit('changeColor', {"id": s.id, "color": c, "debug": "timeout"}); +// } +// s.color = c; +// }, invisible_delay, socket, old_color); +// } else { +// socket.emit('popup', {"content": MSG_BAD}); +// return; +// } +// socket.color = d.color - 0; +// if(d.color == -1) +// socket.shown = false; +// else{ +// if(!socket.shown) +// for(i in equipes) +// equipes[i].emit('moving', {"id": socket.id, "position": socket.position}); +// socket.shown = true; +// } +// for(i in equipes) +// equipes[i].emit('changeColor', {"id": socket.id, "color": d.color}); +// }); +// socket.on('popup', function(d){ +// for(i in equipes) +// equipes[i].emit('popup', {"content": d.content}); +// }); +// socket.on('setName', function(d){ +// socket.name = d.name; +// for(i in equipes) +// equipes[i].emit('setName', {"id": socket.id, "name": d.name}); +// }); +// socket.on('newCode', function(d){ +// invisi[d.code] = true; +// }); +// socket.on("disconnect", function(_){ +// console.log(socket.id + " disconnect"); +// socket.shown = false; +// for(i in equipes) +// equipes[i].emit('remove', {"id": socket.id}); +// }); +// +// socket.emit('yourId', {"id": socket.id}); +// for(i in equipes){ +// if(!equipes[i].shown) +// continue; +// socket.emit('setName', {"id": i, "name": equipes[i].name}); +// socket.emit('changeColor', {"id": i, "color": equipes[i].color}); +// socket.emit('moving', {"id": i, "position": equipes[i].position}); +// } }); console.log("Launch server");