Merge pull request #466 from softwaremagico/465-tournament-brackets-t…

…wo-winners-arrows-are-not-shown-for-one-group

Improved arrows drawing

README.md

@@ -8,7 +8,7 @@
 [![GitHub commit activity](https://img.shields.io/github/commit-activity/y/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![GitHub last commit](https://img.shields.io/github/last-commit/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![CircleCI](https://circleci.com/gh/softwaremagico/KendoTournamentManager.svg?style=shield)](https://circleci.com/gh/softwaremagico/KendoTournamentManager)
-[![Time](https://img.shields.io/badge/development-624.5h-blueviolet.svg)]()
+[![Time](https://img.shields.io/badge/development-625h-blueviolet.svg)]()
 
 [![Powered by](https://img.shields.io/badge/powered%20by%20java-orange.svg?logo=OpenJDK&logoColor=white)]()
 [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=kendo-tournament-backend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=kendo-tournament-backend)

frontend/src/app/components/tournament-brackets-editor/tournament-brackets/arrow/arrow.component.ts

@@ -11,6 +11,7 @@ import {BracketsMeasures} from "../brackets-measures";
 export class ArrowComponent implements OnInit {
 
   public static readonly ARROW_SIZE: number = 30;
+  public static readonly WINNER_SEPARATION: number = 15;
   arrow_size: number = ArrowComponent.ARROW_SIZE;
 
   @Input()
@@ -35,7 +36,10 @@ export class ArrowComponent implements OnInit {
   groupDestination: number;
 
   @Input()
-  winner: number = 1;
+  numberOfWinnersFirstLevel: number = 1;
+
+  @Input()
+  winner: number = 0;
 
   totalTeams: number;
 
@@ -59,9 +63,25 @@ export class ArrowComponent implements OnInit {
 
   generateCoordinates(): void {
     this.x1 = this.getArrowX1Coordinate(this.level, this.groupSource);
-    this.y1 = this.getArrowY1Coordinate(this.level, this.groupSource);
+    this.y1 = this.getArrowY1Coordinate(this.level, this.groupSource, this.winner);
     this.x2 = this.getArrowX2Coordinate(this.level + 1, this.groupDestination);
     this.y2 = this.getArrowY2Coordinate(this.level + 1, this.groupSource, this.groupDestination);
+    if (this.numberOfWinnersFirstLevel > 1 && this.level == 0) {
+      if (this.winner == 0) {
+        this.y1 -= ArrowComponent.WINNER_SEPARATION;
+        this.y2 -= ArrowComponent.WINNER_SEPARATION;
+      } else {
+        this.y1 += ArrowComponent.WINNER_SEPARATION;
+        this.y2 += ArrowComponent.WINNER_SEPARATION;
+      }
+    }
+    if (this.level > 0) {
+      if (this.y1 < this.y2) {
+        this.y2 -= ArrowComponent.WINNER_SEPARATION;
+      } else {
+        this.y2 += ArrowComponent.WINNER_SEPARATION;
+      }
+    }
     this.height = Math.max(this.y2, this.y1) + ArrowComponent.ARROW_SIZE / 2;
     this.width = Math.max(this.x2, this.x1);
   }
@@ -70,7 +90,7 @@ export class ArrowComponent implements OnInit {
     return BracketsMeasures.GROUP_WIDTH * (level + 1) + BracketsMeasures.LEVEL_SEPARATION * level + 5;
   }
 
-  getArrowY1Coordinate(level: number, group: number): number {
+  getArrowY1Coordinate(level: number, group: number, winner: number): number {
     return this.getGroupTopSeparation(level, group, this.groupsByLevel) + this.getGroupHigh(level, group) / 2;
   }
 
@@ -79,11 +99,7 @@ export class ArrowComponent implements OnInit {
   }
 
   getArrowY2Coordinate(column: number, sourceGroupIndex: number, destinationGroupIndex: number): number {
-    let correction: number = 15;
-    if (sourceGroupIndex % 2 === 0) {
-      correction = -correction;
-    }
-    return this.getGroupTopSeparation(column, destinationGroupIndex, this.groupsByLevel) + this.getGroupHigh(column, sourceGroupIndex) / 2 + correction;
+    return this.getGroupTopSeparation(column, destinationGroupIndex, this.groupsByLevel) + this.getGroupHigh(column, sourceGroupIndex) / 2;
   }
 
 }

frontend/src/app/components/tournament-brackets-editor/tournament-brackets/tournament-brackets.component.html

@@ -14,7 +14,8 @@
     <app-arrow [color]="g.winner==0 ? '#001239' : '#4d6d95'"
                [getGroupTopSeparation]="getGroupTopSeparation"
                [getGroupHigh]="getGroupHigh" [groupsByLevel]="groupsByLevel"
-               [level]="level" [groupSource]="g.src" [groupDestination]="g.dest" [winner]="g.winner"></app-arrow>
+               [level]="level" [groupSource]="g.src" [groupDestination]="g.dest"
+               [winner]="g.winner" [numberOfWinnersFirstLevel]="numberOfWinnersFirstLevel" ></app-arrow>
   </div>
   <app-group-container *ngFor="let group of groupsByLevel.get(level); let g = index" [level]="level" [index]="g"
                        [groupsByLevel]="groupsByLevel" [tournament]="tournament" [droppingDisabled]="droppingDisabled"

frontend/src/app/components/tournament-brackets-editor/tournament-brackets/tournament-brackets.component.ts

@@ -17,6 +17,8 @@ export class TournamentBracketsComponent implements OnInit {
   @Input()
   droppingDisabled: boolean;
 
+  numberOfWinnersFirstLevel: number;
+
   totalTeams: number;
 
   relations: Map<number, { src: number, dest: number, winner: number }[]>;
@@ -40,6 +42,16 @@ export class TournamentBracketsComponent implements OnInit {
       winner: number,
     }[]>): void => {
       this.relations = _relations;
+      this.numberOfWinnersFirstLevel = 0;
+      _relations.forEach((value: {
+        src: number,
+        dest: number,
+        winner: number,
+      }[], key: number): void => {
+        value.forEach(value1 => {
+          this.numberOfWinnersFirstLevel = Math.max(this.numberOfWinnersFirstLevel, value1.winner + 1);
+        });
+      });
     });
   }