Invallers

src/app/components/player-display/player-display.component.ts

@@ -0,0 +1,42 @@
+import {Component, Input} from '@angular/core';
+import {Player} from '../../model/player';
+import {Event} from '../../model/event';
+import {Tournament} from '../../model/tournament';
+import {FullNamePipe} from '../../pipes/fullname-pipe';
+import {MatTooltip} from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-player-display',
+  standalone: true,
+  imports: [FullNamePipe, MatTooltip],
+  styleUrls: ['./player-display.component.scss'],
+  template: `
+    @let substitute = getSubstituteForEvent(player, event);
+    <span [class.has-substitute]="substitute"
+          [matTooltip]="substitute ? 'Valt in voor ' + (player | fullName) : ''"
+          matTooltipPosition="below">
+      {{ substitute || (player | fullName) }}
+    </span>
+  `
+})
+export class PlayerDisplayComponent {
+  @Input({ required: true }) player!: Player;
+  @Input({ required: true }) event!: Event;
+  @Input({ required: true }) tournament!: Tournament;
+
+  getSubstituteForEvent(player: Player, event: Event): string | undefined {
+    const tournamentPlayer = this.tournament.tournamentPlayers.find(
+      tp => tp.playerId === player.id
+    );
+    if (!tournamentPlayer) return undefined;
+
+    const substitution = tournamentPlayer.substitutions.find(
+      s => s.event === event.type
+    );
+    if (!substitution) return undefined;
+
+    return this.tournament.tournamentPlayers.find(
+      p => p.id === substitution.substitute
+    )?.name;
+  }
+}