From 0e46a29c35dbb954b5fba8a9551e7e74b68c0ce3 Mon Sep 17 00:00:00 2001
From: maxkarnold <60246034+maxkarnold@users.noreply.github.com>
Date: Wed, 27 Oct 2021 13:52:24 -0500
Subject: [PATCH 1/2] fixed formations and added chemistryNum attr

---
 README.md                                     |  12 +
 angular.json                                  |   6 +-
 src/app/app.component.html                    |  54 ++-
 src/app/app.component.scss                    | 193 +++++---
 src/app/app.component.ts                      |  24 +-
 src/app/components/home/home.component.html   |  20 +-
 src/app/components/home/home.component.scss   |  41 +-
 src/app/components/home/home.component.ts     | 430 +++++++++++++-----
 .../leaderboard/leaderboard.component.html    |  10 +-
 .../leaderboard/leaderboard.component.scss    |  55 ++-
 src/app/models/player.ts                      |   2 +-
 src/app/services/auth.service.ts              |  29 +-
 src/styles.scss                               |  30 ++
 13 files changed, 658 insertions(+), 248 deletions(-)

diff --git a/README.md b/README.md
index 330c401..216d1b7 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 ## Tech Stack
 * [Angular](https://angular.io/)
   * [Angular-Material](https://material.angular.io/)
+  * [Angular-Material-CDK](https://material.angular.io/cdk/categories)
 * [Firebase](https://firebase.google.com/docs)
 * [Express](https://expressjs.com/)
 * [Nodejs](https://nodejs.org/en/)
@@ -109,3 +110,14 @@ Then deploy to the website with firebase in the terminal.
 ```
 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.
+
+* 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.
\ No newline at end of file
diff --git a/angular.json b/angular.json
index 48e0a43..057f81f 100644
--- a/angular.json
+++ b/angular.json
@@ -31,10 +31,10 @@
               "src/assets/img"
             ],
             "styles": [
-              "./src/styles.scss",
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "./node_modules/font-awesome/css/font-awesome.css",
-              "./node_modules/materialize-css/dist/css/materialize.css"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "./node_modules/materialize-css/dist/css/materialize.css",
+              "./src/styles.scss"
             ],
             "scripts": [
               "./node_modules/jquery/dist/jquery.js",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5f9a643..c732b17 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,34 +1,40 @@
-  <header class="mobile">
-    <mat-toolbar color="primary">
-        <a routerLink="/"><span>National Team Generator</span></a>
-        <span class="nav-spacer"></span>
-        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon" (click)="navToggle = !navToggle" >
-            <mat-icon>menu</mat-icon>
+  <header class="header header--mobile">
+    <mat-toolbar color="primary" class="nav-bar">
+        <a routerLink="/" class="logo logo--ripple">
+          <span class="logo__title">National Team Generator</span>
+        </a>
+        <span class="nav-bar__nav-spacer"></span>
+        <button mat-icon-button class="nav-bar__menu-button nav-bar__menu-button--ripple" aria-label="Example icon-button with menu icon" (click)="navToggle = !navToggle" >
+            <mat-icon class="nav-bar__menu-button__icon">menu</mat-icon>
         </button>
     </mat-toolbar>
-    <mat-nav-list class="primaryColorBG list" role="list" *ngIf="navToggle">
-        <a mat-list-item routerLink="/leaderboard" class="nav-item full">Leaderboards</a>
-        <a mat-list-item href="#" class="nav-item full" (click)="loginOverlay()" *ngIf="!isLoggedIn" cdkOverlayOrigin #trigger="cdkOverlayOrigin">Login</a>
-        <a mat-list-item href="#" class="nav-item full" (click)="logout()" *ngIf="isLoggedIn">Logout</a>
+    <mat-nav-list class="nav-list" role="list" *ngIf="navToggle">
+        <a routerLink="/leaderboard" class="nav-list__link nav-list__link--ripple">Leaderboards</a>
+        <a class="nav-list__link nav-list__link--ripple" (click)="loginOverlay()" *ngIf="!isLoggedIn" cdkOverlayOrigin #trigger="cdkOverlayOrigin">Login</a>
+        <a class="nav-list__link nav-list__link--ripple" (click)="logout()" *ngIf="isLoggedIn">Logout</a>
     </mat-nav-list>
   </header>
-  <header class="desktop">
-    <mat-toolbar color="primary">
-        <a routerLink="/"><span>National Team Generator</span></a>
-        <span class="nav-spacer"></span>
-        <a mat-list-item routerLink="/leaderboard" class="nav-item">Leaderboards</a>
-        <button (click)="loginOverlay()" *ngIf="!isLoggedIn"><span>Login</span></button>
-        <a href="#" (click)="logout()" *ngIf="isLoggedIn"><span>Logout</span></a>
+  <header class="header header--desktop">
+    <mat-toolbar color="primary" class="nav-bar">
+        <a routerLink="/" class="logo logo--ripple">
+          <span class="logo__title">National Team Generator</span>
+        </a>
+        <span class="nav-bar__nav-spacer"></span>
+        <a routerLink="/leaderboard" class="nav-bar__link nav-bar__link--ripple">Leaderboards</a>
+        <a (click)="loginOverlay()" *ngIf="!isLoggedIn" class="nav-bar__link nav-bar__link--ripple">Login</a>
+        <a (click)="logout()" *ngIf="isLoggedIn" class="nav-bar__link nav-bar__link--ripple">Logout</a>
     </mat-toolbar>
   </header>
-  <ng-container *ngIf="loginOverlayOpen">
-    <div class="login-overlay">
-        <div class="exit-container">
-            <button mat-button (click)="loginOverlay()" ><mat-icon>close</mat-icon></button>
+  <ng-container *ngIf="loginOverlayOpen" class="ng-container">
+    <div class="login-overlay ng-container__login-overlay">
+        <div class="login-overlay__exit">
+            <button mat-button (click)="loginOverlay()" class="login-overlay__exit__button">
+              <mat-icon class="login-overlay__exit__button__icon">close</mat-icon>
+            </button>
         </div>
-        <input type="text" #email placeholder="email">
-        <input type="password" #password placeholder="password">
-        <button mat-raised-button type="submit" (click)="login(email.value, password.value)" class="login-button">Login</button>
+        <input class="login-overlay__input login-overlay__input--override" type="text" #email placeholder="email">
+        <input class="login-overlay__input login-overlay__input--override" type="password" #password placeholder="password">
+        <button mat-raised-button type="submit" (click)="login(email.value, password.value)" class="login-overlay__button login-overlay__button--ripple">Login</button>
     </div>
   </ng-container>
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 13f8f79..f40a924 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,34 +1,124 @@
-button {
-    cursor: pointer;
+.header {
+    color: white;
+    background-color: #3F51B5;
+    &--desktop{
+        display: block;
+        @media screen and (max-width: 800px) { display: none; }
+    }
+    &--mobile {
+        display: none;
+        @media screen and (max-width: 800px) { display: block; }
+    } 
+}
+.logo {
+    color: white;
+    display: flex;
+    align-items: center;
+    min-height: 100%;
+    padding: 0 1rem;
+    &--ripple {
+        background-position: center;
+        transition: background 0.8s;
+        &:hover {
+            background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%;
+        }
+        &:active {
+            background-color: rgb(75, 100, 200);
+            background-size: 100%;
+            transition: background 0s;
+        }
+    }
+}
+.nav-bar {
+    &__menu-button {
+        &--ripple {
+            background-position: center;
+            transition: background 0.8s;
+            &:hover {
+                background: rgb(80, 110, 210) radial-gradient(circle, transparent 1%, rgb(80, 110, 210) 1%) center/15000%;
+            }
+            &:focus {
+                background-color: rgb(80, 110, 210);
+                background-size: 100%;
+                transition: background 0s;
+            }
+        }   
+    }
+    &__nav-spacer {
+        flex: 1 1 auto;
+    }
+    &__link {
+        display: flex;
+        align-items: center;
+        min-height: 100%;
+        color: white;
+        padding: 0 1rem;
+        cursor: pointer;
+        &--ripple {
+            background-position: center;
+            transition: background 0.8s;
+            &:hover {
+                background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%;
+            }
+            &:active {
+                background-color: rgb(75, 100, 200);
+                background-size: 100%;
+                transition: background 0s;
+            }
+        }
+    }
+}
+.nav-list {
+    display: flex;
+    flex-flow: column;
+    padding: 0;
+    &__link {
+        display: flex;
+        justify-content: center;
+        color: white;
+        border-top: 1px solid rgb(242, 242, 242, 0.25);
+        padding: 1rem 0;
+        transition: background-color 400ms;
+        background-color: rgb(63, 81, 181);
+        cursor: pointer;
+        &--ripple {
+            background-position: center;
+            transition: background 0.8s;
+            &:hover {
+                background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%;
+            }
+            &:active {
+                background-color: rgb(75, 100, 200);
+                background-size: 100%;
+                transition: background 0s;
+            }
+        }
+    }
 }
 
-.desktop {
-    display: none;
+.ng-container {
+    &__login-overlay {
+        z-index: 2;
+        border-top: 1px solid whitesmoke;
+        margin: 0 auto;
+        position: absolute;
+        right: 0;
+    }
 }
 
 .login-overlay {
     background-color: #3F51B5;
-    border: 1px solid whitesmoke;
     box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
-    padding: 1.5rem;
-    float: right;
-    margin: 0 auto;
     color: white;
     display: flex;
     flex-flow: column;
     justify-content: center;
-    width: 100%;
-    @media screen and (min-width: 800px) {
-        width: 25rem;
-    }
-    input {
-        color: white;
-    }
-
-    .exit-container {
+    width: 26rem;
+    @media screen and (max-width: 800px) { width: 100%; }
+    &__exit {
         display: flex;
         justify-content: flex-end;
-        button {
+        &__button {
             display: flex;
             justify-content: center;
             min-width: 2.5rem;
@@ -36,58 +126,23 @@ button {
             padding: 0;
         }
     }
-    .login-button {
+    &__button {
         background-color: white;
+        margin: 1rem;
+        &--ripple {
+            background-position: center;
+            transition: background 0.8s;
+            &:hover {
+                background: rgb(235,235,235) radial-gradient(circle, transparent 1%, rgb(235,235,235) 1%) center/15000%;
+            }
+            &:active {
+                background-color: rgb(235,235,235);
+                background-size: 100%;
+                transition: background 0s;
+            }
+        }
     }
-}
-
-@media screen and (min-width: 800px) {
-    .mobile {
-        display: none;
-    }
-    header.desktop {
-        display: block;
-    }
-}
-
-header.desktop a{
-    padding: 0 1rem;
-}
-
-header a {
-    color: white;
-}
-
-header button {
-    background: none;
-    border: none;
-    color: white;
-    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
-}
-header {
-    .nav-spacer {
-        flex: 1 1 auto;
+    &__input {
+        color: white;
     }
-    
-}
-
-h2, h3 {
-    text-align: center;
-}
-h2 {
-    margin: 2.5rem auto;
-}
-h3 {
-    margin: 1.5rem auto;
-}
-
-// ** ANGULAR MATERIAL STYLING
-
-.mat-list-base {
-    background-color: #3F51B5;
-}
-.mat-list-base.list .mat-list-item {
-    display: flex;
-    border-top: 1px solid rgba(242, 242, 242, 0.25);
-    color: white;
 }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b3787aa..5566df5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -36,11 +36,24 @@ export class AppComponent implements OnInit {
     }
   }
 
-  async login(email: string, password: string) {
-    await this.auth.login(email, password);
-    this.auth.changeAuthState(true);
-    this.loginOverlayOpen = false;
-    console.log('Logged in');
+  login(email: string, password: string) {
+    this.auth.login(email, password)
+      .then(res => {
+        this.auth.changeAuthState(true);
+        localStorage.setItem('user', JSON.stringify(res.user));
+        this.loginOverlayOpen = false;
+        console.log('Logged in');
+      })
+      .catch(err => {
+        var errorCode = err.code;
+        var errorMessage = err.message;
+        if (errorCode === 'auth/wrong-password') {
+          alert('Wrong password.');
+        } else {
+          alert(errorMessage);
+        }
+        console.log(err);
+      }); 
   }
   
   logout() {
@@ -48,4 +61,5 @@ export class AppComponent implements OnInit {
     console.log('logged out');
     this.auth.changeAuthState(false);
   }
+
 }
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 1aa53aa..532b6db 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -61,7 +61,7 @@
                                 <button mat-button (click)="infoOverlay()" ><mat-icon>close</mat-icon></button>
                             </div>
                             <div class="info-paragraph">
-                                Drag and drop players from the bench to the pitch. Players' ratings are adjusted based on their position on the pitch and their familiarity.   
+                                Drag and drop players from the bench to the pitch. Players' ratings are adjusted based on their position on the pitch and their familiarity. The overall rating of the first eleven is an average of the player ratings with certain positions weighted more than others. Full backs are weigted the lowest, while central midfielders and strikers are weighted the highest.
                                 <ul>
                                     <li><div class="color-code natural"></div><div>Highlighted in light green is the best position for a player.</div></li>
                                     <li><div class="color-code accomplished"></div><div>Highlighted in dark green is an alternate position (-3 rating).</div></li>
@@ -88,8 +88,18 @@ <h4 class="rules-heading">Squad Requirements</h4>
     <div class="tactics-container" cdkDropListGroup>
         <div class="pitch-container">   
             <div class="formation" *ngIf="this.pitchPlayers.length > 0">Formation: {{formation}}</div>
-            <div class="starters-total-rating" *ngIf="this.pitchPlayers.length > 0">Avg Rating {{startersTotalRating}}</div>
-            <div class="squad-total-rating" *ngIf="checkFormation()">Squad Rating {{squadTotalRating}}</div>
+            <div class="starters-total-rating" *ngIf="this.pitchPlayers.length > 0">
+                <div>Rating - {{startersTotalRating}}</div>
+                <div class="stars"></div>
+            </div>
+            <div class="squad-total-rating" *ngIf="checkFormation()">
+                <div>Squad Rating - {{squadTotalRating}}</div>
+                <div class="stars"></div>
+            </div>
+            <!-- <div class="squad-total-rating">
+                <div *ngIf="chemistry > 0; else chemContainer">Chemistry: <span style="color: lime;">+{{chemistry}}</span></div>
+                <ng-template #chemContainer>Chemistry: {{chemistry}}</ng-template>
+            </div> -->
             <button mat-raised-button color="primary" type="button" (click)="resetStarters()" class="reset-button">Reset XI</button>
             <div class="pitch-borders">
                 <div class="goal-box-top pitch-divs"></div>
@@ -102,9 +112,9 @@ <h4 class="rules-heading">Squad Requirements</h4>
                 <div class="pitch-grid">
                     <div *ngFor="let box of positionBoxes" [class]="getPositionBoxes(box)" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="pitchPlayers">
                         <div [class]="getPlayerClass(box)" cdkDrag [cdkDragData]="box" (cdkDragStarted)="getPositionOutline($event)" (cdkDragReleased)="removeOutlineRelease($event)" (cdkDragDropped)="removeOutlineDrop($event)">
-                            <div *ngIf="box.pitchPlayer !== undefined">
+                            <div *ngIf="box.pitchPlayer !== undefined" >
                                 <img [src]="box.pitchPlayer.playerFace" alt="" class="player-face">
-                                <span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info">{{box.pitchPlayer.pitchRating}}</span>
+                                <span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info" >{{box.pitchPlayer.pitchRating}}</span>
                                 <span *ngIf="box.pitchPlayer !== undefined" class="pitch-player-info">{{box.pitchPlayer.pitchPosition}}</span>
                                 <img *ngIf="box.pitchPlayer !== undefined" class="pitch-player-img" [src]="box.pitchPlayer.nationalityLogo">
                                 <img *ngIf="box.pitchPlayer !== undefined" class="pitch-player-img" [src]="box.pitchPlayer.clubLogo">
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 4fd712d..5d2a6dd 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -274,7 +274,6 @@
     display: flex;
     flex-flow: column;
     width: 100%;
-    margin-top: 2rem;
     @media screen and (min-width: 800px) {
         flex-flow: row;
     }   
@@ -341,6 +340,8 @@
         }
         .starters-total-rating, 
         .squad-total-rating {
+            display: flex;
+            flex-flow: column;
             color: white;
             background-color: #424242;
             padding: 3px 6px;
@@ -355,15 +356,46 @@
             @media screen and (min-width: 800px) {
                 font-size: 0.9rem;
                 padding: 10px;
-                width: 10.5vw;
+                max-width: 20%;
                 left: 2.5%;
             }
+            .stars {
+                display: inline-block;
+                font-size: 1rem;
+                font-family: Times;
+                line-height: 1;
+                @media screen and (max-width: 800px) {font-size: 0.8rem;}
+                &::before {
+                    content: '★★★★★';
+                    letter-spacing: 3px;
+                    color: transparent;
+                }
+            }
         }
         .starters-total-rating {
             top: 2.5%;
+            .stars {
+                &::before {
+                    background: linear-gradient(90deg,
+                        var(--star-background) var(--starter-rating),
+                        var(--star-color) var(--starter-rating)
+                    );
+                    background-clip: text;
+                }
+                
+            }
         }
         .squad-total-rating {
-            top: 10%;
+            top: 12.5%;
+            .stars {
+                &::before {
+                    background: linear-gradient(90deg,
+                        var(--star-background) var(--squad-rating),
+                        var(--star-color) var(--squad-rating)
+                    );
+                    background-clip: text;
+                }
+            }
         }
         .pitch-borders {
             position: relative;
@@ -552,7 +584,7 @@
             grid-column: 2;
             grid-row: 1 / 3;
             width: 70%;
-            
+            border-radius: 50%;
         }
     @media screen and (max-width: 800px) {
         font-size: 0.6rem;
@@ -561,7 +593,6 @@
         gap: 1px;
         .player-face {
             display: none;
-            width: 25px;
         }
         .pitch-player-info:first-of-type {
             font-size: 0.7rem;
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 5b5b190..73f3d04 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -16,7 +16,7 @@ import * as clubsModule from '../../data/clubs/clubs.json';
 import * as positionsModule from '../../data/positions.json';
 import * as pitchPositionsModule from '../../data/pitchPositions.json';
 
-import { Observable, Subscription, timer } from 'rxjs';
+import { Observable, Subscription} from 'rxjs';
 import { Sort } from '@angular/material/sort';
 import{ CdkDragDrop, CdkDragRelease, CdkDragStart, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 
@@ -64,17 +64,18 @@ export class HomeComponent implements OnInit, OnDestroy {
   startersTotalRating = 0;
   squadTotalRating = 0;
   formation = "";
+  chemistry = 0;
   squadRules = [
     {
       text: '1 starting goalkeeper', 
       check: '❌'
     },
     {
-      text: '3 goalkeepers in squad', 
+      text: 'EXACTLY 3 goalkeepers in squad', 
       check: '❌'
     },
     {
-      text: '3-5 starting defenders', 
+      text: '3-4 starting defenders', 
       check: '❌'
     },
     {
@@ -89,6 +90,10 @@ export class HomeComponent implements OnInit, OnDestroy {
       text: 'min. 5 midfielders in squad', 
       check: '❌'
     },
+    {
+      text: 'Valid formation',
+      check: '❌'
+    },
     {
       text: 'Backup player in each position', 
       check: '❌'
@@ -101,8 +106,6 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   positionBoxes = positionBoxes;
 
-  
-
 
   constructor(private afs: FirestoreService, private auth: AuthService) {
     this.players = [];
@@ -207,7 +210,7 @@ export class HomeComponent implements OnInit, OnDestroy {
       for (const rule of this.squadRules) {
         rule.check = '❌';
       }
-      this.squadRules[7].check = '→';
+      this.squadRules[8].check = '→';
       for (const box of this.positionBoxes) {
         box.playerClass = 'inactive player-box';
         box.posBoxClass = 'active pos-box';
@@ -225,9 +228,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     let midCount = 0;
     let fwCount = 0;
     let startMidCount = 0;
-    let startDefCount = 0;
     let startGkCount = 0;
-    let startFwCount = 0;
 
     let DMCount = 0;
     let WBCount = 0;
@@ -235,6 +236,8 @@ export class HomeComponent implements OnInit, OnDestroy {
     let AMRLCount = 0;
     let MCCount = 0;
     let MRLCount = 0;
+    let DFCount = 0;
+    let STCount = 0;
 
     for (const player of this.pitchPlayers) {
       
@@ -242,15 +245,14 @@ export class HomeComponent implements OnInit, OnDestroy {
         DMCount++;
         startMidCount++;
       } else if (player.pitchPosition?.slice(0, 1) === "D") {
-        startDefCount++;
+        DFCount++;
       } else if (player.pitchPosition?.includes("WB")) {
         WBCount++;
-        startDefCount++;
       } else if (player.pitchPosition?.includes("AMC")) {
         AMCCount++;
         startMidCount++;
       } else if (player.pitchPosition?.includes("STC")) {
-        startFwCount++;
+        STCount++;
       } else if (player.pitchPosition?.includes("AM")) {
         AMRLCount++;
       } else if (player.pitchPosition?.includes("MC")) {  
@@ -273,123 +275,167 @@ export class HomeComponent implements OnInit, OnDestroy {
       }
     } 
     // Formation
-    if (startDefCount === 4) {
+    
+    if (DFCount === 4) {
       if (DMCount === 1) {
-        if (MCCount === 1) {
+        if (MCCount === 1 && MRLCount === 1 && AMCCount === 1 && AMRLCount === 1 && STCount === 1) {
           this.formation = "4-1-4-1 DM Asymmetric AM (R/L)";
         } else if (MCCount === 2) {
-          if (AMCCount === 1) {
+          if (AMCCount === 1 && STCount === 2) {
             this.formation = "4-4-2 Diamond Narrow";
-          } else if (AMCCount === 2) {
+          } else if (AMCCount === 2 && STCount === 1) {
             this.formation = "4-1-2-3 DM AM Narrow";
-          } else if (AMCCount === 0) {
+          } else if (AMRLCount === 2 && STCount === 1) {
             this.formation = "4-1-4-1 DM Wide";
+          } else if (MRLCount === 2 && STCount === 1) {
+            this.formation = "4-1-4-1 DM";
+          } else {
+            this.formation = "N/A";
           }
         } else if (MCCount === 3) {
-          if (AMCCount > 0) {
+          if (AMCCount === 1 && STCount === 1) {
             this.formation = "4-1-3-1-1 DM AM Narrow";
-          } else if (startFwCount === 2) {
+          } else if (STCount === 2) {
             this.formation = "4-1-3-2 DM Narrow";
+          } else {
+            this.formation = "N/A";
           }
-        } else if (MCCount + MRLCount === 4) {
-          this.formation = "4-1-4-1 DM";
+        } else {
+          this.formation = "N/A";
         }
       } else if (DMCount === 2) {
-        if (MCCount > 0) {
-          if (MCCount === 1) {
-            this.formation = "4-2-1-3 DM Wide";
-          } else if (MCCount === 3) {
-            this.formation = "4-2-3-1 DM";
-          } else if (AMCCount === 1) {
-            this.formation = "4-2-2-1-1 DM AM Narrow";
-          } else if (startFwCount === 2) {
-            this.formation = "4-2-2-2 DM Narrow";
-          }
-        } else if (AMRLCount > 0) {
-          if (AMCCount === 1) {
-            this.formation = "4-2-3-1 DM AM Wide";
-          } else if (AMRLCount === 2 && startFwCount === 2) {
-            this.formation = "4-2-4 DM Wide";
-          }        
-        } else if (AMCCount > 0) {
-          if (AMCCount === 3) {
-            this.formation = "4-2-3-1 DM AM Narrow";
-          } else if (MRLCount === 2) {
-            this.formation = "4-4-1-1 2DM";
-          } else if (AMCCount === 2 && startFwCount === 2) {
-            this.formation = "4-2-2-2 DM AM Narrow";
-          }
-        } else if (MRLCount === 2 && startFwCount === 2) {
-          this.formation = "4-2-2-2 DM";
-          
+        if (MCCount === 1 && AMRLCount === 2 && STCount === 1) {
+          this.formation = "4-2-1-3 DM Wide";
+        } else if (MCCount === 3 && STCount === 1) {
+          this.formation = "4-2-3-1 DM";
+        } else if (MCCount === 2 && AMCCount === 1 && STCount === 1) {
+          this.formation = "4-2-2-1-1 DM AM Narrow";
+        } else if (MCCount === 2 && STCount === 2) {
+          this.formation = "4-2-2-2 DM Narrow";
+        } else if (AMCCount === 1 && AMRLCount === 2 && STCount === 1) {
+          this.formation = "4-2-3-1 DM AM Wide";
+        } else if (AMRLCount === 2 && STCount === 2) {
+          this.formation = "4-2-4 DM Wide";
+        } else if (AMCCount === 3 && STCount === 1) {
+          this.formation = "4-2-3-1 DM AM Narrow";
+        } else if (MRLCount === 2 && AMCCount === 1 && STCount === 1) {
+          this.formation = "4-4-1-1 2DM";
+        } else if (AMCCount === 2 && STCount === 2) {
+          this.formation = "4-2-2-2 DM AM Narrow";
+        } else if (MRLCount === 2 && STCount === 2) {
+          this.formation = "4-2-2-2 DM"; 
+        } else {
+          this.formation = "N/A";
         }
       } else if (MCCount === 2) {
         if (AMRLCount > 0) {
-          if (startFwCount === 2) {
-            this.formation = "4-2-4 Wide"
-          } else if (AMCCount === 1) {
-            this.formation = "4-2-3-1 Wide"
+          if (STCount === 2 && AMRLCount === 2) {
+            this.formation = "4-2-4 Wide";
+          } else if (AMCCount === 1 && AMRLCount === 2 && STCount === 1) {
+            this.formation = "4-2-3-1 Wide";
+          } else {
+            this.formation = "N/A";
           }
         } else if (AMCCount > 0) {
-          if (startFwCount === 2) {
+          if (STCount === 2 && AMCCount === 2) {
             this.formation = "4-2-2-2 Narrow";
-          } else if (startFwCount === 1) {
+          } else if (STCount === 1 && AMCCount === 3) {
             this.formation = "4-2-3-1 Narrow";
+          } else {
+            this.formation = "N/A";
           }
+        } else {
+          this.formation = "N/A";
         }
       } else if (MCCount === 3) {
-        if (AMRLCount === 2 && startFwCount === 1) {
+        if (AMRLCount === 2 && STCount === 1) {
           this.formation = "4-3-3 Wide";
-        } else if (AMCCount === 1) {
+        } else if (AMCCount === 1 && STCount === 2) {
           this.formation = "4-3-1-2 Narrow";
-        } else if (AMCCount === 2) {
+        } else if (AMCCount === 2 && STCount === 1) {
           this.formation = "4-3-2-1 Narrow";
+        } else {
+          this.formation = "N/A";
         }
       } else if (MRLCount === 2) {
-        if (MCCount === 3 && startFwCount === 1) {
+        if (MCCount === 3 && STCount === 1) {
           this.formation = "4-5-1";
         } else if (MCCount === 2 && AMCCount === 1) {
           this.formation = "4-4-1-1";
-        } else if (MCCount === 2 && startFwCount === 2) {
+        } else if (MCCount === 2 && STCount === 2) {
           this.formation = "4-4-2";
+        } else {
+          this.formation = "N/A";
         }
+      } else {
+        this.formation = "N/A";
       }
-    } else if (startDefCount === 3) {
+    } else if (DFCount === 3) {
       if (WBCount === 2) {
         if (DMCount === 1) {
-          if (MCCount === 3 && startFwCount === 1) {
+          if (MCCount === 3 && STCount === 1) {
             this.formation = "5-1-3-1 DM WB";
-          } else if (startFwCount === 2) {
+          } else if (STCount === 2 && MCCount === 2) {
             this.formation = "5-1-2-2 DM WB";
-          } else if (AMCCount === 1) {
+          } else if (MCCount === 2 && AMCCount === 1 && STCount === 1) {
             this.formation = "5-4-1 Diamond WB";
+          } else {
+            this.formation = "N/A";
           }
         } else if (DMCount === 2) {
-          if (MCCount === 2) {
+          if (MCCount === 2 && STCount === 1) {
             this.formation = "3-4-2-1 DM";
-          } else if (AMRLCount === 2) {
+          } else if (AMRLCount === 2 && STCount === 1) {
             this.formation = "3-4-3 DM Wide";
-          } else if (AMCCount === 2) {
+          } else if (AMCCount === 2 && STCount === 1) {
             this.formation = "3-4-2-1 DM AM";
+          } else if (MCCount === 1 && STCount === 2) {
+            this.formation = "5-2-1-2 DM WB";
+          } else if (AMCCount === 1 && STCount === 2) {
+            this.formation = "5-2-1-2 DM AM WB";
+          } else {
+            this.formation = "N/A";
           }
         } else if (MCCount === 2) {
-          if (AMRLCount === 2) {
+          if (AMRLCount === 2 && STCount === 1) {
             this.formation = "5-4-1 WB Wide";
-          } else if (AMCCount === 2) {
+          } else if (AMCCount === 2 && STCount === 1) {
             this.formation = "5-2-2-1 WB";
+          } else if (AMCCount === 1 && STCount === 2) {
+            this.formation = "5-2-1-2 WB";
+          } else {
+            this.formation = "N/A";
           }
         } else if (MCCount === 3) {
-          if (startFwCount === 2) {
+          if (STCount === 2) {
             this.formation = "5-3-2 WB";
-          } else if (AMCCount === 1 && startFwCount === 1) {
+          } else if (AMCCount === 1 && STCount === 1) {
             this.formation = "5-3-1-1 WB";
+          } else {
+            this.formation = "N/A";
           }
+        } else {
+          this.formation = "N/A";
         }
+      } else {
+        this.formation = "N/A";
       }
     } else {
       this.formation = "N/A";
     }
-    let count = [gkCount, defCount, midCount, fwCount, startGkCount, startDefCount, startMidCount, startFwCount];
+
+    let formObj = {
+      def: DFCount,
+      dm: DMCount,
+      wb: WBCount,
+      mc: MCCount,
+      mrl: MRLCount,
+      amc: AMCCount,
+      amrl: AMRLCount,
+      st: STCount
+    };
+    // this.calcChemistry(formObj);
+    let count = [gkCount, defCount, midCount, fwCount, startGkCount, DFCount, startMidCount, STCount];
     return this.checkSquadRules(count);
   }
 
@@ -397,23 +443,42 @@ export class HomeComponent implements OnInit, OnDestroy {
 
     if (countArr[4] > 0) {
       this.squadRules[0].check = '✅';
+    } else {
+      this.squadRules[0].check = '❌';
     }
     if (countArr[0] === 3) {
       this.squadRules[1].check = '✅';
+    } else {
+      this.squadRules[1].check = '❌';
     }
-    if (countArr[5] > 2 && countArr[5] < 6) {
+    if (countArr[5] > 2 && countArr[5] < 5) {
       this.squadRules[2].check = '✅';
+    } else {
+      this.squadRules[2].check = '❌';
     }
     if (countArr[1] > 5) {
       this.squadRules[3].check = '✅';
+    } else {
+      this.squadRules[3].check = '❌';
     }
     if (countArr[6] > 1 && countArr[6] < 7) {
       this.squadRules[4].check = '✅';
+    } else {
+      this.squadRules[4].check = '❌';
     }
     if (countArr[2] > 4) {
       this.squadRules[5].check = '✅';
+    } else {
+      this.squadRules[5].check = '❌';
+    }
+    if (this.formation !== 'N/A') {
+      this.squadRules[6].check = '✅'
+    } else {
+      this.squadRules[6].check = '❌';
     }
 
+    
+
     for (const rule of this.squadRules) {
       if (rule.check === '❌') {
         return false
@@ -422,6 +487,164 @@ export class HomeComponent implements OnInit, OnDestroy {
     return true
   }
 
+  checkStars(starterRating: number, squadRating: number) {
+    document.documentElement.style.setProperty('--starter-rating', `${starterRating}%`);
+    document.documentElement.style.setProperty('--squad-rating', `${squadRating}%`);
+  }
+
+  calcChemistry(obj: any) {
+    // chemistry reset
+    for (const player of this.pitchPlayers) {
+      player.chemistryNum = 0;
+    }
+    this.chemistry = 0;
+
+    let chemArr = [];
+    if (this.formation !== 'N/A') {
+      if (obj.def === 4) {
+        chemArr.push(
+          ['GK', 'DCL'],
+          ['GK', 'DCR'],
+          ['DCR', 'DCL'],
+          ['DCL', 'DL'],
+          ['DCR', 'DR']
+        );
+        if (this.formation === "4-1-4-1 DM Asymmetric AM (R/L)") {
+          chemArr.push(
+            ['STC', 'multi', 'AMC', 'AMCR', 'AMCL'],
+            ['DR', 'multi', 'AMR', 'MR'],
+            ['DL', 'multi', 'AML', 'ML'],
+            ['AMC', 'MC'],
+            ['STC', 'AMC'],
+            ['MC', 'DMC'],
+            ['DMC', 'DCL'],
+            ['DMC', 'DCR']
+          );
+        }
+      } else if (obj.def === 3) {
+        chemArr.push(
+          ['GK', 'DCL'],
+          ['GK', 'DCR'],
+          ['GK', 'DC'],
+          ['DCL', 'DC'],
+          ['DCR', 'DC'],
+          ['DCR', 'WBR'],
+          ['DCL', 'WBL']
+        )
+        
+      }
+    }
+    for (const arr of chemArr) {
+      let first;
+      let second;
+      for (const player of this.pitchPlayers) {      
+        // check for multiple possible positions for player1
+        if (arr[0] === 'multi') {
+          for (let i = 1; i < arr.length; i++) {
+            if (player.pitchPosition === arr[i]) {
+              first = player;
+              break;
+            }
+          }
+        }
+        // Check for first player in chem pair
+        else if (player.pitchPosition === arr[0]) { 
+          first = player;
+        }
+        // check for multiple possible positions for player2
+        else if (arr[1] === 'multi') {
+          for (let i = 2; i < arr.length; i++) {
+            if (player.pitchPosition === arr[i]) {
+              second = player;
+              break;
+            }
+          }
+        } else if (player.pitchPosition === arr[1]) { // Check for second player in chem pair
+          second = player;
+        }
+        if (first && second) {
+          if (first.nationality === second.nationality) {
+            this.chemistry++;
+            first.chemistryNum++;
+            second.chemistryNum++;
+          }
+          if (first.club === second.club) {
+            this.chemistry++;
+            first.chemistryNum++;
+            second.chemistryNum++;
+          }
+          break;
+        }
+      }
+      
+    }
+  }
+
+  getChemColor(player: Player) {
+    if (player.chemistryNum === 1) {
+      return '1px dashed yellow'
+    } else if (player.chemistryNum === 2) {
+      return '1px dashed lime'
+    } else if (player.chemistryNum > 2) {
+      return '1px dashed pink'
+    } else {
+      return '1px solid #353535'
+    }
+  }
+
+  calcStartersRating() {
+    let startersArr: number[] = [];
+    for (const player of this.pitchPlayers) {
+      if (player.pitchRating !== undefined) {
+        switch (player.pitchPosition) {
+          case "DR":
+          case "DL":
+            startersArr.push(player.pitchRating * 0.88);
+            break;
+          case "WBL":
+          case "WBR":
+          case "MR":
+          case "ML":
+            startersArr.push(player.pitchRating * 0.97);
+            break;
+          case "GK":
+          case "DCR":
+          case "DCL":
+          case "DC":
+          case "AMR":
+          case "AML":
+            startersArr.push(player.pitchRating * 0.99);
+            break;
+          case "AMCR":
+          case "AMC":
+          case "AMCL":
+          case "DMC":
+          case "DMR":
+          case "DML":
+            startersArr.push(player.pitchRating * 1.01);
+            break;
+          case "STC":
+          case "STCL":
+          case "STCR":
+          case "MC":
+          case "MCR":
+          case "MCL":
+            startersArr.push(player.pitchRating * 1.03);
+            break;
+          default:
+            console.log("error");
+            break;
+        }
+      } else {
+        console.log("Error: check home component");
+      }
+      
+    }
+    let sum = startersArr.reduce((partial_sum, a) => partial_sum + a,0); 
+    let avg = sum / startersArr.length;
+    this.startersTotalRating = Math.round(avg * 10) / 10;
+  }
+
   getBackupPositions() {
     let startingPositions: string[] = [];
     for (const player of this.pitchPlayers) {
@@ -463,16 +686,16 @@ export class HomeComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.squadRules[7].text = '';
+    this.squadRules[8].text = '';
     for (let i = 0; i < startingPositions.length; i++) {
       if (startingPositions[i] !== '') {
-        this.squadRules[7].text += ` ${startingPositions[i]}`;
+        this.squadRules[8].text += ` ${startingPositions[i]}`;
       }
     }
-    if (this.squadRules[7].text === '') {
-      this.squadRules[6].check = '✅';
+    if (this.squadRules[8].text === '') {
+      this.squadRules[7].check = '✅';
     } else {
-      this.squadRules[6].check = '❌';
+      this.squadRules[7].check = '❌';
     }
   }
 
@@ -587,10 +810,11 @@ export class HomeComponent implements OnInit, OnDestroy {
     let positionIndex = parseInt(event.container.element.nativeElement.classList[1]);
 
     if (event.previousContainer === event.container) {
+      // if moving within same container
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-      // console.log('moving within array');
     } 
     else if (event.previousContainer.id === "bench-players") {
+      // if moving from bench container and to the pitch
       // Check for 11 players in starting lineup and no player swap
       if (this.pitchPlayers.length === 11 && event.container.element.nativeElement.innerText === "") {
         alert("You can only have 11 players starting.");
@@ -681,8 +905,8 @@ export class HomeComponent implements OnInit, OnDestroy {
         for (let i = 0; i < this.pitchPlayers.length; i++) {
           if (this.pitchPlayers[i].pitchPosition === newPlayer.pitchPosition) { 
             let oldPlayer = this.pitchPlayers[i];
-            oldPlayer.pitchPosition = "";
-            oldPlayer.pitchPositionIndex = NaN;
+            oldPlayer.pitchPosition = undefined;
+            oldPlayer.pitchPositionIndex = undefined;
             this.pitchPlayers.splice(i, 1);
             this.players.splice(newPlayerIndex, 1, oldPlayer);
             // console.log(this.positionBoxes);
@@ -824,19 +1048,18 @@ export class HomeComponent implements OnInit, OnDestroy {
           console.log("error");
         }
       }
-      let sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0); 
-      let avg = sum / ratingArr.length;
-      this.startersTotalRating = Math.round(avg * 10) / 10;
-      // console.log(sum, this.startersTotalRating);
+
+      this.calcStartersRating();
 
       this.squadTotalRating = 0;
       for (let i = 0; i < 12; i++) {
         ratingArr.push(this.players[i].rating);
       }
-      sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0);
-      avg = sum / ratingArr.length;
+      let sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0);
+      let avg = sum / ratingArr.length;
       this.squadTotalRating = Math.round(avg * 10) / 10;
       // console.log(sum, this.squadTotalRating);
+      this.checkStars(this.startersTotalRating, this.squadTotalRating);
 
       // sortedData
       this.sortedData = this.pitchPlayers.concat(this.players);
@@ -860,7 +1083,7 @@ export class HomeComponent implements OnInit, OnDestroy {
       if (this.pitchPlayers.length === 11) {
         this.getBackupPositions();
       } else {
-        this.squadRules[6].check = '❌';
+        this.squadRules[7].check = '❌';
       }
       
       
@@ -1040,7 +1263,7 @@ export class HomeComponent implements OnInit, OnDestroy {
       if (rule.check === '✅') {
         rule.check = '❌';
       }
-      this.squadRules[7].text = '';
+      this.squadRules[8].text = '';
     }
 
     let tier = this.getNation("tier").tier || '';
@@ -1072,6 +1295,7 @@ export class HomeComponent implements OnInit, OnDestroy {
         age: 0,
         height: 0,
         weight: 0,
+        chemistryNum: 0,
         attributes: {} as GkAttributes | OutfieldAttributes,
         weakFoot: 0,
         club: '',
@@ -2698,19 +2922,17 @@ export class HomeComponent implements OnInit, OnDestroy {
             
           }
         }
-        let sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0); 
-        let avg = sum / ratingArr.length;
-        this.startersTotalRating = Math.round(avg * 10) / 10;
 
+        this.calcStartersRating();
         this.squadTotalRating = 0;
         for (let i = 0; i < 12; i++) {
           ratingArr.push(this.players[i].rating);
         }
-        sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0);
-        avg = sum / ratingArr.length;
+        let sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0);
+        let avg = sum / ratingArr.length;
         this.squadTotalRating = Math.round(avg * 10) / 10;
 
-
+        this.checkStars(this.startersTotalRating, this.squadTotalRating);
 
         let combinedPlayers = this.pitchPlayers.concat(this.players);
         for (const player of combinedPlayers) {      
@@ -2742,12 +2964,12 @@ export class HomeComponent implements OnInit, OnDestroy {
           if (rule.check === '✅') {
             rule.check = '❌';
           }
-          this.squadRules[7].text = '';
+          this.squadRules[8].text = '';
         }
         if (this.pitchPlayers.length === 11) {
           this.getBackupPositions();
         } else {
-          this.squadRules[6].check = '❌';
+          this.squadRules[7].check = '❌';
         }
         console.log("Successfully loaded", this.players, this.pitchPlayers);
       } else {
@@ -2763,6 +2985,9 @@ export class HomeComponent implements OnInit, OnDestroy {
         for (let index in this.positions) {
           this.positions[index].amount = 0;
         }
+        this.players = [];
+        this.sortedData = [];
+        this.pitchPlayers = [];
         this.afs.getRoster(user.uid, saveLocation).subscribe((obj) => {
           const data = obj.payload.data();
           if (data !== undefined) {
@@ -2798,18 +3023,19 @@ export class HomeComponent implements OnInit, OnDestroy {
               
             }
           }
-          let sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0); 
-          let avg = sum / ratingArr.length;
-          this.startersTotalRating = Math.round(avg * 10) / 10;
+
+          this.calcStartersRating();
 
           this.squadTotalRating = 0;
           for (let i = 0; i < 12; i++) {
             ratingArr.push(this.players[i].rating);
           }
-          sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0);
-          avg = sum / ratingArr.length;
+          let sum = ratingArr.reduce((partial_sum, a) => partial_sum + a,0);
+          let avg = sum / ratingArr.length;
           this.squadTotalRating = Math.round(avg * 10) / 10;
 
+          this.checkStars(this.startersTotalRating, this.squadTotalRating);
+          
           let combinedPlayers = this.pitchPlayers.concat(this.players);
           for (const player of combinedPlayers) {      
             for (const pos of this.positions) {
@@ -2839,12 +3065,12 @@ export class HomeComponent implements OnInit, OnDestroy {
             if (rule.check === '✅') {
               rule.check = '❌';
             }
-            this.squadRules[7].text = '';
+            this.squadRules[8].text = '';
           }
           if (this.pitchPlayers.length === 11) {
             this.getBackupPositions();
           } else {
-            this.squadRules[6].check = '❌';
+            this.squadRules[7].check = '❌';
           }
         });
     }
diff --git a/src/app/components/leaderboard/leaderboard.component.html b/src/app/components/leaderboard/leaderboard.component.html
index 0d0cf12..72a7dd1 100644
--- a/src/app/components/leaderboard/leaderboard.component.html
+++ b/src/app/components/leaderboard/leaderboard.component.html
@@ -27,8 +27,14 @@ <h2 *ngIf="tierGroup[0]" class="tier-name">{{tierGroup[0]?.tier || ''}} Tier</h2
                 <div *ngFor="let roster of tierGroup; let j = index; trackBy: trackByItems" class="roster item" >
                     <div class="attribute" [attr.data-name]="headers[0]">{{j + 1}}</div>
                     <div class="attribute" [attr.data-name]="headers[1]">{{roster.user}}</div>
-                    <div class="attribute" [attr.data-name]="headers[2]">{{roster.squadRating}}</div>
-                    <div class="attribute" [attr.data-name]="headers[3]">{{roster.startersRating}}</div>
+                    <div class="attribute squad-rating" [attr.data-name]="headers[2]">
+                        {{roster.squadRating}}
+                        <!--<span class="stars"></span>-->
+                    </div>
+                    <div class="attribute starter-rating" [attr.data-name]="headers[3]">
+                        {{roster.startersRating}}
+                        <!-- <span class="stars"></span> -->
+                    </div>
                     <div class="attribute capitalize" [attr.data-name]="headers[4]">{{roster.nation}}</div>
                     <div class="attribute" [attr.data-name]="headers[5]">{{roster.formation}}</div>
                     <div class="attribute" [attr.data-name]="headers[6]">
diff --git a/src/app/components/leaderboard/leaderboard.component.scss b/src/app/components/leaderboard/leaderboard.component.scss
index 4152e6a..9c38ccb 100644
--- a/src/app/components/leaderboard/leaderboard.component.scss
+++ b/src/app/components/leaderboard/leaderboard.component.scss
@@ -91,7 +91,7 @@ li {
         
         .item {
             display: grid;
-            grid-template-columns: 2rem 15rem 7rem 7rem 8rem 6rem 1fr;
+            grid-template-columns: 2rem 15rem 9rem 9rem 8rem 6rem 1fr;
             border: none;
             padding: 0;
             margin: 0;
@@ -102,16 +102,6 @@ li {
             
         }
         
-        // .best-player {
-        //     --column-width-min: 10rem;
-        // }
-        // .pos-nation {
-        //     --column-width-min: 10rem;
-        // }
-        // .name-rating {
-        //     --column-width-min: 10rem;
-        // }
-        
         .attribute {
             display: block;
             border-right: 1px solid gray;
@@ -130,6 +120,49 @@ li {
     
 }
 
+// .stars {
+//     --star-color: #9e9e9e;
+//     display: inline-block;
+//     font-size: 0.8rem;
+//     font-family: Times;
+//     line-height: 1;
+//     &::after {
+//         content: '★★★★★';
+//         letter-spacing: 3px;
+//         color: transparent;
+//     }
+// }   
+
+// .collection-container .attribute.starter-rating {
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-evenly;
+//     .stars {
+//         &::after {
+//             background: linear-gradient(90deg,
+//                 var(--star-background) var(--starter-rating),
+//                 var(--star-color) var(--starter-rating)
+//             );
+//             background-clip: text;
+//         }
+        
+//     }
+// }
+// .collection-container .attribute.squad-rating {
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-evenly;
+//     .stars {
+//         &::after {
+//             background: linear-gradient(90deg,
+//                 var(--star-background) var(--squad-rating),
+//                 var(--star-color) var(--squad-rating)
+//             );
+//             background-clip: text;
+//         }
+//     }
+// }
+
 
 
 
diff --git a/src/app/models/player.ts b/src/app/models/player.ts
index f786094..da3e135 100644
--- a/src/app/models/player.ts
+++ b/src/app/models/player.ts
@@ -36,7 +36,7 @@ export interface Player {
     pitchPosition?: string;
     pitchPositionIndex?: number;
     pitchRating?: number;
-    dragDisabled?: boolean;
+    chemistryNum: number;
     // *** Above are properties we've already added ***
     // *** Below are properties we've yet to add ***
     firstNameUsage?: string;
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 223a4dd..ec22439 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -12,35 +12,22 @@ export class AuthService {
   currentAuthState = this.authStateSource.asObservable();
   
   
-  constructor(public auth: AngularFireAuth, private db: AngularFirestore) { }
+  constructor(public afAuth: AngularFireAuth, private afs: AngularFirestore) { }
 
-  async login(email: string, password: string) {
-    await this.auth.signInWithEmailAndPassword(email, password)
-      .then(res => {
-        this.changeAuthState(true);
-        localStorage.setItem('user', JSON.stringify(res.user));
-      })
-      .catch(err => {
-        var errorCode = err.code;
-        var errorMessage = err.message;
-        if (errorCode === 'auth/wrong-password') {
-          alert('Wrong password.');
-        } else {
-          alert(errorMessage);
-        }
-        console.log(err);
-      }); 
+  login(email: string, password: string) {
+    return this.afAuth.signInWithEmailAndPassword(email, password)
+      
   }
 
   async signUp(email: string, password: string) {
-    await this.auth.createUserWithEmailAndPassword(email, password)
+    await this.afAuth.createUserWithEmailAndPassword(email, password)
       .then(res => {
         this.changeAuthState(true);
         localStorage.setItem('user', JSON.stringify(res.user));
       });
     this.getUser().subscribe((user) => {
       if (user) {
-        this.db.collection('users').doc(user.uid).set({
+        this.afs.collection('users').doc(user.uid).set({
           email: email,
           userId: user.uid
         });
@@ -52,13 +39,13 @@ export class AuthService {
   }
 
   logout() {
-    this.auth.signOut();
+    this.afAuth.signOut();
     this.changeAuthState(true);
     localStorage.removeItem('user');
   }
 
   getUser() {
-    const user = this.auth.user;
+    const user = this.afAuth.user;
     return user
   }
 
diff --git a/src/styles.scss b/src/styles.scss
index 36b56c8..43e5be7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -23,15 +23,41 @@
 
 // GLOBAL STYLES
 
+:root {
+  --star-size: 1rem;
+  --star-color: #fff;
+  --star-background:#fc0;
+  --starter-rating: 0%;
+  --squad-rating: 0%;
+}
+
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
 html, body { 
   height: 100%;
 }
 
 body { 
   margin: 0; 
+  padding: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif; 
 }
 
+button {
+  cursor: pointer;
+}
+
+// CLASS OVERRIDES
+
+input.login-overlay__input.login-overlay__input--override {
+  margin: 0.5rem 1.5rem;
+  width: auto;
+}
+
+// ANGULAR MATERIAL CLASSES *DO NOT TOUCH*
+
 .mat-expansion-indicator::after {
   color: #c8c8c887;
 }
@@ -40,3 +66,7 @@ body {
   justify-content: center;
   width: 100%;
 }
+
+.mat-list-base {
+  background-color: #3F51B5;
+}
\ No newline at end of file

From fdf9ac971c63623b9d25bf58414235f0591f15bf Mon Sep 17 00:00:00 2001
From: maxkarnold <60246034+maxkarnold@users.noreply.github.com>
Date: Wed, 27 Oct 2021 14:07:01 -0500
Subject: [PATCH 2/2] added 1 formation

---
 src/app/components/home/home.component.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 73f3d04..17122c4 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -306,6 +306,8 @@ export class HomeComponent implements OnInit, OnDestroy {
       } else if (DMCount === 2) {
         if (MCCount === 1 && AMRLCount === 2 && STCount === 1) {
           this.formation = "4-2-1-3 DM Wide";
+        } else if (MCCount === 1 && MRLCount === 2 && STCount === 1) {
+          this.formation = "4-2-3-1 DM MC Wide";
         } else if (MCCount === 3 && STCount === 1) {
           this.formation = "4-2-3-1 DM";
         } else if (MCCount === 2 && AMCCount === 1 && STCount === 1) {