From 8909be9694c0618d8bdf1091ae4610009935a384 Mon Sep 17 00:00:00 2001
From: bisco <bisco@younerd.org>
Date: Wed, 3 Jun 2026 23:10:00 +0200
Subject: [PATCH] fix: use select control for role filter

---
 frontend/src/app/app.component.html    | 10 ++++-----
 frontend/src/app/app.component.spec.ts | 18 +++++++++++++++++
 frontend/src/app/app.component.ts      | 28 ++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7784ff9..4c588ab 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -39,12 +39,10 @@
     </label>
     <label>
       Role
-      <input
-        type="text"
-        [(ngModel)]="filters.role"
-        (ngModelChange)="onFilterChange()"
-        placeholder="3 and D, handler, rim runner"
-      >
+      <select [(ngModel)]="filters.role" (ngModelChange)="onFilterChange()">
+        <option value="">Any</option>
+        <option *ngFor="let role of roles" [value]="role">{{ role }}</option>
+      </select>
     </label>
     <label>
       League
diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
index 6787c8f..254389d 100644
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -89,6 +89,24 @@ describe('AppComponent', () => {
     assert.equal(calls, 1);
   });
 
+  it('exposes role options and sends the selected role as a filter', () => {
+    let requestedRole = '';
+    const api = {
+      searchPlayers: (filters: { role: string }) => {
+        requestedRole = filters.role;
+        return of({ count: 0, results: [] });
+      },
+    } as unknown as PlayerApiService;
+    const component = new AppComponent(api);
+
+    assert.ok(component.roles.includes('3 and D wing'));
+
+    component.filters.role = '3 and D wing';
+    component.search();
+
+    assert.equal(requestedRole, '3 and D wing');
+  });
+
   it('shows the loading placeholder only before results exist', () => {
     const api = {
       searchPlayers: () => of({ count: samplePlayers.length, results: samplePlayers }),
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 5c82264..f923d03 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -17,6 +17,34 @@ type SortKey = 'efficiency_rating' | 'points_per_game' | 'assists_per_game' | 'r
 export class AppComponent {
   readonly positions = ['PG', 'SG', 'SF', 'PF', 'C'];
   readonly leagues = ['LBA', 'ACB', 'ABA', 'BBL', 'BSL', 'LNB', 'ISBL', 'NBL', 'NZNBL'];
+  readonly roles = [
+    '3 and D wing',
+    'Change-of-pace guard',
+    'Connector wing',
+    'Defensive playmaker',
+    'Drive and kick guard',
+    'Face-up forward',
+    'Glass cleaner',
+    'Low-post finisher',
+    'Movement shooter',
+    'Off-screen scorer',
+    'Paint anchor',
+    'Paint touch guard',
+    'Pick and roll creator',
+    'Pressure guard',
+    'Primary ball handler',
+    'Pull-up shooter',
+    'Rim protector',
+    'Roll man',
+    'Secondary creator',
+    'Short-roll passer',
+    'Slashing wing',
+    'Stretch four',
+    'Switch defender',
+    'Tempo guard',
+    'Transition wing',
+    'Vertical spacer',
+  ];
   readonly sortOptions: Array<{ key: SortKey; label: string }> = [
     { key: 'efficiency_rating', label: 'EFF' },
     { key: 'points_per_game', label: 'PPG' },