factorise moving and change color

This commit is contained in:
catvayor 2023-06-06 16:20:35 +02:00
parent 88ecea941f
commit 1154f13962
3 changed files with 24 additions and 42 deletions

View file

@ -3,7 +3,6 @@ var server = location.hostname;
var port = location.port;
var socket;
var id;
var colors = {};
var markers = {};
var CircleIcon = L.Icon.extend({
@ -57,25 +56,6 @@ 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)){
if(!(data.id in colors))
colors[data.id] = 0;
var icon;
if(data.id == id)
icon = self_icons[colors[data.id]];
else
icon = icons[colors[data.id]];
markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map);
if(data.id == id)
markers[data.id].setZIndexOffset(10000);
markers[data.id].bindPopup(data.id);
} else{
markers[data.id].setLatLng(data.position);
}
});
socket.on("popup", function(data){
alert(data.content);
});
@ -91,12 +71,22 @@ function setup_socket_common(){
}
function setup_socket_not_admin(){
socket.on("changeColor", function(data){
console.log("changeColor", data);
if(data.id in colors && colors[data.id] == -1 && data.id in markers)
markers[data.id].addTo(map);
colors[data.id] = data.color;
if(data.id in markers){
socket.on("moving", function(data){
console.log("moving", data);
if(!(data.id in markers)){
var icon;
if(data.id == id)
icon = self_icons[data.color];
else
icon = icons[data.color];
markers[data.id] = L.marker(data.position, {"icon": icon}).addTo(map);
markers[data.id].color = data.color; //do we really need to store this ?
if(data.id == id)
markers[data.id].setZIndexOffset(10000);
markers[data.id].bindPopup(data.id);
} else{
markers[data.id].setLatLng(data.position);
markers[data.id].color = data.color;
if(data.id == id)
if(data.color == -1)
markers[data.id].setIcon(self_invisible);

View file

@ -33,7 +33,6 @@
<div id="map"></div><br/>
<div id="below">
<input id="name"/><button id="setName">Set team name</button><br/>
<input type="number" id="color" min="-1" value="0"/><button id="setColor">Set color</button><br/>
</div>
@ -52,12 +51,6 @@
//////////////////////////////////////////////////////////////////////////////
// SETTINGS -- NAME AND COLOR
document.querySelector('#setName').addEventListener('click', function(){
const input = document.querySelector('#name');
socket.emit("setName", {"name": input.value});
});
document.querySelector('#setColor').addEventListener('click', function(){
const input = document.querySelector('#color');

View file

@ -76,9 +76,9 @@ var server = http.createServer(option, function(req, res){
equipe.pos = position;
if(equipe.shown)
for(i in equipes)
equipes[i].room.emit('moving', {"id": equipe.id, "position": position});
equipes[i].room.emit('moving', {"id": equipe.id, "color": equipe.color, "position": position});
else {
equipe.room.emit('moving', {"id": equipe.id, "position": position});
equipe.room.emit('moving', {"id": equipe.id, "color": equipe.color, "position": position});
// for(i in admins)
// admins[i].emit('moving', {"id": equipe.id, "position": position})
}
@ -126,8 +126,7 @@ team_nsp.on('connection', function(socket){
for(i in equipes){
if(!equipes[i].shown)
continue;
socket.emit('moving', {"id": i, "position": equipes[i].pos});
socket.emit('changeColor', {"id": i, "color": equipes[i].color});
socket.emit('moving', {"id": i, "color": equipes[i].color, "position": equipes[i].pos});
}