lbailly/traque
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Fix #13

Browse source
This commit is contained in:
catvayor 2023-06-05 21:26:13 +02:00
parent 081478fe16
commit c9a27aa9ff
3 changed files with 162 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/conscrit.html
View file

@ -27,13 +27,12 @@
} }
</style> </style>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="/utils.js"></script>
</head> </head>
<body> <body>
<div id="map"></div><br/> <div id="map"></div><br/>
<div id="below"> <div id="below">
<input id="name"/><button id="setName">Set team name</button><br/>
<input id="message"/><button id="sendMessage">Enter code</button><br/> <input id="message"/><button id="sendMessage">Enter code</button><br/>
</div> </div>
@ -44,24 +43,19 @@
setup_map(); setup_map();
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// UPDATE MAP // SOCKET
setup_socket_not_admin(); id = "%ID"; // %ID will be replaced by the real id.
setup_socket_common(); setup_socket_common();
setup_socket_not_admin();
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// SETTINGS -- NAME AND COLOR // SETTINGS -- CODE
document.querySelector('#setName').addEventListener('click', function(){
const input = document.querySelector('#name');
socket.emit("setName", {"name": input.value});
});
document.querySelector('#sendMessage').addEventListener('click', function(){ document.querySelector('#sendMessage').addEventListener('click', function(){
const input = document.querySelector('#message'); const input = document.querySelector('#message');
socket.emit("message", {"content": input.value}); socket.emit("code", {"content": input.value});
}); });
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////

47
static/utils.js
View file

@ -1,13 +1,10 @@
var protocol = location.protocol; var protocol = location.protocol;
var server = location.hostname; var server = location.hostname;
var port = location.port; var port = location.port;
var socket = io.connect({rejectUnauthorized: false}, var socket;
protocol+"://"+server+":"+port); var id;
var colors = {};
var id = -1; var markers = {};
var names = [];
var colors = [];
var markers = [];
var CircleIcon = L.Icon.extend({ var CircleIcon = L.Icon.extend({
options: { options: {
@ -18,14 +15,14 @@ var CircleIcon = L.Icon.extend({
}); });
var icons = [ var icons = [
new CircleIcon({ iconUrl: 'def.png' }), new CircleIcon({ iconUrl: '/def.png' }),
new CircleIcon({ iconUrl: 'track.png' }), new CircleIcon({ iconUrl: '/track.png' }),
new CircleIcon({ iconUrl: 'purple.png' }), new CircleIcon({ iconUrl: '/purple.png' }),
new CircleIcon({ iconUrl: 'green.png' }), new CircleIcon({ iconUrl: '/green.png' }),
new CircleIcon({ iconUrl: 'orange.png' }) new CircleIcon({ iconUrl: '/orange.png' })
]; ];
var self_icons = icons; var self_icons = icons;
var self_invisible = new CircleIcon({ iconUrl: 'invi.png' }); var self_invisible = new CircleIcon({ iconUrl: '/invi.png' });
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// INIT MAP // INIT MAP
@ -54,9 +51,12 @@ function setup_map(){
} }
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// UPDATE MAP // SOCKET
function setup_socket_common(){ function setup_socket_common(){
socket = io.connect({rejectUnauthorized: false, auth: {id: id}},
protocol+"://"+server+":"+port);
socket.on("moving", function(data){ socket.on("moving", function(data){
console.log("moving", data); console.log("moving", data);
if(!(data.id in markers)){ if(!(data.id in markers)){
@ -70,8 +70,7 @@ function setup_socket_common(){
markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map); markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map);
if(data.id == id) if(data.id == id)
markers[data.id].setZIndexOffset(10000); markers[data.id].setZIndexOffset(10000);
if(data.id in names) markers[data.id].bindPopup(data.id);
markers[data.id].bindPopup(names[data.id]);
} else{ } else{
markers[data.id].setLatLng(data.position); markers[data.id].setLatLng(data.position);
} }
@ -81,13 +80,6 @@ function setup_socket_common(){
alert(data.content); 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){ socket.on("remove", function(data){
if(data.id in markers) if(data.id in markers)
markers[data.id].remove(); markers[data.id].remove();
@ -99,15 +91,6 @@ function setup_socket_common(){
} }
function setup_socket_not_admin(){ 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){ socket.on("changeColor", function(data){
console.log("changeColor", data); console.log("changeColor", data);
if(data.id in colors && colors[data.id] == -1 && data.id in markers) if(data.id in colors && colors[data.id] == -1 && data.id in markers)

251
traque.js
View file

@ -1,20 +1,18 @@
/* struct equipe /* struct equipe
{ {
"name" : string, "id" : string,
"pos" : [lat : float, long : float], "pos" : [lat : float, long : float],
"color" : int, "color" : int,
"socket" : socket "room" : socket.io room,
"shown" : bool "shown" : bool
} }
Les messages à transmettre par le client : Les messages à transmettre par le client :
- geoLoc(position) - position, HTTP "/log?id=%ID&lat=%LAT&lon=%LON"
- changeColor(color) - code(code)
- setName(id)
Les messages à transmettre par le serveur : Les messages à transmettre par le serveur :
- moving(id, position) - moving(id, position)
- changeColor(id, color) - changeColor(id, color)
- setName(id, name)
*/ */
// Textes d'interaction avec les conscrits // 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 MSG_INVISIBLE = "Les autres équipes ne peuvent plus vous voir !";
var invisible_delay = 3*60*1000; var invisible_delay = 3*60*1000;
var equipes = []; var equipes = {};
var admins = []; var admins = {};
var invisi = {}; var invisi = {};
// require = include // require = include
@ -56,24 +54,33 @@ var server = http.createServer(option, function(req, res){
if(q.pathname.includes("..")) if(q.pathname.includes(".."))
filename = "static/dotdot.html"; filename = "static/dotdot.html";
if(q.pathname == "/") if(q.pathname.startsWith("/conscrit/")){
filename = "static/conscrit.html"; 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"){ if(q.pathname == "/log"){
//position logging //position logging
console.log("team " + q.query.id + " moved to (" + q.query.lat + "," + q.query.lon + ")"); console.log("team " + q.query.id + " moved to (" + q.query.lat + "," + q.query.lon + ")");
//current impl (to be changed) //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]; var position = [q.query.lat, q.query.lon];
socket.position = position; equipe.pos = position;
if(socket.shown) if(equipe.shown)
for(i in equipes) for(i in equipes)
equipes[i].emit('moving', {"id": socket.id, "position": position}); equipes[i].room.emit('moving', {"id": equipe.id, "position": position});
else { else {
socket.emit('moving', {"id": socket.id, "position": position}); equipe.room.emit('moving', {"id": equipe.id, "position": position});
for(i in admins) // for(i in admins)
admins[i].emit('moving', {"id": socket.id, "position": position}) // 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"); console.log("Setup io server");
const { Server } = require("socket.io"); const { Server } = require("socket.io");
var io = new Server(server); var io = new Server(server);
var team_nsp = io.of("/");//TODO: separate admin and player
console.log("Setup handlers"); console.log("Setup handlers");
io.sockets.on('connection', function(socket){ team_nsp.on('connection', function(socket){
console.log("connection !"); var id = socket.handshake.auth.id;
//ici essentiellement tout est a refaire console.log("connection of " + id + " !");
socket.id = equipes.length;
equipes.push(socket); socket.join(id);
socket.shown = true; if(!(id in equipes)){
socket.admin = false; var equipe = {};
socket.color = 0; equipe.shown = true;
socket.position = [0,0]; equipe.pos = [0,0];
socket.on('admin', function(){ equipe.color = 0;
socket.admin = true; equipe.id = id;
socket.shown = false; equipe.room = team_nsp.to(id);
admins.push(socket); equipes[id] = equipe;
for(i in equipes) }
equipes[i].emit('changeColor', {"id": socket.id, "color": -1});
socket.on('newTracker', function(d){ socket.on("code", function(d){ /*TODO*/ });
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){ for(i in equipes){
if(!equipes[i].shown) if(!equipes[i].shown)
continue; 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('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"); console.log("Launch server");