-
\ No newline at end of file
diff --git a/src/app/@components/leaderboard/leaderboard/leaderboard.component.scss b/src/app/@components/leaderboard/leaderboard/leaderboard.component.scss
index 6872ab9..310eea2 100644
--- a/src/app/@components/leaderboard/leaderboard/leaderboard.component.scss
+++ b/src/app/@components/leaderboard/leaderboard/leaderboard.component.scss
@@ -27,6 +27,7 @@
display: flex;
flex-direction: column;
align-items: center;
+ height: auto;
}
.leaderboard-header {
diff --git a/src/app/@components/leaderboard/leaderboard/leaderboard.component.ts b/src/app/@components/leaderboard/leaderboard/leaderboard.component.ts
index 0e91fca..c0788e0 100644
--- a/src/app/@components/leaderboard/leaderboard/leaderboard.component.ts
+++ b/src/app/@components/leaderboard/leaderboard/leaderboard.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Player } from '../leaderboard.interface';
import { KiteApiService } from '../../../pages/kite-competition/kite/kite-api.service';
+import { PlayersComponent } from '../players/players.component';
@Component({
selector: 'ngx-kite-leaderboard',
@@ -9,6 +10,8 @@ import { KiteApiService } from '../../../pages/kite-competition/kite/kite-api.se
styleUrls: ['./leaderboard.component.scss'],
})
export class KiteLeaderboardComponent implements OnInit {
+ @ViewChild(PlayersComponent) playersComponent: PlayersComponent; // Access PlayersComponent
+
topPlayers: Player[] = [];
bestPlayer: Player;
remainingPlayers: Player[] = [];
@@ -22,22 +25,8 @@ export class KiteLeaderboardComponent implements OnInit {
loadLeaderboard() {
this.kiteApiService.getPlayersLeaderboard().subscribe(
(data) => {
- // data=[],
- // Sort players by kite height in descending order
data.sort((a, b) => parseInt(b.kite_height, 10) - parseInt(a.kite_height, 10));
- // const topTenPlayers = data.slice(0, 10);
-
- // topTenPlayers.forEach((player, index) => {
- // if (index === 1) {
- // player.rank = '2nd';
- // } else if (index === 2) {
- // player.rank = '3rd';
- // } else {
- // player.rank = `${index + 1}`;
- // }
- // });
-
data.forEach((player, index) => {
if (index === 1) {
player.rank = '2nd';
@@ -59,12 +48,18 @@ export class KiteLeaderboardComponent implements OnInit {
},
(error) => {
console.error('Error fetching leaderboard:', error);
- // Handle error as needed, e.g., show error message
}
);
}
-
+ selectTopPlayer(player: Player) {
+ if (this.playersComponent) {
+ this.playersComponent.clearHoverAndActiveState();
+ }
+ this.router.navigate(['/kite/player', player.id], {
+ state: {
+ player,
+ },
+ });
+ }
}
-
-
diff --git a/src/app/@components/leaderboard/players/players.component.html b/src/app/@components/leaderboard/players/players.component.html
index a2143d7..754e60d 100644
--- a/src/app/@components/leaderboard/players/players.component.html
+++ b/src/app/@components/leaderboard/players/players.component.html
@@ -1,8 +1,8 @@
-
-
+Leaderboard
+
+
+ Leaderboard
+
+
-
+
-
-
-
-
-
-
-
+
+
-
-
+ Leaderboard එකට එකතු වෙන පලවෙනි කෙනා ඔයා වෙන්න!
-දැන්ම තරඟ කරන්න.
+
+
+
+
Leaderboard එකට එකතු වෙන පලවෙනි කෙනා ඔයා වෙන්න!
+දැන්ම තරඟ කරන්න.
+
@@ -27,4 +30,4 @@
Leaderboard
දැන්ම තරඟ කරන්න.
{{ player.rank }}
@@ -19,4 +19,3 @@
-
diff --git a/src/app/@components/leaderboard/players/players.component.ts b/src/app/@components/leaderboard/players/players.component.ts
index 0b0fd13..733e836 100644
--- a/src/app/@components/leaderboard/players/players.component.ts
+++ b/src/app/@components/leaderboard/players/players.component.ts
@@ -1,34 +1,80 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Player } from '../leaderboard.interface';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
@Component({
selector: 'ngx-players',
templateUrl: './players.component.html',
styleUrls: ['./players.component.scss'],
})
-export class PlayersComponent implements OnInit {
+export class PlayersComponent implements OnInit, OnDestroy {
@Input() players: Player[] = [];
hoverPlayer: Player | null = null;
activePlayerId: string | null = null;
+ private routeSub: Subscription;
+ private routerSub: Subscription;
constructor(private router: Router, private route: ActivatedRoute) {}
ngOnInit() {
- this.route.params.subscribe(params => {
- this.activePlayerId = params['playerId'] || null;
- this.setActivePlayerHover();
+ // Retrieve the activePlayerId from localStorage
+ this.activePlayerId = localStorage.getItem('activePlayerId');
+ this.setActivePlayerHover();
+
+ // Subscribe to route parameters
+ this.routeSub = this.route.params.subscribe(params => {
+ const playerId = params['playerId'];
+ if (playerId) {
+ this.activePlayerId = playerId;
+ localStorage.setItem('activePlayerId', playerId);
+ this.setActivePlayerHover();
+ }
});
+
+ // Listen to router events to clear hover on navigation
+ this.routerSub = this.router.events
+ .pipe(filter(event => event instanceof NavigationEnd))
+ .subscribe(() => {
+ // If navigated to '/kite/player/all', clear activePlayerId
+ if (this.router.url === '/kite/player/all') {
+ this.clearHoverState();
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ // Unsubscribe to prevent memory leaks
+ if (this.routeSub) {
+ this.routeSub.unsubscribe();
+ }
+ if (this.routerSub) {
+ this.routerSub.unsubscribe();
+ }
}
setActivePlayerHover() {
if (this.activePlayerId) {
this.hoverPlayer = this.players.find(player => player.id === this.activePlayerId) || null;
+ } else {
+ this.hoverPlayer = null;
}
}
+ clearHoverState() {
+ this.activePlayerId = null;
+ this.hoverPlayer = null;
+ localStorage.removeItem('activePlayerId');
+ }
+
+ clearHoverAndActiveState() {
+ this.clearHoverState();
+ }
+
activePlayer(player: Player) {
this.activePlayerId = player.id;
+ localStorage.setItem('activePlayerId', player.id);
// Clear hoverPlayer to ensure no lingering hover effects
this.hoverPlayer = null;
}
@@ -60,3 +106,7 @@ export class PlayersComponent implements OnInit {
}
}
+
+
+
+
diff --git a/src/app/pages/kite-competition/airtime-record/airtime-record.component.html b/src/app/pages/kite-competition/airtime-record/airtime-record.component.html
index e34c34f..d1e64a4 100644
--- a/src/app/pages/kite-competition/airtime-record/airtime-record.component.html
+++ b/src/app/pages/kite-competition/airtime-record/airtime-record.component.html
@@ -1,6 +1,6 @@
මුළු පියාසර කාලය
+මුළු පියාසර කාලය
{{ totalFlyingTime }}
diff --git a/src/app/pages/kite-competition/height-comparison/height-comparison.component.html b/src/app/pages/kite-competition/height-comparison/height-comparison.component.html
index a0e4616..fbff9e2 100644
--- a/src/app/pages/kite-competition/height-comparison/height-comparison.component.html
+++ b/src/app/pages/kite-competition/height-comparison/height-comparison.component.html
@@ -1,22 +1,32 @@
+
මුළු උස එකතුව
-{{ accumulatedHeight }}
+
+
+ හැමෝම
+ ඔයා
+ යවපු සරුංගල් වල මුළු උස පිදුරුතලාගල පහු කරයිද?
+
+
+
+
+ දැනට{{ accumulatedHeight }}
+
+
+
-
-
Compared to Lotus Tower
{{ everestHeight }} m
- 
+ 
+
-
-
+
@@ -25,3 +35,4 @@
+
diff --git a/src/app/pages/kite-competition/height-comparison/height-comparison.component.scss b/src/app/pages/kite-competition/height-comparison/height-comparison.component.scss
index 58f7a17..017c1b2 100644
--- a/src/app/pages/kite-competition/height-comparison/height-comparison.component.scss
+++ b/src/app/pages/kite-competition/height-comparison/height-comparison.component.scss
@@ -13,16 +13,27 @@ nb-card {
font-size: 35px;
color: rgba(203, 36, 31, 0.951);
font-weight: 900;
- margin-top: 20px;
- margin-bottom: 35px;
-
- // margin-bottom: 40px;
- text-align: center;
+margin-top: -10px;
+
+ // margin-bottom: 35px;
+ margin-bottom: 40px;
+
+ // text-align: center;
}
.bottom-content {
display: flex;
height: 100%;
+
+
+}
+
+.danata-text {
+ font-size: 16px;
+ color: rgb(64, 64, 64);
+ font-weight: bold;
+ justify-content: flex-start;
+ margin-right: 30px;
}
.left-half {
@@ -41,30 +52,32 @@ nb-card {
}
}
-// .everest-image {
-// width: 41vw;
-// height: 50vh;
-// margin-top: -80px;
-// position: relative;
-// margin-left: -260px;
-
-// @include media-breakpoint-down(md) {
-// height: 40vh;
-// }
-// }
-
.everest-image {
- width: 24vw;
- height: 40vh;
+ width: 41vw;
+ height: 50vh;
+ margin-top: -80px;
position: relative;
+ margin-left: -260px;
- @include media-breakpoint-down(md) {
- height: 30vh;
- width: 50vw;
-
+@include media-breakpoint-down(md) {
+height: 40vh;
+width: auto;
}
+
}
+// .everest-image {
+// width: 24vw;
+// height: 40vh;
+// position: relative;
+
+// @include media-breakpoint-down(md) {
+// height: 30vh;
+// width: 50vw;
+
+// }
+// }
+
.right-half {
flex: 0.5;
display: flex;
@@ -79,8 +92,9 @@ nb-card {
}
.progress-bar {
- // height: 39vh;
- height: 40vh;
+ height: 39vh;
+
+ // height: 40vh;
width: 12px;
background-color: rgb(29, 13, 35);
position: relative;
@@ -100,6 +114,10 @@ nb-card {
transition: height 2s ease-in-out;
}
+.mountword{
+ color:orange ;
+}
+
.kite-image {
width: 30px;
height: 30px;
@@ -113,12 +131,12 @@ nb-card {
.compare-container {
display: flex;
- justify-content: space-between;
- font-size: 16px;
- margin: 12px -10px;
+ justify-content: flex-end;
+ font-size: 14px;
+ margin-top: -40px;
+ margin-bottom: 12px;
- // margin-left: -10px;
- // margin-right: -10px;
- // margin-top: 12px;
- // margin-bottom: 12px;
+ @include media-breakpoint-down(md) {
+ margin-right: 50px;
+ }
}
\ No newline at end of file
diff --git a/src/app/pages/kite-competition/height-comparison/height-comparison.component.ts b/src/app/pages/kite-competition/height-comparison/height-comparison.component.ts
index e9c51d8..81dec1c 100644
--- a/src/app/pages/kite-competition/height-comparison/height-comparison.component.ts
+++ b/src/app/pages/kite-competition/height-comparison/height-comparison.component.ts
@@ -1,89 +1,7 @@
-// import { Component, Input, OnInit, OnChanges, SimpleChanges, ElementRef, Renderer2 } from '@angular/core';
-// import { TotalKiteData } from '../../../@components/leaderboard/leaderboard.interface';
-
-// @Component({
-// selector: 'ngx-height-comparison',
-// templateUrl: './height-comparison.component.html',
-// styleUrls: ['./height-comparison.component.scss'],
-// })
-// export class HeightComparisonComponent implements OnInit, OnChanges {
-// @Input() data: TotalKiteData | null = null;
-// everestHeight: number = 8848;
-// kiteHeight: number = 0; // Start from 0 for animation
-// displayedHeight: number = 0;
-// accumulatedHeight: string = '0 m';
-
-// constructor(private el: ElementRef, private renderer: Renderer2) {}
-
-// ngOnInit() {
-// this.updateHeight();
-// }
-
-// ngOnChanges(changes: SimpleChanges): void {
-// if (changes['data'] && changes['data'].currentValue) {
-// this.updateHeight();
-// }
-// }
-
-// private updateHeight(): void {
-// if (this.data && this.data.all_time.total_height != null) {
-// this.startAnimations(this.data.all_time.total_height);
-// } else {
-// this.accumulatedHeight = '-';
-// }
-// }
-
-// private startAnimations(targetHeight: number): void {
-// const duration = 3000; // Duration in milliseconds
-// const startTime = Date.now();
-// const startHeight = this.displayedHeight;
-
-// // Start the combined animations
-// this.animateHeight(targetHeight, duration, startTime, startHeight);
-// }
-
-// private animateHeight(targetHeight: number, duration: number, startTime: number, startHeight: number): void {
-// const increment = 5; // Increment value for rolling animation
-// const animate = () => {
-// const currentTime = Date.now();
-// const elapsed = currentTime - startTime;
-// const progress = Math.min(elapsed / duration, 1);
-// const newHeight = Math.floor(startHeight + progress * (targetHeight - startHeight));
-// this.displayedHeight = Math.ceil(newHeight / increment) * increment; // Round up to nearest increment
-// this.accumulatedHeight = `${this.displayedHeight} m`;
-
-// // Update the progress bar height and kite image position
-// this.updateProgressBarAndKite(newHeight);
-
-// if (progress < 1) {
-// requestAnimationFrame(animate);
-// } else {
-// this.kiteHeight = targetHeight;
-// }
-// };
-
-// requestAnimationFrame(animate);
-// }
-
-// private updateProgressBarAndKite(newHeight: number): void {
-// const progressBar = this.el.nativeElement.querySelector('.progress');
-// const kiteImage = this.el.nativeElement.querySelector('.kite-image');
-// const percentage = this.calculateHeightPercentage(newHeight);
-
-// this.renderer.setStyle(progressBar, 'height', `${percentage}%`);
-// this.renderer.setStyle(kiteImage, 'bottom', `${percentage}%`);
-// }
-
-// private calculateHeightPercentage(newHeight: number): number {
-// const percentage = (newHeight / this.everestHeight) * 100;
-// return Math.min(percentage, 100);
-// }
-// }
-
-
-
import { Component, Input, OnInit, OnChanges, SimpleChanges, ElementRef, Renderer2 } from '@angular/core';
import { TotalKiteData } from '../../../@components/leaderboard/leaderboard.interface';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
@Component({
selector: 'ngx-height-comparison',
@@ -92,14 +10,24 @@ import { TotalKiteData } from '../../../@components/leaderboard/leaderboard.inte
})
export class HeightComparisonComponent implements OnInit, OnChanges {
@Input() data: TotalKiteData | null = null;
- everestHeight: number = 351.5 ;
+ everestHeight: number = 2524; // Updated Everest height value
kiteHeight: number = 0; // Start from 0 for animation
displayedHeight: number = 0;
accumulatedHeight: string = '0 m';
+ isAllPlayersUrl: boolean = false; // Default value
- constructor(private el: ElementRef, private renderer: Renderer2) {}
+ constructor(private el: ElementRef, private renderer: Renderer2, private router: Router) {}
ngOnInit() {
+ this.checkUrl(); // Initial check on component load
+
+ // Subscribe to router events to detect URL changes
+ this.router.events.pipe(
+ filter(event => event instanceof NavigationEnd)
+ ).subscribe(() => {
+ this.checkUrl(); // Update isAllPlayersUrl when the URL changes
+ });
+
this.updateHeight();
}
@@ -109,6 +37,11 @@ export class HeightComparisonComponent implements OnInit, OnChanges {
}
}
+ private checkUrl(): void {
+ const currentPath = this.router.url;
+ this.isAllPlayersUrl = currentPath === '/kite/player/all';
+ }
+
private updateHeight(): void {
if (this.data && this.data.all_time.total_height != null) {
this.startAnimations(Math.round(this.data.all_time.total_height));
@@ -122,7 +55,6 @@ export class HeightComparisonComponent implements OnInit, OnChanges {
const startTime = Date.now();
const startHeight = this.displayedHeight;
- // Start the combined animations
this.animateHeight(targetHeight, duration, startTime, startHeight);
}
@@ -135,7 +67,6 @@ export class HeightComparisonComponent implements OnInit, OnChanges {
this.displayedHeight = newHeight;
this.accumulatedHeight = `${newHeight} m`; // Show integer value
- // Update the progress bar height and kite image position
this.updateProgressBarAndKite(newHeight);
if (progress < 1) {
diff --git a/src/app/pages/kite-competition/kite-detailscard/kite-detailscard.component.html b/src/app/pages/kite-competition/kite-detailscard/kite-detailscard.component.html
index cf895de..0b60fdd 100644
--- a/src/app/pages/kite-competition/kite-detailscard/kite-detailscard.component.html
+++ b/src/app/pages/kite-competition/kite-detailscard/kite-detailscard.component.html
@@ -1,7 +1,7 @@
@@ -25,3 +35,4 @@ මුළු උස එකතුව
-
මේ සතියේ වාර්තා
+මේ සතියේ වාර්තා
උපරිම උස
@@ -20,7 +20,7 @@ මේ සතියේ වාර්තා
උත්සාහයන්
- {{ totalAttempts }}+
+ {{ totalAttempts }}
+
+
-
+
+
+
+
+
+
+
@@ -16,8 +28,9 @@
+