Fix #13
This commit is contained in:
parent
081478fe16
commit
c9a27aa9ff
3 changed files with 162 additions and 154 deletions
|
|
@ -27,13 +27,12 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript" src="/utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div><br/>
|
||||
|
||||
<div id="below">
|
||||
<input id="name"/><button id="setName">Set team name</button><br/>
|
||||
<input id="message"/><button id="sendMessage">Enter code</button><br/>
|
||||
</div>
|
||||
|
||||
|
|
@ -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});
|
||||
});
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
251
traque.js
251
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");
|
||||
|
|
|
|||
Loading…
Reference in a new issue