fix: 🐛 fix nation popups so that they show up correctly every time

fix nation popups, add memoizer pipe, add rankings for teams in awards tab

README.md

@@ -109,11 +109,29 @@ firebase deploy
 
 ## CSS Styling Guide
 
-We use BEM methodology for all CSS files. Please refer to this [reference site](https://en.bem.info/methodology/key-concepts/) for help. For this project, we have some specific rules to follow over the BEM standards.
+We use BEM methodology for all SCSS files. Please refer to this [reference site](https://en.bem.info/methodology/key-concepts/) for help. For this project, we have some specific rules to follow over the BEM standards.
 
 * Blocks can be contained within other blocks.
 * Blocks can be modified just like elements using a class like: `block--modifier`.
 * The class name of elements within elements should be added on. `element__element__element`.
-* Some styles will have to be overwritten with `mat` or `cdk` classes.
 * Global styles should only be implemented in `styles.scss`.
 * Don't add class names to `ng-container`, `ng-template` and other specialized html tags unless necessary.
+
+## Project Structure
+
+### Core
+The Core Module is where we want to put our shared singleton services. So the services that we want only one instance of while having them shared among multiple modules should live here.
+
+The Angular injector creates a new instance of a service for each lazily loaded module it is provided.
+
+Another piece of our application that should live in the Core Modules is app-level components. A good example of an app-level component would be the navigation bar. Only the app needs to know about our navigation component.
+
+We do not want to put, are components used throughout the application inside of the Core Module. We have the Shared Module for that and we will look at that now.
+### Models
+
+### Pages
+
+### Shared
+The Shared Module is where we want everything to live that is shared throughout the application. Components, directives, guards, & pipes can all live in the Shared Module.
+
+It is also common to import and export Angular built modules inside your Shared Module if you need to access them in multiple locations. Because Shared is imported into many of your Feature Modules, it's common to import/export Common Module or Angular Material modules. Import/Export the modules once in Shared Module and now anyone that imports Shared will have access to them.

src/app/models/nation.model.ts

@@ -49,6 +49,42 @@ export interface GroupTeam {
   midRanking: number;
   defRanking: number;
   pot?: number;
-  grade?: string;
-  tournamentFinish?: string;
+  reportCard: {
+    grade: string | null;
+    tournamentFinish: string | null;
+    gradeStyle: string | null;
+    gradeSummary: string | null;
+  };
 }
+
+export const defaultHost: GroupTeam = {
+  name: 'qatar',
+  abbreviation: 'qat',
+  logo: 'https://fmdataba.com/images/n/QAT.svg',
+  region: 'afc',
+  points: 0,
+  gDiff: 0,
+  gFor: 0,
+  gOpp: 0,
+  tier: 'j',
+  attRating: 0,
+  midRating: 0,
+  defRating: 0,
+  rating: 0,
+  matchesPlayed: 0,
+  matchHistory: {
+    qualifiers: [],
+    group: [],
+    bracket: [],
+  },
+  reportCard: {
+    grade: null,
+    gradeStyle: null,
+    gradeSummary: null,
+    tournamentFinish: null,
+  },
+  ranking: 0,
+  attRanking: 0,
+  midRanking: 0,
+  defRanking: 0,
+};

src/app/pages/simulation/simulation-qualifiers.service.ts

@@ -123,11 +123,13 @@ export class SimulationQualifiersService {
         const extraSpots = Math.round(nationsInRegion % ratio);
         console.log(
           region.toLocaleUpperCase(),
-          `\n`,
+          '\n',
           '# of nations from region',
           nationsInRegion,
+          '\n',
           'Qualifying spots from this region',
           qualifyingSpots,
+          '\n',
           'Extra spots available for this region',
           extraSpots
         );
@@ -163,7 +165,6 @@ export class SimulationQualifiersService {
         if (numQualified === 32 || extra === 0) {
           return;
         }
-        // console.log(numQualified);
         // console.log('test', extra, nations.length, auto);
         const qualifiers = this.autoQualifiers(extra, nations, auto, regions[index]);
         teamsQualified.push(...qualifiers.map(m => m.winner));
@@ -210,7 +211,6 @@ export class SimulationQualifiersService {
     for (let i = 0; i < matches; i++) {
       const wtIndex = alreadyQualified + (matches * 2 - 1 - i);
       qualifiers.push(matchScore(availableNations[alreadyQualified + i], availableNations[wtIndex]));
-      console.log(alreadyQualified + i, wtIndex);
     }
     qualifiers.forEach(match => {
       match.winner.matchHistory.qualifiers.push({ match, opp: match.loser });

src/app/pages/simulation/simulation.component.html

@@ -3,29 +3,16 @@ <h1>Tournament Setup</h1>
 <nav class="dashboard">
   <ul>
     <li>
-      <a
-        [routerLink]="'group-stage'"
-        class="ripple"
-        [routerLinkActive]="['active']"
-        >Groups</a
-      >
+      <a [routerLink]="'group-stage'" class="ripple" [routerLinkActive]="['active']">Groups</a>
     </li>
     <li>
-      <a [routerLink]="'bracket'" class="ripple" [routerLinkActive]="['active']"
-        >Bracket</a
-      >
+      <a [routerLink]="'bracket'" class="ripple" [routerLinkActive]="['active']">Bracket</a>
     </li>
     <li>
-      <a [routerLink]="'awards'" class="ripple" [routerLinkActive]="['active']"
-        >Awards</a
-      >
+      <a [routerLink]="'awards'" class="ripple" [routerLinkActive]="['active']">Awards</a>
     </li>
   </ul>
 </nav>
 <router-outlet></router-outlet>
 
-<app-nation-dialog
-  *ngIf="selectedNation"
-  [class]="selectedNation ? 'show' : ''"
-  (click)="changeSelectedNation()"
-></app-nation-dialog>
+<app-nation-dialog *ngIf="selectedNation" [class]="selectedNation ? 'show' : ''" (click)="changeSelectedNation()"></app-nation-dialog>

src/app/pages/simulation/simulation.component.scss

@@ -2,7 +2,7 @@
 
 h1 {
   text-align: center;
-  margin: 3rem;
+  margin: 3rem 0 0;
   font-size: 3rem;
 
   @media screen and (max-width: 600px) {

src/app/pages/simulation/simulation.component.ts

@@ -16,9 +16,7 @@ export class SimulationComponent {
   constructor(service: SimulationService) {
     this.service = service;
 
-    service.selectedNation$
-      .pipe(untilDestroyed(this))
-      .subscribe((nation) => (this.selectedNation = nation));
+    service.selectedNation$.pipe(untilDestroyed(this)).subscribe(nation => (this.selectedNation = nation));
   }
 
   @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {

src/app/pages/simulation/simulation.model.ts

@@ -13,7 +13,12 @@ export interface Match {
 export interface Tournament32 {
   availableRegions?: Region[];
   hostNation?: GroupTeam;
-  teams?: GroupTeam[];
+  allTeams?: {
+    rankings: GroupTeam[];
+    attRankings: GroupTeam[];
+    midRankings: GroupTeam[];
+    defRankings: GroupTeam[];
+  };
   groups?: GroupTeam[][];
   groupWinners?: GroupTeam[];
   bracket?: {

src/app/pages/simulation/simulation.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { compare } from '@shared/utils';
-import { matchScore } from './simulation.utils';
+import { findTeamInTournament, matchScore } from './simulation.utils';
 import { GroupTeam } from 'app/models/nation.model';
 import { Match, Region, Tournament32 } from './simulation.model';
 import { BehaviorSubject } from 'rxjs';
@@ -24,7 +24,16 @@ export class SimulationService {
   }
 
   changeSelectedNation(value: null | GroupTeam) {
-    this.selectedNation$.next(value);
+    if (!this.tournament?.groups || !value) {
+      this.selectedNation$.next(value);
+      return;
+    }
+    const updatedNation = findTeamInTournament(this.tournament?.groups, value);
+    if (updatedNation) {
+      this.selectedNation$.next(updatedNation);
+    } else {
+      this.selectedNation$.next(value);
+    }
   }
 
   simulateGroups(groupGamesPerOpponent: number, groups: GroupTeam[][]): GroupTeam[][] {
@@ -43,7 +52,12 @@ export class SimulationService {
           group: [],
           bracket: [],
         };
-        g[i][j].grade = undefined;
+        g[i][j].reportCard = {
+          grade: null,
+          gradeStyle: null,
+          gradeSummary: null,
+          tournamentFinish: null,
+        };
       }
     }
     // go through each group

src/app/pages/simulation/simulation.utils.ts

@@ -64,6 +64,10 @@ export function extraTimeResult(match: Match) {
   return match.penaltyWin ? ` after winning on penalties` : match.etWin ? ` after extra time` : '';
 }
 
+export function findTeamInTournament(groups: GroupTeam[][], nation: GroupTeam) {
+  return groups.flat().find(t => t.name === nation.name);
+}
+
 function getResultArr(wins: number, draws: number, losses: number): string[] {
   return [...Array(wins).fill('win'), ...Array(losses).fill('loss'), ...Array(draws).fill('draw')];
 }
@@ -337,11 +341,12 @@ export function calcScore(
   }
 }
 
-export const reportCard = ({ name: nationName, grade, matchesPlayed }: GroupTeam): string => {
+export function getGradeSummary({ name: nationName, reportCard, matchesPlayed }: GroupTeam): string {
   const name = nationName
     .split(' ')
     .map(l => l[0].toLocaleUpperCase() + l.substring(1))
     .join(' ');
+  const grade = reportCard.grade;
   if (matchesPlayed < 3) {
     return `${name} did not qualify for the tournament, their players had to watch from the comfort of their own homes.`;
   }
@@ -361,7 +366,26 @@ export const reportCard = ({ name: nationName, grade, matchesPlayed }: GroupTeam
     default:
       return 'ERROR';
   }
-};
+}
+
+export function getGradeStyle(grade: string | undefined): '' | 'good-grade' | 'ok-grade' | 'bad-grade' {
+  if (grade) {
+    switch (grade) {
+      case 's':
+      case 'a':
+        return 'good-grade';
+      case 'b':
+      case 'c':
+        return 'ok-grade';
+      case 'd':
+      case 'f':
+        return 'bad-grade';
+      default:
+        return 'bad-grade';
+    }
+  }
+  return '';
+}
 
 export function matchScore(team: GroupTeam, otherTeam: GroupTeam, hostNation?: GroupTeam): Match {
   const tm = {

src/app/shared/components/awards/awards.component.html

@@ -1,9 +1,27 @@
-<ul *ngIf="tournament?.awards" class="stats">
-  <li *ngFor="let award of tournament?.awards; let i = index">
-    <div *ngIf="award" class="stat" (click)="openNationStats(award)">
-      {{ tournamentStats[i].emoji }}
-      <img class="nation-flag" [src]="award.logo" [alt]="award.name" />
-      <span>{{ award.name }}</span>
+<div class="stats">
+  <ul *ngIf="tournament?.awards" class="awards">
+    <h4>Awards</h4>
+    <li *ngFor="let award of tournament?.awards; let i = index">
+      <div *ngIf="award" class="stat" (click)="openNationStats(award)">
+        {{ tournamentStats[i].emoji }}
+        <img class="nation-flag" [src]="award.logo" [alt]="award.name" />
+        <span>{{ award.name }}</span>
+      </div>
+    </li>
+  </ul>
+  <div *ngIf="tournament?.allTeams">
+    <h4>World Rankings</h4>
+    <div class="rankings">
+      <details *ngFor="let list of rankings" [class]="list.class + '-rankings'" open="true">
+        <summary class="heading">{{ list.heading }}</summary>
+        <li *ngFor="let nation of list.nations" class="nation">
+          <div *ngIf="nation" class="stat" (click)="openNationStats(nation)">
+            <span>{{ get(nation, list.prop + 'anking', 0) }}</span>
+            <img class="nation-flag" [src]="nation.logo" [alt]="nation.name" />
+            <span>{{ nation.abbreviation.toLocaleUpperCase() }}</span>
+          </div>
+        </li>
+      </details>
     </div>
-  </li>
-</ul>
+  </div>
+</div>

src/app/shared/components/awards/awards.component.scss

@@ -6,28 +6,65 @@
   border: 1px solid black;
   background-color: $primary-light;
   padding: 1.5rem;
+  display: flex;
+  flex-flow: row wrap;
+
+  >div {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
 
-  li {
-    margin-bottom: 10px;
   }
 
-  .stat {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+  h4 {
+    text-align: center;
+    font-size: 2.5rem;
+    padding: 0 0 1.5rem;
+  }
+
+  >ul >h4 {
+    padding-bottom: 1rem;
   }
 
   .nation-flag {
     width: 2rem;
     height: 1.5rem;
     margin: 0 1rem;
   }
-}
 
-h1 {
-  font-size: 4rem;
+  li {
+    margin-bottom: 1rem;
+  }
+
+  .awards {
+    margin: 0 0 2rem;
+    @media screen and (max-width: 450px) {
+      flex: 1;
+    }
+  }
 
-  @media screen and (max-width: 1200px) {
-    font-size: 2.5rem;
+  .stat {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    // justify-content: center;
+  }
+  .rankings {
+    display: flex;
+    flex-flow: wrap;
+    padding-left: 5rem;
+    @media screen and (max-width: 450px) {
+      padding-left: 0;
+    }
+
+    .heading {
+      padding: 1rem 1rem 1rem 0;
+      cursor: pointer;
+      // text-align: center;
+    }
+
+    details {
+      flex: 1;
+    }
   }
 }