Merge pull request #11 from CerealKiller97/dev

Will finish soon

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

@@ -38,9 +38,8 @@ export class GameListComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy(): void {
-    // Performance reason
-    for (let i = 0; i < this.subscriptions.length; i++) {
-      this.subscriptions[i].unsubscribe();
+    for (const sub of this.subscriptions) {
+      sub.unsubscribe();
     }
   }
 }

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

@@ -0,0 +1 @@
+<p>game-profile works!</p>

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

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

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

@@ -0,0 +1,45 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GamesService } from '@service/games/games.service';
+import { Subscription } from 'rxjs';
+import { Game } from '@model/Game';
+
+@Component({
+  selector: 'app-game-profile',
+  templateUrl: './game-profile.component.html',
+  styleUrls: ['./game-profile.component.css']
+})
+export class GameProfileComponent implements OnInit, OnDestroy {
+  private subscriptions: Array<Subscription> = new Array<Subscription>();
+  private gameSlug: string;
+  public game: Game;
+
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute,
+    private readonly gamingService: GamesService
+  ) {}
+
+  public ngOnInit(): void {
+    this.getGameSlug();
+    this.subscriptions.push(
+      this.gamingService.getGame(this.gameSlug).subscribe((game: Game) => {
+        console.log(game);
+      })
+    );
+  }
+
+  private getGameSlug(): void {
+    this.subscriptions.push(
+      this.route.paramMap.subscribe(param => {
+        this.gameSlug = param.get('game');
+      })
+    );
+  }
+
+  public ngOnDestroy(): void {
+    for (const sub of this.subscriptions) {
+      sub.unsubscribe();
+    }
+  }
+}

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

@@ -1 +1,27 @@
-<p>game works!</p>
+<mat-card class="example-card">
+  <ng-template #name>
+
+  </ng-template>
+
+  <img mat-card-image [src]="game.background_image" [alt]="game.name" (hover)="imageToVideoReplace(game);" />
+
+  <mat-card-header>
+    <div mat-card-avatar class="example-header-image"></div>
+    <mat-card-title>{{ game.name | uppercase }}</mat-card-title>
+    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <p>
+      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+      bred for hunting.
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button [routerLink]="['/gaming/game', game.slug]" color="primary">Read More</button>
+    <button mat-raised-button (click)="addToWishList();">
+      <span>Add to WishList</span>
+      <mat-icon>shopping_cart</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

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

@@ -1,11 +1,30 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Game } from '@model/Game';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-game',
   templateUrl: './game.component.html',
   styleUrls: ['./game.component.css']
 })
 export class GameComponent implements OnInit {
-  constructor() {}
+  @Input()
+  game: Game;
+
+  constructor(private readonly matSnack: MatSnackBar) {}
   ngOnInit(): void {}
+
+  public addToWishList(): void {
+    const options: MatSnackBarConfig = {
+      direction: 'ltr',
+      duration: 4000,
+      horizontalPosition: 'end',
+      panelClass: ['success']
+    };
+    this.matSnack.open('Successfully added to your wishlist', null, options);
+  }
+
+  public imageToVideoReplace(game: Game) {
+    console.log(game);
+  }
 }

src/app/modules/gaming/gaming.module.ts

@@ -3,7 +3,9 @@ import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { GameComponent } from './components/game/game.component';
 import { GameListComponent } from './components/game-list/game-list.component';
-
+import { MatCardModule } from '@angular/material/card';
+import { MaterialModule } from '@shared-components/material/material.module';
+import { GameProfileComponent } from './components/game-profile/game-profile.component';
 const routes: Routes = [
   {
     path: 'platform/:platform',
@@ -12,11 +14,16 @@ const routes: Routes = [
   {
     path: 'genres/:genre',
     component: GameListComponent
+  },
+  {
+    path: 'game/:game',
+    component: GameProfileComponent
   }
 ];
 
 @NgModule({
-  declarations: [GameComponent, GameListComponent],
-  imports: [CommonModule, RouterModule.forChild(routes)]
+  declarations: [GameComponent, GameListComponent, GameProfileComponent],
+  imports: [CommonModule, RouterModule.forChild(routes), MatCardModule, MaterialModule],
+  exports: [MatCardModule, GameComponent, MaterialModule]
 })
 export class GamingModule {}

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

@@ -1,3 +1 @@
-.light-text {
-  font-weight: 100 !important;
-}
+

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

@@ -1,17 +1,16 @@
-<mat-grid-list cols="1" rowHeight="2:1">
-  <mat-grid-tile>
-    <h1 class="light-text">Welcome to VideoGamer</h1>
-    <br />
-    <h5>Discover your new favorite game.</h5>
-    <mat-form-field>
-      <input matInput placeholder="label" value="value">
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label>Cars</mat-label>
-      <select matNativeControl required>
-        <option value="volvo">Volvo</option>
-      </select>
-    </mat-form-field>
-    <button mat-raised-button color="primary" (click)="onClick();">Explore</button>
-  </mat-grid-tile>
-</mat-grid-list>
+<div class="container">
+  <div class="row">
+    <div class="col col-lg-6">
+      <h1 class="light-text">Welcome to VideoGamer</h1>
+      <h5 class="ligt-text">Discover your new favorite game.</h5>
+      <button mat-raised-button color="primary" (click)="onClick();">Explore</button>
+    </div>
+  </div>
+  <div class="row">
+    <h1 class="light-text text-center">Most popular games</h1>
+    <div class="col col-lg-4 col-sm-6">
+      <app-game *ngFor="let game of games" [game]="game">
+      </app-game>
+    </div>
+  </div>
+</div>

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

@@ -4,13 +4,18 @@ import { LoadingService } from '@service/loading/loading.service';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
 import { GamesService } from '@service/games/games.service';
+import { GameComponent } from 'app/modules/gaming/components/game/game.component';
+import { Game } from '@model/Game';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  styleUrls: ['./home.component.css'],
+  entryComponents: [GameComponent]
 })
 export class HomeComponent implements OnInit {
-  private subscription: Subscription;
+  private subscriptions: Array<Subscription> = new Array<Subscription>();
+
+  public games: Array<any> = new Array<any>();
 
   constructor(
     private readonly titleService: Title,
@@ -23,16 +28,20 @@ export class HomeComponent implements OnInit {
     this.loadingService.setLoading(true);
     this.titleService.setTitle('VideoGamer | Home');
     this.openSnackBar();
-    this.subscription = this.gamesService.getGames().subscribe(data => {
-      console.log(data);
-    });
+    this.subscriptions.push(
+      this.gamesService.getRandomGames().subscribe((data: Game[]) => {
+        this.games = data;
+        console.log(this.games);
+      })
+    );
   }
 
   openSnackBar(): void {
     const options: MatSnackBarConfig = {
       direction: 'ltr',
       duration: 4000,
-      horizontalPosition: 'end'
+      horizontalPosition: 'end',
+      panelClass: ['primary']
     };
 
     this.snackBar.open('Welcome 👋', null, options);
@@ -41,4 +50,8 @@ export class HomeComponent implements OnInit {
   onClick(): void {
     this.openSnackBar();
   }
+
+  public trackBy(index: number, item: Game): string {
+    return item.slug;
+  }
 }

src/app/modules/home/home.module.ts

@@ -4,12 +4,13 @@ import { HomeComponent } from './components/home/home.component';
 import { RouterModule, Routes } from '@angular/router';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatButtonModule } from '@angular/material/button';
-import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { NotificationComponent } from '../shared-components/components/notification/notification.component';
 import { SharedModule } from '../shared/shared.module';
 import { GamesService } from '@service/games/games.service';
-import { CustomIconService } from '@serviceicons/custom-icons.service';
+import { CustomIconService } from '@service/icons/custom-icons.service';
+import { GameComponent } from '../gaming/components/game/game.component';
+import { GamingModule } from '..';
 
 const routes: Routes = [
   {
@@ -26,20 +27,20 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     MatGridListModule,
     MatButtonModule,
-    MatInputModule,
     MatSnackBarModule,
-    SharedModule
+    SharedModule,
+    GamingModule
   ],
   exports: [
     HomeComponent,
     RouterModule,
     MatGridListModule,
     MatButtonModule,
-    MatInputModule,
     MatSnackBarModule,
-    SharedModule
+    SharedModule,
+    GamingModule
   ],
-  entryComponents: [NotificationComponent],
+  entryComponents: [NotificationComponent, GameComponent],
   providers: [GamesService, CustomIconService]
 })
 export class HomeModule {}

src/app/modules/shared-components/components/header/header.component.html

@@ -52,7 +52,7 @@
         </a>
         <a mat-menu-item href="https://github.com/CerealKiller97/NG-VideoGamer" target="_blank">
           <mat-icon>star</mat-icon>
-          <span>Star it on Github</span>
+          <span>Star project on Github</span>
         </a>
         <button mat-menu-item href="https://github.com/CerealKiller97/NG-VideoGamer" (click)="openReportBugDialog();">
           <mat-icon>bug_report</mat-icon>

src/app/modules/shared-components/components/header/header.component.ts

@@ -61,7 +61,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
     );
 
     this.platforms = this.platformService.getPlatforms();
-    // this.dialogService.open();
   }
 
   public openReportBugDialog(): void {
@@ -70,18 +69,20 @@ export class HeaderComponent implements OnInit, OnDestroy {
       data: { bug: this.bugReport }
     });
 
-    dialogRef.afterClosed().subscribe((result: any) => {
-      console.log('The dialog was closed');
-      this.bugReport = result;
-    });
+    this.subscriptions.push(
+      dialogRef.afterClosed().subscribe((result: any) => {
+        console.log('The dialog was closed');
+        this.bugReport = result;
+      })
+    );
   }
 
   public trackByFunc(index: number, item: Link): string {
     return item.path;
   }
 
   public ngOnDestroy(): void {
-    for (let sub of this.subscriptions) {
+    for (const sub of this.subscriptions) {
       sub.unsubscribe();
     }
   }

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

@@ -1,7 +1,17 @@
-import { Team } from '@model/Team';
+import { Genre } from '@model/Genre.model';
+import { Screenshoot } from '@model/Screenshot.model';
+import { Platform } from '@model/Platform.model';
 
 export interface Game {
   id: number;
-  date: Date;
-  homeTeam: Team;
+  name: string;
+  background_image: string;
+  dominantColor: string;
+  genres: Genre[];
+  metacritic: number;
+  screenshots: Screenshoot[];
+  platforms: Platform[];
+  playtime: number;
+  slug: string;
+  realeseData: string;
 }

src/app/modules/shared/models/Genre.model.ts

@@ -0,0 +1,6 @@
+export interface Genre {
+  id: number;
+  backgroundImage: string;
+  name: string;
+  slug: string;
+}

src/app/modules/shared/models/Platform.model.ts

@@ -0,0 +1,9 @@
+export interface Platform {
+  id: number;
+  image: string | null;
+  imageBackground: string | null;
+  name: string;
+  slug: string;
+  yearEnd: any;
+  yearStart: any;
+}

src/app/modules/shared/models/Screenshot.model.ts

@@ -0,0 +1,4 @@
+export interface Screenshoot {
+  id: number;
+  path: string;
+}