Create kite competition map

.gitignore

@@ -14,6 +14,7 @@
 *.launch
 .settings/
 *.sublime-workspace
+.vs/
 
 # IDE - VSCode
 .vscode/*

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
     "typescript.tsdk": "./node_modules/typescript/lib",
-    "tslint.enable": false
+    "tslint.enable": false,
+    "cSpell.words": [
+        "Leaderboard"
+    ]
 }

angular.json

@@ -195,6 +195,6 @@
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": "29f70058-d263-4554-a80f-c6f6fc73a030"
   }
-}
+}

package.json

@@ -55,6 +55,7 @@
     "chart.js": "^4.4.1",
     "chartjs-adapter-moment": "^1.0.1",
     "core-js": "2.5.1",
+    "echarts": "^5.5.1",
     "eva-icons": "^1.1.3",
     "firebase": "^9.23.0",
     "firebase-tools": "^12.9.1",
@@ -63,7 +64,9 @@
     "leaflet": "^1.9.4",
     "moment": "^2.29.4",
     "nebular-icons": "1.1.0",
+    "ng-circle-progress": "^1.7.1",
     "ng2-charts": "^5.0.4",
+    "ngx-echarts": "^18.0.0",
     "node-sass": "^8.0.0",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",

src/app/@components/leaderboard/best-player/best-player.component.html

@@ -0,0 +1,18 @@
+<div class="best-player-container">
+  <div class="best-place-div">
+    <h2><i class="fas fa-crown" style="color: gold;"></i></h2>
+  </div>
+  <div (click)="goToBestPlayerIntroduction()" style="cursor: pointer;">
+    <div class="best-img-circle">
+      <img [src]="getImageUrl(bestPlayer.img_url)">
+      <!-- <img [src]="bestPlayer.img_url" alt="Best Player Avatar"> -->
+    </div>
+    <div class="best-player-details-div">
+      <span class="best-player-name-span">{{bestPlayer.name}}</span><br />
+      <br />
+      <span class="best-player-nickname-span">{{bestPlayer.city}}</span><br />
+      <br />
+      <span class="best-player-kite-height-span">{{bestPlayer.kite_height}}</span>
+    </div>
+  </div>
+</div>

src/app/@components/leaderboard/best-player/best-player.component.scss

@@ -0,0 +1,70 @@
+.best-player-container{
+  width: 150px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 10px ;
+}
+
+.best-place-div h6{
+  color: white;
+}
+
+.best-img-circle {
+  width: 120px;
+  height: 120px;
+  border: 5px solid rgb(188, 196, 27);
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  background:radial-gradient(var(rgb(188, 196, 27)),transparent,transparent);
+
+}
+
+.best-img-circle img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+
+}
+
+.best-player-details-div{
+  display: flex;
+  flex-direction: column;
+  font-size: 20px;
+  font-weight: bolder;
+  color: black;
+  text-align: center;
+  margin-top: 15px;
+  line-height: 0.4;
+}
+
+.best-player-nickname-span{
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  font-weight: 100;
+  color: white;
+}
+
+.best-player-name-span{
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+}
+
+.best-player-kite-height-span{
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: bolder;
+  color: rgb(219, 156, 11);
+}
+
+.best-place-div{
+  margin-bottom: -8px;
+}

src/app/@components/leaderboard/best-player/best-player.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BestPlayerComponent } from './best-player.component';
+
+describe('BestPlayerComponent', () => {
+    let component: BestPlayerComponent;
+    let fixture: ComponentFixture<BestPlayerComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [BestPlayerComponent],
+        });
+        fixture = TestBed.createComponent(BestPlayerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/@components/leaderboard/best-player/best-player.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Player } from '../leaderboard.interface';
+
+@Component({
+    selector: 'ngx-best-player',
+    templateUrl: './best-player.component.html',
+    styleUrls: ['./best-player.component.scss'],
+})
+export class BestPlayerComponent {
+    @Input() bestPlayer: Player;
+
+    constructor(private router: Router) {}
+
+    goToBestPlayerIntroduction() {
+        this.router.navigate(['/kite/player', this.bestPlayer.id]);
+    }
+
+    getImageUrl(imgUrl: string): string {
+    // Check if the imgUrl is already in the desired format
+        if (imgUrl.startsWith('assets/avatars/Avatar_Icons/')) {
+            return imgUrl; // Return as-is if already in the correct format
+        }
+
+        // Extract the filename from the full imgUrl
+        const filename = imgUrl.substring(imgUrl.lastIndexOf('/') + 1);
+
+        // Construct the mock data-like URL
+        const mockDataUrl = `assets/avatars/Avatar_Icons/${filename}`;
+
+        return mockDataUrl;
+    }
+
+}