Merge pull request #4 from maxkarnold/dev

Dev
maxkarnold · Oct 19, 2021 · 218eedf · 218eedf
2 parents b28156d + 8c17f9c
commit 218eedf
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -60,10 +60,17 @@
                             <div class="exit-container">
                                 <button mat-button (click)="infoOverlay()" ><mat-icon>close</mat-icon></button>
                             </div>
-                            <p>
-                                Drag and drop players from the bench to the pitch. Players have ratings based on their positions. The box that highlights in green is the best position for a player. The box that highlights yellow is an alternate position (-5 rating). 
-                                The box that highlights red is not a viable position (-20 rating).
-                            </p>
+                            <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.   
+                                <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>
+                                    <li><div class="color-code competent"></div><div>Highlighted in green-yellow is a competent position (-6 rating).</div></li>
+                                    <li><div class="color-code unconvincing"></div><div>Highlighted in dark yellow is an unconvincing position (-12 rating).</div></li>
+                                    <li><div class="color-code awkward"></div><div>Highlighted in dark orange is an awkward position (-25 rating).</div></li>
+                                    <li><div class="color-code ineffectual"></div><div>Highlighted in dark red is an ineffectual position (set to 20).</div></li>
+                                </ul>   
+                            </div>
 
                         </div>
                 </ng-template>

diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
@@ -254,9 +254,11 @@
     }
 }
 
+
 .formation {
     text-align: center;
-    font-size: 1rem;
+    z-index: 5;
+    font-size: 0.7rem;
     background-color: #424242;
     padding: 10px;
     border-radius: 5px;
@@ -265,7 +267,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    transform: translate(-10%, 27.5%);
+    transform: translate(-2%, 10%);
 }
 
 .tactics-container {
@@ -730,6 +732,39 @@
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
     border: 2px dashed white;
 }
+.info-paragraph li {
+    display: flex;
+    align-items: center;
+    div:last-child {
+        flex: 1;
+        display: inline-block;
+    }
+    .color-code {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        margin-right: 1rem;
+    }
+}
+
+.natural {
+    background-color: #00ff00;
+}
+.accomplished {
+    background-color: #009700;
+}
+.competent {
+    background-color: #699424;
+}
+.unconvincing {
+    background-color: #888800;
+}
+.awkward {
+    background-color: #b36302;
+}
+.ineffectual {
+    background-color: #830000;
+}
 .natural-placeholder {
     border: ridge 2px #00ff00;
     background-color: #00ff00;

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
@@ -2760,6 +2760,9 @@ export class HomeComponent implements OnInit, OnDestroy {
           box.posBoxClass = 'active pos-box';
           box.pitchPlayer = undefined;
         }
+        for (let index in this.positions) {
+          this.positions[index].amount = 0;
+        }
         this.afs.getRoster(user.uid, saveLocation).subscribe((obj) => {
           const data = obj.payload.data();
           if (data !== undefined) {