Merge pull request #20 from CerealKiller97/dev

Final commit [PROJECT FINISHED]

src/app/modules/gaming/components/game-profile/game-profile.component.css

@@ -0,0 +1,15 @@
+.img {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.span-fix {
+  margin-top: -12px;
+  margin-left: 20px;
+}
+
+.clear-text {
+  text-align: justify !important;
+  word-spacing: 5px !important;
+  line-height: 2.25em !important;
+}

src/app/modules/gaming/components/game-profile/game-profile.component.html

@@ -1,11 +1,114 @@
-<div class="container">
-  <h1 class="light-text text-center">
-    {{ game?.name }}
-  </h1>
-  <div class="row">
-    <mat-chip color="primary">{{ game?.released }}</mat-chip>
-    <!-- <mat-icon *ngFor="let platform of game.parent_platforms">
-      {{ platform?.platform.slug }}
-    </mat-icon> -->
+<div class="container" *ngIf="game !== null">
+  <h1 class="light-text text-center my-5">{{ game.name }}</h1>
+  <div class="row">
+    <span>
+      <mat-chip class="p-2" color="primary">{{ game.released | date: 'mediumDate' }}</mat-chip>
+    </span>
+    <span class="example-fill-remaining-space"></span>
+    <span class="span-fix">
+      <mat-icon *ngFor="let platform of platforms" [svgIcon]="platform" class="mx-2 my-2"></mat-icon>
+    </span>
+  </div>
+  <div class="row">
+    <img mat-card-image class="img my-5" [src]="game.background_image" [alt]="game.name" />
+  </div>
+  <div class="row">
+    <h1 class="light-text">Game description</h1>
+    <p class="light-text clear-text">{{ game.description_raw }}</p>
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 class="light-text">Platforms</h1>
+      <mat-list>
+        <mat-list-item *ngFor="let platform of game.parent_platforms">
+          <span mat-line>
+            {{ platform.platform.name }}
+          </span>
+          <span class="ml-5">
+            <mat-icon mat-list-icon [svgIcon]="mapPlatform(platform.platform.slug)"></mat-icon>
+          </span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </div>
+
+  <div class="row">
+    <mat-card-content>
+      <h1 class="light-text">Genres</h1>
+      <mat-list>
+        <mat-list-item *ngFor="let genre of game.genres">
+          <span mat-line>
+            {{ genre.name }}
+          </span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 class="light-text">Developers</h1>
+      <mat-list>
+        <mat-list-item *ngFor="let developer of game.developers">
+          <span mat-line>
+            {{ developer.name }}
+          </span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 class="light-text">Metacritic </h1>
+      <mat-list>
+        <mat-list-item>
+          <mat-chip mat-line color="{{ genereateColorForMetrics(game.metacritic) }}" selected class="px-1 py-1">
+            {{ game.metacritic === null ? 'No score' : game.metacritic }}
+          </mat-chip>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 class="light-text">Publishers</h1>
+      <mat-list>
+        <mat-list-item *ngFor="let publisher of game.publishers">
+          <span mat-line>{{ publisher.name }}</span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 class="light-text">Realease date</h1>
+      <mat-list>
+        <mat-list-item>
+          <mat-chip class="p-2">{{ game.released | date: 'mediumDate' }}</mat-chip>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 mat-subheader class="light-text">Tags</h1>
+      <mat-list>
+        <mat-list-item *ngFor="let tag of game.tags">
+          <mat-chip class="p-2">
+            {{ tag.name }}
+          </mat-chip>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </div>
+  <div class="row">
+    <mat-card-content>
+      <h1 mat-subheader class="light-text">Website</h1>
+      <mat-list>
+        <mat-list-item>
+          <a mat-raised-button color="primary" href="{{ game.website }}">{{ game.name }} website</a>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
   </div>
 </div>

src/app/modules/gaming/components/game-profile/game-profile.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { GamesService } from '@service/games/games.service';
-import { Subscription } from 'rxjs';
 import { Game } from '@model/Game';
-import { Title } from '@angular/platform-browser';
+import { GamesService } from '@service/games/games.service';
 import { CustomIconService } from '@service/icons/custom-icons.service';
+import { LoadingService } from '@service/loading/loading.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-game-profile',
@@ -14,23 +15,27 @@ import { CustomIconService } from '@service/icons/custom-icons.service';
 export class GameProfileComponent implements OnInit, OnDestroy {
   private subscriptions: Array<Subscription> = new Array<Subscription>();
   private gameSlug: string;
-  public game: Game;
+  public game: Game = null;
+  public platforms: string[] = [];
 
   constructor(
     private readonly route: ActivatedRoute,
     private readonly gamingService: GamesService,
     private readonly titleService: Title,
-    private readonly customIconsService: CustomIconService
+    private readonly customIconsService: CustomIconService,
+    private readonly loadingService: LoadingService
   ) {}
 
   public ngOnInit(): void {
+    this.loadingService.setLoading(true);
     this.customIconsService.registerPlatformIcons();
     this.getGameSlug();
     this.subscriptions.push(
       this.gamingService.getGame(this.gameSlug).subscribe((game: Game) => {
-        this.titleService.setTitle(`VideoGamer | ${this.game.name}`);
         this.game = game;
-        console.log(game);
+        this.titleService.setTitle(`VideoGamer | ${this.game.name}`);
+        setTimeout(() => this.loadingService.setLoading(false), 1500);
+        this.mapPlatforms(game);
       })
     );
   }
@@ -48,4 +53,86 @@ export class GameProfileComponent implements OnInit, OnDestroy {
       sub.unsubscribe();
     }
   }
+
+  public genereateColorForMetrics(metacritic: number): string {
+    if (metacritic !== null) {
+      if (metacritic >= 90) {
+        return 'warn';
+      }
+
+      if (metacritic < 90) {
+        return 'primary';
+      }
+
+      if (metacritic < 80) {
+        return 'accent';
+      }
+    }
+  }
+
+  public mapPlatform(slug: string): string {
+    switch (slug) {
+      case 'linux':
+        return 'linux';
+      case 'pc':
+        return 'windows';
+
+      case 'mac':
+        return 'ios';
+
+      case 'android':
+        return 'android';
+
+      case 'xbox-old':
+        return 'xbox';
+
+      case 'nintendo-switch':
+        return 'nintendo';
+
+      case 'xbox':
+        return 'xbox';
+
+      case 'playstation':
+        return 'ps3';
+
+      case 'playstation4':
+        return 'ps4';
+
+      default:
+        break;
+    }
+  }
+
+  public mapPlatforms(game: Game): void {
+    for (const game of this.game.platforms) {
+      switch (game.platform.slug) {
+        case 'linux':
+          break;
+        case 'pc':
+          this.platforms = [...this.platforms, 'windows'];
+          break;
+        case 'macos':
+          this.platforms = [...this.platforms, 'ios'];
+          break;
+        case 'xbox-old':
+          this.platforms = [...this.platforms, 'xbox'];
+          break;
+        case 'nintendo-switch':
+          this.platforms = [...this.platforms, 'nintendo'];
+          break;
+        case 'xbox360':
+          this.platforms = [...this.platforms, 'xbox'];
+          break;
+
+        case 'playstation3':
+          this.platforms = [...this.platforms, 'ps3'];
+          break;
+        case 'playstation4':
+          this.platforms = [...this.platforms, 'ps4'];
+          break;
+        default:
+          break;
+      }
+    }
+  }
 }

src/app/modules/gaming/components/game/game.component.html

@@ -15,7 +15,7 @@
         </span>
         <span class="example-fill-remaining-space"></span>
         <span>
-          <mat-chip color="{{ genereateColorForMetrics(game) }}" selected class="px-2 py-2">
+          <mat-chip color="{{ genereateColorForMetrics(game.metacritic) }}" selected class="px-2 py-2">
             {{ game.metacritic === null ? 'No score' : game.metacritic }}
           </mat-chip>
         </span>

src/app/modules/gaming/components/game/game.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Game } from '@model/Game';
+import { Component, Input, OnInit } from '@angular/core';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { LoadingSpinnerComponent } from '@shared-components/components/loading-spinner/loading-spinner.component';
+import { Game } from '@model/Game';
 import { CustomIconService } from '@service/icons/custom-icons.service';
+import { LoadingSpinnerComponent } from '@shared-components/components/loading-spinner/loading-spinner.component';
 
 @Component({
   selector: 'app-game',
@@ -22,7 +22,7 @@ export class GameComponent implements OnInit {
   public ngOnInit(): void {
     this.customIconsService.registerPlatformIcons();
     this.mapGenres(this.game);
-    this.genereateColorForMetrics(this.game);
+    this.genereateColorForMetrics(this.game.metacritic);
     this.mapPlatforms(this.game);
   }
 
@@ -38,24 +38,24 @@ export class GameComponent implements OnInit {
   }
 
   public imageToVideoReplace(game: Game) {
-    console.log(game);
+    // TODO: console.log(game);
   }
 
   public mapGenres(game: Game): string {
     return game.genres.map(genre => genre.name).join(', ');
   }
 
-  public genereateColorForMetrics(game: Game): string {
-    if (game.metacritic !== null) {
-      if (game.metacritic >= 90) {
+  public genereateColorForMetrics(metacritic: number): string {
+    if (metacritic !== null) {
+      if (metacritic >= 90) {
         return 'warn';
       }
 
-      if (game.metacritic < 90) {
+      if (metacritic < 90) {
         return 'primary';
       }
 
-      if (game.metacritic < 80) {
+      if (metacritic < 80) {
         return 'accent';
       }
     }

src/app/modules/home/components/home/home.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { LoadingService } from '@service/loading/loading.service';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { Subscription } from 'rxjs';
+import { Title } from '@angular/platform-browser';
+import { Game } from '@model/Game';
 import { GamesService } from '@service/games/games.service';
+import { LoadingService } from '@service/loading/loading.service';
 import { GameComponent } from 'app/modules/gaming/components/game/game.component';
-import { Game } from '@model/Game';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
@@ -33,7 +33,6 @@ export class HomeComponent implements OnInit {
     this.subscriptions.push(
       this.gamesService.getRandomGames().subscribe((data: Game[]) => {
         this.games = data;
-        console.log(this.games);
       })
     );
   }

src/app/modules/shared/models/Game.ts

@@ -1,6 +1,6 @@
 import { Genre } from '@model/Genre.model';
-import { Screenshoot } from '@model/Screenshot.model';
 import { Platform } from '@model/Platform.model';
+import { Screenshoot } from '@model/Screenshot.model';
 
 export interface Game {
   id: number;
@@ -18,4 +18,9 @@ export interface Game {
   clip: any;
   parent_platforms: any;
   charts: any;
+  description_raw: string;
+  developers: any[];
+  publishers: any[];
+  tags: any[];
+  website: string;
 }

src/app/modules/shared/services/icons/custom-icons.service.ts

@@ -1,6 +1,6 @@
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material/icon';
 import { Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 
 export interface CustomIcon {
   name: string;
@@ -16,7 +16,8 @@ export class CustomIconService {
     { name: 'xbox', path: '../../../../../assets/images/platforms/xbox.svg' },
     { name: 'nintendo', path: '../../../../../assets/images/platforms/nintendoswitch.svg' },
     { name: 'ios', path: '../../../../../assets/images/platforms/apple.svg' },
-    { name: 'android', path: '../../../../../assets/images/platforms/android.svg' }
+    { name: 'android', path: '../../../../../assets/images/platforms/android.svg' },
+    { name: 'linux', path: '../../../../../assets/images/platforms/linux.svg' }
   ];
 
   constructor(private readonly matIconRegistry: MatIconRegistry, private readonly domSanitizer: DomSanitizer) {}