70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
export function updateScoreboard(
|
|
containerLeft,
|
|
containerRight,
|
|
teams,
|
|
fighters,
|
|
{ selectedFighterTeamId = null, onTeamClick = () => {} } = {},
|
|
) {
|
|
if (!containerLeft || !containerRight) {
|
|
return;
|
|
}
|
|
|
|
const currentTeamElements = [...containerLeft.children];
|
|
const teamsChanged =
|
|
currentTeamElements.length !== teams.length ||
|
|
teams.some((team, index) => currentTeamElements[index]?.dataset.teamId !== String(team.id));
|
|
|
|
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 livingFighters = fighters.filter(
|
|
(fighter) => fighter.team.id === team.id && !fighter.isDead,
|
|
);
|
|
const eliteCount = livingFighters.filter((fighter) => fighter.isElite).length;
|
|
const normalCount = livingFighters.length - eliteCount;
|
|
|
|
teamEl.disabled = livingFighters.length === 0;
|
|
teamEl.setAttribute("aria-label", `${team.label} 생존 캐릭터 무작위 시점 고정`);
|
|
teamEl.style.setProperty("--team-color", team.color);
|
|
teamEl.style.removeProperty("background-color");
|
|
teamEl.style.removeProperty("border-left");
|
|
teamEl.classList.toggle("is-focused", selectedFighterTeamId === team.id);
|
|
|
|
const labelEl = teamEl.querySelector(".team-score-name");
|
|
labelEl.textContent = team.label;
|
|
|
|
const countEl = teamEl.querySelector(".team-score-count");
|
|
countEl.textContent = `E : ${eliteCount} | N : ${normalCount}`;
|
|
|
|
teamEl.onclick = () => {
|
|
onTeamClick(team.id);
|
|
};
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|