Scorecard details page integrated with match details page

src/app/live/live.page.html

@@ -13,7 +13,7 @@
         </div>
 
 
-        <section class="match-card" [routerLink]="['/match-details']">
+        <section class="match-card" (click)="showMatchDetails()">
             <span class="format"> T20 Qualifiers </span>
             <header> <h4> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} </h4> </header>
             <p> <ion-icon src="assets/icons/helmet.svg"></ion-icon> Sehwag, KL Rahul </p>
@@ -75,7 +75,7 @@
                         </tbody>
                     </table>
 
-                    <button class="view-more-button"> View More </button>
+                    <button class="view-more-button" (click)="showMatchDetails()"> View More </button>
                 </section>
 
             </li>

src/app/live/live.page.ts

@@ -5,7 +5,7 @@ import { ChatPage } from '../chat/chat.page';
 import * as faker from 'faker';
 import { Router } from '@angular/router';
 
-type IscoreCard = {
+export type IscoreCard = {
     teamName: string,
     teamLogo: string,
     batting: Array<{
@@ -53,6 +53,7 @@ export class LivePage implements OnInit {
     };
 
     matchStats: {
+        stadium: string,
         homeTeam: IscoreCard,
         awayTeam: IscoreCard
     };
@@ -169,6 +170,7 @@ export class LivePage implements OnInit {
         }
 
         this.matchStats = {
+            stadium: 'IS Bindra',
             homeTeam: {
                 teamName: 'KXIP',
                 teamLogo: 'assets/home-team/KXIP.svg',
@@ -289,4 +291,8 @@ export class LivePage implements OnInit {
         this.router.navigate(['/booking-details' , { matchData: JSON.stringify(this.bookingSeatsData[index]) }]);
     }
 
+    showMatchDetails() {
+        this.router.navigate(['/match-details', { matchStats: JSON.stringify(this.matchStats) }]);
+    }
+
 }

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

@@ -1,15 +1,155 @@
-<ion-content>
+<ion-content *ngIf="matchStats">
 
     <section class="action-buttons">
-        <div class="nav" (click)="back()">
-            <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        <div class="nav">
+            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
         </div>
+        <header> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} <br> 
+            <span> Live from {{ matchStats.stadium }} Stadium </span> </header>
         <div class="action">
-            <button> <ion-icon name="share-social-outline"></ion-icon> </button>            
+            <button> <ion-icon name="share-social-outline"></ion-icon> </button>
         </div>
     </section>
     
-    <div class="field-container">
+    <section class="segments" [ngClass]="{'active': selectedSegment === 'LIVE' }">
+        <button (click)="selectedSegment = 'SCORE'"> Scorecard </button>
+        <button (click)="selectedSegment = 'LIVE'"> Live </button>
+    </section>
+
+
+    <div class="score-container" *ngIf="selectedSegment === 'SCORE'">
+        <section class="score-card">
+        
+            <header>
+                <img [src]="matchStats.awayTeam.teamLogo">  <h5> {{ matchStats.awayTeam.teamName }} </h5>
+                <p> {{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} <span> ({{ matchStats.awayTeam.overs }}) </span> </p>
+            </header>
+    
+            <div class="container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>
+                                Player
+                            </th>
+                            <th>
+                                Score
+                            </th>
+                            <th>
+                                Balls
+                            </th>
+                            <th>
+                                6s
+                            </th>
+                            <th>
+                                4s
+                            </th>
+                            <th>
+                                RR
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let player of matchStats.awayTeam.batting">
+                            <td>
+                                <label (click)="isPlayerSelected = true"> {{ player.name }} </label> <br>
+                                <span> {{ player.wicketTo }} </span>
+                            </td>
+        
+                            <td>
+                                {{ player.score }}
+                            </td>
+        
+                            <td>
+                                {{ player.ballsPlayed }}
+                            </td>
+        
+                            <td>
+                                {{ player.sixes }}
+                            </td>
+        
+                            <td>
+                                {{ player.boundaries }}
+                            </td>
+        
+                            <td>
+                                {{ limitDecimals(player.score / player.ballsPlayed) }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+        </section>
+    
+    
+        <section class="score-card">
+            
+            <header>
+                <img [src]="matchStats.homeTeam.teamLogo">  <h5> {{ matchStats.homeTeam.teamName }} </h5>
+                <p> {{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} <span> ({{ matchStats.homeTeam.overs }}) </span> </p>
+            </header>
+    
+            <div class="container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>
+                                Player
+                            </th>
+                            <th>
+                                Score
+                            </th>
+                            <th>
+                                Balls
+                            </th>
+                            <th>
+                                6s
+                            </th>
+                            <th>
+                                4s
+                            </th>
+                            <th>
+                                RR
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let player of matchStats.homeTeam.batting">
+                            <td>
+                                <label (click)="isPlayerSelected = true"> {{ player.name }} </label> <br>
+                                <span> {{ player.wicketTo }} </span>
+                            </td>
+        
+                            <td>
+                                {{ player.score }}
+                            </td>
+        
+                            <td>
+                                {{ player.ballsPlayed }}
+                            </td>
+        
+                            <td>
+                                {{ player.sixes }}
+                            </td>
+        
+                            <td>
+                                {{ player.boundaries }}
+                            </td>
+                            <td>
+                                {{ limitDecimals(player.score / player.ballsPlayed) }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+        </section>
+
+    </div>
+
+    
+    <div class="field-container" *ngIf="selectedSegment === 'LIVE'">
         <figure class="field-image">
             <img src="assets/home-team/ground.svg">
         </figure>

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

@@ -1,23 +1,25 @@
 $dark-blue: #161e2d;
 $blue-grey: #949599;
+$luminous-blue: #2ea9f5;
 
 ion-content {
-    --background: transparent;
-    background-color: $dark-blue;    
+    --background: #e9e9ea;
 }
 
 .action-buttons {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: 15px 5% 15px 10px;
+    align-items: flex-start;
+    padding: 0 3% 0 0%;
+    height: 70px;
     position: fixed;
-    top: 0;
     left: 0;
+    top: 0;
+    background-color: lighten($blue-grey, 35%);
+    z-index: 2;
     width: 100%;
-    z-index: 1;
-    background-color: #161e2d;
-    box-shadow: 0px 0px 5px black;
+    align-items: center;
+    box-shadow: 0px 0px 5px $blue-grey;
     
     button {
         background-color: transparent;
@@ -28,20 +30,38 @@ ion-content {
         color: $blue-grey;
         display: flex;
         align-items: center;
+        justify-content: flex-start;
 
         ion-icon {
             font-size: 24px;
         }
         
         span {
-            margin-left: 5px;
-            font-size: 0.9rem;
             font-size: 14px;
         }
     }
 
+    header {
+        flex-grow: 1;
+        padding: 0 10px;
+        font-size: 14px;
+        color: darken($blue-grey, 30%);
+        font-weight: 500;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            font-weight: 500;
+            color: $blue-grey;
+            font-size: 12px;
+        }
+    }
+
     .action {
         display: flex;
+        justify-content: flex-end;
     }
 
     .action button {
@@ -64,12 +84,10 @@ ion-content {
 }
 
 .field-container {
-    left: 0;
-    top: 0px;
-    height: 100vh;
+    position: relative;
+    height: calc(100vh - 70px - 80px);
     width: 100%;
     z-index: 0;
-    position: fixed;
 }
 
 .field-image {
@@ -169,7 +187,7 @@ ion-content {
 }
 
 .player-details {
-    position: relative;
+    position: fixed;
     z-index: 2;
     border-radius: 10px;
     overflow: hidden;
@@ -178,6 +196,9 @@ ion-content {
     opacity: 0;
     transition: transform 0.5s, 0.3s;
     background-color: $dark-blue;
+    left: 0;
+    top: 0;
+    pointer-events: none;
 
     .close-button {
         display: block;
@@ -202,6 +223,7 @@ ion-content {
     }
 
     &.active {
+        pointer-events: all;
         opacity: 1;
         transform: translateY(100px);
     }
@@ -228,6 +250,10 @@ ion-content {
         button:nth-child(2) {
             color: #4eb54b;
         }
+
+        button:nth-child(1) {
+            color: white;
+        }
     }
 
     &::before {
@@ -258,4 +284,155 @@ ion-content {
             color: white;
         }
     }
+}
+
+.segments {
+    margin: 90px auto 20px auto;
+    width: 70%;
+    position: relative;
+    z-index: 1;
+    height: 40px;
+    border-radius: 30px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    background-color: rgba($blue-grey, 0.5);
+
+    &.active {
+        &::before {
+            transform: translateX(100%);
+        }
+
+        button:nth-child(2) {
+            color: white;
+        }
+
+        button:nth-child(1) {
+            color: white;
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        border-radius: 30px;
+        background-color: $luminous-blue;
+        transition: transform 0.3s;
+    }
+
+    button {
+        position: relative;
+        width: 50%;
+        border-radius: 30px;
+        border-radius: 30px;
+        transition: color 0.3s;
+        color: white;        
+        height: 100%;
+        background-color: transparent;
+        font-weight: 700;
+        letter-spacing: 1px;
+        font-size: 1rem;
+
+        &:nth-child(2) {
+            color: white;
+        }
+    }
+}
+
+.score-card {
+    background-color: white;
+    box-shadow: 0px 0px 10px $blue-grey;
+    border-radius: 7px;
+    overflow: hidden;
+    width: 90%;
+    margin: 20px auto;
+
+    .container {
+        width: 90%;
+        margin: 0 auto;
+        overflow: auto;
+        padding-bottom: 20px;
+    }
+
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+        height: 50px;
+        background-color: lighten($blue-grey, 32%);
+        padding: 0 5%;
+        position: sticky;
+        left: 0;
+
+        h5 {
+            margin: 0;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: darken($blue-grey, 30%);
+        }
+
+        img {
+            margin-right: 10px;
+            width: 30px;
+            height: 30px;
+            object-fit: contain;            
+        }
+
+        p {
+            margin: 0;
+            margin-left: 10px;
+            font-size: 0.9rem;
+            color: darken($blue-grey, 30%);
+            font-weight: 700;
+        }
+    }
+
+    table {
+        width: 130vw;
+        color: darken($blue-grey, 30%);
+        font-size: 1rem;
+        text-align: left;
+        overflow-x: auto;
+        
+        thead {
+            font-size: 0.9rem;
+
+            th {
+                padding: 10px 15px;
+            }
+        }
+
+        tbody tr {
+            
+            background-color: lighten($blue-grey, 35%);
+            border-bottom: 2px solid white;
+
+            &:last-child {
+                border-bottom: 0;
+            }
+
+            td {
+                overflow: hidden;
+                padding: 10px 15px;
+    
+                span {
+                    font-size: 0.9rem;
+                    color: darken($blue-grey, 10%);
+                }
+
+                label {
+                    font-weight: 500;
+                }
+                
+                &:nth-child(1) {
+                    width: 40vw;
+                }            
+            }
+        }
+    }    
 }

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { IscoreCard } from '../live/live.page';
 
 
 type IPlayer = {
@@ -28,16 +30,27 @@ export class MatchDetailsPage implements OnInit {
     isPlayerSelected: boolean = false;
     isHomeTeamSelected: boolean = true;
 
+    selectedSegment: string = 'SCORE';
+
     matchData: {
         home: ITeam,
         away: ITeam,
     };
+    
+    matchStats: {
+        stadium: string,
+        homeTeam: IscoreCard,
+        awayTeam: IscoreCard
+    };
 
     constructor(
-        private location: Location
+        private location: Location,
+        private route: ActivatedRoute,
     ) { }
 
     ngOnInit() {
+        this.matchStats = JSON.parse(this.route.snapshot.paramMap.get('matchStats'));
+
         this.matchData = {
             home : {
                 name: 'KXIP',
@@ -90,4 +103,8 @@ export class MatchDetailsPage implements OnInit {
         this.isPlayerSelected = true;
     }
 
+    limitDecimals(value: number) {
+        return value.toPrecision(2);
+    }
+
 }