feat: create cards for player info

src/app/components/player-info-clan-info/player-info-clan-info.component.html

@@ -0,0 +1,6 @@
+<div class="card card-side bg-base-100/50 shadow-xl max-w-120 flex flex-col">
+    Card Header
+  <div class="card-body">
+    Card Body
+  </div>
+</div>

src/app/components/player-info-clan-info/player-info-clan-info.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerInfoClanInfoComponent } from './player-info-clan-info.component';
+
+describe('PlayerInfoClanInfoComponent', () => {
+  let component: PlayerInfoClanInfoComponent;
+  let fixture: ComponentFixture<PlayerInfoClanInfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayerInfoClanInfoComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlayerInfoClanInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/player-info-clan-info/player-info-clan-info.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-player-info-clan-info',
+  imports: [],
+  templateUrl: './player-info-clan-info.component.html',
+  styleUrl: './player-info-clan-info.component.scss',
+})
+export class PlayerInfoClanInfoComponent {
+  constructor() {}
+
+}
+

src/app/components/player-info-latest-activity/player-info-latest-activity.component.html

@@ -0,0 +1 @@
+<p>player-info-latest-activity works!</p>

src/app/components/player-info-latest-activity/player-info-latest-activity.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerInfoLatestActivityComponent } from './player-info-latest-activity.component';
+
+describe('PlayerInfoLatestActivityComponent', () => {
+  let component: PlayerInfoLatestActivityComponent;
+  let fixture: ComponentFixture<PlayerInfoLatestActivityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayerInfoLatestActivityComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlayerInfoLatestActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/player-info-latest-activity/player-info-latest-activity.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-player-info-latest-activity',
+  imports: [],
+  templateUrl: './player-info-latest-activity.component.html',
+  styleUrl: './player-info-latest-activity.component.scss'
+})
+export class PlayerInfoLatestActivityComponent {
+
+}

src/app/components/player-info-ranking/player-info-ranking.component.html

@@ -0,0 +1,33 @@
+<div class="card bg-base-100/50 shadow-xl flex flex-col items-center container min-w-xs">
+  <ul class="flex flex-row bg-base-200 justify-around p-4 w-full">
+    <li>Worldwide Top</li>
+    <li>Clan Top</li>
+  </ul>
+  <div class="card-body">
+    <div class="overflow-x-auto">
+      <table class="table table-xs">
+        <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          @for (field of playerRankFields; track field) {
+            <th>{{ field }}</th>
+          }
+        </tr>
+        </thead>
+        <tbody>
+          @for (playerRank of playerRanks; track playerRank.topPosition) {
+            <tr>
+              <th>{{ playerRank.topPosition }}</th>
+              <td>{{ playerRank.playerName }}</td>
+              <td>{{ playerRank.experience.value }}</td>
+              <td>{{ playerRank.rankingPoints.value }}</td>
+              <td>{{ playerRank.aliensDestroyed.value }}</td>
+              <td>{{ playerRank.shipsDestroyed.value }}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

src/app/components/player-info-ranking/player-info-ranking.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerInfoRankingComponent } from './player-info-ranking.component';
+
+describe('PlayerInfoRankingComponent', () => {
+  let component: PlayerInfoRankingComponent;
+  let fixture: ComponentFixture<PlayerInfoRankingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayerInfoRankingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlayerInfoRankingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/player-info-ranking/player-info-ranking.component.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../services/api.service';
+
+@Component({
+  selector: 'app-player-info-ranking',
+  imports: [],
+  templateUrl: './player-info-ranking.component.html',
+  styleUrl: './player-info-ranking.component.scss',
+})
+export class PlayerInfoRankingComponent implements OnInit {
+  constructor(private apiService: ApiService) {}
+
+  playerRanks: PlayerRankDto[] = [];
+  playerRankFields: PlayerRankField[] = ['EXP', 'RP', 'ALD', 'SLD'];
+
+  ngOnInit(): void {
+    this.playerRanks = this.getPlayerRanks();
+  }
+
+  getPlayerRanks(): PlayerRankDto[] {
+
+    //TODO: actual api call here
+    return [
+      {
+        topPosition: 1,
+        playerName: 'Player 1',
+        experience: {
+          shortName: 'EXP',
+          value: 1000,
+        },
+        rankingPoints: {
+          shortName: 'RP',
+          value: 2000,
+        },
+        aliensDestroyed: {
+          shortName: 'ALD',
+          value: 3000,
+        },
+        shipsDestroyed: {
+          shortName: 'SLD',
+          value: 4000,
+        },
+      },
+      {
+        topPosition: 2,
+        playerName: 'Player 2',
+        experience: {
+          shortName: 'EXP',
+          value: 1000,
+        },
+        rankingPoints: {
+          shortName: 'RP',
+          value: 2000,
+        },
+        aliensDestroyed: {
+          shortName: 'ALD',
+          value: 3000,
+        },
+        shipsDestroyed: {
+          shortName: 'SLD',
+          value: 4000,
+        },
+      },
+      {
+        topPosition: 3,
+        playerName: 'Player 3',
+        experience: {
+          shortName: 'EXP',
+          value: 1000,
+        },
+        rankingPoints: {
+          shortName: 'RP',
+          value: 2000,
+        },
+        aliensDestroyed: {
+          shortName: 'ALD',
+          value: 3000,
+        },
+        shipsDestroyed: {
+          shortName: 'SLD',
+          value: 4000,
+        },
+      },
+      {
+        topPosition: 4,
+        playerName: 'Player 4',
+        experience: {
+          shortName: 'EXP',
+          value: 1000,
+        },
+        rankingPoints: {
+          shortName: 'RP',
+          value: 2000,
+        },
+        aliensDestroyed: {
+          shortName: 'ALD',
+          value: 3000,
+        },
+        shipsDestroyed: {
+          shortName: 'SLD',
+          value: 4000,
+        },
+      },
+    ];
+  }
+}
+
+type PlayerRankField = FieldsWithShortName;
+type FieldsWithShortName = {
+  [K in keyof PlayerRankDto]: PlayerRankDto[K] extends { shortName: infer S }
+    ? S
+    : never;
+}[keyof PlayerRankDto];
+
+export type PlayerRankDto = {
+  topPosition: number;
+  playerName: string;
+  experience: {
+    shortName: 'EXP';
+    value: number;
+  };
+  rankingPoints: {
+    shortName: 'RP';
+    value: number;
+  };
+  aliensDestroyed: {
+    shortName: 'ALD';
+    value: number;
+  };
+  shipsDestroyed: {
+    shortName: 'SLD';
+    value: number;
+  };
+};

src/app/pilot-info/pilot-info.component.html

@@ -1,4 +1,7 @@
 <section class="p-4 flex flex-auto gap-4 justify-around background-image-container">
   <app-player-info-general-info></app-player-info-general-info>
+  <app-player-info-clan-info></app-player-info-clan-info>
+  <app-player-info-latest-activity></app-player-info-latest-activity>
+  <app-player-info-ranking></app-player-info-ranking>
   <app-theme-picker></app-theme-picker>
 </section>

src/app/pilot-info/pilot-info.component.ts

@@ -1,10 +1,19 @@
 import { Component } from '@angular/core';
 import { PlayerInfoGeneralInfoComponent } from '../components/player-info-general-info/player-info-general-info.component';
 import { ThemePickerComponent } from '../components/theme-picker/theme-picker.component';
+import { PlayerInfoClanInfoComponent } from '../components/player-info-clan-info/player-info-clan-info.component';
+import { PlayerInfoLatestActivityComponent } from '../components/player-info-latest-activity/player-info-latest-activity.component';
+import { PlayerInfoRankingComponent } from '../components/player-info-ranking/player-info-ranking.component';
 
 @Component({
   selector: 'app-pilot-info',
-  imports: [PlayerInfoGeneralInfoComponent, ThemePickerComponent],
+  imports: [
+    PlayerInfoGeneralInfoComponent,
+    ThemePickerComponent,
+    PlayerInfoClanInfoComponent,
+    PlayerInfoLatestActivityComponent,
+    PlayerInfoRankingComponent,
+  ],
   templateUrl: './pilot-info.component.html',
   styleUrl: './pilot-info.component.scss',
 })

src/app/services/api.service.ts

@@ -26,6 +26,8 @@ import {
   UnequipShieldRequest,
   UnequipThrusterRequest,
 } from '../models/player/EquipUnequipDtos';
+import {PlayerRankDto} from '../components/player-info-ranking/player-info-ranking.component';
+import {Observable} from 'rxjs';
 
 @Injectable({
   providedIn: 'root',