nise/nise-frontend/src/app/view-score/view-score.component.html

<ng-container *ngIf="this.isLoading">
  <div class="main term">
    <div class="text-center">
      Loading, please wait...
    </div>
  </div>
</ng-container>
<ng-container *ngIf="this.error">
  <div class="main term">
    <div class="text-center">
      An error occured. Maybe try again in a bit?
    </div>
  </div>
</ng-container>
<ng-container *ngIf="this.replayData && !this.isLoading && !this.error">
  <div class="main term mb-2" style="padding: 0; width: 882px !important;">

    <div class="score-info">
      <div class="score-info__cover">
        <div class="beatmapset-cover beatmapset-cover--full"
             style="--bg: url('https://assets.ppy.sh/beatmaps/{{ this.replayData.beatmap_beatmapset_id }}/covers/cover.jpg');"></div>
      </div>
      <div class="score-info__item score-info__item--player">
        <div>
          <div>
            <div class="badge-list">
        <span class="badge mod" *ngFor="let mod of this.replayData.mods">
          {{ mod }}
        </span>
            </div>
            <div class="score-player__score mt-2">
              <app-osu-grade [grade]="this.replayData.rank"></app-osu-grade> {{ this.replayData.score | number }}
            </div>
          </div>
          <div class="score-player__row score-player__row--player mt-2">
            Played by <a [routerLink]="['/u/' + this.replayData.user_id ?? this.replayData.username]">{{ this.replayData.username }}</a> <a *ngIf="this.replayData.user_id" class="btn" style="margin-left: 5px" href="https://osu.ppy.sh/users/{{ this.replayData.user_id }}" target="_blank">osu!web</a>
            <ng-container *ngIf="!this.isUserScore">
              <br>
              Submitted on <strong>{{ this.replayData.date }}</strong>
            </ng-container>
          </div>
        </div>
      </div>
    </div>

    <div style="display: flex; justify-content: space-between; margin-bottom: 10px" class="link-list">

      <a style="flex: 1" class="text-center" href="https://osu.ppy.sh/scores/osu/{{ this.replayData.replay_id }}" target="_blank">
        Open in osu!web
      </a>

      <a style="flex: 1" class="text-center" [href]="this.buildCircleguardUrl()" [class.disabled]="!hasReplay()">
        Open in CircleGuard
      </a>

      <a style="flex: 1" class="text-center" [href]="'https://replay.nise.moe/' + this.replayData.replay_id" target="_blank" [class.disabled]="!hasReplay()">
        Open in Replay Viewer
      </a>

    </div>

    <div style="padding: 16px">

      <div style="display: flex; justify-content: space-between;">
        <div style="flex: 1; padding: 20px; background-color: #171717b8;" class="text-center">
          <h2>
            {{ this.replayData.beatmap_title }} <span class="text-muted">by</span> {{ this.replayData.beatmap_artist }}
          </h2>
          <span class="badge">★{{ this.replayData.beatmap_star_rating | number: '1.0-2' }}</span> {{ this.replayData.beatmap_version }}

          <div class="stats-container">
            <div class="stat" *ngIf="this.replayData.beatmap_total_length">
              <span class="stat-label">Length</span>
              <span class="stat-value">{{ printTotalLength(this.replayData.beatmap_total_length) }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.beatmap_bpm">
              <span class="stat-label">BPM</span>
              <span class="stat-value">{{ this.replayData.beatmap_bpm | number: '1.0-1' }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.beatmap_count_circles">
              <span class="stat-label">Circles</span>
              <span class="stat-value">{{ this.replayData.beatmap_count_circles }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.beatmap_count_sliders">
              <span class="stat-label">Sliders</span>
              <span class="stat-value">{{ this.replayData.beatmap_count_sliders }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.beatmap_count_spinners">
              <span class="stat-label">Spinners</span>
              <span class="stat-value">{{ this.replayData.beatmap_count_spinners }}</span>
            </div>
          </div>
          <table>
            <tr *ngIf="this.replayData.beatmap_cs">
              <td>Circle Size</td>
              <td>{{ this.replayData.beatmap_cs | number: '1.0-1' }}</td>
              <td>
                <app-cute-progressbar [value]="this.replayData.beatmap_cs" [max]="10"></app-cute-progressbar>
              </td>
            </tr>
            <tr *ngIf="this.replayData.beatmap_drain">
              <td>HP Drain</td>
              <td>{{ this.replayData.beatmap_drain | number: '1.0-1' }}</td>
              <td>
                <app-cute-progressbar [value]="this.replayData.beatmap_drain" [max]="10"></app-cute-progressbar>
              </td>
            </tr>
            <tr *ngIf="this.replayData.beatmap_accuracy">
              <td>Accuracy</td>
              <td>{{ this.replayData.beatmap_accuracy | number: '1.0-1' }}</td>
              <td>
                <app-cute-progressbar [value]="this.replayData.beatmap_accuracy" [max]="10"></app-cute-progressbar>
              </td>
            </tr>
            <tr *ngIf="this.replayData.beatmap_ar">
              <td>Approach Rate</td>
              <td>{{ this.replayData.beatmap_ar | number: '1.0-1' }}</td>
              <td>
                <app-cute-progressbar [value]="this.replayData.beatmap_ar" [max]="10"></app-cute-progressbar>
              </td>
            </tr>
          </table>

        </div>
        <div style="flex: 1; padding-right: 10px;">
          <div class="stats-container">
            <div class="stat">
              <span class="stat-label">Accuracy</span>
              <span class="stat-value">{{ calculateAccuracy(this.replayData) | number: '1.2-2' }}%</span>
            </div>
            <div class="stat">
              <span class="stat-label">Max Combo</span>
              <span class="stat-value">{{ this.replayData.max_combo }}x <span *ngIf="this.replayData.perfect" class="badge badge-green">perfect</span></span>
            </div>
            <div class="stat" *ngIf="this.replayData.pp">
              <span class="stat-label">PP</span>
              <span class="stat-value">{{ this.replayData.pp | number: '1.0-0' }}</span>
            </div>
          </div>
          <div class="stats-container">
            <div class="stat">
              <span class="stat-label">300x</span>
              <span class="stat-value">{{ this.replayData.count_300 }}</span>
            </div>
            <div class="stat">
              <span class="stat-label">100x</span>
              <span class="stat-value">{{ this.replayData.count_100 }}</span>
            </div>
            <div class="stat">
              <span class="stat-label">50x</span>
              <span class="stat-value">{{ this.replayData.count_50 }}</span>
            </div>
            <div class="stat">
              <span class="stat-label">Miss</span>
              <span class="stat-value">{{ this.replayData.count_miss }}</span>
            </div>
          </div>
          <div class="stats-container">
            <div class="stat" *ngIf="this.replayData.ur">
              <span class="stat-label">cvUR</span>
              <span class="stat-value">{{ this.replayData.ur | number: '1.2-2' }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.adjusted_ur">
              <span class="stat-label">Adj. cvUR</span>
              <span class="stat-value">{{ this.replayData.adjusted_ur | number: '1.2-2' }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.frametime">
              <span class="stat-label">Frametime</span>
              <span class="stat-value">{{ this.replayData.frametime | number: '1.0-2' }}ms</span>
            </div>
            <div class="stat" *ngIf="this.replayData.hits">
              <span class="stat-label">Edge Hits</span>
              <span class="stat-value">{{ this.replayData.hits }}</span>
            </div>
            <div class="stat" *ngIf="this.replayData.snaps">
              <span class="stat-label">Snaps</span>
              <span class="stat-value">{{ this.replayData.snaps }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="main term mb-2" *ngIf="this.replayData.similar_scores && this.replayData.similar_scores.length > 0">
    <h1># similar replays</h1>
    <table>
      <thead>
      <th class="text-center">Played by</th>
      <th class="text-center">PP</th>
      <th class="text-center">Date</th>
      <th class="text-center">Similarity</th>
      <th class="text-center">Correlation</th>
      <th class="text-center"></th>
      </thead>
      <tbody>
      <tr *ngFor="let score of this.replayData.similar_scores">
        <td class="text-center">
          <a [routerLink]="['/u/' + score.user_id]">{{ score.username }}</a>
        </td>
        <td class="text-center">
          {{ score.pp | number: '1.2-2' }}
        </td>
        <td class="text-center">
          {{ score.date }}
        </td>
        <td class="text-center">
          {{ score.similarity | number: '1.2-3' }}
        </td>
        <td class="text-center">
          {{ score.correlation | number: '1.2-4' }}
        </td>
        <td class="text-center">
          <a class="btn" [routerLink]="['/s/' + score.replay_id]">details</a>
          <a class="btn" style="margin-left: 5px" [routerLink]="['/p/' + score.replay_id + '/' + this.replayData.replay_id]">comparison</a>
        </td>
      </tbody>
    </table>
  </div>

  <div class="main term mb-2" *ngIf="this.replayData.mean_error">
    <h1># nerd stats</h1>
    <table>
      <thead>
      <th></th>
      <th>
        this replay
      </th>
      <th *ngIf="this.replayData.comparable_samples">
        <span title="average values for this beatmap">
          avg. (n={{ this.replayData.comparable_samples }})
        </span>
      </th>
      </thead>
      <tr>
        <td>Mean error</td>
        <td class="text-center">{{ this.replayData.mean_error | number: '1.2-2' }}</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">{{ this.replayData.comparable_mean_error | number: '1.2-2' }}</td>
      </tr>
      <tr>
        <td>Error variance</td>
        <td class="text-center">{{ this.replayData.error_variance | number: '1.2-2'}}</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">{{ this.replayData.comparable_error_variance | number: '1.2-2' }}</td>
      </tr>
      <tr>
        <td>Error Std. deviation</td>
        <td class="text-center">{{ this.replayData.error_standard_deviation | number: '1.2-2'}}</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">{{ this.replayData.comparable_error_standard_deviation | number: '1.2-2' }}</td>
      </tr>
      <tr>
        <td>Min/max error</td>
        <td class="text-center">[{{ this.replayData.minimum_error | number: '1.0-0' }}, {{ this.replayData.maximum_error | number: '1.0-0' }}]</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">[{{ this.replayData.comparable_minimum_error | number: '1.0-0' }}, {{ this.replayData.comparable_maximum_error | number: '1.0-0' }}]</td>
      </tr>
      <tr>
        <td>Coefficient of variation</td>
        <td class="text-center">{{ this.replayData.error_coefficient_of_variation | number: '1.2-2'}}</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">{{ this.replayData.comparable_error_coefficient_of_variation | number: '1.2-2' }}</td>
      </tr>
      <tr>
        <td>Kurtosis</td>
        <td class="text-center">{{ this.replayData.error_kurtosis | number: '1.2-2'}}</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">{{ this.replayData.comparable_error_kurtosis | number: '1.2-2' }}</td>
      </tr>
      <tr>
        <td>Error skewness</td>
        <td class="text-center">{{ this.replayData.error_skewness | number: '1.2-2'}}</td>
        <td *ngIf="this.replayData.comparable_samples" class="text-center">{{ this.replayData.comparable_error_skewness | number: '1.2-2' }}</td>
      </tr>
      <tr>
        <td>Adjusted cvUR</td>
        <td class="text-center">{{ this.replayData.adjusted_ur | number: '1.2-2'}}</td>
        <td *ngIf="this.replayData.comparable_adjusted_ur" class="text-center">{{ this.replayData.comparable_adjusted_ur | number: '1.2-2' }}</td>
      </tr>
    </table>
  </div>

  <ng-container *ngFor="let chart of this.replayData.charts">
    <app-chart [title]="chart.title" [data]="chart.data"></app-chart>
  </ng-container>

  <ng-container *ngIf="hasErrorDistribution()">
    <app-chart-hit-distribution [errorDistribution]="replayData!!.error_distribution" [mods]="replayData!!.mods"></app-chart-hit-distribution>
  </ng-container>
</ng-container>