feat: 💄 more fixes to the UI and flags are clickable

maxkarnold · Dec 29, 2022 · 7718a10 · 7718a10
1 parent a6848fd
commit 7718a10
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 8 deletions.
diff --git a/src/app/pages/simulation/simulation.component.html b/src/app/pages/simulation/simulation.component.html
@@ -212,6 +212,7 @@ <h1>World Cup Knockouts</h1>
   [nation]="selectedNation"
   [tournament]="tournament"
   (closeDialog)="selectedNation = undefined"
-  [class]="selectedNation ? 'show' : ''"
-  (click)="selectedNation = undefined"
+  (onNationChange)="openNationStats($event)"
+  [class]="isDialogOpen ? 'show' : ''"
+  (click)="selectedNation = undefined; isDialogOpen = false"
 ></app-nation-dialog>
diff --git a/src/app/pages/simulation/simulation.component.scss b/src/app/pages/simulation/simulation.component.scss
@@ -37,9 +37,19 @@ h1 {
     justify-content: center;
     margin: 2rem 0;
 
+    @media screen and (max-width: 600px) {
+      * {
+        width: 100%;
+        height: 3rem;
+      }
+
+      input {
+        touch-action: none;
+      }
+    }
+
     &>div {
-      width: 12rem;
-      margin: 0 1rem;
+      margin: 0 2rem;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -48,6 +58,7 @@ h1 {
 
     .host-nation {
       text-transform: capitalize;
+
     }
   }
 }

diff --git a/src/app/pages/simulation/simulation.component.ts b/src/app/pages/simulation/simulation.component.ts
@@ -23,6 +23,7 @@ export class SimulationComponent {
   @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
     this.selectedNation = undefined;
   }
+  isDialogOpen = false;
   nations = nationsModule;
   nationsList: GroupTeam[] = [];
   hostNation: GroupTeam = {
@@ -149,7 +150,7 @@ export class SimulationComponent {
         g[i][j].gOpp = 0;
         g[i][j].matchesPlayed = 0;
         g[i][j].matchHistory = {
-          qualifiers: [],
+          qualifiers: g[i][j].matchHistory.qualifiers,
           group: [],
           bracket: [],
         };
@@ -599,7 +600,6 @@ export class SimulationComponent {
       this.matchScore(cafTeams[3], cafTeams[6]),
       this.matchScore(cafTeams[4], cafTeams[5]),
     ];
-    teamsQualified.push(...cafQualifiers.map((m) => m.winner));
 
     cafQualifiers.forEach((match) => {
       match.winner.matchHistory.qualifiers.push({ match, opp: match.loser });
@@ -617,6 +617,8 @@ export class SimulationComponent {
       );
     });
 
+    teamsQualified.push(...cafQualifiers.map((m) => m.winner));
+
     console.log(
       `qualified from ${regions[2]}`,
       cafQualifiers.map(
@@ -971,6 +973,7 @@ export class SimulationComponent {
 
   openNationStats(nation: GroupTeam) {
     this.selectedNation = nation;
+    this.isDialogOpen = true;
   }
 
   getNationClass(nation: GroupTeam) {

diff --git a/src/app/shared/components/nation-dialog/nation-dialog.component.html b/src/app/shared/components/nation-dialog/nation-dialog.component.html
@@ -19,7 +19,7 @@ <h3>{{ nation.ranking }}</h3>
       <li>Rating: {{ nation.rating }}</li>
       <li>Att Rating: {{ nation.attRating }}</li>
       <li>Def Rating: {{ nation.defRating }}</li>
-      <li>Pot {{ nation.pot }}</li>
+      <li *ngIf="nation.pot">Pot {{ nation.pot }}</li>
       <li>
         Confederation: <span>{{ nation.region }}</span>
       </li>
@@ -48,6 +48,8 @@ <h3>Match History</h3>
               class="nation-flag"
               [src]="item.match.winner.logo"
               [alt]="item.match.winner.name"
+              (click)="changeNation(item.match.winner)"
+              [ngClass]="item.match.winner === nation ? 'disabled' : ''"
             />
             <span class="team-name"
               >{{ item.match.winner.name }}
@@ -64,6 +66,8 @@ <h3>Match History</h3>
               class="nation-flag"
               [src]="item.match.loser.logo"
               [alt]="item.match.loser.name"
+              (click)="changeNation(item.match.loser)"
+              [ngClass]="item.match.loser === nation ? 'disabled' : ''"
             />
             <span class="team-name">{{ item.match.loser.name }}</span>
           </div>

diff --git a/src/app/shared/components/nation-dialog/nation-dialog.component.scss b/src/app/shared/components/nation-dialog/nation-dialog.component.scss
@@ -41,6 +41,11 @@ h3 {
     width: 95%;
   }
 
+  @media screen and (max-width: 600px) {
+    width: 100%;
+    max-height: 100vh;
+  }
+
   .header {
     padding: 1rem;
     display: flex;
@@ -153,6 +158,10 @@ h3 {
         font-size: 2.5rem;
         text-transform: uppercase;
 
+        @media screen and (max-width: 600px) {
+          font-size: 1.25rem;
+        }
+
         &.good-grade {
           color: #00ff00;
         }
@@ -174,11 +183,16 @@ h3 {
 
       @media screen and (max-width: 600px) {
         width: 100%;
+        margin: 0;
       }
 
       .match-stages {
         margin-top: 5px;
         margin-bottom: 15px;
+
+        @media screen and (max-width: 600px) {
+          margin-bottom: 0;
+        }
       }
 
       .match-row {
@@ -211,6 +225,11 @@ h3 {
           width: 2.5rem;
           height: 1.5rem;
           margin-right: 5px;
+          cursor: pointer;
+
+          &.disabled {
+            cursor: not-allowed;
+          }
 
           @media screen and (max-width: 1000px) {
             width: 2rem;

diff --git a/src/app/shared/components/nation-dialog/nation-dialog.component.ts b/src/app/shared/components/nation-dialog/nation-dialog.component.ts
@@ -19,6 +19,7 @@ export class NationDialogComponent implements OnChanges {
   @Input() nation?: GroupTeam = undefined;
   @Input() tournament?: Tournament32;
   @Output() closeDialog = new EventEmitter<boolean>(false);
+  @Output() onNationChange = new EventEmitter<GroupTeam>();
 
   originalOrder = originalOrder;
   rounds = [
@@ -89,7 +90,10 @@ export class NationDialogComponent implements OnChanges {
     }
     let gradeArr = ['f', 'f', 'f', 'f', 'f', 'f', 'f'];
     let result = '';
-    if (nation.points < 3 && nation.gDiff < -3) {
+    if (nation.matchesPlayed < 3) {
+      gradeArr = Array(7).fill('n/a');
+      result = 'Did Not Qualify';
+    } else if (nation.points < 3 && nation.gDiff < -3) {
       gradeArr = ['f', 'f', 'f', 'd', 'c', 'c', 'c'];
       result = 'Group Stage';
     } else if (nation.points < 3) {
@@ -131,6 +135,9 @@ export class NationDialogComponent implements OnChanges {
       .split(' ')
       .map((l) => l[0].toLocaleUpperCase() + l.substring(1))
       .join(' ');
+    if (nation.matchesPlayed < 3) {
+      return `${name} did not qualify for the tournament, their players had to watch from the comfort of their own homes.`;
+    }
     switch (nation.grade) {
       case 's':
         return `${name} had perhaps their best performance at a major tournament ever! Fans will be ecstatic as ${name} blew expectations out of the water. No one thought they would make it this far.`;
@@ -169,4 +176,8 @@ export class NationDialogComponent implements OnChanges {
     }
     return '';
   }
+
+  changeNation(nation: GroupTeam) {
+    this.onNationChange.emit(nation);
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -26,6 +26,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-size: 100%;
 }
 
 body {