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

fix #20

Browse source
This commit is contained in:
catvayor 2023-06-16 20:56:58 +02:00
parent 1341fde11b
commit 8ad2b18413
4 changed files with 86 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
static/admin.html
View file

@ -34,7 +34,7 @@
.vieux { color: DarkOrchid; } .vieux { color: DarkOrchid; }
.tableFixHead { overflow: auto; height: 40%; } .tableFixHead { overflow: auto; height: 60%; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
table { border-collapse: collapse; width: 100%; } table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; } th, td { padding: 8px 16px; }
@ -52,9 +52,11 @@
<table> <table>
<thead><tr> <thead><tr>
<th>ID</th> <th>ID</th>
<th>Visible</th> <th>Invisible</th>
<th>Brouillé</th> <th>Brouillé</th>
<th>Tracker</th> <th>Tracker</th>
<th>Code Invisibilité</th>
<th>Code Broulliage</th>
<th>Npc</th> <th>Npc</th>
<th>Last Update</th> <th>Last Update</th>
</tr></thead> </tr></thead>
@ -64,21 +66,11 @@
</div> </div>
<input id="popup"/><button id="sendPopup">Send popup to all clients</button><br/> <input id="popup"/><button id="sendPopup">Send popup to all clients</button><br/>
<button id="genCode">Generate invisibility code</button><div id="code"></div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// SETUP MAP // SETUP MAP
function makeCode() {
var result = '';
var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < 10; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
setup_map(); setup_map();
map.on("dblclick", function(data){ map.on("dblclick", function(data){
@ -100,7 +92,7 @@
function sendUpdate(id){ function sendUpdate(id){
var state = {}; var state = {};
state.shown = document.getElementById(`${id}.shown`).checked; state.invisibility = document.getElementById(`${id}.invisibility`).checked;
state.blurred = document.getElementById(`${id}.blurred`).checked; state.blurred = document.getElementById(`${id}.blurred`).checked;
state.tracker = document.getElementById(`${id}.tracker`).checked; state.tracker = document.getElementById(`${id}.tracker`).checked;
state.npc = document.getElementById(`${id}.npc`).value; state.npc = document.getElementById(`${id}.npc`).value;
@ -112,7 +104,7 @@
if(!(id in equipes)){ if(!(id in equipes)){
var row = `<td class="${data.vieux?"vieux":"conscrit"}">${id}</td>`; var row = `<td class="${data.vieux?"vieux":"conscrit"}">${id}</td>`;
row += `<td><input type="checkbox" row += `<td><input type="checkbox"
id="${id}.shown" id="${id}.invisibility"
onchange="sendUpdate('${id}')" /></td>` onchange="sendUpdate('${id}')" /></td>`
row += `<td><input type="checkbox" row += `<td><input type="checkbox"
id="${id}.blurred" id="${id}.blurred"
@ -120,23 +112,35 @@
row += `<td><input type="checkbox" row += `<td><input type="checkbox"
id="${id}.tracker" id="${id}.tracker"
onchange="sendUpdate('${id}')" /></td>` onchange="sendUpdate('${id}')" /></td>`
row += `<td><input type="number" min=0 max=3 row += `<td><div id="${id}.code.invisi"></div>
<button onclick="socket.emit('newCode', {id:'${id}', code:'invisibility'})">
Add
</button>
</td>`;
row += `<td><div id="${id}.code.blurred"></div>
<button onclick="socket.emit('newCode', {id:'${id}', code:'blurred'})">
Add
</button>
</td>`;
row += `<td><input type="number" min=0 max=3 style="width: 40px"
id="${id}.npc" id="${id}.npc"
onchange="sendUpdate('${id}')" /></td>` onchange="sendUpdate('${id}')" /></td>`
row += `<td id="${id}.time"></td>` row += `<td id="${id}.time"></td>`
info_table.innerHTML += `<tr>${row}</tr>` info_table.innerHTML += `<tr>${row}</tr>`
for(i in equipes){ for(i in equipes){
var equipe = equipes[i]; var equipe = equipes[i];
document.getElementById(`${i}.shown`).checked = equipe.state.shown; document.getElementById(`${i}.invisibility`).checked = equipe.state.invisibility;
document.getElementById(`${i}.blurred`).checked = equipe.state.blurred; document.getElementById(`${i}.blurred`).checked = equipe.state.blurred;
document.getElementById(`${i}.tracker`).checked = equipe.state.tracker; document.getElementById(`${i}.tracker`).checked = equipe.state.tracker;
document.getElementById(`${i}.npc`).value = equipe.state.npc; document.getElementById(`${i}.npc`).value = equipe.state.npc;
} }
} }
equipes[id] = data; equipes[id] = data;
document.getElementById(`${id}.shown`).checked = data.state.shown; document.getElementById(`${id}.invisibility`).checked = data.state.invisibility;
document.getElementById(`${id}.blurred`).checked = data.state.blurred; document.getElementById(`${id}.blurred`).checked = data.state.blurred;
document.getElementById(`${id}.tracker`).checked = data.state.tracker; document.getElementById(`${id}.tracker`).checked = data.state.tracker;
document.getElementById(`${id}.code.invisi`).innerHTML = data.codes.invisibility;
document.getElementById(`${id}.code.blurred`).innerHTML = data.codes.blurred;
document.getElementById(`${id}.npc`).value = data.state.npc; document.getElementById(`${id}.npc`).value = data.state.npc;
var now = new Date(); var now = new Date();
document.getElementById(`${id}.time`).innerHTML = document.getElementById(`${id}.time`).innerHTML =
@ -147,13 +151,6 @@
const input = document.querySelector('#popup'); const input = document.querySelector('#popup');
socket.emit("popup", {"content": input.value}); socket.emit("popup", {"content": input.value});
}); });
document.querySelector('#genCode').addEventListener('click', function(){
var code = makeCode();
socket.emit('newCode', {"code":code});
document.getElementById("code").innerHTML = code;
});
</script> </script>
</body> </body>
</html> </html>

23
static/tracking/conscrit.html
View file

@ -18,7 +18,7 @@
<style type="text/css"> <style type="text/css">
#map { height: 600px; } #map { height: 600px; }
#below { #codes {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
z-index: 10000; z-index: 10000;
@ -32,9 +32,7 @@
<body> <body>
<div id="map"></div><br/> <div id="map"></div><br/>
<div id="below"> <div id="codes"></div>
<input id="message"/><button id="sendMessage">Enter code</button><br/>
</div>
<script type="text/javascript"> <script type="text/javascript">
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
@ -52,11 +50,18 @@
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// SETTINGS -- CODE // SETTINGS -- CODE
document.querySelector('#sendMessage').addEventListener('click', function(){ socket.on('setCodes', function(codes){
const input = document.querySelector('#message'); var code_buttons = "";
if(codes.invisibility > 0)
socket.emit("code", {"code": input.value}); code_buttons += `<button onclick="socket.emit('useCode', 'invisibility')">
}); Invisibilité
</button>`;
if(codes.blurred > 0)
code_buttons += `<button onclick="socket.emit('useCode', 'blurred')">
Brouillage
</button>`;
document.getElementById(`codes`).innerHTML = code_buttons;
});
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// GEOLOCALISATION // GEOLOCALISATION

10
static/tracking/vieux.html
View file

@ -34,11 +34,11 @@
<div id="below"> <div id="below">
<form id="state"> <form id="state">
<input type="checkbox" id="shown" name="shown" onclick='sendState()' /> <input type="checkbox" id="invisibility" name="invisibility" checked onclick='sendState()' />
<label for="shown">Visible</label> <label for="invisibility">Invisible</label>
<input type="checkbox" id="blurred" name="blurred" onclick='sendState()' /> <input type="checkbox" id="blurred" name="blurred" onclick='sendState()' />
<label for="shown">Brouillé</label></br> <label for="blurred">Brouillé</label></br>
<input type="radio" id="npc0" name="npc" value=0 onclick='sendState()' /> <input type="radio" id="npc0" name="npc" value=0 onclick='sendState()' />
<label for="npc0">Traqueur</label> <label for="npc0">Traqueur</label>
@ -76,14 +76,14 @@
var nState = {}; var nState = {};
for(entry of data) for(entry of data)
nState[entry[0]] = entry[1]; nState[entry[0]] = entry[1];
nState.shown = "shown" in nState; nState.invisibility = "invisibility" in nState;
nState.blurred = "blurred" in nState; nState.blurred = "blurred" in nState;
nState.tracker = nState.npc == 0; nState.tracker = nState.npc == 0;
socket.emit('changeState', nState); socket.emit('changeState', nState);
} }
socket.on('newState', function(state){ socket.on('newState', function(state){
document.querySelector("#shown").checked = state.shown; document.querySelector("#invisibility").checked = state.invisibility;
document.querySelector("#blurred").checked = state.blurred; document.querySelector("#blurred").checked = state.blurred;
document.querySelector("#npc0").checked = state.npc == 0; document.querySelector("#npc0").checked = state.npc == 0;
document.querySelector("#npc1").checked = state.npc == 1; document.querySelector("#npc1").checked = state.npc == 1;

91
traque.js
View file

@ -4,19 +4,24 @@
"pos" : [lat : float, long : float], "pos" : [lat : float, long : float],
"vieux": bool, "vieux": bool,
"state" : { "state" : {
"shown" : bool, "invisibilty" : bool,
"blurred": bool, "blurred": bool,
"tracker" : bool, "tracker" : bool,
"npc" : int "npc" : int
},
"codes" : {
"invisiblity" : int,
"blurred" : int
} }
} }
Les messages à transmettre par le client : Les messages à transmettre par le client :
- position, HTTP "/log?id=%ID&lat=%LAT&lon=%LON" - position, HTTP "/log?id=%ID&lat=%LAT&lon=%LON"
- code(code) - use(code)
- (vieux) changeState (state) - (vieux) changeState (state)
Les messages à transmettre par le serveur : Les messages à transmettre par le serveur :
- moving(id, color, position) - moving(id, color, position)
- setCodes(codes)
- (vieux) newState(state) - (vieux) newState(state)
*/ */
@ -27,17 +32,16 @@ var fs = require('fs');
var config = require('./config.js'); var config = require('./config.js');
// Textes d'interaction avec les conscrits // Textes d'interaction avec les conscrits
var PWD_TRACKED = "tracked"; const MSG_BAD = "Code Incorrect";
var PWD_TRACKER = "tracker"; const MSG_TRACKED = "Vous êtes maintenant traqué.e.s !"
var PWD_INVISIBLE = "invisible"; const MSG_TRACKER = "Vous pouvez maintenant traquer !";
var MSG_BAD = "Code Incorrect"; const MSG_CODES = {
var MSG_TRACKED = "Vous êtes maintenant traqué.e.s !" blurred: "Votre positions est maintenant brouillée !",
var MSG_TRACKER = "Vous pouvez maintenant traquer !"; invisibility: "Les autres équipes ne peuvent plus vous voir !"
var MSG_INVISIBLE = "Les autres équipes ne peuvent plus vous voir !"; };
var invisible_delay = 10000;// 3*60*1000; const bonus_delay = 10000;// 3*60*1000;
var equipes = {}; var equipes = {};
var invisi = {};
console.log("Setup http server"); console.log("Setup http server");
@ -153,7 +157,7 @@ var admin = io.to("Admin");
// visible color of a team // visible color of a team
function color(team){ function color(team){
if(!team.state.shown) return 2; if(team.state.invisibility) return 2;
if(team.state.tracker) return 1; if(team.state.tracker) return 1;
if(team.state.npc != 0) return team.state.npc - 0 + 2; if(team.state.npc != 0) return team.state.npc - 0 + 2;
return 0; return 0;
@ -161,16 +165,13 @@ function color(team){
// apparent information of a team, for other only // apparent information of a team, for other only
function apparent_info(equipe){ function apparent_info(equipe){
if(equipe.state.shown){ if(equipe.state.invisibility)
if(equipe.state.blurred)
return {"id": equipe.id, "color": color(equipe),
"position": [parseFloat(equipe.pos[0])+config.lat_ofs*(Math.random()*2-1),
parseFloat(equipe.pos[1])+config.long_ofs*(Math.random()*2-1)]};
else
return {"id": equipe.id, "color": color(equipe), "position": equipe.pos};
} else {
return {"id": equipe.id, "color": color(equipe), "position": [0,0]}; return {"id": equipe.id, "color": color(equipe), "position": [0,0]};
} if(equipe.state.blurred)
return {"id": equipe.id, "color": color(equipe),
"position": [parseFloat(equipe.pos[0])+config.lat_ofs*(Math.random()*2-1),
parseFloat(equipe.pos[1])+config.long_ofs*(Math.random()*2-1)]};
return {"id": equipe.id, "color": color(equipe), "position": equipe.pos};
} }
function emit_update(team_id) { function emit_update(team_id) {
@ -183,13 +184,19 @@ function emit_update(team_id) {
// produces a team object populated with default values // produces a team object populated with default values
function default_team(team_id, valid) { function default_team(team_id, valid) {
var equipe = {};
var state = {}; var state = {};
state.shown = valid == 0; state.invisibility = valid != 0;
state.blurred = false; state.blurred = false;
state.tracker = false; state.tracker = false;
state.npc = valid; state.npc = valid;
var codes = {};
codes.blurred = 0;
codes.invisibility = 0;
var equipe = {};
equipe.state = state; equipe.state = state;
equipe.codes = codes;
equipe.vieux = valid == 1; equipe.vieux = valid == 1;
equipe.pos = [0,0]; equipe.pos = [0,0];
equipe.id = team_id; equipe.id = team_id;
@ -209,33 +216,23 @@ function team_join(team, socket){
console.log("Setup handlers"); console.log("Setup handlers");
io.on('connection', function(socket){ io.on('connection', function(socket){
if(socket.handshake.auth.type == "conscrit" || if(socket.handshake.auth.type == "conscrit") {
socket.handshake.auth.type == "vieux") {
var id = socket.handshake.auth.id; var id = socket.handshake.auth.id;
console.log("connection of " + id + " !");
socket.join("Tracking");
var equipe = equipes[id] var equipe = equipes[id]
socket.join("Tracking");
team_join(equipe, socket); team_join(equipe, socket);
socket.on("code", function(d){ socket.on("useCode", function(code){
var code = d.code; if(code in equipe.codes && equipe.codes[code] > 0){
if(code == PWD_TRACKER){ equipe.codes[code] -= 1;
equipe.state.tracker = true; equipe.state[code] = true;
io.to(id).emit('popup', {"content": MSG_TRACKER}); io.to(id).emit('popup', {content: MSG_CODES[code]});
io.to(id).emit('setCodes', equipe.codes);
emit_update(id); emit_update(id);
} else if((code in invisi) && invisi[code]){ setTimeout(function(eq, c){
invisi[code] = false; eq.state[c] = false;
equipe.state.shown = false;
io.to(id).emit('popup', {"content": MSG_INVISIBLE});
emit_update(id);
setTimeout(function(eq){
eq.state.shown = true;
emit_update(eq.id); emit_update(eq.id);
}, invisible_delay, equipe); }, bonus_delay, equipe, code);
} else {
socket.emit('popup', {"content": MSG_BAD});
return;
} }
}); });
} }
@ -243,6 +240,8 @@ io.on('connection', function(socket){
if(socket.handshake.auth.type == "vieux"){ if(socket.handshake.auth.type == "vieux"){
var id = socket.handshake.auth.id; var id = socket.handshake.auth.id;
var equipe = equipes[id] var equipe = equipes[id]
socket.join("Tracking");
team_join(equipe, socket);
socket.on('changeState', function(d){ socket.on('changeState', function(d){
equipe.state = d; equipe.state = d;
@ -257,7 +256,9 @@ io.on('connection', function(socket){
socket.join("Admin"); socket.join("Admin");
socket.on('newCode', function(d){ socket.on('newCode', function(d){
invisi[d.code] = true; equipes[d.id].codes[d.code] += 1;
io.to(d.id).emit('setCodes', equipes[d.id].codes);
admin.emit('update', equipes[d.id]);
}); });
socket.on('popup', function(d){ socket.on('popup', function(d){