{{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}
-
+
+ {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}
+ Live from {{ matchStats.stadium }} Stadium
+ Live from {{ matchStats.stadium }} Stadium
-
+
-
+
+
+
+
+
+
+
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);
+ }
+
}
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ {{ 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) }} + | +