refacto: Displaying number of players for each team + adding logo at registration

public/src/auth.js

@@ -1,4 +1,4 @@
-import { apiLogin, apiRegister, apiGetMe } from "./api.js";
+import { apiLogin, apiRegister, apiGetMe, apiFetchPlayerCounts } from "./api.js";
 import { setCurrentTeam, refreshFromServer } from "./game.js";
 
 // ── DOM refs ──────────────────────────────────────────────────────────────────
@@ -15,6 +15,8 @@ const regUsernameEl   = document.getElementById("regUsername");
 const regEmailEl      = document.getElementById("regEmail");
 const regPasswordEl   = document.getElementById("regPassword");
 const registerErrorEl = document.getElementById("registerError");
+const regCountBlueEl  = document.getElementById("regCountBlue");
+const regCountRedEl   = document.getElementById("regCountRed");
 const userDisplayEl   = document.getElementById("userDisplay");
 const logoutBtn       = document.getElementById("logoutBtn");
 
@@ -68,6 +70,15 @@ export async function tryRestoreSession() {
 
 // ── Tab switching ─────────────────────────────────────────────────────────────
 
+async function loadRegisterCounts() {
+  try {
+    const counts = await apiFetchPlayerCounts();
+    const fmt = (n) => `${n} joueur${n > 1 ? "s" : ""}`;
+    regCountBlueEl.textContent = fmt(counts.blue ?? 0);
+    regCountRedEl.textContent  = fmt(counts.red  ?? 0);
+  } catch { /* silently ignore */ }
+}
+
 tabLogin.addEventListener("click", () => {
   tabLogin.classList.add("authTab--active");
   tabRegister.classList.remove("authTab--active");
@@ -82,6 +93,7 @@ tabRegister.addEventListener("click", () => {
   registerForm.classList.remove("hidden");
   loginForm.classList.add("hidden");
   clearError(registerErrorEl);
+  loadRegisterCounts();
 });
 
 // ── Login form ────────────────────────────────────────────────────────────────