Image optimizations + chat page ball data changed to icon

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

@@ -24,7 +24,7 @@
             </ul>
 
             <figure class="active">
-                <img src="assets/home-team/stadium-sv.svg">
+                <img src="assets/home-team/stadium-sv.png">
                 <img [src]="matchDay.staduim.topView">
             </figure>
 

src/app/booking/booking.page.ts

@@ -28,15 +28,15 @@ export class BookingPage implements OnInit {
     stadiums = [{
         name: 'Chinnaswamy',
         sideView: 'https://www.royalchallengers.com/PRRCB01/public/styles/1061x767_landscape/public/2020-04/275679.jpg?h=61617f72&itok=6xKgHpE-',
-        topView: 'assets/home-team/stadium-tv.svg',
+        topView: 'assets/home-team/stadium-tv.png',
     }, {
         name: 'IS Bindra',
         sideView: 'https://5.imimg.com/data5/VO/UB/MY-3103550/ae-cricket-stadium-lighting-500x500.jpg',
-        topView: 'assets/home-team/stadium-tv.svg'
+        topView: 'assets/home-team/stadium-tv.png'
     }, {
         name: 'Chidambaram Stadium',
         sideView: 'https://sportzwiki.com/wp-content/uploads/2019/03/11.jpg',
-        topView: 'assets/home-team/stadium-tv.svg',
+        topView: 'assets/home-team/stadium-tv.png',
     }];
 
     slideOpts = {

src/app/chat/chat.page.html

@@ -36,7 +36,7 @@
 
             <section class="chat-per-ball" *ngFor="let ballChats of overChat.ballChat; let ballIndex = index"
             id="ball-{{ overIndex }}-{{ ballIndex }}">
-                <header class="ball-heading"> Ball {{ ballChats.ball + 1 }} </header>
+                <header class="ball-heading"> <img src="assets/icons/ball.png" alt=""> #{{ ballChats.ball + 1 }} </header>
 
                 <ul>
                     <li *ngFor="let chat of ballChats.chat; let chatIndex = index" 

src/app/chat/chat.page.scss

@@ -134,11 +134,20 @@ ion-content {
     margin: 20px 0px 70px 0px;
 
     .ball-heading {        
-        font-size: 0.9rem;
+        font-size: 1rem;
         color: $blue-grey;
         font-weight: 500;
         letter-spacing: 1px;
-        text-align: center;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0 5%;
+
+        img {
+            width: 20px;
+            margin-right: 10px;
+        }
     }
 
     ul {

src/app/chat/chat.page.ts

@@ -194,6 +194,6 @@ export class ChatPage implements OnInit {
             this.scrollToEnd();
             
             this.myMessage = '';
-        }, 1000);
+        }, 500);
     }
 }

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

@@ -1,4 +1,4 @@
-<ion-content *ngIf="matchStats">
+<ion-content *ngIf="matchStats" [scrollEvents]="true">
 
     <section class="action-buttons">
         <div class="nav">
@@ -54,7 +54,7 @@
                     <tbody>
                         <tr *ngFor="let player of matchStats.awayTeam.batting">
                             <td>
-                                <label (click)="isPlayerSelected = true"> {{ player.name }} </label> <br>
+                                <label> {{ player.name }} </label> <br>
                                 <span> {{ player.wicketTo }} </span>
                             </td>
         
@@ -119,7 +119,7 @@
                     <tbody>
                         <tr *ngFor="let player of matchStats.homeTeam.batting">
                             <td>
-                                <label (click)="isPlayerSelected = true"> {{ player.name }} </label> <br>
+                                <label> {{ player.name }} </label> <br>
                                 <span> {{ player.wicketTo }} </span>
                             </td>
         
@@ -153,13 +153,21 @@
     <ng-container *ngIf="selectedSegment === 'MATCH'">
         <div class="field-container" *ngIf="selectedRoster === 'LIVE'">
             <figure class="field-image">
-                <img src="assets/home-team/ground.svg">
+                <img src="assets/home-team/ground.png">
             </figure>
             
             <ul class="field-setting" [ngClass]="{'active': selectedRoster === 'LIVE' }">
                 <li *ngFor="let player of matchData.home.players" (click)="selectPlayerDetails()">
                     <img [src]="player.image">
                 </li>
+
+                <li (click)="selectPlayerDetails()">
+                    <img [src]="matchData.away.players[0].image">
+                </li>
+
+                <li (click)="selectPlayerDetails()">
+                    <img [src]="matchData.away.players[1].image">
+                </li>
             </ul>
         </div>
     
@@ -171,13 +179,14 @@
 
         <section class="player-list" *ngIf="selectedRoster === 'HOME'">
             <ul>
-                <li *ngFor="let player of matchData.home.players">
+                <li *ngFor="let player of matchData.home.players" (click)="selectPlayerDetails()">
                      <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.isTopScorer" src="assets/icons/orange-cap.png">
                         <img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
                         <img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
                      </div>
@@ -187,13 +196,14 @@
     
         <section class="player-list" *ngIf="selectedRoster === 'AWAY'">
             <ul>
-                <li *ngFor="let player of matchData.away.players">
+                <li *ngFor="let player of matchData.away.players" (click)="selectPlayerDetails()">
                      <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.isTopScorer" src="assets/icons/orange-cap.png">
                         <img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
                         <img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
                      </div>

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

@@ -89,7 +89,9 @@ ion-content {
 }
 
 .field-container {
-    position: relative;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 70px;
     height: calc(100vh - 70px);
     width: 100%;
     z-index: 0;
@@ -138,10 +140,10 @@ ion-content {
     list-style: none;
     padding: 0;
     margin: 0;
-    top: 10%;
-    left: 10%;
-    width: 80%;
-    height: 80%;
+    top: 5%;
+    left: 0%;
+    width: 100%;
+    height: 90%;
     overflow: visible;
     opacity: 0;
     transition: transform 0.5s, opacity 0.3s;
@@ -182,11 +184,69 @@ ion-content {
             position: relative;
         }
 
-        h5 {
-            font-weight: 500;
-            letter-spacing: 0.5px;
-            color: $dark-blue;
-            font-size: 14px;
+        &:nth-child(1) {
+            left: 10%;
+            top: 90%;
+        }
+
+        &:nth-child(2) {
+            left: 15%;
+            top: 60%;
+        }
+
+        &:nth-child(3) {
+            left: 15%;
+            top: 30%;
+        }
+
+        &:nth-child(4) {
+            left: 5%;
+            top: 5%;
+        }
+
+        &:nth-child(5) {
+            left: 40%;
+            top: 20%;
+        }
+
+        &:nth-child(6) {
+            left: 70%;
+            top: 20%;
+        }
+
+        &:nth-child(7) {
+            left: 80%;
+            top: 40%;
+        }
+
+        &:nth-child(8) {
+            left: 70%;
+            top: 60%;
+        }
+
+        &:nth-child(9) {
+            left: 40%;
+            top: 80%;
+        }
+
+        &:nth-child(10) {
+            left: 80%;
+            top: 90%;
+        }
+        
+        &:nth-child(11) {
+            left: 2%;
+            top: 40%;
+        }
+
+        &:nth-child(12) {
+            left: 45%;
+            top: 53%;
+        }
+
+        &:nth-child(13) {
+            left: 42%;
+            top: 33%;
         }
     }
 }
@@ -420,6 +480,10 @@ ion-content {
     }
 }
 
+.score-container {
+    margin-top: 100px;
+}
+
 .score-card {
     background-color: white;
     box-shadow: 0px 0px 10px $blue-grey;
@@ -566,7 +630,7 @@ ion-content {
             margin: 0;
             font-size: 1rem;
             color: white;
-            max-width: calc(100% - 60px);
+            max-width: calc(100% - 80px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;

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

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { IscoreCard } from '../live/live.page';
 import * as faker from 'faker';
+import { IonContent } from '@ionic/angular';
 
 
 type IPlayer = {
@@ -11,6 +12,7 @@ type IPlayer = {
     jersey: number,
     isCaptain?: boolean,
     isKeeper?: boolean,
+    isTopScorer?: boolean,
     role: string,
 };
 
@@ -27,11 +29,12 @@ type ITeam = {
     styleUrls: ['./match-details.page.scss'],
 })
 export class MatchDetailsPage implements OnInit {
+    @ViewChild(IonContent, { static: false }) content: IonContent;
     isPlayerSelected: boolean = false;
     isHomeTeamSelected: boolean = true;
 
     selectedSegment: string = 'MATCH';
-    selectedRoster: string = 'HOME';
+    selectedRoster: string = 'LIVE';
 
     roles = ['BOWLER', 'BATSMAN'];
 
@@ -51,6 +54,12 @@ export class MatchDetailsPage implements OnInit {
         private route: ActivatedRoute,
     ) { }
 
+
+    scrollToPlayerDetails() {
+        let details: any = document.querySelector('.player-details');
+        this.content.scrollToPoint(0, (details.offsetTop - 200), 1000);
+    }
+
     ngOnInit() {
         this.matchStats = JSON.parse(this.route.snapshot.paramMap.get('matchStats'));
 
@@ -75,7 +84,8 @@ export class MatchDetailsPage implements OnInit {
                 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))]
+                role: this.roles[Math.floor(Math.random() * (2 - 0))],
+                isTopScorer: i === 3? true : false
             });
 
 
@@ -96,6 +106,10 @@ export class MatchDetailsPage implements OnInit {
 
     selectPlayerDetails() {
         this.isPlayerSelected = true;
+
+        setTimeout(() => {
+            this.scrollToPlayerDetails();
+        }, 100);
     }
 
     limitDecimals(value: number) {