move dashboard script block content into own files with new classes to update, render to have a better code overview

templates/files/js/GamesTable.js

@@ -0,0 +1,52 @@
+class GamesTable {
+  constructor(gamesBodyEl, battlesnakeUrl, onGameClick) {
+    this._el = gamesBodyEl;
+    this._battlesnakeUrl = battlesnakeUrl;
+    this._onGameClick = onGameClick;
+  }
+
+  render(games, activeGameId) {
+    this._el.innerHTML = games.map((g) => `
+      <tr data-game-id="${g.game_id}">
+        <td><a href="${this._battlesnakeUrl}/${g.game_id}"><code>${GamesTable._shortId(g.game_id)}</code></a><br><small>${Utils.safeString(GamesTable._displayGameTypeOrMap(g))}</small></td>
+        <td>${Utils.toTitle(g.status)}</td>
+        <td>${g.status === "running" ? "-" : g.winner_you ? "Win" : "Loss"}</td>
+        <td>${Utils.safeString(g.final_turn)}</td>
+      </tr>
+    `).join("");
+
+    for (const row of this._el.querySelectorAll("tr")) {
+      row.addEventListener("click", (event) => {
+        event.preventDefault();
+        const gameId = row.getAttribute("data-game-id");
+        if (gameId) this._onGameClick(gameId);
+      });
+    }
+
+    if (activeGameId) this.setActive(activeGameId);
+  }
+
+  setActive(gameId) {
+    this._clearActive();
+    const active = this._el.querySelector(`tr[data-game-id="${gameId}"]`);
+    if (active) active.classList.add("active");
+  }
+
+  _clearActive() {
+    for (const row of this._el.querySelectorAll("tr")) {
+      row.classList.remove("active");
+    }
+  }
+
+  static _shortId(gameId) {
+    return String(gameId || "-").slice(0, 8);
+  }
+
+  static _displayGameTypeOrMap(game) {
+    const mapName = String((game && game.map) || "").trim();
+    const gameType = String((game && game.game_type) || "").trim();
+    if (gameType.toLowerCase() === "duel" && mapName.toLowerCase() === "standard") return "duel";
+    if (mapName && mapName.toLowerCase() !== "empty") return mapName;
+    return gameType || "-";
+  }
+}