100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
const KILL_LOG_LIMIT = 30;
|
|
|
|
export function resetKillLog(nodes) {
|
|
const { logNode, listNode } = nodes;
|
|
|
|
if (listNode) {
|
|
listNode.replaceChildren();
|
|
}
|
|
|
|
logNode?.classList.remove("has-entries");
|
|
logNode?.setAttribute("aria-hidden", "true");
|
|
}
|
|
|
|
export function appendKillLog(nodes, winner, defender) {
|
|
const { logNode, listNode } = nodes;
|
|
|
|
if (!logNode || !listNode) {
|
|
return;
|
|
}
|
|
|
|
const item = document.createElement("li");
|
|
const killer = killLogFighterParts(winner);
|
|
const victim = killLogFighterParts(defender);
|
|
const action = document.createElement("span");
|
|
const weapon = document.createElement("span");
|
|
const actionText = document.createElement("span");
|
|
|
|
item.className = "kill-log-item";
|
|
item.style.setProperty("--killer-color", winner.team?.color ?? "#e3b24f");
|
|
item.style.setProperty("--victim-color", defender.team?.color ?? "#e3b24f");
|
|
item.setAttribute(
|
|
"aria-label",
|
|
`${killer.teamLabel} ${killer.memberLabel} 처치 ${victim.teamLabel} ${victim.memberLabel}`,
|
|
);
|
|
|
|
action.className = "kill-log-action";
|
|
weapon.className = "kill-log-weapon";
|
|
weapon.setAttribute("aria-hidden", "true");
|
|
actionText.className = "kill-log-action-text";
|
|
actionText.textContent = "처치";
|
|
action.append(weapon, actionText);
|
|
|
|
item.append(
|
|
createKillLogFighterNode(killer, "killer"),
|
|
action,
|
|
createKillLogFighterNode(victim, "victim"),
|
|
);
|
|
listNode.prepend(item);
|
|
|
|
while (listNode.children.length > KILL_LOG_LIMIT) {
|
|
listNode.lastElementChild?.remove();
|
|
}
|
|
|
|
logNode.classList.add("has-entries");
|
|
logNode.setAttribute("aria-hidden", "false");
|
|
}
|
|
|
|
function createKillLogFighterNode(fighterParts, role) {
|
|
const container = document.createElement("span");
|
|
const avatar = document.createElement("span");
|
|
const copy = document.createElement("span");
|
|
const team = document.createElement("span");
|
|
const member = document.createElement("span");
|
|
|
|
container.className = `kill-log-fighter ${role}`;
|
|
avatar.className = "kill-log-avatar";
|
|
if (fighterParts.avatarUrl) {
|
|
avatar.style.backgroundImage = `url("${fighterParts.avatarUrl}")`;
|
|
}
|
|
avatar.setAttribute("aria-hidden", "true");
|
|
copy.className = "kill-log-copy";
|
|
team.className = "kill-log-team";
|
|
team.textContent = fighterParts.teamLabel;
|
|
member.className = "kill-log-member";
|
|
member.textContent = fighterParts.memberLabel;
|
|
|
|
copy.append(team, member);
|
|
container.append(avatar, copy);
|
|
|
|
return container;
|
|
}
|
|
|
|
function killLogFighterParts(fighter) {
|
|
return {
|
|
teamLabel: fighter?.team?.label ?? "Unknown",
|
|
memberLabel: fighter?.skin?.key ?? fighter?.skin?.label ?? fighter?.fighterName ?? "fighter",
|
|
avatarUrl: fighterSkinIdleUrl(fighter?.skin),
|
|
};
|
|
}
|
|
|
|
function fighterSkinIdleUrl(skin) {
|
|
const idleFile = skin?.animations?.idle?.file;
|
|
|
|
if (!skin?.assetRoot || !idleFile) {
|
|
return "";
|
|
}
|
|
|
|
return `${skin.assetRoot}/${idleFile}`;
|
|
}
|