Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/HectorDNC/galactic-tournament-front/llms.txt

Use this file to discover all available pages before exploring further.

The Rankings page, accessible at /battle-statistics, presents a complete leaderboard of every species ordered by their cumulative battle victories. It calls a single API endpoint on load and renders the response in a fully sortable Angular Material table. Each row carries a colour-coded position badge so the top three contenders are immediately distinguishable from the rest of the field.

​
API Endpoint

GET /api/battle-statistics/ranking
Base URL: https://galactic-tournament-app-production.up.railway.app The endpoint returns a RankingResponse[] array. The BattleStatisticsService fetches it with: 
getRanking(): Observable<any[]> {
  return this.http.get<any[]>(`${this.apiUrl}/ranking`);
}

​
Data Model

export interface RankingResponse {
  specieId: number;
  species: Specie;
  victories: number;
}
​
specieId
number
required
Unique identifier of the species. Matches Specie.id.
​
species
Specie
required
The full species object used to display the name and other attributes in the table.
​
victories
number
required
Total number of battles won. Rendered in the Victorias column with bold styling.

​
Example API Response

[
  {
    "specieId": 7,
    "species": {
      "id": 7,
      "name": "Sayajin",
      "powerLevel": 9000,
      "specialAbility": "Super Sayajin Transformation",
      "createdAt": "2024-01-15T10:30:00"
    },
    "victories": 18
  },
  {
    "specieId": 3,
    "species": {
      "id": 3,
      "name": "Namekian",
      "powerLevel": 7500,
      "specialAbility": "Regeneration",
      "createdAt": "2024-01-10T09:00:00"
    },
    "victories": 14
  },
  {
    "specieId": 11,
    "species": {
      "id": 11,
      "name": "Arcosian",
      "powerLevel": 8800,
      "specialAbility": "Power Suppression",
      "createdAt": "2024-02-01T14:15:00"
    },
    "victories": 11
  },
  {
    "specieId": 5,
    "species": {
      "id": 5,
      "name": "Android",
      "powerLevel": 6200,
      "specialAbility": "Infinite Energy Core",
      "createdAt": "2024-03-20T08:45:00"
    },
    "victories": 7
  }
]

​
Ranking Table

The RankingComponent binds the response to a MatTableDataSource and declares three columns: 
displayedColumns: string[] = ['position', 'name', 'victories'];
ColumnHeaderDescription
positionPosiciónAuto-incremented row index rendered as a coloured badge. Not sortable.
nameEspecieSpecies name sourced from element.species?.name. Sortable via mat-sort-header.
victoriesVictoriasVictory count displayed in bold. Sortable via mat-sort-header.

​
Position Badges

The getBadgeColor(position: number) method assigns a semantic colour variant to each position badge using the shared BadgeComponent:
Position (0-based index)MedalBadge colour
0🥇warning (gold)
1🥈primary (silver)
2🥉info (bronze)
3+—light
getBadgeColor(position: number): 'success' | 'warning' | 'error' | 'info' | 'primary' | 'light' | 'dark' {
  if (position === 0) return 'warning';
  if (position === 1) return 'primary';
  if (position === 2) return 'info';
  return 'light';
}
The badge text is formatted as #1, #2, #3, etc., derived from the template’s let i = index expression.
Because position is determined by array index rather than a dedicated sort column, reordering the table by victories (descending) is the recommended way to view standings in their canonical order. The server returns the array pre-sorted by victories, so the default view already reflects the true ranking.

​
Component Architecture

RankingComponent is declared as standalone: true and directly imports CommonModule, MatTableModule, MatSortModule, and the shared BadgeComponent. It is not registered in any NgModule and is loaded as a standalone route component.

​
Client-Side Sorting

The table uses Angular Material’s MatSort directive, wired via @ViewChild(MatSort): 
@ViewChild(MatSort) sort!: MatSort;

ngAfterViewInit(): void {
  if (this.sort) {
    this.dataSource.sort = this.sort;
  }
}
Clicking any sortable column header (Especie or Victorias) toggles between ascending and descending order. Angular Material handles the comparison entirely on the already-fetched dataset — no additional API calls are made when sorting.
The Posición column does not carry a mat-sort-header directive and therefore cannot be used as a sort key. Position badges always reflect the original index in the response array.

​
Loading & Empty States

ConditionBehaviour
loading = trueA “Cargando ranking…” message spans the full table width while the HTTP request is in flight.
Response received, zero rowsA “No hay datos disponibles.” message spans the full table width.
Response received, rows presentThe full table renders with position badges, species names, and victory counts.

Build docs developers (and LLMs) love

Get started for freeTalk to us