diff --git a/TODO.txt b/TODO.txt
index cf9bf4b..b51dfcd 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -32,11 +32,11 @@
Player-registrations: oude toernooien verbergen via knop
Onderdeel afsluiten
Wedstrijd opgave
- Blessures
+ Invallers
Titels pagina's
Authenticatie
Progress indicator tijdens communicatie backend
-
+Bij tellers rekening houden met invallers
https://blog.shhdharmen.me/browser-storage-in-angular-ssr
Won't do / later:
diff --git a/src/app/components/player-display/player-display.component.scss b/src/app/components/player-display/player-display.component.scss
new file mode 100644
index 0000000..9a06314
--- /dev/null
+++ b/src/app/components/player-display/player-display.component.scss
@@ -0,0 +1,4 @@
+.has-substitute {
+ text-decoration-line: underline;
+ text-decoration-style: dotted;
+}
diff --git a/src/app/components/player-display/player-display.component.ts b/src/app/components/player-display/player-display.component.ts
new file mode 100644
index 0000000..b40c7a8
--- /dev/null
+++ b/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);
+
+ {{ substitute || (player | fullName) }}
+
+ `
+})
+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;
+ }
+}
diff --git a/src/app/components/team-display/team-display.component.ts b/src/app/components/team-display/team-display.component.ts
new file mode 100644
index 0000000..2a9ce7f
--- /dev/null
+++ b/src/app/components/team-display/team-display.component.ts
@@ -0,0 +1,32 @@
+import {Component, Input} from '@angular/core';
+import {Event} from '../../model/event';
+import {Tournament} from '../../model/tournament';
+import {PlayerDisplayComponent} from '../player-display/player-display.component';
+import {Team} from "../../model/team";
+
+@Component({
+ selector: 'app-team-display',
+ standalone: true,
+ imports: [PlayerDisplayComponent],
+ template: `
+
| {{ match.team1 | teamText }} | +
+ |
- | -{{ match.team2 | teamText }} | +
+ |
@if (match.status == 'NOT_STARTED') { |