36 lines
1.9 KiB
TypeScript
36 lines
1.9 KiB
TypeScript
import catalog from "../game/generated/dungeonLeaderboardCatalog.generated.json";
|
|
import type { DungeonRunMember } from "../game/dungeonRunTypes";
|
|
import { bossDifficultyLabel } from "../game/dungeonDifficulty";
|
|
|
|
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 ids = dungeon?.difficulties.find((entry) => entry.id === difficultyId)?.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 · {killedBossIds.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>;
|
|
}
|