Refactor ArenaScene.js: modularize match runtime, spectator camera, and UI components

src/ui/arenaScoreboard.js

@@ -0,0 +1,49 @@
+export function updateScoreboard(
+  containerLeft,
+  containerRight,
+  teams,
+  fighters,
+  { selectedFighterTeamId = null, onTeamClick = () => {} } = {},
+) {
+  if (!containerLeft || !containerRight) {
+    return;
+  }
+
+  containerLeft.innerHTML = "";
+  containerRight.innerHTML = "";
+
+  teams.forEach((team) => {
+    const aliveCount = fighters.filter((f) => f.team.id === team.id && !f.isDead).length;
+
+    const teamEl = document.createElement("button");
+    teamEl.className = "team-score";
+    teamEl.type = "button";
+    teamEl.disabled = aliveCount === 0;
+    teamEl.setAttribute("aria-label", `${team.label} 생존 캐릭터 무작위 시점 고정`);
+    teamEl.style.setProperty("--team-color", team.color);
+    teamEl.style.backgroundColor = `${team.color}33`;
+    teamEl.style.borderLeft = `4px solid ${team.color}`;
+
+    if (selectedFighterTeamId === team.id) {
+      teamEl.classList.add("is-focused");
+    }
+
+    const labelEl = document.createElement("span");
+    labelEl.className = "team-score-name";
+    labelEl.textContent = team.label;
+
+    const ruleEl = document.createElement("span");
+    ruleEl.className = "team-score-rule";
+
+    const countEl = document.createElement("span");
+    countEl.className = "team-score-count";
+    countEl.textContent = `${aliveCount}명`;
+
+    teamEl.addEventListener("click", () => {
+      onTeamClick(team.id);
+    });
+
+    teamEl.append(labelEl, ruleEl, countEl);
+    containerLeft.appendChild(teamEl);
+  });
+}