sort games + render partial

backend/src/routes.rs

@@ -81,6 +81,15 @@ async fn map_get(file: String) -> Result<Template, String> {
     Ok(Template::render("map_partial", &serde_json::from_str::<serde_json::Value>(&content).unwrap()))
 }
 
+#[get("/partial/state")]
+async fn state_get(gm: State<'_, game::Manager>, state: State<'_, Games>) -> Result<Template, String> {
+    let games = get_states(&state.get_games(), &gm).await?;
+    let context = Context::new_with("Lobby", Lobby { games, maps: Vec::new() });
+
+    Ok(Template::render("state_partial", &context))
+}
+
+
 #[derive(Deserialize, Debug)]
 struct GameReq {
     nop: u64,
@@ -98,7 +107,7 @@ async fn game_post(game_req: Json<GameReq>, tp: State<'_, ThreadPool>, gm: State
 }
 
 pub fn fuel(routes: &mut Vec<Route>) {
-    routes.extend(routes![files, index, map_post, map_get, lobby_get, builder_get, visualizer_get, game_post]);
+    routes.extend(routes![files, index, map_post, map_get, lobby_get, builder_get, visualizer_get, game_post, state_get]);
 }
 
 

backend/src/util.rs

@@ -130,14 +130,18 @@ pub async fn get_states(game_ids: &Vec<(String, u64)>, manager: &game::Manager)
 
     for (gs, name) in gss {
         if let Some(state) = gs {
+            let mut players: Vec<String> = state.iter().map(|conn| match conn {
+                Connect::Waiting(_, key) => format!("Waiting {}", key),
+                _ => String::from("Some connected player")
+            }).collect();
+
+            players.sort();
+
             states.push(
                 GameState {
                     name,
                     turns: None,
-                    players: state.iter().map(|conn| match conn {
+                    players: players,
-                        Connect::Waiting(_, key) => format!("Waiting {}", key),
-                        _ => String::from("Some connected player"),
-                    }).collect(),
                     finished: false,
                 }
             )
@@ -153,6 +157,8 @@ pub async fn get_states(game_ids: &Vec<(String, u64)>, manager: &game::Manager)
         }
     }
 
+    states.sort_by_key(|a| a.name.clone());
+
     Ok(states)
 }
 

backend/static/script/maps.js

@@ -1,5 +1,5 @@
 const ids = {};
-["map_holder", "name", "turns", "nop"].forEach(id => ids[id] = document.getElementById(id));
+["map_holder", "name", "turns", "nop", "lobby"].forEach(id => ids[id] = document.getElementById(id));
 
 var last_map;
 var last_url;
@@ -15,6 +15,11 @@ async function handle_map_click(url, event) {
     ids["map_holder"].innerHTML = await c.text();
 }
 
+async function refresh_state() {
+    const c = await fetch("/partial/state");
+    ids["lobby"].innerHTML = await c.text();
+}
+
 async function start_game() {
     const obj = {
         "nop": parseInt(ids["nop"].value),
@@ -23,17 +28,25 @@ async function start_game() {
         "max_turns": parseInt(ids["turns"].value),
     };
 
-    console.log(obj);
-
     const xhr = new XMLHttpRequest();
 
     xhr.onreadystatechange = async function() {
         console.log(this);
-        // console.log(await this.text());
-
         // TODO: make response visible
     };
 
     xhr.open("POST", "/lobby");
     xhr.send(JSON.stringify(obj));
+
+    setTimeout(
+        () => refresh_state(),
+        200
+    );
 }
+
+window.onload = () => refresh_state();
+
+setInterval(
+    () => refresh_state(),
+    1000
+);

backend/templates/lobby.html.tera

@@ -2,21 +2,7 @@
 
 {% block content %}
     <div class="main">
-        <div class="lobby">
+        <div id="lobby" class="lobby">
-            {% for state in games %}
-            <div class="game_state">
-                <div class="info">
-                    <p>{{state.name}}</p>
-                    {% if state.finished %}<p>Finished</p> {% endif %}
-                    {% if state.turns %}<p>Turns: {{ state.turns }} </p> {% endif %}
-                </div>
-                <div class="players">
-                    {% for player in state.players %}
-                    <p>{{ player }}</p>
-                    {% endfor %}
-                </div>
-            </div>
-            {% endfor %}
         </div>
         <div class="creator">
             <h1>Start new game</h1>

backend/templates/state_partial.html.tera

@@ -0,0 +1,14 @@
+{% for state in games %}
+<div class="game_state">
+    <div class="info">
+        <p>{{state.name}}</p>
+        {% if state.finished %}<p>Finished</p> {% endif %}
+        {% if state.turns %}<p>Turns: {{ state.turns }} </p> {% endif %}
+    </div>
+    <div class="players">
+        {% for player in state.players %}
+        <p>{{ player }}</p>
+        {% endfor %}
+    </div>
+</div>
+{% endfor %}