wip: territories on map

2026-05-23 18:38:08 -07:00
parent dfab76692b
commit eb4a2e04d6
2 changed files with 118 additions and 1 deletions
--- a/src/main.rs
+++ b/src/main.rs
@ -149,6 +149,32 @@ async fn get_territories(
        .body("{}")
 }

+// Get the Territory info for a specific territory name? 
+#[get("/territories/{game_code}/{name}")]
+async fn get_territory(
+    path: web::Path<(String, String)>,
+    games_actor: web::Data<Addr<GamesActor>>,
+) -> impl Responder { 
+    let (game_code, name) = path.into_inner();
+    if let Ok(Responses::GamesResult(games)) = games_actor.send(Messages::GetGames).await
+        && let Some(game) = games.iter().find(|g| g.code == *game_code) {
+        let territories = &game.territories;
+        for t in territories { 
+            println!("Search term {name} vs. {0}", t.territory_name);
+            if t.territory_name == *name { 
+                println!("{0:?}", t);
+                return HttpResponse::Ok()
+                    .content_type("application/json")
+                    .body(serde_json::to_string(&t).unwrap());
+            }
+        }
+    }
+    HttpResponse::InternalServerError()
+        .content_type("application/json")
+        .body("{}")
+}
+
+
 #[get("/geojson/{game_code}")]
 async fn geojson_endpoint(
    game_code: web::Path<String>,
@ -173,7 +199,7 @@ async fn geojson_endpoint(
 async fn game_page(game_code: web::Path<String>) -> impl Responder {
    let mut context = Context::new();
    context.insert("game_code", game_code.as_str());
-    let body = Tera::one_off(include_str!("templates/map.tera"), &context, false)
+    let body = Tera::one_off(include_str!("templates/map.html.tera"), &context, false)
        .expect("Failed to render template");
    HttpResponse::Ok().body(body)
 }
@ -234,6 +260,7 @@ async fn main() -> std::io::Result<()> {
            .service(admin_query)
            .service(list_of_games)
            .service(get_territories)
+            .service(get_territory)
    })
    .bind(("0.0.0.0", 8080))?
    .run()
--- a/src/templates/map.html.tera
+++ b/src/templates/map.html.tera
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{ game_code }}</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <style>
+        #map { height: 90vh; }
+        .legend {
+            list-style: none;
+            padding: 0;
+            width: 200px;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .color-box {
+            width: 20px;
+            height: 20px;
+            margin-right: 10px;
+            border: 1px solid #000;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <ul id="legend" class="legend"></ul>
+    <script>
+    // <map>
+    function style(feature) {
+        return { color: feature.properties.color};
+    };
+
+    function onEachFeature(feature, layer) {
+        // bind a popup to each geojson element
+        // does this feature have a property named popupContent?
+        if (feature.properties) {
+            layer.bindPopup(feature.properties.S_HOOD);
+        }
+    }
+
+    var map = L.map('map').setView([47.6062, -122.3321], 12);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+    }).addTo(map);
+
+    fetch('/geojson/{{game_code}}')
+        .then(res => res.json())
+        .then(data => L.geoJSON(data, {style: style, onEachFeature : onEachFeature}).addTo(map));
+    // </map>
+    // <legend>
+    const endpoint = "/legend-data/{{game_code}}";
+    fetch(endpoint)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error("Network response was not ok");
+            }
+            return response.json();
+        })
+        .then(data => {
+            const legend = document.getElementById("legend");
+            // Clear existing content if any
+            legend.innerHTML = "";
+
+            data.forEach(item => {
+                const li = document.createElement("li");
+                li.className = "legend-item";
+
+                const colorBox = document.createElement("span");
+                colorBox.className = "color-box";
+                colorBox.style.backgroundColor = item.color;
+
+                const label = document.createElement("span");
+                label.textContent = item.name;
+
+                li.appendChild(colorBox);
+                li.appendChild(label);
+                legend.appendChild(li);
+            });
+        })
+        .catch(error => {
+            console.error("Fetching legend data failed:", error);
+        });
+    const territories_endpoint = "/territories/{game_code}"
+
+    </script>
+</body>
+</html>