feat: implement world effects, role-based stats, and optimized starting zones with refactored constants

2026-05-24 19:16:51 +09:00
parent 36fd25731a
commit 1668e3c941
22 changed files with 1146 additions and 500 deletions
@@ -9,41 +9,59 @@ export function updateScoreboard(
    return;
  }

-  containerLeft.innerHTML = "";
-  containerRight.innerHTML = "";
+  const currentTeamElements = [...containerLeft.children];
+  const teamsChanged =
+    currentTeamElements.length !== teams.length ||
+    teams.some((team, index) => currentTeamElements[index]?.dataset.teamId !== String(team.id));

-  teams.forEach((team) => {
-    const aliveCount = fighters.filter((f) => f.team.id === team.id && !f.isDead).length;
+  if (teamsChanged) {
+    containerLeft.replaceChildren(...teams.map((team) => createTeamElement(team.id)));
+  }
+
+  if (containerRight.childElementCount > 0) {
+    containerRight.replaceChildren();
+  }
+
+  teams.forEach((team, index) => {
+    const teamEl = containerLeft.children[index];
+    const aliveCount = fighters.filter(
+      (fighter) => fighter.team.id === team.id && !fighter.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}`;
+    teamEl.classList.toggle("is-focused", selectedFighterTeamId === team.id);

-    if (selectedFighterTeamId === team.id) {
-      teamEl.classList.add("is-focused");
-    }
-
-    const labelEl = document.createElement("span");
-    labelEl.className = "team-score-name";
+    const labelEl = teamEl.querySelector(".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";
+    const countEl = teamEl.querySelector(".team-score-count");
    countEl.textContent = `${aliveCount}명`;

-    teamEl.addEventListener("click", () => {
+    teamEl.onclick = () => {
      onTeamClick(team.id);
-    });
-
-    teamEl.append(labelEl, ruleEl, countEl);
-    containerLeft.appendChild(teamEl);
+    };
  });
 }
+
+function createTeamElement(teamId) {
+  const teamEl = document.createElement("button");
+  teamEl.className = "team-score";
+  teamEl.type = "button";
+  teamEl.dataset.teamId = String(teamId);
+
+  const labelEl = document.createElement("span");
+  labelEl.className = "team-score-name";
+
+  const ruleEl = document.createElement("span");
+  ruleEl.className = "team-score-rule";
+
+  const countEl = document.createElement("span");
+  countEl.className = "team-score-count";
+
+  teamEl.append(labelEl, ruleEl, countEl);
+  return teamEl;
+}