List of completed games (S9)

[davidcr01]

Description

As a player, is necessary to implement a new view and logic to display the completed games.

Tasks

• [x] Define the controller related to the list of the completed games. (H28-1)
• [x] Define the UI related to the list of the completed games. (H28-2)

[davidcr01]

Update Report

The controller of the completed_games in the backend was done in #50.

[davidcr01]

Update Report

Frontend

The mockup for this view is:

To list the completed wordles we need to use the completed_games API endpoint defined in #50.

async getCompletedPVPGames(): Promise<any[]> {
        let url = `${this.baseURL}/api/games/completed_games/`;
        const accessToken = this.storageService.getAccessToken();
        if (!accessToken) {
            return throwError('Access token not found') as any;
        }
        const decryptedToken = this.encryptionService.decryptData(await accessToken);
        const headers = new HttpHeaders({
            Authorization: `Token ${decryptedToken}`,
            'Content-Type': 'application/json'
        });

In the History page implemented in #50, we add a new section in the HTML code related to the completed PVP segment.

<div *ngIf="selectedSegment === 'completed-pvp-games'">
    <app-loading *ngIf="isLoading"></app-loading>
    <div *ngIf="completedPvpGames && completedPvpGames.length > 0 && !isLoading">
      <ion-card *ngFor="let game of completedPvpGames">
        <ion-card-header>
          {{ username }}
          <img src="../../../assets/icon/vs.png" alt="VS icon">
          {{ game.player1 === username ? game.player2 : game.player1 }}
        </ion-card-header>
        <ion-card-content>
          <ion-list class="game-info-list">
            <ion-item>
              <ion-label class="result" [class.victory-result]="game.winner === playerId" [class.defeat-result]="game.winner !== playerId">
                {{ game.winner === playerId ? 'Victory' : 'Defeat' }}
              </ion-label>
            </ion-item>

This cards shows the usernames of the players and its related information. In this case, we are interested in always display the identified player in the left side. To do this, some functions getPlayerTime, getOpponentTime, getPlayerXp and getOpponentXp have been added:

<div *ngIf="selectedSegment === 'completed-pvp-games'">
    <app-loading *ngIf="isLoading"></app-loading>
    <div *ngIf="completedPvpGames && completedPvpGames.length > 0 && !isLoading">
      <ion-card *ngFor="let game of completedPvpGames">
        <ion-card-header>
          {{ username }}
          <img src="../../../assets/icon/vs.png" alt="VS icon">
          {{ game.player1 === username ? game.player2 : game.player1 }}
        </ion-card-header>
        <ion-card-content>
          <ion-list class="game-info-list">
            <ion-item>
              <ion-label class="result" [class.victory-result]="game.winner === playerId" [class.defeat-result]="game.winner !== playerId">
                {{ game.winner === playerId ? 'Victory' : 'Defeat' }}
              </ion-label>
            </ion-item>

getPlayerTime(game: any): number {
    return game.player1 === this.username ? game.player1_time : game.player2_time;
  }

Results

[davidcr01]

Update Report

A new component and module have been created to show a loading icon when some data is being fetched from the API.

The LoadingComponent looks like this:

<div class="loading-container">
  <ion-spinner name="dots"></ion-spinner>
</div>

The module, LoadingModule, exports it. This module is necessary when the component is going to be used by more than one page:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadingComponent } from '../components/loading/loading.component';
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [LoadingComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [LoadingComponent]
})
export class LoadingModule { }

With this, any page that imports this module can use the loading component. For example, when fetching the list of the completed games, this element is displayed:

This module can be applied in any view list that fetches information from the API (tournaments, completed and pending games, wordles completed, etc)