diff --git a/src/app/modules/gaming/components/game-list/game-list.component.ts b/src/app/modules/gaming/components/game-list/game-list.component.ts index 660e350..3ba18ee 100644 --- a/src/app/modules/gaming/components/game-list/game-list.component.ts +++ b/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(); } } } diff --git a/src/app/modules/gaming/components/game-profile/game-profile.component.css b/src/app/modules/gaming/components/game-profile/game-profile.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/gaming/components/game-profile/game-profile.component.html b/src/app/modules/gaming/components/game-profile/game-profile.component.html new file mode 100644 index 0000000..292915c --- /dev/null +++ b/src/app/modules/gaming/components/game-profile/game-profile.component.html @@ -0,0 +1 @@ +

game-profile works!

diff --git a/src/app/modules/gaming/components/game-profile/game-profile.component.spec.ts b/src/app/modules/gaming/components/game-profile/game-profile.component.spec.ts new file mode 100644 index 0000000..94114e9 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GameProfileComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GameProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/gaming/components/game-profile/game-profile.component.ts b/src/app/modules/gaming/components/game-profile/game-profile.component.ts new file mode 100644 index 0000000..ae4ea99 --- /dev/null +++ b/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 = new Array(); + 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(); + } + } +} diff --git a/src/app/modules/gaming/components/game/game.component.html b/src/app/modules/gaming/components/game/game.component.html index c57e36e..a914c08 100644 --- a/src/app/modules/gaming/components/game/game.component.html +++ b/src/app/modules/gaming/components/game/game.component.html @@ -1 +1,27 @@ -

game works!

+ + + + + + + + +
+ {{ game.name | uppercase }} + Dog Breed +
+ +

+ 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. +

+
+ + + + +
diff --git a/src/app/modules/gaming/components/game/game.component.ts b/src/app/modules/gaming/components/game/game.component.ts index 62b910a..d6d36d9 100644 --- a/src/app/modules/gaming/components/game/game.component.ts +++ b/src/app/modules/gaming/components/game/game.component.ts @@ -1,4 +1,6 @@ -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', @@ -6,6 +8,23 @@ import { Component, OnInit } from '@angular/core'; 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); + } } diff --git a/src/app/modules/gaming/gaming.module.ts b/src/app/modules/gaming/gaming.module.ts index 2ff5628..b3e7f4c 100644 --- a/src/app/modules/gaming/gaming.module.ts +++ b/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 {} diff --git a/src/app/modules/home/components/home/home.component.css b/src/app/modules/home/components/home/home.component.css index 63949df..8b13789 100644 --- a/src/app/modules/home/components/home/home.component.css +++ b/src/app/modules/home/components/home/home.component.css @@ -1,3 +1 @@ -.light-text { - font-weight: 100 !important; -} + diff --git a/src/app/modules/home/components/home/home.component.html b/src/app/modules/home/components/home/home.component.html index 9d6d6b1..62e8cd9 100644 --- a/src/app/modules/home/components/home/home.component.html +++ b/src/app/modules/home/components/home/home.component.html @@ -1,17 +1,16 @@ - - -

Welcome to VideoGamer

-
-
Discover your new favorite game.
- - - - - Cars - - - -
-
+
+
+
+

Welcome to VideoGamer

+
Discover your new favorite game.
+ +
+
+
+

Most popular games

+
+ + +
+
+
diff --git a/src/app/modules/home/components/home/home.component.ts b/src/app/modules/home/components/home/home.component.ts index 0fda297..51f5786 100644 --- a/src/app/modules/home/components/home/home.component.ts +++ b/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 = new Array(); + + public games: Array = new Array(); 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; + } } diff --git a/src/app/modules/home/home.module.ts b/src/app/modules/home/home.module.ts index 87db831..191ef0f 100644 --- a/src/app/modules/home/home.module.ts +++ b/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 {} diff --git a/src/app/modules/shared-components/components/header/header.component.html b/src/app/modules/shared-components/components/header/header.component.html index d0f853f..eee39c6 100644 --- a/src/app/modules/shared-components/components/header/header.component.html +++ b/src/app/modules/shared-components/components/header/header.component.html @@ -52,7 +52,7 @@ star - Star it on Github + Star project on Github