diff --git a/src/app/booking/booking.page.ts b/src/app/booking/booking.page.ts index c8878ec..c3713a8 100644 --- a/src/app/booking/booking.page.ts +++ b/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({ diff --git a/src/app/collections/collections.page.scss b/src/app/collections/collections.page.scss index 4b9b299..3e8d0da 100644 --- a/src/app/collections/collections.page.scss +++ b/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; diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html index 72de36d..8f4e197 100644 --- a/src/app/match-details/match-details.page.html +++ b/src/app/match-details/match-details.page.html @@ -11,10 +11,12 @@ -
- - -
+
+
+ + +
+
@@ -148,36 +150,62 @@
+ +
+
+ +
+ + +
-
-
- -
- - - - - -
- - +
+ + +
-
+
+
    +
  • + + +
    +

    {{ player.name }}

    + + + + +
    +
    • +
+
+ +
+
    +
  • + + +
    +

    {{ player.name }}

    + + + + +
    +
    • +
+
+ + + + -
+
diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss index 1e4e95b..fdd8011 100644 --- a/src/app/match-details/match-details.page.scss +++ b/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; + } + } } \ 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 10f9451..c7ac0b2 100644 --- a/src/app/match-details/match-details.page.ts +++ b/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(); } diff --git a/src/assets/collections/Name-box.png b/src/assets/collections/Name-box.png new file mode 100644 index 0000000..445eed7 Binary files /dev/null and b/src/assets/collections/Name-box.png differ diff --git a/src/assets/collections/ball.png b/src/assets/collections/ball.png index 5d2caa4..8d32c02 100644 Binary files a/src/assets/collections/ball.png and b/src/assets/collections/ball.png differ diff --git a/src/assets/collections/bat.png b/src/assets/collections/bat.png index 90711af..758680c 100644 Binary files a/src/assets/collections/bat.png and b/src/assets/collections/bat.png differ diff --git a/src/assets/collections/bg-with-box.png b/src/assets/collections/bg-with-box.png index ce67058..da3c40b 100644 Binary files a/src/assets/collections/bg-with-box.png and b/src/assets/collections/bg-with-box.png differ diff --git a/src/assets/collections/glass-box.png b/src/assets/collections/glass-box.png new file mode 100644 index 0000000..9a92a70 Binary files /dev/null and b/src/assets/collections/glass-box.png differ diff --git a/src/assets/collections/glassbox.png b/src/assets/collections/glassbox.png index 6d1fb5d..7d878c6 100644 Binary files a/src/assets/collections/glassbox.png and b/src/assets/collections/glassbox.png differ diff --git a/src/assets/collections/golden-bat.png b/src/assets/collections/golden-bat.png index 75ebc7b..727eb49 100644 Binary files a/src/assets/collections/golden-bat.png and b/src/assets/collections/golden-bat.png differ diff --git a/src/assets/collections/museum_background.png b/src/assets/collections/museum_background.png index 23a689d..7ec58ff 100644 Binary files a/src/assets/collections/museum_background.png and b/src/assets/collections/museum_background.png differ diff --git a/src/assets/home-team/stadium-sv.png b/src/assets/home-team/stadium-sv.png new file mode 100644 index 0000000..687cab3 Binary files /dev/null and b/src/assets/home-team/stadium-sv.png differ diff --git a/src/assets/home-team/stadium-tv.png b/src/assets/home-team/stadium-tv.png new file mode 100644 index 0000000..c59602a Binary files /dev/null and b/src/assets/home-team/stadium-tv.png differ diff --git a/src/assets/icons/ball.png b/src/assets/icons/ball.png new file mode 100644 index 0000000..c358ee8 Binary files /dev/null and b/src/assets/icons/ball.png differ diff --git a/src/assets/icons/batsman.png b/src/assets/icons/batsman.png new file mode 100644 index 0000000..a3b13d5 Binary files /dev/null and b/src/assets/icons/batsman.png differ diff --git a/src/assets/icons/captain-band.png b/src/assets/icons/captain-band.png new file mode 100644 index 0000000..226934c Binary files /dev/null and b/src/assets/icons/captain-band.png differ diff --git a/src/assets/icons/gloves.png b/src/assets/icons/gloves.png new file mode 100644 index 0000000..b023cfa Binary files /dev/null and b/src/assets/icons/gloves.png differ diff --git a/src/assets/icons/orange-cap.png b/src/assets/icons/orange-cap.png new file mode 100644 index 0000000..ee74a9d Binary files /dev/null and b/src/assets/icons/orange-cap.png differ