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; }
.tableFixHead { overflow: auto; height: 40%; }
.tableFixHead { overflow: auto; height: 60%; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
@ -52,9 +52,11 @@
<table>
<thead><tr>
<th>ID</th>
<th>Visible</th>
<th>Invisible</th>
<th>Brouillé</th>
<th>Tracker</th>
<th>Code Invisibilité</th>
<th>Code Broulliage</th>
<th>Npc</th>
<th>Last Update</th>
</tr></thead>
@ -64,21 +66,11 @@
</div>
<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>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////
// 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();
map.on("dblclick", function(data){
@ -100,7 +92,7 @@
function sendUpdate(id){
var state = {};
state.shown = document.getElementById(`${id}.shown`).checked;
state.invisibility = document.getElementById(`${id}.invisibility`).checked;
state.blurred = document.getElementById(`${id}.blurred`).checked;
state.tracker = document.getElementById(`${id}.tracker`).checked;
state.npc = document.getElementById(`${id}.npc`).value;
@ -112,7 +104,7 @@
if(!(id in equipes)){
var row = `<td class="${data.vieux?"vieux":"conscrit"}">${id}</td>`;
row += `<td><input type="checkbox"
id="${id}.shown"
id="${id}.invisibility"
onchange="sendUpdate('${id}')" /></td>`
row += `<td><input type="checkbox"
id="${id}.blurred"
@ -120,23 +112,35 @@
row += `<td><input type="checkbox"
id="${id}.tracker"
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"
onchange="sendUpdate('${id}')" /></td>`
row += `<td id="${id}.time"></td>`
info_table.innerHTML += `<tr>${row}</tr>`
for(i in equipes){
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}.tracker`).checked = equipe.state.tracker;
document.getElementById(`${i}.npc`).value = equipe.state.npc;
}
}
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}.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;
var now = new Date();
document.getElementById(`${id}.time`).innerHTML =
@ -147,13 +151,6 @@
const input = document.querySelector('#popup');
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>
</body>
</html>

23
static/tracking/conscrit.html
View file

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

10
static/tracking/vieux.html
View file

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

91
traque.js
View file

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