Files
healer-man/src/ui/DungeonRunDetails.tsx
T
2026-09-20 13:40:23 -04:00

39 lines
2.1 KiB
TypeScript

import catalog from "../game/generated/dungeonLeaderboardCatalog.generated.json";
import type { DungeonRunMember } from "../game/dungeonRunTypes";
import { bossDifficultyLabel } from "../game/dungeonDifficulty";
import { leaderboardFinalBossIds } from "../game/dungeonLeaderboardRules";
const className = (id: string) => catalog.classes.find((entry) => entry.id === id)?.name ?? id;
export function DungeonRunDetails({ dungeonId, difficultyId, bossDifficulty, party, killedBossIds }: {
readonly bossDifficulty?: number;
readonly dungeonId: string;
readonly difficultyId: string;
readonly party: readonly DungeonRunMember[];
readonly killedBossIds: readonly string[];
}) {
const dungeon = catalog.dungeons.find((entry) => entry.id === dungeonId);
const difficulty = dungeon?.difficulties.find((entry) => entry.id === difficultyId);
const variant = difficulty && leaderboardFinalBossIds(difficulty).length > 1;
const ids = variant ? killedBossIds : difficulty?.bossIds ?? [];
const bosses = dungeon?.bosses.filter((boss) => ids.includes(boss.id)) ?? [];
return <div className="dungeon-run-details">
<p>{bossDifficultyLabel(bossDifficulty)} · {difficultyId === "heroic" ? "Heroic" : "Normal"}</p>
<h4>Party</h4>
<ul className="dungeon-run-party">
{party.map((member, index) => <li key={`${member.name}-${index}`}>
<strong>{member.name}{member.npc ? <small> NPC</small> : null}</strong>
<span>Level {member.level} · {className(member.classId)}{member.secondaryClassId ? ` / ${className(member.secondaryClassId)}` : ""}</span>
<small>{member.role === "damage" ? "Damage" : member.role === "healer" ? "Healer" : "Tank"}</small>
</li>)}
</ul>
<h4>Bosses defeated · {Math.min(killedBossIds.length, bosses.length)}/{bosses.length}</h4>
<ul className="dungeon-run-bosses">
{bosses.map((boss) => <li key={boss.id} className={killedBossIds.includes(boss.id) ? "is-defeated" : ""}>
<span aria-hidden="true">{killedBossIds.includes(boss.id) ? "✓" : "—"}</span>
{boss.name}<small>{killedBossIds.includes(boss.id) ? "Defeated" : "Not defeated"}</small>
</li>)}
</ul>
</div>;
}