Friend profile (S11)

[davidcr01]

Description

As a player, is necessary to implement a new logic and UI to see the player information of the friends.

Tasks

• [x] Define the associated controller to get the player's information. (H125-1)
• [x] Design and implementation of the UI associated with the player's profile. (H25-2)

[davidcr01]

Update Report

Frontend

To implement this functionality, a new component PlayerInfoPopover has been added. This component is similar as the WordSelectionPopover or the NotificationPopover.

The popover is displayed in the friendlist page as follows:

<ion-button fill="clear" (click)="viewFriendInfo($event, friend.id_player)">

async viewFriendInfo(event: any, friendId: number) {
    const popover = await this.popoverController.create({
      component: PlayerInfoPopoverComponent,
      componentProps: {
        playerId: friendId,
      },
      dismissOnSelect: true,
      event: event
    });

    await popover.present();
  }

The HTML of this component is:

<ion-content>
  <ion-list *ngIf="playerInfo">
      <div class="popover-container">
        <img src="../../assets/icon/wins-classic.png" alt="Victories Classic">
        <ion-label class="popover-label">Wins</ion-label>
        <ion-label class="popover-value">{{ playerInfo.wins }}</ion-label>
      </div>
      <div class="popover-container">
        <img src="../../assets/icon/wins-pvp.png" alt="Victories PvP">
        <ion-label class="popover-label">Wins PvP</ion-label>
        <ion-label class="popover-value">{{ playerInfo.wins_pvp }}</ion-label>
      </div>
      <div class="popover-container">
        <img src="../../assets/icon/wins-tournaments.png" alt="Victories Tournaments">
        <ion-label class="popover-label">Tournaments</ion-label>
        <ion-label class="popover-value">{{ playerInfo.wins_tournament }}</ion-label>
      </div>
      <div class="popover-container">
        <img src="../../assets/icon/experience.png" alt="Experience">
        <ion-label class="popover-label">XP</ion-label>
        <ion-label class="popover-value">{{ playerInfo.xp }}</ion-label>
      </div>
    </ion-list>

</ion-content>

And the logic is:

import { Component, OnInit, Input } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-player-info-popover',
  templateUrl: './player-info-popover.component.html',
  styleUrls: ['./player-info-popover.component.scss'],
})
export class PlayerInfoPopoverComponent  implements OnInit {
  @Input() playerId: string;
  playerInfo: any;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.loadPlayerData();
  }

  async loadPlayerData() {
    if (this.playerId) {
      (await this.apiService.getPlayerData(this.playerId)).subscribe(
        (response: any) => {
          this.playerInfo = response;
        },
        (error) => {
          console.error('Error retrieving player data:', error);
        }
      )
    }
  }
}

The component receives the playerId as a parameter and gets its information.

The result is the following.