match-result simplification

src/app/components/match-result/match-result.component.html

@@ -7,18 +7,14 @@
         <b>{{ data.group.name }} {{ data.round.name }}</b>
       </div>
     </mat-grid-tile>
-    <mat-grid-tile>
-      <button type="button" class="btn btn-primary btn-lg" (click)="set21(1, 1)">21</button>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <button type="button" class="btn btn-primary btn-lg" (click)="set21(1, 2)">21</button>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <button type="button" class="btn btn-primary btn-lg" (click)="set21(1, 3)">21</button>
-    </mat-grid-tile>
 
+    @for (gameNum of [1, 2, 3]; track gameNum) {
+      <mat-grid-tile>
+        <button type="button" class="btn btn-primary btn-lg" (click)="set21(1, gameNum)">21</button>
+      </mat-grid-tile>
+    }
     <mat-grid-tile colspan="2">
-      <div class="w-100" [ngClass]="{'winner': validateResult() == 1}">
+      <div class="w-100" [ngClass]="{'winner': isValidResult == 1}">
         <app-team-display
           [team]="data.match.team1"
           [event]="data.event"
@@ -28,24 +24,23 @@
       </div>
     </mat-grid-tile>
 
+    @for (game of result.games; track $index; let i = $index) {
       <mat-grid-tile>
-      <mat-form-field appearance="outline" (change)="validateResult()">
-        <input matInput type="number" min="0" max="30" [(ngModel)]="result.games[0].score1">
-      </mat-form-field>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <mat-form-field appearance="outline" (change)="validateResult()">
-        <input matInput type="number" min="0" max="30" [(ngModel)]="result.games[1].score1">
-      </mat-form-field>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <mat-form-field appearance="outline" (change)="validateResult()">
-        <input matInput type="number" min="0" max="30" [(ngModel)]="result.games[2].score1">
+        <mat-form-field appearance="outline">
+          <input matInput
+                 type="number"
+                 min="0"
+                 max="30"
+                 [(ngModel)]="game.score1"
+                 (blur)="complementScores()"
+                 (ngModelChange)="validateResult()"
+                 [tabindex]="i * 2 + 1">
         </mat-form-field>
       </mat-grid-tile>
+    }
 
     <mat-grid-tile colspan="2">
-      <div class="w-100" [ngClass]="{'winner': validateResult() == -1}">
+      <div class="w-100" [ngClass]="{'winner': isValidResult == -1}">
         <app-team-display
           [team]="data.match.team2"
           [event]="data.event"
@@ -54,39 +49,34 @@
         </app-team-display>
       </div>
     </mat-grid-tile>
-    <mat-grid-tile>
-      <mat-form-field appearance="outline" (change)="validateResult()">
-        <input matInput type="number" min="0" max="30" [(ngModel)]="result.games[0].score2">
-      </mat-form-field>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <mat-form-field appearance="outline" (change)="validateResult()">
-        <input matInput type="number" min="0" max="30" [(ngModel)]="result.games[1].score2">
-      </mat-form-field>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <mat-form-field appearance="outline" (change)="validateResult()">
-        <input matInput type="number" min="0" max="30" [(ngModel)]="result.games[2].score2">
-      </mat-form-field>
-    </mat-grid-tile>
 
+    @for (game of result.games; track $index; let i = $index) {
       <mat-grid-tile>
+        <mat-form-field appearance="outline">
+          <input matInput
+                 type="number"
+                 min="0"
+                 max="30"
+                 [(ngModel)]="game.score2"
+                 (blur)="complementScores()"
+                 (ngModelChange)="validateResult()"
+                 [tabindex]="i * 2 + 2">
+        </mat-form-field>
+      </mat-grid-tile>
+    }
+    <mat-grid-tile></mat-grid-tile>
+    <mat-grid-tile></mat-grid-tile>
 
-    </mat-grid-tile>
+    @for (gameNum of [1, 2, 3]; track gameNum) {
       <mat-grid-tile>
+        <button type="button" class="btn btn-primary btn-lg" (click)="set21(2, gameNum)">21</button>
       </mat-grid-tile>
-    <mat-grid-tile>
-      <button type="button" class="btn btn-primary btn-lg" (click)="set21(2, 1)">21</button>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <button type="button" class="btn btn-primary btn-lg" (click)="set21(2, 2)">21</button>
-    </mat-grid-tile>
-    <mat-grid-tile>
-      <button type="button" class="btn btn-primary btn-lg" (click)="set21(2, 3)">21</button>
-    </mat-grid-tile>
+    }
+
   </mat-grid-list>
 </mat-dialog-content>
+
 <mat-dialog-actions>
   <button mat-button (click)="onAnnulerenClick()">Annuleren</button>
-  <button mat-button [disabled]="validateResult() == 0" [mat-dialog-close]="result">Opslaan</button>
+  <button mat-button [disabled]="isValidResult == 0" [mat-dialog-close]="result">Opslaan</button>
 </mat-dialog-actions>

src/app/components/match-result/match-result.component.ts

@@ -51,6 +51,7 @@ import {Tournament} from "../../model/tournament";
 export class MatchResultComponent {
 
   result: Result = new Result();
+  isValidResult: number = 0;
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: {match: Match, tournament: Tournament, event: Event, group: Group, round: Round}) {
     this.result.matchId = this.data.match.id;
@@ -67,6 +68,8 @@ export class MatchResultComponent {
         this.result.games.push(new Game());
       }
     }
+
+    this.validateResult();
   }
 
   readonly dialogRef = inject(MatDialogRef<MatchResultComponent>);
@@ -79,13 +82,18 @@ export class MatchResultComponent {
       this.result.games[game - 1].score2 = 21;
     }
 
+    this.validateResult();
   }
 
   onAnnulerenClick() {
     this.dialogRef.close();
   }
 
-  validateResult(): number {
+  complementScores() {
+    // console.log("in complementScores");
+  }
+
+  validateResult(): void {
     let valid : boolean = true;
     valid &&= this.gameValid(this.result.games[0].score1, this.result.games[0].score2);
     valid &&= this.gameValid(this.result.games[1].score1, this.result.games[1].score2);
@@ -94,7 +102,7 @@ export class MatchResultComponent {
       valid &&= this.gameValid(this.result.games[2].score1, this.result.games[2].score2);
     }
 
-    return valid ? this.matchResult(this.result) : 0;
+    this.isValidResult = valid ? this.matchResult(this.result) : 0;
   }
 
   gameValid(score1: number, score2: number): boolean {
@@ -117,29 +125,31 @@ export class MatchResultComponent {
   }
 
   matchResult(result: Result): number {
-    let gameBalance = 0;
-    if (result.games[0].score1 < result.games[0].score2) {
-      gameBalance--;
-    } else {
-      gameBalance++;
+    let team1Wins = 0;
+    let team2Wins = 0;
+
+    // Count wins for games 1 and 2
+    if (result.games[0].score1 > result.games[0].score2) team1Wins++;
+    else team2Wins++;
+
+    if (result.games[1].score1 > result.games[1].score2) team1Wins++;
+    else team2Wins++;
+
+    // If match is already decided (2-0), game 3 shouldn't have scores
+    if (Math.max(team1Wins, team2Wins) == 2) {
+      if (result.games[2].score1 != undefined || result.games[2].score2 != undefined) {
+        return 0; // Invalid
       }
-    if (result.games[1].score1 < result.games[1].score2) {
-      gameBalance--;
-    } else {
-      gameBalance++;
-    }
-
-    if (Math.abs(gameBalance) == 2 && (result.games[2].score1 != undefined || result.games[2].score2 != undefined)) {
-      return 0;
+      return team1Wins > team2Wins ? 1 : -1;
     }
 
+    // Match is 1-1, check game 3
     if (result.games[2].score1 != undefined && result.games[2].score2 != undefined) {
-      if (result.games[2].score1 < result.games[2].score2) {
-        gameBalance--;
-      } else {
-        gameBalance++;
+      if (result.games[2].score1 > result.games[2].score2) team1Wins++;
+      else team2Wins++;
+      return team1Wins > team2Wins ? 1 : -1;
     }
-    }
-    return Math.sign(gameBalance);
+
+    return 0; // Incomplete
   }
 }