interactive tables for game history on variants

src/render_site.py

@@ -150,6 +150,17 @@ def get_games():
     return [GameRow(**row) for row in cur.fetchall()]
 
 
+def group_games_by_var_id_and_num_players(games: List[GameRow]):
+    ret = {}
+    for game in games:
+        if game.variant_id not in ret.keys():
+            ret[game.variant_id] = {}
+        if game.num_players not in ret[game.variant_id].keys():
+            ret[game.variant_id][game.num_players] = []
+        ret[game.variant_id][game.num_players].append(dataclasses.asdict(game))
+    return ret
+
+
 def get_rating_lists() -> Dict[int, List[PlayerEntry]]:
     cur = conn_manager.get_connection().cursor()
     rating_types = [utils.get_rating_type(x) for x in [False, True]]
@@ -338,6 +349,9 @@ def render_leaderboard():
     with open(output_file, 'w') as f:
         f.write(rendered_html)
 
+    games = get_games()
+    grouped_games = group_games_by_var_id_and_num_players(games)
+
     variant_template = env.get_template('variant.html')
     for variant_id, stats in variant_stats.items():
         rendered_var = variant_template.render(
@@ -346,7 +360,7 @@ def render_leaderboard():
             latest_run=datetime.datetime.now().isoformat(),
             variant_stats=stats,
             variant_name=variant_names[variant_id],
-            games=[dataclasses.asdict(game) for game in get_games()]
+            variant_games=grouped_games.get(variant_id,{})
         )
 
         output_file = out_dir / 'variant' / str(variant_id) / 'index.html'

templates/variant.html

@@ -89,29 +89,43 @@
                 </ul>
             </div>
             <div id="table-{{num_players}}p"></div>
-            <script>
-                let tabledata_{{num_players}} = [
-                    {% for game in games %}
-                {{game}},
-                {% endfor %}
-                ];
-
-                var table = new Tabulator("#table-{{num_players}}p", {
-                    height: 205,
-                    data:tabledata_{{num_players}},
-                    layout:"fitColumns",
-                    columns:[
-                        {title: "Game", field: "game_id", width: 150},
-                        {title: "# Players", field: "num_players", width:200},
-                        {title: "Seed", field: "seed"},
-                    ],
-                });
-            </script>
         </div>
     </div>
     {% endfor %}
 </div>
 
+<!-- JavaScript part for the interactive tables -->
+<script>
+    {% for num_players, games in variant_games.items() %}
+        let tabledata_{{num_players}} = [
+            {% for game in games %}
+                {{game }},
+            {% endfor %}
+        ];
+
+        var table_{{num_players}} = new Tabulator("#table-{{num_players}}p", {
+            height: 205,
+            data:tabledata_{{num_players}},
+            layout:"fitColumns",
+            columns: [
+                {title: "id", field: "league_id"},
+                {title: "Game", field: "game_id", formatter: "link", formatterParams:{
+                    urlPrefix: "https://hanab.live/replay/",
+                    target:"_blank"
+                    }},
+                {title: "Players", field: "users"},
+                {title: "Seed", field: "seed", formatter: "link", formatterParams: {
+                    urlPrefix: "https://hanab.live/seed/",
+                        target:"_blank"
+                    }},
+                {title: "Score", field: "score"},
+                {title: "BDR", field: "num_bdrs"},
+                {title: "Result", field: "game_outcomes"}
+        ],
+        });
+    {% endfor %}
+</script>
+
 <footer class="footer mt-auto py-3 bg-light">
     <div class="container text-center">
         <span class="text-muted">{{ total_games_played }} games | {{ total_players }} players | Thanks for playing <3</span><br>