Merge pull request 'rewrite backend in rust' (#32) from rewrite into master

Reviewed-on: #32
This commit is contained in:
catvayor 2024-06-13 13:20:04 +02:00
commit b72b8b4bd3
20 changed files with 3118 additions and 856 deletions

10
.gitignore vendored
View file

@ -1,3 +1,7 @@
node_modules .envrc
package-lock.json .direnv
config.js /nixos.qcow2
# Added by cargo
/target

1855
Cargo.lock generated Normal file

File diff suppressed because it is too large Load diff

17
Cargo.toml Normal file
View file

@ -0,0 +1,17 @@
[package]
name = "traque"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
rand = "0.8.5"
[dependencies.rocket]
version = "0.5.0"
features = ["json"]
[dependencies.rocket_dyn_templates]
version = "0.1.0"
features = ["handlebars"]

62
nix/vm.nix Normal file
View file

@ -0,0 +1,62 @@
{ pkgs, lib, ... }:
{
nix = {
nixPath = [
"nixpkgs=${builtins.storePath pkgs.path}"
"nixos=${builtins.storePath pkgs.path}"
];
package = pkgs.lix;
};
environment.systemPackages = with pkgs; [ wget tmux ];
services.nginx = {
enable = true;
virtualHosts."localhost" = {
default = true;
locations = {
"/" = {
root = "/traque/static";
tryFiles = "$uri @backend";
};
"@backend" = {
recommendedProxySettings = true;
proxyPass = "http://localhost:8000";
extraConfig = ''
proxy_set_header Connection ''';
proxy_http_version 1.1;
chunked_transfer_encoding off;
proxy_buffering off;
proxy_cache off;
'';
};
};
#extraConfig = ''
# error_page 502 =503;
#'';
};
};
services.getty = {
autologinUser = "root";
helpLine = lib.mkForce ''
On serial console: type Ctrl-a c to switch to the qemu console and `quit` to stop the VM.
traque source is on /traque (rw), `cd /traque && ./target/debug/traque` to run the test.
Compile from the host for performance (the VM is highly limited).'';
};
nixos-shell.mounts = {
mountHome = false;
mountNixProfile = false;
cache = "none";
extraMounts = {
"/traque" = {
target = toString ../.;
cache = "none";
};
};
};
virtualisation = {
forwardPorts = [
{ from = "host"; host.port = 8000; guest.port = 80; }
];
};
system.stateVersion = "24.11";
}

View file

@ -1,8 +0,0 @@
{
"name": "traque",
"version": "0.0.1",
"description": "appli pour la traque",
"dependencies": {
"socket.io": "^4.5.2"
}
}

View file

@ -1,23 +0,0 @@
// Configuration file for the server
conscrits = ["team00", "team01"];
vieux = ["npc0", "npc1"];
// return 0 for conscrit, 1 for vieux, 2 otherwise
function validator(id){
if(conscrits.includes(id)) return 0;
if(vieux.includes(id)) return 1;
return 2;
}
module.exports = {
"port": 9000,
"http_port": 9001,
"key": "certif/server.key",
"cert": "certif/server.crt",
"validator": validator,
// Offset for the randomization of the blurred status
"lat_ofs": 0.0005,
"long_ofs": 0.0005,
}

4
shell.nix Normal file
View file

@ -0,0 +1,4 @@
{ pkgs ? (import <nixpkgs>) { }, lib ? pkgs.lib}:
pkgs.mkShell {
buildInputs = with pkgs; [ cargo rustc rustfmt nixos-shell ];
}

88
src/admin.rs Normal file
View file

@ -0,0 +1,88 @@
use rocket::{
response::stream::{Event, EventStream},
serde::json::Json,
tokio::{
select,
time::{self},
},
Route, Shutdown, State,
};
use rocket_dyn_templates::{context, Template};
use crate::global::*;
#[get("/?<tok>&<dbg>")]
fn admin_page(
tok: Option<AdminKey>,
dbg: Option<bool>,
admin_key: &State<AdminKey>,
) -> Option<Template> {
if tok == Some(admin_key.to_string()) {
Some(Template::render(
"admin",
context! { tok: tok.unwrap(), dbg: dbg.unwrap_or(false) },
))
} else {
None
}
}
#[patch("/<id>?<tok>", data = "<nstate>")]
fn admin_set_state(
tok: Option<AdminKey>,
id: &str,
admin_key: &State<AdminKey>,
nstate: Json<TrackedState>,
tracking: &State<Tracking>,
evt_queue: &State<TrackingEventQueue>,
admin_queue: &State<AdminEventQueue>,
) -> Option<()> {
if tok == Some(admin_key.to_string()) {
let tracking_lock = tracking.read().unwrap();
let tracked = tracking_lock.get(&id.to_string()).unwrap();
tracked.write().unwrap().state = nstate.into_inner();
state_update(&tracked.read().unwrap(), &evt_queue, &admin_queue);
Some(())
} else {
None
}
}
#[get("/events?<tok>")]
fn admin_events<'a>(
tok: Option<AdminKey>,
admin_key: &State<AdminKey>,
admin_queue: &'a State<AdminEventQueue>,
tracking: &State<Tracking>,
mut shutdown: Shutdown,
) -> Option<EventStream![Event + 'a]> {
if tok == Some(admin_key.to_string()) {
let full_info: Vec<AdminTrackedInfo> = tracking
.read()
.unwrap()
.iter()
.map(|(_, tracked)| admin_view(&tracked.read().unwrap()))
.collect();
Some(EventStream! {
yield Event::json(&full_info).event("full_update");
let mut interval = time::interval(EVENT_TIMEOUT);
loop {
select!{
_ = interval.tick() =>{
for evt in evts_to_send(admin_queue){
//println!("{:?}", evt);
yield evt;
}
},
_ = &mut shutdown => break
}
}
})
} else {
None
}
}
pub fn routes() -> Vec<Route> {
routes![admin_page, admin_set_state, admin_events]
}

269
src/global.rs Normal file
View file

@ -0,0 +1,269 @@
use rand::Rng;
use rocket::{
response::stream::Event,
serde::{Deserialize, Serialize},
tokio::time::{Duration, Instant},
};
use std::{
collections::{HashMap, VecDeque},
sync::{Arc, RwLock},
};
pub const BLURRED_MOVE: (f32, f32) = (0.0005, 0.0005);
pub const BONUS_TIMEOUT: Duration = Duration::from_millis(5000);
pub const EVENT_TIMEOUT: Duration = Duration::from_millis(100);
#[derive(Serialize, Deserialize, Clone)]
#[serde(crate = "rocket::serde")]
pub enum TrackedState {
Conscrit {
invisible: bool,
blurred: bool,
captured: bool,
mallette: bool,
invisibility_codes: u32,
blur_codes: u32,
},
Vieux {
color: u8,
invisible: bool,
},
}
use TrackedState::{Conscrit, Vieux};
impl TrackedState {
pub fn invisible(&self) -> bool {
match self {
Conscrit { invisible, .. } => *invisible,
Vieux { invisible, .. } => *invisible,
}
}
pub fn blurred(&self) -> bool {
match self {
Conscrit { blurred, .. } => *blurred,
Vieux { .. } => false,
}
}
pub fn global_viewed(&self) -> bool {
match self {
Conscrit {
captured,
mallette,
invisible,
..
} => (*captured || *mallette) && !*invisible,
Vieux { invisible, .. } => !*invisible,
}
}
pub fn color(&self) -> u8 {
match self {
Vieux { color, .. } => *color,
Conscrit { captured, .. } => {
if *captured {
1
} else {
0
}
}
}
}
pub fn admin_color(&self) -> u8 {
match self {
Vieux { color, invisible } => {
if *invisible {
2
} else {
*color
}
}
Conscrit {
invisible,
captured,
..
} => {
if *invisible {
2
} else if *captured {
1
} else {
0
}
}
}
}
}
pub struct Tracked {
pub id: String,
pub name: String,
pub pos: (f32, f32),
pub state: TrackedState,
}
pub fn build_conscrit(id: String, name: String) -> Tracked {
Tracked {
id: id,
name: name,
pos: (0.0, 0.0),
state: TrackedState::Conscrit {
invisible: false,
blurred: false,
captured: false,
mallette: false,
invisibility_codes: 0,
blur_codes: 0,
},
}
}
pub fn build_vieux(id: String, name: String) -> Tracked {
Tracked {
id: id,
name: name,
pos: (0.0, 0.0),
state: TrackedState::Vieux {
invisible: true,
color: 1,
},
}
}
pub struct QueuedEvent {
pub date: Instant,
pub evt: Event,
}
impl QueuedEvent {
pub fn expired(&self) -> bool {
self.date.elapsed() >= EVENT_TIMEOUT
}
}
impl From<Event> for QueuedEvent {
fn from(evt: Event) -> QueuedEvent {
QueuedEvent {
date: Instant::now(),
evt,
}
}
}
impl From<QueuedEvent> for Event {
fn from(queued_evt: QueuedEvent) -> Event {
queued_evt.evt
}
}
pub type Tracking = Arc<RwLock<HashMap<String, RwLock<Tracked>>>>;
pub type TrackingEventQueue = Arc<RwLock<HashMap<String, RwLock<VecDeque<QueuedEvent>>>>>;
pub type AdminEventQueue = Arc<RwLock<VecDeque<QueuedEvent>>>;
pub type AdminKey = String;
#[derive(Serialize)]
#[serde(crate = "rocket::serde")]
pub struct TrackedInfo {
pub name: String,
pub pos: (f32, f32),
pub color: u8,
}
#[derive(Serialize)]
#[serde(crate = "rocket::serde")]
pub struct AdminTrackedInfo {
pub name: String,
pub id: String,
pub pos: (f32, f32),
pub color: u8,
pub state: TrackedState,
}
impl From<AdminTrackedInfo> for TrackedInfo {
fn from(admin_info: AdminTrackedInfo) -> TrackedInfo {
TrackedInfo {
name: admin_info.name,
pos: admin_info.pos,
color: admin_info.color,
}
}
}
pub fn base_view(team: &Tracked) -> TrackedInfo {
TrackedInfo {
name: team.name.clone(),
pos: team.pos,
color: team.state.color(),
}
}
pub fn admin_view(team: &Tracked) -> AdminTrackedInfo {
AdminTrackedInfo {
name: team.name.clone(),
id: team.id.clone(),
pos: team.pos,
color: team.state.admin_color(),
state: team.state.clone(),
}
}
pub fn apparent_info(watcher: &Tracked, team: &Tracked) -> Option<TrackedInfo> {
if watcher.id == team.id {
None
} else if let Conscrit {
captured, mallette, ..
} = watcher.state
{
if captured {
if team.state.invisible() {
None
} else if team.state.blurred() {
let mut rng = rand::thread_rng();
let (lat, lon) = team.pos;
Some(TrackedInfo {
pos: (
lat + BLURRED_MOVE.0 * (rng.gen::<f32>() * 2.0 - 1.0),
lon + BLURRED_MOVE.1 * (rng.gen::<f32>() * 2.0 - 1.0),
),
..base_view(team)
})
} else {
Some(base_view(team))
}
} else {
if mallette || team.state.global_viewed() {
Some(base_view(team))
} else {
None
}
}
} else {
Some(admin_view(team).into())
}
}
pub fn evts_to_send(evt_queue: &RwLock<VecDeque<QueuedEvent>>) -> Vec<Event> {
evt_queue
.read()
.unwrap()
.iter()
.filter(|qevt| !qevt.expired())
.map(|qevt| qevt.evt.clone())
.collect()
}
pub fn state_update(
tracked: &Tracked,
evt_queues: &TrackingEventQueue,
admin_queue: &AdminEventQueue,
) {
evt_queues
.read()
.unwrap()
.get(&tracked.id)
.unwrap()
.write()
.unwrap()
.push_back(Event::json(&admin_view(tracked)).event("self_info").into());
admin_queue
.write()
.unwrap()
.push_back(Event::json(&admin_view(tracked)).event("update").into());
}

116
src/main.rs Normal file
View file

@ -0,0 +1,116 @@
#[macro_use]
extern crate rocket;
use rocket::{
response::stream::Event,
tokio::{
self, select,
time::{self, Duration},
},
};
use rocket_dyn_templates::Template;
use std::{
collections::{HashMap, VecDeque},
sync::{Arc, RwLock},
};
mod admin;
mod global;
mod track;
use global::*;
#[get("/")]
fn index() -> &'static str {
"Hello, world!"
}
fn send_coords(tracking: &Tracking, evt_queue: &TrackingEventQueue) {
let tracking_lock = tracking.read().unwrap();
for (id, queue) in evt_queue.read().unwrap().iter() {
let watcher = tracking_lock.get(id).unwrap().read().unwrap();
let mut infos: Vec<TrackedInfo> = Vec::new();
for (_, tracked) in tracking_lock.iter() {
if let Some(info) = apparent_info(&watcher, &tracked.read().unwrap()) {
infos.push(info);
}
}
queue
.write()
.unwrap()
.push_back(Event::json(&infos).event("coords").into());
}
}
fn clean_expired_evt(evt_queues: &TrackingEventQueue, admin_queue: &AdminEventQueue) {
for (_, queue) in evt_queues.read().unwrap().iter() {
let queue = &mut queue.write().unwrap();
while let Some(queued_evt) = queue.front() {
if queued_evt.expired() {
queue.pop_front();
} else {
break;
}
}
}
let queue = &mut admin_queue.write().unwrap();
while let Some(queued_evt) = queue.front() {
if queued_evt.expired() {
queue.pop_front();
} else {
break;
}
}
}
#[launch]
async fn rocket() -> _ {
//TODO: read a config file on release
let tracking: Tracking = Arc::new(RwLock::new(HashMap::from([
(
"team00".to_string(),
RwLock::new(build_conscrit("team00".to_string(), "Équipe 0".to_string())),
),
(
"team01".to_string(),
RwLock::new(build_conscrit("team01".to_string(), "Équipe 1".to_string())),
),
(
"npc0".to_string(),
RwLock::new(build_vieux("npc0".to_string(), "PNJ 0".to_string())),
),
(
"npc1".to_string(),
RwLock::new(build_vieux("npc1".to_string(), "PNJ 1".to_string())),
),
])));
let evt_queue: TrackingEventQueue = Arc::new(RwLock::new(
tracking
.read()
.unwrap()
.iter()
.map(|(id, _)| (id.clone(), RwLock::new(VecDeque::new())))
.collect(),
));
let admin_evt_queue: AdminEventQueue = Arc::new(RwLock::new(VecDeque::new()));
let key: AdminKey = "root".to_string(); //TODO : random on release
println!("Admin token: {}", key);
let rocket = rocket::build()
.attach(Template::fairing())
.manage(tracking.clone())
.manage(evt_queue.clone())
.manage(admin_evt_queue.clone())
.manage(key)
.mount("/", routes![index])
.mount("/track", track::routes())
.mount("/admin", admin::routes());
tokio::spawn(async move {
let mut clean_interval = time::interval(5 * EVENT_TIMEOUT);
let mut coord_interval = time::interval(Duration::from_millis(3000));
loop {
select! {
_ = coord_interval.tick() => send_coords(&tracking, &evt_queue),
_ = clean_interval.tick() => clean_expired_evt(&evt_queue, &admin_evt_queue),
}
}
});
rocket
}

235
src/track.rs Normal file
View file

@ -0,0 +1,235 @@
use rocket::{
response::stream::{Event, EventStream},
tokio::{
self, select,
time::{self, sleep},
},
Route, Shutdown, State,
};
use rocket_dyn_templates::{context, Template};
use crate::global::{TrackedState::*, *};
#[get("/<id>?<gpslog>&<dbg>")]
fn tracked_view(
id: &str,
gpslog: Option<bool>,
dbg: Option<bool>,
tracking: &State<Tracking>,
) -> Option<Template> {
if let Some(tracked) = tracking.read().unwrap().get(&id.to_string()) {
Some(Template::render(
match tracked.read().unwrap().state {
Vieux { .. } => "vieux",
Conscrit { .. } => "conscrit",
},
context! {
name: &tracked.read().unwrap().name,
id: &id,
gpslog: gpslog.unwrap_or(true),
dbg: dbg.unwrap_or(false),
},
))
} else {
None
}
}
fn evts_for(id: &str, evt_queues: &TrackingEventQueue) -> Vec<Event> {
evts_to_send(evt_queues.read().unwrap().get(&id.to_string()).unwrap())
}
#[get("/<id>/events")]
fn tracked_events<'a>(
id: &'a str,
evt_queue: &'a State<TrackingEventQueue>,
mut shutdown: Shutdown,
) -> Option<EventStream![Event + 'a]> {
if evt_queue.read().unwrap().contains_key(&id.to_string()) {
Some(EventStream! {
let mut interval = time::interval(EVENT_TIMEOUT);
loop {
select!{
_ = interval.tick() =>{
for evt in evts_for(id, evt_queue){
//println!("{:?}", evt);
yield evt;
}
},
_ = &mut shutdown => break
}
}
})
} else {
None
}
}
#[put("/<id>/pos?<lat>&<long>")]
fn store_pos(
id: &str,
lat: f32,
long: f32,
tracking: &State<Tracking>,
evt_queues: &State<TrackingEventQueue>,
admin_queue: &State<AdminEventQueue>,
) {
if let Some(tracked) = tracking.read().unwrap().get(&id.to_string()) {
tracked.write().unwrap().pos = (lat, long);
state_update(&tracked.read().unwrap(), &evt_queues, &admin_queue);
}
}
#[put("/<id>/state?<inv>&<col>")]
fn set_state(
id: &str,
inv: bool,
col: u8,
tracking: &State<Tracking>,
evt_queues: &State<TrackingEventQueue>,
admin_queue: &State<AdminEventQueue>,
) -> Option<()> {
let tracking_lock = tracking.read().unwrap();
let tracked = &mut tracking_lock.get(&id.to_string()).unwrap().write().unwrap();
if let Vieux {
ref mut invisible,
ref mut color,
} = tracked.state
{
*invisible = inv;
*color = col;
state_update(&tracked, &evt_queues, &admin_queue);
Some(())
} else {
None
}
}
#[put("/<id>/vanish")]
pub async fn activate_invisibility(
id: &str,
tracking: &State<Tracking>,
evt_queues: &State<TrackingEventQueue>,
admin_queue: &State<AdminEventQueue>,
) -> Option<()> {
let tracking_lock = tracking.read().unwrap();
let tracked = &mut tracking_lock.get(&id.to_string()).unwrap().write().unwrap();
if let Conscrit {
ref mut invisible,
ref mut invisibility_codes,
..
} = tracked.state
{
if *invisibility_codes > 0 {
*invisibility_codes -= 1;
*invisible = true;
state_update(&tracked, &evt_queues, &admin_queue);
let track_clone = (*tracking).clone();
let queue_clone = (*evt_queues).clone();
let admin_clone = (*admin_queue).clone();
let id_str = id.to_string();
tokio::spawn(async move {
sleep(BONUS_TIMEOUT).await;
if let Conscrit {
ref mut invisible, ..
} = track_clone
.read()
.unwrap()
.get(&id_str)
.unwrap()
.write()
.unwrap()
.state
{
*invisible = false;
}
state_update(
&track_clone
.read()
.unwrap()
.get(&id_str)
.unwrap()
.read()
.unwrap(),
&queue_clone,
&admin_clone,
);
});
Some(())
} else {
None
}
} else {
None
}
}
#[put("/<id>/blur")]
pub async fn activate_blur(
id: &str,
tracking: &State<Tracking>,
evt_queues: &State<TrackingEventQueue>,
admin_queue: &State<AdminEventQueue>,
) -> Option<()> {
let tracking_lock = tracking.read().unwrap();
let tracked = &mut tracking_lock.get(&id.to_string()).unwrap().write().unwrap();
if let Conscrit {
ref mut blurred,
ref mut blur_codes,
..
} = tracked.state
{
if *blur_codes > 0 {
*blur_codes -= 1;
*blurred = true;
state_update(&tracked, &evt_queues, &admin_queue);
let track_clone = (*tracking).clone();
let queue_clone = (*evt_queues).clone();
let admin_clone = (*admin_queue).clone();
let id_str = id.to_string();
tokio::spawn(async move {
sleep(BONUS_TIMEOUT).await;
if let Conscrit {
ref mut blurred, ..
} = track_clone
.read()
.unwrap()
.get(&id_str)
.unwrap()
.write()
.unwrap()
.state
{
*blurred = false;
}
state_update(
&track_clone
.read()
.unwrap()
.get(&id_str)
.unwrap()
.read()
.unwrap(),
&queue_clone,
&admin_clone,
);
});
Some(())
} else {
None
}
} else {
None
}
}
pub fn routes() -> Vec<Route> {
routes![
store_pos,
tracked_view,
tracked_events,
set_state,
activate_invisibility,
activate_blur,
]
}

View file

@ -1,166 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque | Client admin</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<!-- SOCKET.IO INCLUDE -->
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
#map {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 50%;
}
#right {
position: fixed;
width: 49%;
height: 98%;
top: 1%;
right: 0.5%;
}
.vieux { color: DarkOrchid; }
.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; }
th { background: Grey; }
tr:nth-child(even) { background-color: Silver; }
</style>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<div id="map"></div>
<div id="right">
<div class="tableFixHead">
<table>
<thead><tr>
<th>ID</th>
<th>Mallette</th>
<th>Invisible</th>
<th>Brouillé</th>
<th>Tracker</th>
<th>Code Invisibilité</th>
<th>Code Brouillage</th>
<th>Npc</th>
<th>Last Update</th>
</tr></thead>
<tbody id="teamInfos">
</tbody>
</table>
</div>
<input id="popup"/><button id="sendPopup">Send popup to all clients</button><br/>
<br/>
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</div>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////
// SETUP MAP
setup_map();
map.on("dblclick", function(data){
socket.emit("newTracker", {"position": [data.latlng.lat, data.latlng.lng]});
});
//////////////////////////////////////////////////////////////////////////////
// UPDATE MAP
socket = io({rejectUnauthorized: false, auth: {type:"Admin"}});
setup_socket_common();
//////////////////////////////////////////////////////////////////////////////
// INTERACTION
var equipes = {};
var info_table = document.getElementById("teamInfos");
function sendUpdate(id){
var state = {};
state.mallette = document.getElementById(`${id}.mallette`).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;
socket.emit('setState', { id: id, state: state });
}
socket.on('update', function(data){
var id = data.id;
if(!(id in equipes)){
var row = `<td class="${data.vieux?"vieux":"conscrit"}">${id}</td>`;
row += `<td><input type="checkbox"
id="${id}.mallette"
onchange="sendUpdate('${id}')" /></td>`
row += `<td><input type="checkbox"
id="${id}.invisibility"
onchange="sendUpdate('${id}')" /></td>`
row += `<td><input type="checkbox"
id="${id}.blurred"
onchange="sendUpdate('${id}')" /></td>`
row += `<td><input type="checkbox"
id="${id}.tracker"
onchange="sendUpdate('${id}')" /></td>`
row += `<td><span id="${id}.code.invisi"></span>
<button onclick="socket.emit('newCode', {id:'${id}', code:'invisibility'})">
Add
</button>
</td>`;
row += `<td><span id="${id}.code.blurred"></span>
<button onclick="socket.emit('newCode', {id:'${id}', code:'blurred'})">
Add
</button>
</td>`;
row += `<td><input type="number" min=0 max=9 style="width: 40px"
id="${id}.npc"
onchange="sendUpdate('${id}')" /></td>`
row += `<td><span id="${id}.time"></span></td>`
info_table.innerHTML += `<tr>${row}</tr>`
for(i in equipes){
var equipe = equipes[i];
document.getElementById(`${i}.mallette`).checked = equipe.state.mallette;
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}.mallette`).checked = data.state.mallette;
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 =
`${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
});
document.querySelector('#sendPopup').addEventListener('click', function(){
const input = document.querySelector('#popup');
socket.emit("popup", {"content": input.value});
});
</script>
</body>
</html>

View file

@ -1,76 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque | Client conscrit</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<!-- SOCKET.IO INCLUDE -->
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
#map { height: 600px; }
#codes {
position: fixed;
bottom: 0px;
z-index: 10000;
background-color: white;
width: 100%;
}
</style>
<script type="text/javascript" src="/utils.js"></script>
</head>
<body>
<div id="map"></div><br/>
<div id="codes"></div>
<div id="thanks">
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</div>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////
// SETUP MAP
setup_map();
//////////////////////////////////////////////////////////////////////////////
// SOCKET
id = "%ID"; // %ID will be replaced by the real id.
socket = io({rejectUnauthorized: false, auth: {id: id, type:"conscrit"}});
setup_socket_common();
//////////////////////////////////////////////////////////////////////////////
// SETTINGS -- CODE
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
if(%GPSLOG) setup_geoLoc();
</script>
</body>
</html>

View file

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Équipe %ID inconnue ! </title>
</head>
<body>
<h1> Équipe %ID inconnue ! </h1>
Utilise bien les urls qu'on te donne petit conscrit.
<br/><br/>
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</body>
</html>

View file

@ -1,119 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque | Client vieilleux</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<!-- SOCKET.IO INCLUDE -->
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
#map { height: 600px; }
#below {
position: fixed;
bottom: 0px;
z-index: 10000;
background-color: white;
width: 100%;
}
</style>
<script type="text/javascript" src="/utils.js"></script>
</head>
<body>
<div id="map"></div><br/>
<div id="below">
<form id="state">
<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="blurred">Brouillé</label></br>
<input type="radio" id="npc0" name="npc" value=0 onclick='sendState()' />
<label for="npc0">Traqueur</label>
<input type="radio" id="npc1" name="npc" value=1 checked onclick='sendState()' />
<label for="npc1"><img src="/icons/3.png" height=15px></label>
<input type="radio" id="npc2" name="npc" value=2 checked onclick='sendState()' />
<label for="npc2"><img src="/icons/4.png" height=15px></label>
<input type="radio" id="npc3" name="npc" value=3 checked onclick='sendState()' />
<label for="npc3"><img src="/icons/5.png" height=15px></label>
<input type="radio" id="npc4" name="npc" value=4 checked onclick='sendState()' />
<label for="npc4"><img src="/icons/6.png" height=15px></label>
<input type="radio" id="npc5" name="npc" value=5 checked onclick='sendState()' />
<label for="npc5"><img src="/icons/7.png" height=15px></label>
<input type="radio" id="npc6" name="npc" value=6 checked onclick='sendState()' />
<label for="npc6"><img src="/icons/8.png" height=15px></label>
<input type="radio" id="npc7" name="npc" value=7 checked onclick='sendState()' />
<label for="npc7"><img src="/icons/9.png" height=15px></label>
<input type="radio" id="npc8" name="npc" value=8 checked onclick='sendState()' />
<label for="npc8"><img src="/icons/10.png" height=15px></label>
<input type="radio" id="npc9" name="npc" value=9 checked onclick='sendState()' />
<label for="npc9"><img src="/icons/11.png" height=15px></label>
</form><br/>
<br/>
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</div>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////
// SETUP MAP
setup_map();
//////////////////////////////////////////////////////////////////////////////
// UPDATE MAP
id = "%ID"; // %ID will be replaced by the real id.
socket = io({rejectUnauthorized: false, auth: {id: id, type:"vieux"}});
setup_socket_common();
//////////////////////////////////////////////////////////////////////////////
// SETTINGS -- State
var form = document.querySelector("#state");
function sendState(){
const data = new FormData(form);
var nState = {};
for(entry of data)
nState[entry[0]] = entry[1];
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("#invisibility").checked = state.invisibility;
document.querySelector("#blurred").checked = state.blurred;
document.querySelector("#npc0").checked = state.npc == 0;
document.querySelector("#npc1").checked = state.npc == 1;
document.querySelector("#npc2").checked = state.npc == 2;
document.querySelector("#npc3").checked = state.npc == 3;
document.querySelector("#npc4").checked = state.npc == 4;
document.querySelector("#npc5").checked = state.npc == 5;
document.querySelector("#npc6").checked = state.npc == 6;
document.querySelector("#npc7").checked = state.npc == 7;
document.querySelector("#npc8").checked = state.npc == 8;
document.querySelector("#npc9").checked = state.npc == 9;
});
//////////////////////////////////////////////////////////////////////////////
// GEOLOCALISATION
if(%GPSLOG) setup_geoLoc();
</script>
</body>
</html>

View file

@ -1,9 +1,9 @@
var protocol = location.protocol; var evtsource;
var server = location.hostname; var markers = [];
var port = location.port; var self_marker;
var socket; var name;
var id; var id;
var markers = {}; var dbg;
var CircleIcon = L.Icon.extend({ var CircleIcon = L.Icon.extend({
options: { options: {
@ -69,57 +69,76 @@ var map;
function setup_map(){ function setup_map(){
map = L.map('map').setView([48.8448, 2.3550], 13); map = L.map('map').setView([48.8448, 2.3550], 13);
L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', { L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.{ext}', {
maxZoom: 19, maxZoom: 20,
attribution: '© OpenStreetMap' minZoom: 0,
attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
ext: 'png'
}).addTo(map); }).addTo(map);
L.polyline(map_border, {color: 'red'}).addTo(map); L.polyline(map_border, {color: 'red'}).addTo(map);
} }
function setup_map_self(){
self_marker = L.marker([0,0], {"icon": icons[0] }).addTo(map);
self_marker.setZIndexOffset(1000);
self_marker.bindPopup(name);
}
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// SOCKET // EVENT LISTENNING
function setup_socket_common(){ function setup_evtlisten_common(){
socket.on("moving", function(data){ evtSource = new EventSource("/track/"+id+"/events");
console.log("moving", data); evtSource.addEventListener("coords", (event) => {
if(!(data.id in markers)){ const data = JSON.parse(event.data);
if(data.id == id){ if(dbg) console.log('coords: ', data);
markers[data.id] = L.marker(data.position, {"icon": self_icons[data.color]}).addTo(map); var i = 0;
markers[data.id].setZIndexOffset(10000); for (tracked of data) {
if (i == markers.length) {
markers.push(L.marker([0,0], {"icon": icons[0] }).addTo(map));
markers[i].bindPopup("");
markers[i].setZIndexOffset(0);
} }
else markers[i].setLatLng(tracked.pos);
markers[data.id] = L.marker(data.position, {"icon": icons[data.color]}).addTo(map); markers[i].setPopupContent(tracked.name);
markers[data.id].bindPopup(data.id); markers[i].setIcon(icons[tracked.color]);
} else{ ++i;
markers[data.id].setLatLng(data.position); }
if(data.id == id) for (; i < markers.length; ++i) {
markers[data.id].setIcon(self_icons[data.color]); markers[i].setLatLng([0,0]);
else
markers[data.id].setIcon(icons[data.color]);
} }
}); });
evtSource.addEventListener("self_info", (event) => {
socket.on("popup", function(data){ const data = JSON.parse(event.data);
alert(data.content); if(dbg) console.log('self: ', data);
self_marker.setLatLng(data.pos);
self_marker.setIcon(self_icons[data.color]);
self_state_hook(data.state);
}); });
socket.on("remove", function(data){ //socket.on("popup", function(data){
if(data.id in markers) // alert(data.content);
markers[data.id].remove(); //});
});
socket.on("newTracker", function(data){ //socket.on("remove", function(data){
L.marker(data.position, {"icon": icons[1]}).addTo(map); // if(data.id in markers)
}); // markers[data.id].remove();
//});
//socket.on("newTracker", function(data){
// L.marker(data.position, {"icon": icons[1]}).addTo(map);
//});
} }
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
// GEOLOCALISATION // GEOLOCALISATION
function setup_geoLoc(){ function setup_geoLoc(){
const requestOptions = { method: 'PUT' };
function geoLoc_success(pos) { function geoLoc_success(pos) {
fetch("/log?id="+id+"&lat="+pos.coords.latitude+"&lon="+pos.coords.longitude); fetch("/log/"+id+"/pos?lat="+pos.coords.latitude+"&long="+pos.coords.longitude, requestOptions);
} }
function geoLoc_error(err) { function geoLoc_error(err) {

221
templates/admin.html.hbs Normal file
View file

@ -0,0 +1,221 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque | Client admin</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<style type="text/css">
#map {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 50%;
}
#right {
position: fixed;
width: 49%;
height: 98%;
top: 1%;
right: 0.5%;
}
.vieux { color: DarkOrchid; }
.code_count { width: 90%; }
.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; }
th { background: Grey; }
tr:nth-child(even) { background-color: Silver; }
</style>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<div id="map"></div>
<div id="right">
<div class="tableFixHead">
<table>
<thead><tr>
<th>Nom</th>
<th>Mallette</th>
<th>Tracker</th>
<th>Invisible</th>
<th>Brouillé</th>
<th>Code Invisibilité</th>
<th>Code Brouillage</th>
<th>Couleur</th>
<!-- <th>Last Update</th> -->
</tr></thead>
<tbody id="teamInfos">
</tbody>
</table>
</div>
<input id="popup"/><button id="sendPopup">Send popup to all clients</button><br/>
<br/>
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</div>
<script type="text/javascript">
setup_map();
// map.on("dblclick", function(data){
// socket.emit("newTracker", {"position": [data.latlng.lat, data.latlng.lng]});
// });
var equipes = {};
var equipes_markers = {};
var info_table = document.getElementById("teamInfos");
function show_update(id){
var equipe = equipes[id];
var state = equipe.state;
if("Vieux" in state){
state = state.Vieux;
document.getElementById(`${id}.invisibility`).checked = state.invisible;
document.getElementById(`${id}.color`).value = state.color;
} else {
state = state.Conscrit;
document.getElementById(`${id}.mallette`).checked = state.mallette;
document.getElementById(`${id}.invisibility`).checked = state.invisible;
document.getElementById(`${id}.blurred`).checked = state.blurred;
document.getElementById(`${id}.tracker`).checked = state.captured;
document.getElementById(`${id}.bonus.invisi`).value = state.invisibility_codes;
document.getElementById(`${id}.bonus.blurred`).value = state.blur_codes;
}
equipes_markers[id].setLatLng(equipe.pos);
equipes_markers[id].setIcon(icons[equipe.color]);
}
evtSource = new EventSource("/admin/events?tok={{tok}}");
function update(data) {
{{#if dbg}}console.log(data);{{/if}}
var id = data.id;
if(!(id in equipes)){
var row = "";
if("Vieux" in data.state){
row = `<td class="vieux">${data.name}</td>`;
row += `<td></td>`;
row += `<td></td>`;
row += `<td><input type="checkbox"
id="${id}.invisibility"
onchange="modifyVieux('${id}')" /></td>`;
row += `<td></td>`;
row += `<td></td>`;
row += `<td></td>`;
row += `<td><select id="${id}.color"
onchange="modifyVieux('${id}')" >
<option value=1>1- Tracker</option>
<option value=3>3- <img src="/icons/3.png" height=15px></option>
<option value=4>4- <img src="/icons/4.png" height=15px></option>
<option value=5>5- <img src="/icons/5.png" height=15px></option>
<option value=6>6- <img src="/icons/6.png" height=15px></option>
<option value=7>7- <img src="/icons/7.png" height=15px></option>
<option value=8>8- <img src="/icons/8.png" height=15px></option>
<option value=9>9- <img src="/icons/9.png" height=15px></option>
<option value=10>10- <img src="/icons/10.png" height=15px></option>
<option value=11>11- <img src="/icons/11.png" height=15px></option>
</select></td>`;
} else {
row = `<td class="conscrit">${data.name}</td>`;
row += `<td><input type="checkbox"
id="${id}.mallette"
onchange="modifyConscrit('${id}')" /></td>`
row += `<td><input type="checkbox"
id="${id}.tracker"
onchange="modifyConscrit('${id}')" /></td>`
row += `<td><input type="checkbox"
id="${id}.invisibility"
onchange="modifyConscrit('${id}')" /></td>`;
row += `<td><input type="checkbox"
id="${id}.blurred"
onchange="modifyConscrit('${id}')" /></td>`
row += `<td><input type="number" min="0"
id="${id}.bonus.invisi"
class="code_count"
onchange="modifyConscrit('${id}')" />
</td>`;
row += `<td><input type="number" min="0"
id="${id}.bonus.blurred"
class="code_count"
onchange="modifyConscrit('${id}')" />
</td>`;
row += `<td></td>`;
}
info_table.innerHTML += `<tr>${row}</tr>`
equipes[id] = data;
equipes_markers[id] = L.marker([0,0], {"icon": icons[0] }).addTo(map);
equipes_markers[id].bindPopup(data.name);
setTimeout(function (){
for(i in equipes){
show_update(i);
}
}, 10);
} else {
equipes[id] = data;
show_update(id);
}
};
evtSource.addEventListener("update", (event) => {
data = JSON.parse(event.data);
update(data);
});
evtSource.addEventListener("full_update", (event) => {
data = JSON.parse(event.data);
info_table.innerHTML = "";
equipes = {};
for(i in equipes_markers){
equipes_markers[i].remove();
}
equipes_markers = {};
for (tracked of data) {
update(tracked);
}
});
function modifyVieux(id){
state = {
Vieux: {
invisible: document.getElementById(`${id}.invisibility`).checked,
color: document.getElementById(`${id}.color`).value - 0,
}
};
fetch(`/admin/${id}?tok={{tok}}`, {
method: "PATCH",
body: JSON.stringify(state)
});
}
function modifyConscrit(id){
state = {
Conscrit: {
mallette: document.getElementById(`${id}.mallette`).checked,
invisible: document.getElementById(`${id}.invisibility`).checked,
blurred: document.getElementById(`${id}.blurred`).checked,
captured: document.getElementById(`${id}.tracker`).checked,
invisibility_codes: document.getElementById(`${id}.bonus.invisi`).value - 0,
blur_codes: document.getElementById(`${id}.bonus.blurred`).value - 0,
}
};
fetch(`/admin/${id}?tok={{tok}}`, {
method: "PATCH",
body: JSON.stringify(state)
});
}
</script>
</body>
</html>

View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque -- {{name}} | Client conscrit</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<style type="text/css">
#map { height: 600px; }
#codes {
position: fixed;
bottom: 0px;
z-index: 10000;
background-color: white;
width: 100%;
}
</style>
<script type="text/javascript" src="/utils.js"></script>
</head>
<body>
<div id="map"></div><br/>
<div id="codes"></div>
<div id="thanks">
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</div>
<script type="text/javascript">
id = "{{id}}";
name = "{{name}}";
dbg = {{dbg}};
setup_map();
setup_map_self();
// {{#if gpslog}}setup_geoLoc();{{/if}}
//////////////////////////////////////////////////////////////////////////////
// EVENT LISTENNING
function self_state_hook(state){
var code_buttons = "";
if(state.Conscrit.invisibility_codes > 0)
code_buttons += `<button onclick="fetch('/track/{{id}}/vanish', { method: 'PUT' })">
Invisibilité
</button>`;
if(state.Conscrit.blur_codes > 0)
code_buttons += `<button onclick="fetch('/track/{{id}}/blur', { method: 'PUT' })">
Brouillage
</button>`;
document.getElementById(`codes`).innerHTML = code_buttons;
};
setup_evtlisten_common();
</script>
</body>
</html>

106
templates/vieux.html.hbs Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traque -- {{name}} | Client vieilleux</title>
<!-- LEAFLET INCLUDE -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<style type="text/css">
#map { height: 600px; }
#below {
position: fixed;
bottom: 0px;
z-index: 10000;
background-color: white;
width: 100%;
}
</style>
<script type="text/javascript" src="/utils.js"></script>
</head>
<body>
<div id="map"></div><br/>
<div id="below">
<form id="state">
<input type="checkbox" id="invisibility" name="invisibility" checked onclick='sendState()' />
<label for="invisibility">Invisible</label>
<input type="radio" id="npc1" name="color" value=1 onclick='sendState()' />
<label for="npc0">Traqueur</label>
<input type="radio" id="npc3" name="color" value=3 checked onclick='sendState()' />
<label for="npc1"><img src="/icons/3.png" height=15px></label>
<input type="radio" id="npc4" name="color" value=4 checked onclick='sendState()' />
<label for="npc2"><img src="/icons/4.png" height=15px></label>
<input type="radio" id="npc5" name="color" value=5 checked onclick='sendState()' />
<label for="npc3"><img src="/icons/5.png" height=15px></label>
<input type="radio" id="npc6" name="color" value=6 checked onclick='sendState()' />
<label for="npc4"><img src="/icons/6.png" height=15px></label>
<input type="radio" id="npc7" name="color" value=7 checked onclick='sendState()' />
<label for="npc5"><img src="/icons/7.png" height=15px></label>
<input type="radio" id="npc8" name="color" value=8 checked onclick='sendState()' />
<label for="npc6"><img src="/icons/8.png" height=15px></label>
<input type="radio" id="npc9" name="color" value=9 checked onclick='sendState()' />
<label for="npc7"><img src="/icons/9.png" height=15px></label>
<input type="radio" id="npc10" name="color" value=10 checked onclick='sendState()' />
<label for="npc8"><img src="/icons/10.png" height=15px></label>
<input type="radio" id="npc11" name="color" value=11 checked onclick='sendState()' />
<label for="npc9"><img src="/icons/11.png" height=15px></label>
</form><br/>
<br/>
<a href="https://dgnum.eu"><img src="/dgnum-logo.png" height=50px /></a><br/>
<span style="font-size: 0.8em">Merci à la <a href="https://dgnum.eu">Délégation Générale NUMérique de l'ENS</a>, qui héberge ce site.</span>
</div>
<script type="text/javascript">
id = "{{id}}";
name = "{{name}}";
dbg = {{dbg}};
setup_map();
setup_map_self();
// {{#if gpslog}}setup_geoLoc();{{/if}}
//////////////////////////////////////////////////////////////////////////////
// EVENT LISTENNING
var form = document.querySelector("#state");
function sendState(){
const data = new FormData(form);
var nState = {};
for(entry of data)
nState[entry[0]] = entry[1];
nState.invisibility = "invisibility" in nState;
fetch("/track/{{id}}/state?inv="+nState.invisibility+
"&col="+nState.color,
{ method: 'PUT' }
);
}
function self_state_hook(state){
document.querySelector("#invisibility").checked = state.Vieux.invisible;
document.querySelector("#npc1").checked = state.Vieux.color == 1;
document.querySelector("#npc3").checked = state.Vieux.color == 3;
document.querySelector("#npc4").checked = state.Vieux.color == 4;
document.querySelector("#npc5").checked = state.Vieux.color == 5;
document.querySelector("#npc6").checked = state.Vieux.color == 6;
document.querySelector("#npc7").checked = state.Vieux.color == 7;
document.querySelector("#npc8").checked = state.Vieux.color == 8;
document.querySelector("#npc9").checked = state.Vieux.color == 9;
document.querySelector("#npc10").checked = state.Vieux.color == 10;
document.querySelector("#npc11").checked = state.Vieux.color == 11;
};
setup_evtlisten_common();
</script>
</body>
</html>

392
traque.js
View file

@ -1,392 +0,0 @@
/* struct equipe
{
"id" : string,
"pos" : [lat : float, long : float],
"vieux": bool,
"state" : {
"invisibilty" : bool,
"blurred": bool,
"tracker" : bool,
"npc" : int,
"mallette": bool
},
"codes" : {
"invisiblity" : int,
"blurred" : int
}
}
Les messages à transmettre par le client :
- position, HTTP "/log?id=%ID&lat=%LAT&lon=%LON"
- use(code)
- (vieux) changeState (state)
Les messages à transmettre par le serveur :
- moving(id, color, position)
- setCodes(codes)
- (vieux) newState(state)
*/
// require = include
var https = require('https');
var http = require('http');
var url = require('url');
var fs = require('fs');
var config = require('./config.js');
// Textes d'interaction avec les conscrits
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 = {};
console.log("Setup https server");
const option = {
key: fs.readFileSync(config.key),
cert: fs.readFileSync(config.cert)
};
function replaceAll_legacy(data, pattern, replacement){
var replacing = data.replace(pattern, replacement);
while(replacing != data){
data = replacing;
replacing = data.replace(pattern, replacement);
}
return data;
}
// The server
var server = https.createServer(option, function(req, res){
var q = url.parse(req.url, true);
var filename = "static" + q.pathname;
if(q.pathname.includes(".."))
filename = "static/dotdot.html";
if(q.pathname.startsWith("/tracking/")){
id = q.pathname.substring("/tracking/".length);
gpslog = true;
if(id.startsWith("nolog/")){
gpslog = false;
id = id.substring("nolog/".length);
}
var end_path = ["conscrit.html", "vieux.html", "invalid.html"][config.validator(id)];
filename = "static/tracking/" + end_path;
return fs.readFile(filename, 'utf8', function(err, data){
if(err)
throw new Error("where " + end_path + " is !?");
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(replaceAll_legacy(replaceAll_legacy(data, "%GPSLOG", gpslog), "%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 + ")");
var id = q.query.id;
if(id in equipes){
equipes[id].pos = [q.query.lat, q.query.lon];
emit_update(id);
}
//return empty page
res.writeHead(200, {'Content-Type': 'text/html'});
return res.end();
}
fs.readFile(filename, function(err, data) {
if (err) {
console.log("404: ", q.pathname, filename);
res.writeHead(404, {'Content-Type': 'text/html'});
return res.end("404 Not Found");
}
if(filename.endsWith('.js'))
res.writeHead(200, {'Content-Type': 'text/javascript'});
else if(filename.endsWith('.png'))
res.writeHead(200, {'Content-Type': 'image/png'});
else if(filename.endsWith('.ico'))
res.writeHead(200, {'Content-Type': 'image/ico'});
else
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
return res.end();
});
});
console.log("Setup http redirection");
//HTTP -> HTTPS redirect
var redirect_server = http.createServer(function(req, res){
var url = `https://${req.headers.host.split(":")[0]}:${config.port}${req.url}`;
res.writeHead(301,{Location: url});
res.end();
});
console.log("Setup io server");
const { Server } = require("socket.io");
var io = new Server(server);
io.use(function(socket, next){
var id = socket.handshake.auth.id;
var type = socket.handshake.auth.type;
if(type == "Admin")
next();
else{
var valid = config.validator(id);
if(valid == 0 && type == "conscrit" ||
valid == 1 && type == "vieux"){
if(!(id in equipes)){
equipes[id] = default_team(id, valid);
emit_update(id);
}
next();
} else
next(new Error("invalid"));
}
});
async function join_leave(team_id, join, leave){
var sockets = await io.in(team_id).fetchSockets();
for(s of sockets){
for(r of join)
s.join(r);
for(r of leave)
s.leave(r);
}
}
/////////////////
// Tracking room
//
// Everyone in this room is located
// sub-rooms :
// * "npc" room for non-player
// * "Tracker" room for trackers
// * "mallette" room for player with a mallette
// * "%ID" room of a team
//
// To join :
// auth = {
// type = "conscrit" | "vieux",
// id = "%ID"
// }
// "conscrit" are classical player, "vieux" are npcs (they can become tracker when needed)
var tracking = io.to("Tracking");
var tracker = io.to("Tracker");
var mallette = io.to("mallette");
/////////////////
// Admin room
//
// Room for admins
// To join :
// auth = {
// type = "Admin"
// }
var admin = io.to("Admin");
// visible color of a team
function color(team){
if(team.state.tracker) return 1;
if(team.state.npc != 0) return team.state.npc - 0 + 2;
return 0;
}
function admin_color(team){
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;
}
// apparent information of a team, for tracker only
function apparent_info_tracker(equipe){
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};
}
// apparent information of a team, for mallette only
function apparent_info_mallette(equipe){
if(equipe.state.npc == 0 && !equipe.state.tracker)
return {"id": equipe.id, "color": color(equipe), "position": equipe.pos};
return apparent_info_agent(equipe);
}
// apparent information of a team, for agent only
function apparent_info_agent(equipe){
if(equipe.state.mallette)
return {"id": equipe.id, "color": color(equipe), "position": equipe.pos};
if(equipe.state.npc == 0 && !equipe.state.tracker)
return {"id": equipe.id, "color": color(equipe), "position": [0,0]};
return apparent_info_tracker(equipe);
}
function emit_update(team_id) {
var equipe = equipes[team_id];
tracker.except(team_id).emit('moving', apparent_info_tracker(equipe));
mallette.except(team_id).emit('moving', apparent_info_mallette(equipe));
tracking.except("Tracker").except("mallette").except(team_id).emit('moving', apparent_info_agent(equipe));
// the team, the npcs and the admins always have the real informations
admin.to("npc").to(team_id)
.emit('moving', {"id": team_id, "color": admin_color(equipe), "position": equipe.pos});
admin.emit('update', equipe);
}
// produces a team object populated with default values
function default_team(team_id, valid) {
var state = {};
state.invisibility = valid != 0;
state.blurred = false;
state.tracker = false;
state.npc = valid;
state.mallette = false;
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;
return equipe;
}
function send_update(team){
io.to(team.id).emit('moving', {"id": team.id, "color": color(team), "position": team.pos});
for(other_id in equipes)
if(other_id != team.id){
if(team.state.tracker)
io.to(team.id).emit('moving', apparent_info_tracker(equipes[other_id]));
else if(team.state.mallette)
io.to(team.id).emit('moving', apparent_info_mallette(equipes[other_id]));
else if(team.state.npc != 0)
io.to(team.id).emit('moving', {"id": other_id, "color": admin_color(equipes[other_id]), "position": equipes[other_id].pos});
else
io.to(team.id).emit('moving', apparent_info_agent(equipes[other_id]));
}
}
// connect a socket to the room corresponding to its team and send it infos
function team_join(team, socket){
socket.join(team.id);
socket.emit('moving', {"id": team.id, "color": color(team), "position": team.pos});
for(other_id in equipes)
if(other_id != team.id){
if(team.state.tracker)
socket.emit('moving', apparent_info_tracker(equipes[other_id]));
else if(team.state.mallette)
socket.emit('moving', apparent_info_mallette(equipes[other_id]));
else if(team.state.npc != 0)
socket.emit('moving', {"id": other_id, "color": admin_color(equipes[other_id]), "position": equipes[other_id].pos});
else
socket.emit('moving', apparent_info_agent(equipes[other_id]));
}
}
console.log("Setup handlers");
io.on('connection', function(socket){
if(socket.handshake.auth.type == "conscrit") {
var id = socket.handshake.auth.id;
var equipe = equipes[id]
socket.join("Tracking");
if(equipe.state.tracker)
socket.join("Tracker");
if(equipe.state.mallette)
socket.join("mallette");
team_join(equipe, socket);
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);
setTimeout(function(eq, c){
eq.state[c] = false;
emit_update(eq.id);
}, bonus_delay, equipe, code);
}
});
}
if(socket.handshake.auth.type == "vieux"){
var id = socket.handshake.auth.id;
var equipe = equipes[id]
socket.join("npc");
team_join(equipe, socket);
socket.on('changeState', function(d){
equipe.state = d;
io.to(id).emit('newState', d);
emit_update(id);
});
socket.emit('newState', equipe.state);
}
if(socket.handshake.auth.type == "Admin"){
socket.join("Admin");
socket.on('newCode', function(d){
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){
tracking.emit('popup', {"content": d.content});
});
socket.on('newTracker', function(d){
io.emit('newTracker', d);
});
socket.on('setState', function(d){
equipes[d.id].state = d.state;
var join = [];
var leave = [];
if(d.state.tracker)
join.push("Tracker");
else
leave.push("Tracker");
if(d.state.mallette){
join.push("mallette");
} else{
leave.push("mallette");
}
join_leave(d.id, join, leave);
send_update(equipes[d.id]);
emit_update(d.id);
if(equipes[d.id].vieux)
io.to(d.id).emit('newState', d.state);
});
for(i in equipes){
var equipe = equipes[i];
socket.emit('moving', {"id": equipe.id, "color": color(equipe), "position": equipe.pos});
socket.emit('update', equipe);
}
}
});
console.log("Launch server");
server.listen(config.port, "::");
redirect_server.listen(config.http_port, "::");
console.log("Running !");