From d27c62685c30cc6ffbef600f916bbf2a15aa1a37 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Mon, 11 Jan 2021 12:32:32 +0530 Subject: [PATCH] Scorecard details page integrated with match details page --- src/app/live/live.page.html | 4 +- src/app/live/live.page.ts | 8 +- src/app/match-details/match-details.page.html | 150 ++++++++++++- src/app/match-details/match-details.page.scss | 207 ++++++++++++++++-- src/app/match-details/match-details.page.ts | 19 +- 5 files changed, 364 insertions(+), 24 deletions(-) diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 7b9e330..fdb62c1 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -13,7 +13,7 @@ -
+
T20 Qualifiers

{{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}

Sehwag, KL Rahul

@@ -75,7 +75,7 @@ - +
diff --git a/src/app/live/live.page.ts b/src/app/live/live.page.ts index fdf0ebb..208ebd5 100644 --- a/src/app/live/live.page.ts +++ b/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) }]); + } + } diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html index 271b6b1..72de36d 100644 --- a/src/app/match-details/match-details.page.html +++ b/src/app/match-details/match-details.page.html @@ -1,15 +1,155 @@ - +
-
- +
+
+
{{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}
+ Live from {{ matchStats.stadium }} Stadium
- +
-
+
+ + +
+ + +
+
+ +
+
{{ matchStats.awayTeam.teamName }}
+

{{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} ({{ matchStats.awayTeam.overs }})

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Player + + Score + + Balls + + 6s + + 4s + + RR +
+
+ {{ player.wicketTo }} + 		+ {{ player.score }} + + {{ player.ballsPlayed }} + + {{ player.sixes }} + + {{ player.boundaries }} + + {{ limitDecimals(player.score / player.ballsPlayed) }} +
+
+ +
+ + +
+ +
+
{{ matchStats.homeTeam.teamName }}
+

{{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} ({{ matchStats.homeTeam.overs }})

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ Player + + Score + + Balls + + 6s + + 4s + + RR +
+
+ {{ player.wicketTo }} + 		+ {{ player.score }} + + {{ player.ballsPlayed }} + + {{ player.sixes }} + + {{ player.boundaries }} + + {{ limitDecimals(player.score / player.ballsPlayed) }} +
+
+ +
+ +
+ + +
diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss index 04e17b3..1e4e95b 100644 --- a/src/app/match-details/match-details.page.scss +++ b/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; + } + } + } + } } \ No newline at end of file diff --git a/src/app/match-details/match-details.page.ts b/src/app/match-details/match-details.page.ts index d9113eb..10f9451 100644 --- a/src/app/match-details/match-details.page.ts +++ b/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); + } + }