- League
@@ -123,6 +188,14 @@
PPG
{{ statValue(selectedPlayer, 'points_per_game') }}
+
+ APG
+ {{ statValue(selectedPlayer, 'assists_per_game') }}
+
+
+ RPG
+ {{ statValue(selectedPlayer, 'rebounds_per_game') }}
+
TS%
{{ statValue(selectedPlayer, 'true_shooting_percentage') }}
diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
index 1eb6417..ad57baf 100644
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -7,43 +7,97 @@ import { AppComponent } from './app.component';
import { PlayerApiService } from './api/player-api.service';
describe('AppComponent', () => {
+ const samplePlayers = [
+ {
+ id: 1,
+ name: 'Luca Marini',
+ position: 'PG',
+ role: 'Primary ball handler',
+ birth_year: 2001,
+ height_cm: 190,
+ weight_kg: 86,
+ nationality: 'Italy',
+ league: { name: 'Lega Basket Serie A', code: 'LBA', region: 'Europe', country: 'Italy' },
+ team: { name: 'Milano', country: 'Italy' },
+ stats: {
+ games_played: 28,
+ minutes_per_game: '29.40',
+ points_per_game: '16.80',
+ assists_per_game: '6.20',
+ rebounds_per_game: '3.80',
+ efficiency_rating: '20.50',
+ true_shooting_percentage: '59.20',
+ usage_percentage: '25.00',
+ },
+ },
+ {
+ id: 2,
+ name: 'Mateo Santos',
+ position: 'SF',
+ role: '3 and D wing',
+ birth_year: 1999,
+ height_cm: 201,
+ weight_kg: 96,
+ nationality: 'Spain',
+ league: { name: 'Liga Endesa', code: 'ACB', region: 'Europe', country: 'Spain' },
+ team: { name: 'Madrid', country: 'Spain' },
+ stats: {
+ games_played: 25,
+ minutes_per_game: '24.10',
+ points_per_game: '11.20',
+ assists_per_game: '2.10',
+ rebounds_per_game: '5.50',
+ efficiency_rating: '13.70',
+ true_shooting_percentage: '55.80',
+ usage_percentage: '17.50',
+ },
+ },
+ ];
+
it('loads players through the API service', () => {
const api = {
searchPlayers: () =>
of({
- count: 1,
- results: [
- {
- id: 1,
- name: 'Luca Marini',
- position: 'PG',
- role: 'Primary ball handler',
- birth_year: 2001,
- height_cm: 190,
- weight_kg: 86,
- nationality: 'Italy',
- league: { name: 'Lega Basket Serie A', code: 'LBA', region: 'Europe', country: 'Italy' },
- team: { name: 'Milano', country: 'Italy' },
- stats: {
- games_played: 28,
- minutes_per_game: '29.40',
- points_per_game: '16.80',
- assists_per_game: '6.20',
- rebounds_per_game: '3.80',
- efficiency_rating: '20.50',
- true_shooting_percentage: '59.20',
- usage_percentage: '25.00',
- },
- },
- ],
+ count: samplePlayers.length,
+ results: samplePlayers,
}),
} as unknown as PlayerApiService;
const component = new AppComponent(api);
component.search();
- assert.equal(component.players.length, 1);
+ assert.equal(component.players.length, 2);
assert.equal(component.players[0].name, 'Luca Marini');
- assert.equal(component.resultCount, 1);
+ assert.equal(component.resultCount, 2);
+ assert.equal(component.averagePoints, '14.00');
+ assert.equal(component.topEfficiencyPlayer?.name, 'Luca Marini');
+ });
+
+ it('reacts to filter changes without requiring the search button', () => {
+ let calls = 0;
+ const api = {
+ searchPlayers: () => {
+ calls += 1;
+ return of({ count: 0, results: [] });
+ },
+ } as unknown as PlayerApiService;
+ const component = new AppComponent(api);
+
+ component.onFilterChange();
+ component.flushPendingSearch();
+
+ assert.equal(calls, 1);
+ });
+
+ it('sorts the visible scouting board by selected stat', () => {
+ const api = {
+ searchPlayers: () => of({ count: samplePlayers.length, results: samplePlayers }),
+ } as unknown as PlayerApiService;
+ const component = new AppComponent(api);
+
+ component.search();
+ component.sortBy('rebounds_per_game');
+
+ assert.equal(component.players[0].name, 'Mateo Santos');
});
});
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index df81900..25942e4 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -3,7 +3,9 @@ import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { PlayerApiService } from './api/player-api.service';
-import { PlayerFilters, PlayerSummary } from './models';
+import { PlayerFilters, PlayerStats, PlayerSummary } from './models';
+
+type SortKey = 'efficiency_rating' | 'points_per_game' | 'assists_per_game' | 'rebounds_per_game' | 'minutes_per_game';
@Component({
selector: 'app-root',
@@ -13,8 +15,15 @@ import { PlayerFilters, PlayerSummary } from './models';
styleUrl: './app.component.css',
})
export class AppComponent {
- readonly positions = ['', 'PG', 'SG', 'SF', 'PF', 'C'];
- readonly leagues = ['', 'LBA', 'ACB', 'ABA', 'BBL', 'BSL', 'LNB'];
+ readonly positions = ['PG', 'SG', 'SF', 'PF', 'C'];
+ readonly leagues = ['LBA', 'ACB', 'ABA', 'BBL', 'BSL', 'LNB', 'ISBL', 'NBL', 'NZNBL'];
+ readonly sortOptions: Array<{ key: SortKey; label: string }> = [
+ { key: 'efficiency_rating', label: 'EFF' },
+ { key: 'points_per_game', label: 'PPG' },
+ { key: 'assists_per_game', label: 'APG' },
+ { key: 'rebounds_per_game', label: 'RPG' },
+ { key: 'minutes_per_game', label: 'MIN' },
+ ];
filters: PlayerFilters = {
q: '',
@@ -31,6 +40,8 @@ export class AppComponent {
resultCount = 0;
loading = false;
errorMessage = '';
+ activeSort: SortKey = 'efficiency_rating';
+ private pendingSearch: ReturnType | null = null;
constructor(private readonly playerApi: PlayerApiService) {}
@@ -39,12 +50,13 @@ export class AppComponent {
}
search(): void {
+ this.cancelPendingSearch();
this.loading = true;
this.errorMessage = '';
this.playerApi.searchPlayers(this.filters).subscribe({
next: (response) => {
- this.players = response.results;
+ this.players = this.sortPlayers(response.results);
this.resultCount = response.count;
this.selectedPlayer = this.players[0] ?? null;
this.loading = false;
@@ -56,6 +68,19 @@ export class AppComponent {
});
}
+ onFilterChange(): void {
+ this.cancelPendingSearch();
+ this.pendingSearch = setTimeout(() => this.search(), 250);
+ }
+
+ flushPendingSearch(): void {
+ if (!this.pendingSearch) {
+ return;
+ }
+ this.cancelPendingSearch();
+ this.search();
+ }
+
clearFilters(): void {
this.filters = {
q: '',
@@ -70,6 +95,22 @@ export class AppComponent {
this.search();
}
+ togglePosition(position: string): void {
+ this.filters.position = this.filters.position === position ? '' : position;
+ this.onFilterChange();
+ }
+
+ toggleLeague(league: string): void {
+ this.filters.league = this.filters.league === league ? '' : league;
+ this.onFilterChange();
+ }
+
+ sortBy(key: SortKey): void {
+ this.activeSort = key;
+ this.players = this.sortPlayers(this.players);
+ this.selectedPlayer = this.players[0] ?? null;
+ }
+
selectPlayer(player: PlayerSummary): void {
this.selectedPlayer = player;
}
@@ -78,4 +119,52 @@ export class AppComponent {
const value = player.stats?.[key];
return value === undefined || value === null ? '-' : String(value);
}
+
+ get topEfficiencyPlayer(): PlayerSummary | null {
+ return [...this.players].sort((a, b) => this.numericStat(b, 'efficiency_rating') - this.numericStat(a, 'efficiency_rating'))[0] ?? null;
+ }
+
+ get averagePoints(): string {
+ if (this.players.length === 0) {
+ return '0.00';
+ }
+ const total = this.players.reduce((sum, player) => sum + this.numericStat(player, 'points_per_game'), 0);
+ return (total / this.players.length).toFixed(2);
+ }
+
+ get averageEfficiency(): string {
+ if (this.players.length === 0) {
+ return '0.00';
+ }
+ const total = this.players.reduce((sum, player) => sum + this.numericStat(player, 'efficiency_rating'), 0);
+ return (total / this.players.length).toFixed(2);
+ }
+
+ get activeFiltersCount(): number {
+ return [
+ this.filters.q,
+ this.filters.position,
+ this.filters.role,
+ this.filters.league,
+ this.filters.minPoints,
+ this.filters.minAssists,
+ this.filters.minRebounds,
+ this.filters.minEfficiency,
+ ].filter((value) => value !== null && String(value).trim().length > 0).length;
+ }
+
+ private sortPlayers(players: PlayerSummary[]): PlayerSummary[] {
+ return [...players].sort((a, b) => this.numericStat(b, this.activeSort) - this.numericStat(a, this.activeSort));
+ }
+
+ private numericStat(player: PlayerSummary, key: keyof PlayerStats): number {
+ return Number(player.stats?.[key] ?? 0);
+ }
+
+ private cancelPendingSearch(): void {
+ if (this.pendingSearch) {
+ clearTimeout(this.pendingSearch);
+ this.pendingSearch = null;
+ }
+ }
}