From 8ad2b18413dbe767b427314a0f9c46c546acdad1 Mon Sep 17 00:00:00 2001
From: catvayor <catvayor@katvayor.net>
Date: Fri, 16 Jun 2023 20:56:58 +0200
Subject: [PATCH] fix #20

---
 static/admin.html             | 45 ++++++++---------
 static/tracking/conscrit.html | 23 +++++----
 static/tracking/vieux.html    | 10 ++--
 traque.js                     | 91 ++++++++++++++++++-----------------
 4 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/static/admin.html b/static/admin.html
index e3cee5a..95be2d2 100644
--- a/static/admin.html
+++ b/static/admin.html
@@ -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>
diff --git a/static/tracking/conscrit.html b/static/tracking/conscrit.html
index f7d9128..64d8127 100644
--- a/static/tracking/conscrit.html
+++ b/static/tracking/conscrit.html
@@ -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
diff --git a/static/tracking/vieux.html b/static/tracking/vieux.html
index 77a74fc..560e487 100644
--- a/static/tracking/vieux.html
+++ b/static/tracking/vieux.html
@@ -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;
diff --git a/traque.js b/traque.js
index 1ba1b50..e44ca35 100644
--- a/traque.js
+++ b/traque.js
@@ -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){