Match Details UI

src/app/match-details/match-details.page.html

@@ -14,7 +14,7 @@
             <img src="assets/home-team/ground.svg">
         </figure>
         
-        <ul class="field-setting">
+        <ul class="field-setting" [ngClass]="{'active': isHomeTeamSelected }">
             <li *ngFor="let player of matchData.home.players"
             [ngStyle]="{ 'top.%': getPosition(player.position.y), 'left.%': getPosition(player.position.x) }"
             (click)="selectPlayerDetails()">
@@ -22,10 +22,25 @@
             </li>
         </ul>
 
+        <ul class="field-setting" [ngClass]="{'active': !isHomeTeamSelected }">
+            <li *ngFor="let player of matchData.away.players"
+            [ngStyle]="{ 'top.%': getPosition(player.position.y), 'left.%': getPosition(player.position.x) }"
+            (click)="selectPlayerDetails()">
+                <img [src]="player.image">
+            </li>
+        </ul>
+
+        <div class="team-selection" [ngClass]="{'active': !isHomeTeamSelected }">
+            <button (click)="isHomeTeamSelected = true"> {{ matchData.home.name }} </button>
+            <button (click)="isHomeTeamSelected = false"> {{ matchData.away.name }} </button>
+        </div>
+
     </div>
 
     <section class="player-details" [ngClass]="{'active' : isPlayerSelected }">
-        <button class="close-button" (click)="isPlayerSelected = false"> <ion-icon name="close-outline"></ion-icon> </button>
+        <button class="close-button" (click)="isPlayerSelected = false"> 
+            <ion-icon name="close-outline"></ion-icon> 
+        </button>
         <app-player-details></app-player-details>
     </section>
 

src/app/match-details/match-details.page.scss

@@ -72,7 +72,7 @@ ion-content {
     position: fixed;
 }
 
-.field-image {    
+.field-image {
     display: block;
     width: 100%;
     height: 100%;  
@@ -80,45 +80,78 @@ ion-content {
     position: absolute;
     left: 0;
     top: 0;
+    z-index: 0;
 
     img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center;
+        animation: popOut 0.3s forwards linear;
+        border-radius: 50%;
+        transform: scale(0);
+    }
+}
+
+@keyframes popOut {
+    0% {
+        transform: scale(0);
+        border-radius: 50%;
+    }
+    90% {
+        transform: scale(1);
+        border-radius: 50%;
+    }
+
+    100% {
+        transform: scale(1);
+        border-radius: 0%;
     }
 }
 
 .field-setting {
-    position: relative;
+    position: absolute;
     z-index: 1;
     list-style: none;
     padding: 0;
     margin: 0;
     top: 10%;
-    left: 5%;
-    width: 90%;
+    left: 10%;
+    width: 80%;
     height: 80%;
-    overflow: auto;
+    overflow: visible;
+    opacity: 0;
+    transition: transform 0.5s, opacity 0.3s;
+    transform: translateY(10%);
+    pointer-events: none;
+    transition-delay: 0.3s;
+
+    &.active {
+        transform: translateY(0%);
+        opacity: 1;
+        pointer-events: all;
+    }
     
     li {
         position: absolute;
         left: 0;
         top: 0;
+        z-index: 1;
 
-        &::before {
+        &::after {
             content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
+            display: block;
             width: 50px;
             height: 10px;
             border-radius: 50%;
             background-color: white;
             box-shadow: 0px 2px 5px $dark-blue;
+            margin-top: -5px;
         }
         
         img {
+            display: block;
+            margin: 0 auto;
             width: 50px;
             height: 50px;
             object-fit: cover;
@@ -148,19 +181,23 @@ ion-content {
 
     .close-button {
         display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
         width: 40px;
         height: 40px;
-        margin: 15px 15px 16px auto;
+        margin: 15px 5% 15px auto;
         border-radius: 50%;
         border: 1px solid $blue-grey;
         background-color: rgba($blue-grey, 0.1);
         display: flex;
         align-items: center;
         justify-content: center;
+        z-index: 2;
 
         ion-icon {
             color: $blue-grey;
-            font-size: 17px;
+            font-size: 20px;
         }
     }
 
@@ -168,4 +205,57 @@ ion-content {
         opacity: 1;
         transform: translateY(100px);
     }
+}
+
+.team-selection {
+    position: fixed;
+    left: calc(50% - 100px);
+    bottom: 20px;
+    width: 200px;
+    z-index: 1;
+    height: 40px;
+    border-radius: 30px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    background-color: rgba(white, 0.5);
+
+    &.active {
+        &::before {
+            transform: translateX(100%);
+        }
+
+        button:nth-child(2) {
+            color: #4eb54b;
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100px;
+        height: 100%;
+        border-radius: 30px;
+        background-color: white;
+        transition: transform 0.3s;
+    }
+
+    button {
+        position: relative;
+        width: 100px;
+        border-radius: 30px;
+        border-radius: 30px;
+        transition: color 0.3s;
+        color: #4eb54b;        
+        height: 100%;
+        background-color: transparent;
+        font-weight: 700;
+        letter-spacing: 1px;
+
+        &:nth-child(2) {
+            color: white;
+        }
+    }
 }

src/app/match-details/match-details.page.ts

@@ -26,7 +26,7 @@ type ITeam = {
 })
 export class MatchDetailsPage implements OnInit {
     isPlayerSelected: boolean = false;
-    isHomeTeamSelected: boolean = false;
+    isHomeTeamSelected: boolean = true;
 
     matchData: {
         home: ITeam,
@@ -72,7 +72,7 @@ export class MatchDetailsPage implements OnInit {
                 jersey: i.toString(),
                 position: {
                     x: Math.round((30) * (Math.cos(theta[i]))),
-                    y: Math.round((35) * (Math.sin(theta[i]))),
+                    y: Math.round((30) * (Math.sin(theta[i]))),
                 }
             });
         }