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

---
// Reusable stats card. Same component renders both the per-character ranks
// and the per-account ranks on the player profile - the props are the same
// shape because both feeds were designed to mirror each other in players.go.
import { formatDurationMMSS } from "../../../lib/utils";
import { formatRankingWithBracket } from "../../../lib/ranking-utils";
import "./RanksCard.scss";

interface Props {
  title: string;
  // Subheading shown below the title - e.g. character class+spec, or "3 alts".
  subtitle?: string;
  combinedTime?: number;
  combinedTimeBracket?: string;
  globalRanking?: number;
  globalBracket?: string;
  regionalRanking?: number;
  regionalBracket?: string;
  regionLabel?: string; // e.g. "EU" - shown above the regional rank
  realmRanking?: number;
  realmBracket?: string;
  realmLabel?: string; // e.g. "Garalon" - shown above the realm rank
  totalRuns?: number;
}

const {
  title,
  subtitle,
  combinedTime,
  combinedTimeBracket,
  globalRanking,
  globalBracket,
  regionalRanking,
  regionalBracket,
  regionLabel = "",
  realmRanking,
  realmBracket,
  realmLabel = "Realm",
  totalRuns,
} = Astro.props;
---

<section class="ranks-card">
  <header class="ranks-card__header">
    <h2 class="ranks-card__title">{title}</h2>
    {subtitle && <div class="ranks-card__subtitle">{subtitle}</div>}
  </header>

  <div class="ranks-card__stats">
    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">Time</div>
      <div
        class:list={[
          "ranks-card__stat-value",
          combinedTimeBracket && `bracket-${combinedTimeBracket}`,
        ]}
      >
        {combinedTime ? formatDurationMMSS(combinedTime) : "-"}
      </div>
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">Global</div>
      <div
        class="ranks-card__stat-value"
        set:html={formatRankingWithBracket(globalRanking, globalBracket)}
      />
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">{regionLabel || "Region"}</div>
      <div
        class="ranks-card__stat-value"
        set:html={formatRankingWithBracket(regionalRanking, regionalBracket)}
      />
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">{realmLabel}</div>
      <div
        class="ranks-card__stat-value"
        set:html={formatRankingWithBracket(realmRanking, realmBracket)}
      />
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">Runs</div>
      <div class="ranks-card__stat-value">
        {typeof totalRuns === "number" ? totalRuns.toLocaleString() : "-"}
      </div>
    </div>
  </div>
</section>


---
// Reusable stats card. Same component rende
rs both the per-character ranks
// and the per-account ranks on the player p
rofile - the props are the same
// shape because both feeds were designed to
 mirror each other in players.go.
import { formatDurationMMSS } from "../../..
/lib/utils";
import { formatRankingWithBracket } from "..
/../../lib/ranking-utils";
import "./RanksCard.scss";

interface Props {
  title: string;
  // Subheading shown below the title - e.g.
 character class+spec, or "3 alts".
  subtitle?: string;
  combinedTime?: number;
  combinedTimeBracket?: string;
  globalRanking?: number;
  globalBracket?: string;
  regionalRanking?: number;
  regionalBracket?: string;
  regionLabel?: string; // e.g. "EU" - shown
 above the regional rank
  realmRanking?: number;
  realmBracket?: string;
  realmLabel?: string; // e.g. "Garalon" - s
hown above the realm rank
  totalRuns?: number;
}

const {
  title,
  subtitle,
  combinedTime,
  combinedTimeBracket,
  globalRanking,
  globalBracket,
  regionalRanking,
  regionalBracket,
  regionLabel = "",
  realmRanking,
  realmBracket,
  realmLabel = "Realm",
  totalRuns,
} = Astro.props;
---

<section class="ranks-card">
  <header class="ranks-card__header">
    <h2 class="ranks-card__title">{title}</h
2>
    {subtitle && <div class="ranks-card__sub
title">{subtitle}</div>}
  </header>

  <div class="ranks-card__stats">
    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">Ti
me</div>
      <div
        class:list={[
          "ranks-card__stat-value",
          combinedTimeBracket && `bracket-${
combinedTimeBracket}`,
        ]}
      >
        {combinedTime ? formatDurationMMSS(c
ombinedTime) : "-"}
      </div>
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">Gl
obal</div>
      <div
        class="ranks-card__stat-value"
        set:html={formatRankingWithBracket(g
lobalRanking, globalBracket)}
      />
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">{r
egionLabel || "Region"}</div>
      <div
        class="ranks-card__stat-value"
        set:html={formatRankingWithBracket(r
egionalRanking, regionalBracket)}
      />
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">{r
ealmLabel}</div>
      <div
        class="ranks-card__stat-value"
        set:html={formatRankingWithBracket(r
ealmRanking, realmBracket)}
      />
    </div>

    <div class="ranks-card__stat">
      <div class="ranks-card__stat-label">Ru
ns</div>
      <div class="ranks-card__stat-value">
        {typeof totalRuns === "number" ? tot
alRuns.toLocaleString() : "-"}
      </div>
    </div>
  </div>
</section>

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