AI Implementation feature(865): Scoreboard: Ranking, Matrix, Event Log and Score Graph (#52)

2026-07-23 05:13:23 +00:00
parent 49d0930780
commit 7c4843d5cc
26 changed files with 3074 additions and 60 deletions
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SCOREBOARD_TABS, ScoreboardTab } from './scoreboard.pure';
+
+interface TabSpec {
+  id: ScoreboardTab;
+  label: string;
+}
+
+const TAB_LABELS: Readonly<Record<ScoreboardTab, string>> = {
+  ranking: 'Ranking',
+  matrix: 'Matrix',
+  'event-log': 'Event Log',
+  graph: 'Score Graph',
+};
+
+@Component({
+  selector: 'app-scoreboard-tabs',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  styles: [`
+    :host { display: block; }
+    nav {
+      display: flex; gap: 6px;
+      border-bottom: 1px solid var(--color-border, #2a2f3a);
+      padding-bottom: 6px;
+      margin-bottom: 12px;
+      overflow-x: auto;
+    }
+    button {
+      padding: 6px 12px;
+      border-radius: var(--radius-sm, 4px);
+      background: var(--color-surface, #1c1f26);
+      color: inherit;
+      border: 1px solid var(--color-border, #2a2f3a);
+      cursor: pointer;
+      font: inherit;
+    }
+    button.active {
+      background: var(--color-primary, #3b82f6);
+      color: var(--color-primary-contrast, #fff);
+      border-color: var(--color-primary, #3b82f6);
+    }
+  `],
+  template: `
+    <nav data-testid="scoreboard-tabs">
+      <button
+        *ngFor="let t of tabs"
+        type="button"
+        [class.active]="t.id === active"
+        [attr.data-testid]="'scoreboard-tab-' + t.id"
+        (click)="select.emit(t.id)"
+      >{{ t.label }}</button>
+    </nav>
+  `,
+})
+export class ScoreboardTabsComponent {
+  @Input({ required: true }) active!: ScoreboardTab;
+  @Output() select = new EventEmitter<ScoreboardTab>();
+
+  readonly tabs: TabSpec[] = SCOREBOARD_TABS.map((id) => ({ id, label: TAB_LABELS[id] }));
+}