OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 532 LINES
 
[ HISTORY ]  [ UP ]
 

---
import type { BestRun } from "../../../lib/types";
import Table from "../../Table/Table.astro";
import TableRow from "../../Table/TableRow.astro";
import TableCell from "../../Table/TableCell.astro";
import TeamComposition from "../../Leaderboard/TeamComposition/TeamComposition.ast
ro";
import { buildLeaderboardURL } from "../../../lib/utils";
import DungeonTime from "../../DungeonTime/DungeonTime.astro";
import { formatRankingWithBracket } from "../../../lib/ranking-utils";
import { getDungeonIconUrl } from "../../../lib/dungeonIcons";
import { getEffectiveRealmSlug } from "../../../lib/realms";
import "./PlayerBestRuns.scss";

interface SeasonOption {
  id: string;
  label: string;
}

interface Props {
  bestRuns?: Record<string, BestRun>;
  mode?: "full" | "compact";
  showSectionWrapper?: boolean;
  class?: string;
  playerRegion?: string;
  playerRealmSlug?: string;
  seasonId?: string | number;
  seasonOptions?: SeasonOption[];
  seasonRuns?: Record<string, Record<string, BestRun>>;
}

const {
  bestRuns,
  mode = "full",
  showSectionWrapper = true,
  class: className,
  playerRegion,
  playerRealmSlug,
  seasonId,
  seasonOptions = [],
  seasonRuns,
} = Astro.props;

const baseRunsArray = bestRuns ? Object.values(bestRuns) : [];
const normalizedSeasonId =
  typeof seasonId === "number" ? String(seasonId) : seasonId || null;
const leaderboardRealmSlug =
  getEffectiveRealmSlug(playerRegion, playerRealmSlug) || playerRealmSlug || "";
const componentId = "player-best-runs";
const seasonSelectId = "player-best-runs-season-select";

type SeasonEntry = {
  id: string;
  label: string;
  runs: BestRun[];
};

const seasonEntries: SeasonEntry[] =
  seasonOptions.length > 0
    ? seasonOptions.map((option) => ({
        id: option.id,
        label: option.label,
        runs:
          (seasonRuns && seasonRuns[option.id]
            ? Object.values(seasonRuns[option.id])
            : option.id === normalizedSeasonId
              ? baseRunsArray
              : []) || [],
      }))
    : [
        {
          id: normalizedSeasonId || "current",
          label: normalizedSeasonId ? `Season ${normalizedSeasonId}` : "Season",
          runs: baseRunsArray,
        },
      ];

const selectedSeasonId =
  seasonEntries.find((entry) => entry.id === normalizedSeasonId)?.id ||
  seasonEntries[0]?.id ||
  null;

const shouldShowSeasonSelector = seasonEntries.length > 1;
---

{
  showSectionWrapper && (
    <div class="profile-section">
      <h3 class="section-title">Best Times Per Dungeon</h3>
      <div
        id={componentId}
        class={`player-best-runs ${className || ""}`.trim()}
        data-component="player-best-runs"
      >
        {shouldShowSeasonSelector && (
          <div class="best-runs-controls">
            <div class="filter-group">
              <label for={seasonSelectId}>Season</label>
              <select id={seasonSelectId} data-season-select>
                {seasonEntries.map((entry) => (
                  <option
                    value={entry.id}
                    selected={entry.id === selectedSeasonId}
                  >
                    {entry.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
        )}

        {seasonEntries.map((entry) => {
          const seasonNumber = Number(entry.id);
          const leaderboardUrlOpts =
            !Number.isNaN(seasonNumber) && entry.id !== "current"
              ? { season: seasonNumber }
              : undefined;

          return (
            <div
              class="best-runs-season"
              data-season={entry.id}
              data-active={entry.id === selectedSeasonId ? "true" : "false"}
            >
              {entry.runs.length > 0 ? (
                <Table mode="best-runs">
                  <div slot="header" class="table-header-cell">
                    Dungeon
                  </div>
                  <div slot="header" class="table-header-cell">
                    Time
                  </div>
                  <div slot="header" class="table-header-cell">
                    Team
                  </div>
                  <div slot="header" class="table-header-cell">
                    Global
                  </div>
                  <div slot="header" class="table-header-cell">
                    Region
                  </div>
                  <div slot="header" class="table-header-cell">
                    Realm
                  </div>

                  {entry.runs.map((run) => {
                    const dungeonSlug = (run as any).dungeon_slug || "";
                    const iconUrl = getDungeonIconUrl(
                      dungeonSlug,
                      run.dungeon_name,
                    );

                    const globalRankingValue =
                      typeof (run as any).global_ranking_filtered ===
                        "number" && (run as any).global_ranking_filtered > 0
                        ? (run as any).global_ranking_filtered
                        : (run as any).global_ranking;
                    const globalBracket =
                      (run as any).global_percentile_bracket ||
                      (run as any).percentile_bracket ||
                      "";

                    const regionalRankingValue =
                      typeof (run as any).regional_ranking_filtered ===
                        "number" && (run as any).regional_ranking_filtered > 0
                        ? (run as any).regional_ranking_filtered
                        : run.regional_ranking;
                    const realmRankingValue =
                      typeof (run as any).realm_ranking_filtered === "number" &&
                      (run as any).realm_ranking_filtered > 0
                        ? (run as any).realm_ranking_filtered
                        : run.realm_ranking;

                    const regionalBracket =
                      (run as any).regional_percentile_bracket ||
                      run.percentile_bracket ||
                      "";
                    const realmBracket =
                      (run as any).realm_percentile_bracket ||
                      run.percentile_bracket ||
                      "";

                    const globalURL = buildLeaderboardURL(
                      "global",
                      "all",
                      dungeonSlug,
                      undefined,
                      leaderboardUrlOpts,
                    );
                    const regionalURL = playerRegion
                      ? buildLeaderboardURL(
                          playerRegion,
                          "all",
                          dungeonSlug,
                          undefined,
                          leaderboardUrlOpts,
                        )
                      : "#";
                    const realmURL =
                      playerRegion && leaderboardRealmSlug
                        ? buildLeaderboardURL(
                            playerRegion,
                            leaderboardRealmSlug,
                            dungeonSlug,
                            undefined,
                            leaderboardUrlOpts,
                          )
                        : "#";

                    const members =
                      (run as any).all_members ||
                      (run as any).team_members ||
                      [];

                    return (
                      <TableRow>
                        <TableCell label="Dungeon">
                          <div class="dungeon-cell">
                            {iconUrl && (
                              <img
                                src={iconUrl}
                                alt={run.dungeon_name}
                                class="dungeon-icon"
                              />
                            )}
                            <span class="dungeon-name">{run.dungeon_name}</span>
                          </div>
                        </TableCell>
                        <TableCell label="Time">
                          <DungeonTime
                            dungeonId={run.dungeon_id}
                            durationMs={run.duration}
                          />
                        </TableCell>
                        <TableCell label="Team">
                          <TeamComposition
                            members={members}
                            currentRegion={playerRegion || ""}
                            currentRealm={playerRealmSlug || ""}
                          />
                        </TableCell>
                        <TableCell
                          label="Global"
                          class="ranking-cell ranking-global"
                        >
                          <a
                            href={globalURL}
                            class="rank-link"
                            set:html={formatRankingWithBracket(
                              globalRankingValue,
                              globalBracket,
                            )}
                          />
                        </TableCell>
                        <TableCell
                          label="Region"
                          class="ranking-cell ranking-region"
                        >
                          <a
                            href={regionalURL}
                            class="rank-link"
                            set:html={formatRankingWithBracket(
                              regionalRankingValue,
                              regionalBracket,
                            )}
                          />
                        </TableCell>
                        <TableCell
                          label="Realm"
                          class="ranking-cell ranking-realm"
                        >
                          <a
                            href={realmURL}
                            class="rank-link"
                            set:html={formatRankingWithBracket(
                              realmRankingValue,
                              realmBracket,
                            )}
                          />
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </Table>
              ) : (
                <div class="no-runs-message">
                  <p>No best runs found for this season.</p>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  )
}

{
  !showSectionWrapper && (
    <div
      id={componentId}
      class={`player-best-runs ${className || ""}`.trim()}
      data-component="player-best-runs"
    >
      {shouldShowSeasonSelector && (
        <div class="best-runs-controls">
          <div class="filter-group">
            <label for={seasonSelectId}>Season</label>
            <select id={seasonSelectId} data-season-select>
              {seasonEntries.map((entry) => (
                <option
                  value={entry.id}
                  selected={entry.id === selectedSeasonId}
                >
                  {entry.label}
                </option>
              ))}
            </select>
          </div>
        </div>
      )}

      {seasonEntries.map((entry) => {
        const seasonNumber = Number(entry.id);
        const leaderboardUrlOpts =
          !Number.isNaN(seasonNumber) && entry.id !== "current"
            ? { season: seasonNumber }
            : undefined;

        return (
          <div
            class="best-runs-season"
            data-season={entry.id}
            data-active={entry.id === selectedSeasonId ? "true" : "false"}
          >
            {entry.runs.length > 0 ? (
              <Table mode="best-runs">
                <div slot="header" class="table-header-cell">
                  Dungeon
                </div>
                <div slot="header" class="table-header-cell">
                  Time
                </div>
                <div slot="header" class="table-header-cell">
                  Team
                </div>
                <div slot="header" class="table-header-cell">
                  Global
                </div>
                <div slot="header" class="table-header-cell">
                  Region
                </div>
                <div slot="header" class="table-header-cell">
                  Realm
                </div>

                {entry.runs.map((run) => {
                  const dungeonSlug = (run as any).dungeon_slug || "";
                  const iconUrl = getDungeonIconUrl(
                    dungeonSlug,
                    run.dungeon_name,
                  );

                  const globalRankingValue =
                    typeof (run as any).global_ranking_filtered === "number" &&
                    (run as any).global_ranking_filtered > 0
                      ? (run as any).global_ranking_filtered
                      : (run as any).global_ranking;
                  const globalBracket =
                    (run as any).global_percentile_bracket ||
                    (run as any).percentile_bracket ||
                    "";

                  const regionalRankingValue =
                    typeof (run as any).regional_ranking_filtered ===
                      "number" && (run as any).regional_ranking_filtered > 0
                      ? (run as any).regional_ranking_filtered
                      : run.regional_ranking;
                  const realmRankingValue =
                    typeof (run as any).realm_ranking_filtered === "number" &&
                    (run as any).realm_ranking_filtered > 0
                      ? (run as any).realm_ranking_filtered
                      : run.realm_ranking;

                  const regionalBracket =
                    (run as any).regional_percentile_bracket ||
                    run.percentile_bracket ||
                    "";
                  const realmBracket =
                    (run as any).realm_percentile_bracket ||
                    run.percentile_bracket ||
                    "";

                  const globalURL = buildLeaderboardURL(
                    "global",
                    "all",
                    dungeonSlug,
                    undefined,
                    leaderboardUrlOpts,
                  );
                  const regionalURL = playerRegion
                    ? buildLeaderboardURL(
                        playerRegion,
                        "all",
                        dungeonSlug,
                        undefined,
                        leaderboardUrlOpts,
                      )
                    : "#";
                  const realmURL =
                    playerRegion && leaderboardRealmSlug
                      ? buildLeaderboardURL(
                          playerRegion,
                          leaderboardRealmSlug,
                          dungeonSlug,
                          undefined,
                          leaderboardUrlOpts,
                        )
                      : "#";

                  const members =
                    (run as any).all_members || (run as any).team_members || [];

                  return (
                    <TableRow>
                      <TableCell label="Dungeon">
                        <div class="dungeon-cell">
                          {iconUrl && (
                            <img
                              src={iconUrl}
                              alt={run.dungeon_name}
                              class="dungeon-icon"
                            />
                          )}
                          <span class="dungeon-name">{run.dungeon_name}</span>
                        </div>
                      </TableCell>
                      <TableCell label="Time">{duration}</TableCell>
                      <TableCell label="Team">
                        <TeamComposition
                          members={members}
                          currentRegion={playerRegion || ""}
                          currentRealm={playerRealmSlug || ""}
                        />
                      </TableCell>
                      <TableCell
                        label="Global"
                        class="ranking-cell ranking-global"
                      >
                        <a
                          href={globalURL}
                          class="rank-link"
                          set:html={formatRankingWithBracket(
                            globalRankingValue,
                            globalBracket,
                          )}
                        />
                      </TableCell>
                      <TableCell
                        label="Region"
                        class="ranking-cell ranking-region"
                      >
                        <a
                          href={regionalURL}
                          class="rank-link"
                          set:html={formatRankingWithBracket(
                            regionalRankingValue,
                            regionalBracket,
                          )}
                        />
                      </TableCell>
                      <TableCell
                        label="Realm"
                        class="ranking-cell ranking-realm"
                      >
                        <a
                          href={realmURL}
                          class="rank-link"
                          set:html={formatRankingWithBracket(
                            realmRankingValue,
                            realmBracket,
                          )}
                        />
                      </TableCell>
                    </TableRow>
                  );
                })}
              </Table>
            ) : (
              <div class="no-runs-message">
                <p>No best runs found for this season.</p>
              </div>
            )}
          </div>
        );
      })}
    </div>
  )
}

<script is:inline>
  (() => {
    const container = document.getElementById("player-best-runs");
    if (!container) return;
    const select = container.querySelector("[data-season-select]");
    if (!select) return;

    select.addEventListener("change", (event) => {
      const target = event.target;
      if (!(target instanceof HTMLSelectElement)) {
        return;
      }
      const selectedSeason = target.value;
      container.querySelectorAll("[data-season]").forEach((section) => {
        const isActive = section.getAttribute("data-season") === selectedSeason;
        section.setAttribute("data-active", isActive ? "true" : "false");
      });

      const url = new URL(window.location.href);
      if (selectedSeason) {
        url.searchParams.set("season", selectedSeason);
      } else {
        url.searchParams.delete("season");
      }

      const newSearch = url.searchParams.toString();
      const nextUrl = newSearch ? `${url.pathname}?${newSearch}` : url.pathname;
      window.history.replaceState({}, "", nextUrl);
    });
  })();
</script>


---
import type { BestRun } from "../../../lib/t
ypes";
import Table from "../../Table/Table.astro";
import TableRow from "../../Table/TableRow.a
stro";
import TableCell from "../../Table/TableCell
.astro";
import TeamComposition from "../../Leaderboa
rd/TeamComposition/TeamComposition.astro";
import { buildLeaderboardURL } from "../../.
./lib/utils";
import DungeonTime from "../../DungeonTime/D
ungeonTime.astro";
import { formatRankingWithBracket } from "..
/../../lib/ranking-utils";
import { getDungeonIconUrl } from "../../../
lib/dungeonIcons";
import { getEffectiveRealmSlug } from "../..
/../lib/realms";
import "./PlayerBestRuns.scss";

interface SeasonOption {
  id: string;
  label: string;
}

interface Props {
  bestRuns?: Record<string, BestRun>;
  mode?: "full" | "compact";
  showSectionWrapper?: boolean;
  class?: string;
  playerRegion?: string;
  playerRealmSlug?: string;
  seasonId?: string | number;
  seasonOptions?: SeasonOption[];
  seasonRuns?: Record<string, Record<string,
 BestRun>>;
}

const {
  bestRuns,
  mode = "full",
  showSectionWrapper = true,
  class: className,
  playerRegion,
  playerRealmSlug,
  seasonId,
  seasonOptions = [],
  seasonRuns,
} = Astro.props;

const baseRunsArray = bestRuns ? Object.valu
es(bestRuns) : [];
const normalizedSeasonId =
  typeof seasonId === "number" ? String(seas
onId) : seasonId || null;
const leaderboardRealmSlug =
  getEffectiveRealmSlug(playerRegion, player
RealmSlug) || playerRealmSlug || "";
const componentId = "player-best-runs";
const seasonSelectId = "player-best-runs-sea
son-select";

type SeasonEntry = {
  id: string;
  label: string;
  runs: BestRun[];
};

const seasonEntries: SeasonEntry[] =
  seasonOptions.length > 0
    ? seasonOptions.map((option) => ({
        id: option.id,
        label: option.label,
        runs:
          (seasonRuns && seasonRuns[option.i
d]
            ? Object.values(seasonRuns[optio
n.id])
            : option.id === normalizedSeason
Id
              ? baseRunsArray
              : []) || [],
      }))
    : [
        {
          id: normalizedSeasonId || "current
",
          label: normalizedSeasonId ? `Seaso
n ${normalizedSeasonId}` : "Season",
          runs: baseRunsArray,
        },
      ];

const selectedSeasonId =
  seasonEntries.find((entry) => entry.id ===
 normalizedSeasonId)?.id ||
  seasonEntries[0]?.id ||
  null;

const shouldShowSeasonSelector = seasonEntri
es.length > 1;
---

{
  showSectionWrapper && (
    <div class="profile-section">
      <h3 class="section-title">Best Times P
er Dungeon</h3>
      <div
        id={componentId}
        class={`player-best-runs ${className
 || ""}`.trim()}
        data-component="player-best-runs"
      >
        {shouldShowSeasonSelector && (
          <div class="best-runs-controls">
            <div class="filter-group">
              <label for={seasonSelectId}>Se
ason</label>
              <select id={seasonSelectId} da
ta-season-select>
                {seasonEntries.map((entry) =
> (
                  <option
                    value={entry.id}
                    selected={entry.id === s
electedSeasonId}
                  >
                    {entry.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
        )}

        {seasonEntries.map((entry) => {
          const seasonNumber = Number(entry.
id);
          const leaderboardUrlOpts =
            !Number.isNaN(seasonNumber) && e
ntry.id !== "current"
              ? { season: seasonNumber }
              : undefined;

          return (
            <div
              class="best-runs-season"
              data-season={entry.id}
              data-active={entry.id === sele
ctedSeasonId ? "true" : "false"}
            >
              {entry.runs.length > 0 ? (
                <Table mode="best-runs">
                  <div slot="header" class="
table-header-cell">
                    Dungeon
                  </div>
                  <div slot="header" class="
table-header-cell">
                    Time
                  </div>
                  <div slot="header" class="
table-header-cell">
                    Team
                  </div>
                  <div slot="header" class="
table-header-cell">
                    Global
                  </div>
                  <div slot="header" class="
table-header-cell">
                    Region
                  </div>
                  <div slot="header" class="
table-header-cell">
                    Realm
                  </div>

                  {entry.runs.map((run) => {
                    const dungeonSlug = (run
 as any).dungeon_slug || "";
                    const iconUrl = getDunge
onIconUrl(
                      dungeonSlug,
                      run.dungeon_name,
                    );

                    const globalRankingValue
 =
                      typeof (run as any).gl
obal_ranking_filtered ===
                        "number" && (run as 
any).global_ranking_filtered > 0
                        ? (run as any).globa
l_ranking_filtered
                        : (run as any).globa
l_ranking;
                    const globalBracket =
                      (run as any).global_pe
rcentile_bracket ||
                      (run as any).percentil
e_bracket ||
                      "";

                    const regionalRankingVal
ue =
                      typeof (run as any).re
gional_ranking_filtered ===
                        "number" && (run as 
any).regional_ranking_filtered > 0
                        ? (run as any).regio
nal_ranking_filtered
                        : run.regional_ranki
ng;
                    const realmRankingValue 
=
                      typeof (run as any).re
alm_ranking_filtered === "number" &&
                      (run as any).realm_ran
king_filtered > 0
                        ? (run as any).realm
_ranking_filtered
                        : run.realm_ranking;

                    const regionalBracket =
                      (run as any).regional_
percentile_bracket ||
                      run.percentile_bracket
 ||
                      "";
                    const realmBracket =
                      (run as any).realm_per
centile_bracket ||
                      run.percentile_bracket
 ||
                      "";

                    const globalURL = buildL
eaderboardURL(
                      "global",
                      "all",
                      dungeonSlug,
                      undefined,
                      leaderboardUrlOpts,
                    );
                    const regionalURL = play
erRegion
                      ? buildLeaderboardURL(
                          playerRegion,
                          "all",
                          dungeonSlug,
                          undefined,
                          leaderboardUrlOpts
,
                        )
                      : "#";
                    const realmURL =
                      playerRegion && leader
boardRealmSlug
                        ? buildLeaderboardUR
L(
                            playerRegion,
                            leaderboardRealm
Slug,
                            dungeonSlug,
                            undefined,
                            leaderboardUrlOp
ts,
                          )
                        : "#";

                    const members =
                      (run as any).all_membe
rs ||
                      (run as any).team_memb
ers ||
                      [];

                    return (
                      <TableRow>
                        <TableCell label="Du
ngeon">
                          <div class="dungeo
n-cell">
                            {iconUrl && (
                              <img
                                src={iconUrl
}
                                alt={run.dun
geon_name}
                                class="dunge
on-icon"
                              />
                            )}
                            <span class="dun
geon-name">{run.dungeon_name}</span>
                          </div>
                        </TableCell>
                        <TableCell label="Ti
me">
                          <DungeonTime
                            dungeonId={run.d
ungeon_id}
                            durationMs={run.
duration}
                          />
                        </TableCell>
                        <TableCell label="Te
am">
                          <TeamComposition
                            members={members
}
                            currentRegion={p
layerRegion || ""}
                            currentRealm={pl
ayerRealmSlug || ""}
                          />
                        </TableCell>
                        <TableCell
                          label="Global"
                          class="ranking-cel
l ranking-global"
                        >
                          <a
                            href={globalURL}
                            class="rank-link
"
                            set:html={format
RankingWithBracket(
                              globalRankingV
alue,
                              globalBracket,
                            )}
                          />
                        </TableCell>
                        <TableCell
                          label="Region"
                          class="ranking-cel
l ranking-region"
                        >
                          <a
                            href={regionalUR
L}
                            class="rank-link
"
                            set:html={format
RankingWithBracket(
                              regionalRankin
gValue,
                              regionalBracke
t,
                            )}
                          />
                        </TableCell>
                        <TableCell
                          label="Realm"
                          class="ranking-cel
l ranking-realm"
                        >
                          <a
                            href={realmURL}
                            class="rank-link
"
                            set:html={format
RankingWithBracket(
                              realmRankingVa
lue,
                              realmBracket,
                            )}
                          />
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </Table>
              ) : (
                <div class="no-runs-message"
>
                  <p>No best runs found for 
this season.</p>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  )
}

{
  !showSectionWrapper && (
    <div
      id={componentId}
      class={`player-best-runs ${className |
| ""}`.trim()}
      data-component="player-best-runs"
    >
      {shouldShowSeasonSelector && (
        <div class="best-runs-controls">
          <div class="filter-group">
            <label for={seasonSelectId}>Seas
on</label>
            <select id={seasonSelectId} data
-season-select>
              {seasonEntries.map((entry) => 
(
                <option
                  value={entry.id}
                  selected={entry.id === sel
ectedSeasonId}
                >
                  {entry.label}
                </option>
              ))}
            </select>
          </div>
        </div>
      )}

      {seasonEntries.map((entry) => {
        const seasonNumber = Number(entry.id
);
        const leaderboardUrlOpts =
          !Number.isNaN(seasonNumber) && ent
ry.id !== "current"
            ? { season: seasonNumber }
            : undefined;

        return (
          <div
            class="best-runs-season"
            data-season={entry.id}
            data-active={entry.id === select
edSeasonId ? "true" : "false"}
          >
            {entry.runs.length > 0 ? (
              <Table mode="best-runs">
                <div slot="header" class="ta
ble-header-cell">
                  Dungeon
                </div>
                <div slot="header" class="ta
ble-header-cell">
                  Time
                </div>
                <div slot="header" class="ta
ble-header-cell">
                  Team
                </div>
                <div slot="header" class="ta
ble-header-cell">
                  Global
                </div>
                <div slot="header" class="ta
ble-header-cell">
                  Region
                </div>
                <div slot="header" class="ta
ble-header-cell">
                  Realm
                </div>

                {entry.runs.map((run) => {
                  const dungeonSlug = (run a
s any).dungeon_slug || "";
                  const iconUrl = getDungeon
IconUrl(
                    dungeonSlug,
                    run.dungeon_name,
                  );

                  const globalRankingValue =
                    typeof (run as any).glob
al_ranking_filtered === "number" &&
                    (run as any).global_rank
ing_filtered > 0
                      ? (run as any).global_
ranking_filtered
                      : (run as any).global_
ranking;
                  const globalBracket =
                    (run as any).global_perc
entile_bracket ||
                    (run as any).percentile_
bracket ||
                    "";

                  const regionalRankingValue
 =
                    typeof (run as any).regi
onal_ranking_filtered ===
                      "number" && (run as an
y).regional_ranking_filtered > 0
                      ? (run as any).regiona
l_ranking_filtered
                      : run.regional_ranking
;
                  const realmRankingValue =
                    typeof (run as any).real
m_ranking_filtered === "number" &&
                    (run as any).realm_ranki
ng_filtered > 0
                      ? (run as any).realm_r
anking_filtered
                      : run.realm_ranking;

                  const regionalBracket =
                    (run as any).regional_pe
rcentile_bracket ||
                    run.percentile_bracket |
|
                    "";
                  const realmBracket =
                    (run as any).realm_perce
ntile_bracket ||
                    run.percentile_bracket |
|
                    "";

                  const globalURL = buildLea
derboardURL(
                    "global",
                    "all",
                    dungeonSlug,
                    undefined,
                    leaderboardUrlOpts,
                  );
                  const regionalURL = player
Region
                    ? buildLeaderboardURL(
                        playerRegion,
                        "all",
                        dungeonSlug,
                        undefined,
                        leaderboardUrlOpts,
                      )
                    : "#";
                  const realmURL =
                    playerRegion && leaderbo
ardRealmSlug
                      ? buildLeaderboardURL(
                          playerRegion,
                          leaderboardRealmSl
ug,
                          dungeonSlug,
                          undefined,
                          leaderboardUrlOpts
,
                        )
                      : "#";

                  const members =
                    (run as any).all_members
 || (run as any).team_members || [];

                  return (
                    <TableRow>
                      <TableCell label="Dung
eon">
                        <div class="dungeon-
cell">
                          {iconUrl && (
                            <img
                              src={iconUrl}
                              alt={run.dunge
on_name}
                              class="dungeon
-icon"
                            />
                          )}
                          <span class="dunge
on-name">{run.dungeon_name}</span>
                        </div>
                      </TableCell>
                      <TableCell label="Time
">{duration}</TableCell>
                      <TableCell label="Team
">
                        <TeamComposition
                          members={members}
                          currentRegion={pla
yerRegion || ""}
                          currentRealm={play
erRealmSlug || ""}
                        />
                      </TableCell>
                      <TableCell
                        label="Global"
                        class="ranking-cell 
ranking-global"
                      >
                        <a
                          href={globalURL}
                          class="rank-link"
                          set:html={formatRa
nkingWithBracket(
                            globalRankingVal
ue,
                            globalBracket,
                          )}
                        />
                      </TableCell>
                      <TableCell
                        label="Region"
                        class="ranking-cell 
ranking-region"
                      >
                        <a
                          href={regionalURL}
                          class="rank-link"
                          set:html={formatRa
nkingWithBracket(
                            regionalRankingV
alue,
                            regionalBracket,
                          )}
                        />
                      </TableCell>
                      <TableCell
                        label="Realm"
                        class="ranking-cell 
ranking-realm"
                      >
                        <a
                          href={realmURL}
                          class="rank-link"
                          set:html={formatRa
nkingWithBracket(
                            realmRankingValu
e,
                            realmBracket,
                          )}
                        />
                      </TableCell>
                    </TableRow>
                  );
                })}
              </Table>
            ) : (
              <div class="no-runs-message">
                <p>No best runs found for th
is season.</p>
              </div>
            )}
          </div>
        );
      })}
    </div>
  )
}

<script is:inline>
  (() => {
    const container = document.getElementByI
d("player-best-runs");
    if (!container) return;
    const select = container.querySelector("
[data-season-select]");
    if (!select) return;

    select.addEventListener("change", (event
) => {
      const target = event.target;
      if (!(target instanceof HTMLSelectElem
ent)) {
        return;
      }
      const selectedSeason = target.value;
      container.querySelectorAll("[data-seas
on]").forEach((section) => {
        const isActive = section.getAttribut
e("data-season") === selectedSeason;
        section.setAttribute("data-active", 
isActive ? "true" : "false");
      });

      const url = new URL(window.location.hr
ef);
      if (selectedSeason) {
        url.searchParams.set("season", selec
tedSeason);
      } else {
        url.searchParams.delete("season");
      }

      const newSearch = url.searchParams.toS
tring();
      const nextUrl = newSearch ? `${url.pat
hname}?${newSearch}` : url.pathname;
      window.history.replaceState({}, "", ne
xtUrl);
    });
  })();
</script>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET