Optimized images included

src/app/booking/booking.page.ts

@@ -114,7 +114,7 @@ export class BookingPage implements OnInit {
 
                 let price = faker.commerce.price();
 
-                let randomNumber = Math.random() * (15 - 0) + 0;
+                let randomNumber = Math.random() * (15 - 0);
 
                 for (let k = 0; k < randomNumber; k += 1) {
                     this.bookingSeatsData[i].seatsAvailable[j].seats.push({

src/app/collections/collections.page.scss

@@ -70,7 +70,7 @@ ion-slides {
     img {        
         position: absolute;
         left: 40vw;
-        bottom: 49.7vh;
+        bottom: 50vh;
         object-fit: contain;
         object-position: bottom;
 

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

@@ -11,10 +11,12 @@
         </div>
     </section>
     
-    <section class="segments" [ngClass]="{'active': selectedSegment === 'LIVE' }">
-        <button (click)="selectedSegment = 'SCORE'"> Scorecard </button>
-        <button (click)="selectedSegment = 'LIVE'"> Live </button>
-    </section>
+    <div class="segment-holder" [ngClass]="{'no-bg' : selectedSegment === 'MATCH' && selectedRoster === 'LIVE'} ">
+        <section class="segments" [ngClass]="{'active': selectedSegment === 'MATCH' }">
+            <button (click)="selectedSegment = 'SCORE'"> Scorecard </button>
+            <button (click)="selectedSegment = 'MATCH'"> Match </button>
+        </section>
+    </div>
 
 
     <div class="score-container" *ngIf="selectedSegment === 'SCORE'">
@@ -148,36 +150,62 @@
 
     </div>
 
+    <ng-container *ngIf="selectedSegment === 'MATCH'">
+        <div class="field-container" *ngIf="selectedRoster === 'LIVE'">
+            <figure class="field-image">
+                <img src="assets/home-team/ground.svg">
+            </figure>
+            
+            <ul class="field-setting" [ngClass]="{'active': selectedRoster === 'LIVE' }">
+                <li *ngFor="let player of matchData.home.players" (click)="selectPlayerDetails()">
+                    <img [src]="player.image">
+                </li>
+            </ul>
+        </div>
     
-    <div class="field-container" *ngIf="selectedSegment === 'LIVE'">
-        <figure class="field-image">
-            <img src="assets/home-team/ground.svg">
-        </figure>
-        
-        <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()">
-                <img [src]="player.image">
-            </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 *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">
+            <button (click)="selectedRoster = 'HOME'"> {{ matchData.home.name }} </button>
+            <button class="live" (click)="selectedRoster = 'LIVE'"> <span></span> </button>
+            <button (click)="selectedRoster = 'AWAY'"> {{ matchData.away.name }} </button>
         </div>
 
-    </div>
+        <section class="player-list" *ngIf="selectedRoster === 'HOME'">
+            <ul>
+                <li *ngFor="let player of matchData.home.players">
+                     <label> {{ player.jersey }} </label>
+                     <img [src]="player.image" class="player-image">
+                     <div class="details">
+                        <h4> {{ player.name }} </h4>
+                        <img *ngIf="player.isCaptain" src="assets/icons/captain-band.png">
+                        <img *ngIf="player.isKeeper" src="assets/icons/gloves.png">
+                        <img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
+                        <img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
+                     </div>
+                </li>
+            </ul>
+        </section>
+    
+        <section class="player-list" *ngIf="selectedRoster === 'AWAY'">
+            <ul>
+                <li *ngFor="let player of matchData.away.players">
+                     <label> {{ player.jersey }} </label>
+                     <img [src]="player.image" class="player-image">
+                     <div class="details">
+                        <h4> {{ player.name }} </h4>
+                        <img *ngIf="player.isCaptain" src="assets/icons/captain-band.png">
+                        <img *ngIf="player.isKeeper" src="assets/icons/gloves.png">
+                        <img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
+                        <img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
+                     </div>
+                </li>
+            </ul>
+        </section>
+    </ng-container>
+
+    
+    
 
-    <section class="player-details" [ngClass]="{'active' : isPlayerSelected }">
+    <section class="player-details" *ngIf="isPlayerSelected">
         <button class="close-button" (click)="isPlayerSelected = false"> 
             <ion-icon name="close-outline"></ion-icon> 
         </button>

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

@@ -1,9 +1,13 @@
 $dark-blue: #161e2d;
 $blue-grey: #949599;
 $luminous-blue: #2ea9f5;
+$voilet: #424264;
+$dark-voilet: #09092b;
+$green: #01b868;
+$pink: #d73e53;
 
 ion-content {
-    --background: #e9e9ea;
+    --background: white;
 }
 
 .action-buttons {
@@ -12,7 +16,8 @@ ion-content {
     align-items: flex-start;
     padding: 0 3% 0 0%;
     height: 70px;
-    position: fixed;
+    position: sticky;
+    position: -webkit-sticky;
     left: 0;
     top: 0;
     background-color: lighten($blue-grey, 35%);
@@ -85,7 +90,7 @@ ion-content {
 
 .field-container {
     position: relative;
-    height: calc(100vh - 70px - 80px);
+    height: calc(100vh - 70px);
     width: 100%;
     z-index: 0;
 }
@@ -187,18 +192,14 @@ ion-content {
 }
 
 .player-details {
-    position: fixed;
+    position: relative;
     z-index: 2;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0px 0px 5px $dark-blue;
-    transform: translateY(100vh);
-    opacity: 0;
-    transition: transform 0.5s, 0.3s;
     background-color: $dark-blue;
     left: 0;
     top: 0;
-    pointer-events: none;
 
     .close-button {
         display: block;
@@ -242,12 +243,20 @@ ion-content {
     overflow: hidden;
     background-color: rgba(white, 0.5);
 
+    &.change-bg {
+        background-color: rgba($blue-grey, 0.3);
+
+        .live span {
+            background-color: white;
+        }
+    }
+
     &.active {
         &::before {
-            transform: translateX(100%);
+            transform: translateX(120px);
         }
 
-        button:nth-child(2) {
+        button:nth-child(3) {
             color: #4eb54b;
         }
 
@@ -256,21 +265,33 @@ ion-content {
         }
     }
 
+    &.live {
+        &::before {
+            transform: translateX(80px);
+            width: 40px;
+        }
+
+        button:nth-child(1) {
+            color: white;
+        }
+    }
+
     &::before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
-        width: 100px;
+        width: 80px;
         height: 100%;
         border-radius: 30px;
         background-color: white;
-        transition: transform 0.3s;
+        transition: transform 0.3s, width 0.5s;
+        transform: translateX(0px);
     }
 
     button {
         position: relative;
-        width: 100px;
+        width: 80px;
         border-radius: 30px;
         border-radius: 30px;
         transition: color 0.3s;
@@ -279,18 +300,74 @@ ion-content {
         background-color: transparent;
         font-weight: 700;
         letter-spacing: 1px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-        &:nth-child(2) {
+        &.live {
+            width: 40px;
+            position: relative;
+
+            span {
+                width: 12px;
+                height: 12px;
+                background-color: #4eb54b;
+                display: block;
+                border-radius: 50%;
+
+                &:before {
+                    content: '';
+                    left: 0;
+                    top: 0;
+                    height: 16px;
+                    width: 16px;
+                    position: absolute;
+                    border-radius: 50%;
+                    border: 12px solid rgba(#4eb54b, 0.5);
+                    opacity: 0.7;
+                    animation: rippleBorder 1.5s infinite;
+                }
+            }
+
+            @keyframes rippleBorder {
+                0% {
+                    opacity: 0;
+                    transform: scale(0);
+                } 50% {
+                    opacity: 1;
+                    transform: scale(0.8);
+                }
+                100% {
+                    opacity: 0;
+                    transform: scale(0.8);
+                }
+            }
+        }
+
+        &:nth-child(3) {
             color: white;
         }
     }
 }
 
+.segment-holder {
+    position: fixed;
+    left: 0;
+    top: 70px;
+    z-index: 2;
+    width: 100%;
+    padding: 20px 0;
+    background-color: lighten($voilet, 10%);
+
+    &.no-bg {
+        background-color: transparent;
+    }
+}
+
 .segments {
-    margin: 90px auto 20px auto;
-    width: 70%;
     position: relative;
-    z-index: 1;
+    margin: 0 auto;
+    width: 70%;
     height: 40px;
     border-radius: 30px;
     display: flex;
@@ -434,5 +511,70 @@ ion-content {
                 }            
             }
         }
-    }    
+    }
+}
+
+.player-list {
+    background: linear-gradient(0deg, $voilet 50%, $dark-voilet);
+    margin-top: 78px;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        background-color: rgba(#ffff, 0.1);
+        border-bottom: 1px solid rgba(white, 0.1);
+        padding: 15px 5%;
+    }
+
+    label {
+        background-color: $pink;
+        color: white;
+        width: 30px;
+        height: 30px;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+    }
+
+    .player-image {
+        width: 60px;
+        height: 60px;
+        object-fit: cover;
+        object-position: top;
+        border-radius: 1px solid $blue-grey;
+        background-color: rgba($blue-grey, 0.3);
+        border-radius: 50%;
+        margin: 0 auto;
+    }
+
+    .details {
+        width: calc(100% - 120px);
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        h4 {
+            margin: 0;
+            font-size: 1rem;
+            color: white;
+            max-width: calc(100% - 60px);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        img {
+            width: 20px;
+            margin: 0 10px;
+        }
+    }
 }

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

@@ -2,16 +2,16 @@ import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { IscoreCard } from '../live/live.page';
+import * as faker from 'faker';
 
 
 type IPlayer = {
     name: string,
     image: string,
-    jersey: string,
-    position: {
-        x: number,
-        y: number
-    }
+    jersey: number,
+    isCaptain?: boolean,
+    isKeeper?: boolean,
+    role: string,
 };
 
 type ITeam = {
@@ -30,7 +30,10 @@ export class MatchDetailsPage implements OnInit {
     isPlayerSelected: boolean = false;
     isHomeTeamSelected: boolean = true;
 
-    selectedSegment: string = 'SCORE';
+    selectedSegment: string = 'MATCH';
+    selectedRoster: string = 'HOME';
+
+    roles = ['BOWLER', 'BATSMAN'];
 
     matchData: {
         home: ITeam,
@@ -63,38 +66,30 @@ export class MatchDetailsPage implements OnInit {
                 players: []
             }
         };
-
-        var theta = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), Math.PI, 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 3 * (Math.PI / 2), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6)];
-
+        
 
         for (let i = 1; i < 12; i += 1) {
             this.matchData.home.players.push({
-                name: 'Player ' + i.toString(),
+                name: faker.name.findName(),
                 image: 'assets/home-team/roster/' + i.toString() + '.png',
-                jersey: i.toString(),
-                position: {
-                    x: Math.round((45) * (Math.cos(theta[i]))),
-                    y: Math.round((40) * (Math.sin(theta[i]))),
-                }
+                jersey: Math.ceil(Math.random() * (99 - 1)),
+                isCaptain: i == 3? true : false,
+                isKeeper: i === 5? true : false,
+                role: this.roles[Math.floor(Math.random() * (2 - 0))]
             });
 
 
             this.matchData.away.players.push({
-                name: 'Player ' + i.toString(),
+                name: faker.name.findName(),
                 image: 'assets/mi-roster/' + i.toString() + '.png',
-                jersey: i.toString(),
-                position: {
-                    x: Math.round((30) * (Math.cos(theta[i]))),
-                    y: Math.round((30) * (Math.sin(theta[i]))),
-                }
+                jersey: Math.ceil(Math.random() * (99 - 1)),
+                isCaptain: i == 5? true : false,
+                isKeeper: i === 4? true : false,
+                role: this.roles[Math.floor(Math.random() * (2 - 0))]
             });
         }
     }
 
-    getPosition(position) {
-        return ((90 / 2) - parseInt(position));
-    }
-
     back() {
         this.location.back();
     }