From d9549c51d063e9db19742cb9301b556302c9b344 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 17:52:18 -0300 Subject: [PATCH 01/12] created subatomic component menu-bar-item --- src/app/app.module.ts | 4 +- .../menu-bar-item/menu-bar-item.component.css | 28 ++++++++ .../menu-bar-item.component.html | 7 ++ .../menu-bar-item.component.spec.ts | 23 +++++++ .../menu-bar-item/menu-bar-item.component.ts | 15 +++++ .../menu-bar/menu-bar.component.css | 66 +++++++------------ .../menu-bar/menu-bar.component.html | 8 +-- 7 files changed, 100 insertions(+), 51 deletions(-) create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.spec.ts create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4146f1f..a887534 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import { CardComponent } from './components/card/card.component'; import { MenuBarComponent } from './components/menu-bar/menu-bar.component'; import { CardLabelComponent } from './components/card/card-label/card-label.component'; import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component'; +import { MenuBarItemComponent } from './components/menu-bar/menu-bar-item/menu-bar-item.component'; @NgModule({ declarations: [ @@ -16,7 +17,8 @@ import { CardPricingComponent } from './components/card/card-pricing/card-pricin CardComponent, MenuBarComponent, CardLabelComponent, - CardPricingComponent + CardPricingComponent, + MenuBarItemComponent ], imports: [ BrowserModule, diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css new file mode 100644 index 0000000..c03daec --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css @@ -0,0 +1,28 @@ +.menu-bar__item { + display: flex; + margin: auto; + align-items: center; +} + +.menu-bar__item>ul { + display: flex; + list-style-type: none; +} + +.menu-bar__item>ul>li { + padding: 5px; + margin-right: 15px; +} + +.menu-bar__item>ul>li>a { + text-decoration: none; + padding: 5px; + color: rgb(7, 7, 7); + font-family: 'Segoe UI'; + +} + +.menu-bar__item>ul>li>a:hover { + color: blue; + font-weight: 600; +} \ No newline at end of file diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html new file mode 100644 index 0000000..b706677 --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html @@ -0,0 +1,7 @@ +
+ +
diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.spec.ts b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.spec.ts new file mode 100644 index 0000000..6d28c0c --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenuBarItemComponent } from './menu-bar-item.component'; + +describe('MenuBarItemComponent', () => { + let component: MenuBarItemComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MenuBarItemComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MenuBarItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts new file mode 100644 index 0000000..dcd6e22 --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-menu-bar-item', + templateUrl: './menu-bar-item.component.html', + styleUrls: ['./menu-bar-item.component.css'] +}) +export class MenuBarItemComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css index b90bbc7..ca0861a 100644 --- a/src/app/components/menu-bar/menu-bar.component.css +++ b/src/app/components/menu-bar/menu-bar.component.css @@ -1,44 +1,24 @@ -.menu-bar__container{ - display: flex; - flex-direction: row; - position: fixed; - z-index: 999; - background-color: #ffffff; - width: 100%; - height: 40px; - box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); -} +.menu-bar__container { + display: flex; + justify-content: space-between; + align-items: center; /* Centraliza verticalmente */ + position: fixed; + z-index: 999; + background-color: #ffffff; + width: 100%; + height: 40px; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); + } + + .menu-bar__logo { + margin-left: 30px; + display: flex; + align-items: center; + } -.menu-bar__logo{ - margin-left: 30px; - display: flex; - align-items: center; -} - -.menu-bar__item{ - display: flex; - margin:auto; - align-items: center; -} - -.menu-bar__item > ul{ - display: flex; - list-style-type: none; -} - -.menu-bar__item > ul > li { - padding: 5px; - margin-right: 15px; -} - -.menu-bar__item > ul > li > a { - text-decoration: none; - padding: 5px; - color: rgb(7, 7, 7); - font-family: 'Segoe UI'; -} - -.menu-bar__item > ul > li > a:hover { - color: blue; - font-weight: 600; -} + .menu-bar-item__content { + display: flex; + align-items: center; + margin: 0 auto; + } + \ No newline at end of file diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html index 44067d8..34490be 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -8,11 +8,5 @@ height="32px" > -
- -
+ From bcfe4c7db2e2dec2221a5e202c0c9bbe4134fa96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 17:58:19 -0300 Subject: [PATCH 02/12] add css animation for card-label --- .../card/card-label/card-label.component.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/app/components/card/card-label/card-label.component.css b/src/app/components/card/card-label/card-label.component.css index 54f3eb9..2ea71b5 100644 --- a/src/app/components/card/card-label/card-label.component.css +++ b/src/app/components/card/card-label/card-label.component.css @@ -15,4 +15,17 @@ font-weight: bold; height: 40px; padding: 0px 50px; + animation: pulsar 2s infinite; } + +@keyframes pulsar{ + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} \ No newline at end of file From 5a7cde05e63276a84cf85cf194090aff4dadc4fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 18:10:47 -0300 Subject: [PATCH 03/12] add externalk link to psn logo and hover transition --- src/app/components/menu-bar/menu-bar.component.css | 5 +++++ src/app/components/menu-bar/menu-bar.component.html | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css index ca0861a..6d5fb04 100644 --- a/src/app/components/menu-bar/menu-bar.component.css +++ b/src/app/components/menu-bar/menu-bar.component.css @@ -14,6 +14,11 @@ margin-left: 30px; display: flex; align-items: center; + + } + .menu-bar__logo > a > img:hover{ + transition: transform .8s; + transform: scale(1.1); } .menu-bar-item__content { diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html index 34490be..bcd9b45 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -1,12 +1,14 @@
From ca86e62176d44c39a5b704841cd9b7a203fc0d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 19:46:52 -0300 Subject: [PATCH 04/12] add gameService for external api --- src/app/app.module.ts | 4 ++- src/app/models/gameData.ts | 4 +++ src/app/pages/home/home.component.ts | 23 +++++++++++++- src/app/services/games.service.ts | 47 ++++++++++++++++++++++++++++ src/environments/environment.ts | 3 +- 5 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 src/app/models/gameData.ts create mode 100644 src/app/services/games.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a887534..0502bfb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,7 @@ import { MenuBarComponent } from './components/menu-bar/menu-bar.component'; import { CardLabelComponent } from './components/card/card-label/card-label.component'; import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component'; import { MenuBarItemComponent } from './components/menu-bar/menu-bar-item/menu-bar-item.component'; +import {HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ @@ -22,7 +23,8 @@ import { MenuBarItemComponent } from './components/menu-bar/menu-bar-item/menu-b ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/models/gameData.ts b/src/app/models/gameData.ts new file mode 100644 index 0000000..4ccf42b --- /dev/null +++ b/src/app/models/gameData.ts @@ -0,0 +1,4 @@ +export type GameData = { + id:number; + name:string +} \ No newline at end of file diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 007fef0..96ec302 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { GameData } from 'src/app/models/gameData'; +import { GamesService } from 'src/app/services/games.service'; @Component({ selector: 'app-home', @@ -6,10 +8,29 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { + itemsPerPage: number = 10; + currentPage: number = 1; - constructor() { } + currentPageResults: GameData[] = []; + constructor( + private gameService: GamesService + ) { } ngOnInit(): void { + let result; + this.gameService.getAllGames(); + this.gameService.onApiCallComplete().subscribe(() => { + result = this.loadPage(1); + console.log(result) + }); + } + + loadPage(pageNumber: number): GameData[] { + const startIndex = (pageNumber - 1) * this.itemsPerPage; + const endIndex = startIndex + this.itemsPerPage; + this.currentPageResults = this.gameService.getAllResults().slice(startIndex, endIndex); + this.currentPage = pageNumber; + return this.currentPageResults; } } diff --git a/src/app/services/games.service.ts b/src/app/services/games.service.ts new file mode 100644 index 0000000..dcdb211 --- /dev/null +++ b/src/app/services/games.service.ts @@ -0,0 +1,47 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { environment } from '../../environments/environment'; +import { Observable, Subject } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { GameData } from '../models/gameData'; + +@Injectable({ + providedIn: 'root' +}) +export class GamesService { + + private baseUrl: string = ''; + private allResults: GameData[] = []; + + private apiCallCompleteSubject = new Subject(); + private httpOptions = { + headers: new HttpHeaders({ + 'X-RapidAPI-Key': 'f7MoMGUbuLmshKEI4caExePt4aCAp1SID4EjsnX57i85joFPfh', + 'X-RapidAPI-Host': 'free-to-play-games-database.p.rapidapi.com' + }) + }; + constructor( + private httpClient: HttpClient + ) { + this.baseUrl = environment.freeGameApi + } + + + getAllGames(): void { + + this.httpClient.get(this.baseUrl, this.httpOptions).subscribe(results => { + this.allResults = results; + + this.apiCallCompleteSubject.next(); + }); + } + + getAllResults(): GameData[] { + return this.allResults; + } + + // Função para observar quando a chamada à API estiver concluída + onApiCallComplete(): Observable { + return this.apiCallCompleteSubject.asObservable(); + } +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index f56ff47..371bc46 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,8 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + freeGameApi:'https://free-to-play-games-database.p.rapidapi.com/api/games' }; /* From 296f60137015818b8d97b0c11ed38dd9b3a0964b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 20:41:32 -0300 Subject: [PATCH 05/12] refac for new game model --- .../card/card-label/card-label.component.html | 2 +- .../card/card-label/card-label.component.ts | 2 +- .../card-pricing/card-pricing.component.html | 4 +-- .../card-pricing/card-pricing.component.ts | 4 +-- src/app/components/card/card.component.css | 8 +++-- src/app/components/card/card.component.html | 8 ++--- src/app/components/card/card.component.ts | 8 ++--- src/app/models/gameData.ts | 8 ++++- src/app/pages/home/home.component.html | 32 ++++--------------- src/app/pages/home/home.component.ts | 7 ++-- 10 files changed, 35 insertions(+), 48 deletions(-) diff --git a/src/app/components/card/card-label/card-label.component.html b/src/app/components/card/card-label/card-label.component.html index 73cb9a2..f393c32 100644 --- a/src/app/components/card/card-label/card-label.component.html +++ b/src/app/components/card/card-label/card-label.component.html @@ -1,5 +1,5 @@
-

{{gameLabel}}

+

{{gamePlatform}}

diff --git a/src/app/components/card/card-label/card-label.component.ts b/src/app/components/card/card-label/card-label.component.ts index 74e02da..91e135a 100644 --- a/src/app/components/card/card-label/card-label.component.ts +++ b/src/app/components/card/card-label/card-label.component.ts @@ -8,7 +8,7 @@ import { Component, Input, OnInit } from '@angular/core'; export class CardLabelComponent implements OnInit { @Input() - gameLabel:string="" + gamePlatform:string="" constructor() { } diff --git a/src/app/components/card/card-pricing/card-pricing.component.html b/src/app/components/card/card-pricing/card-pricing.component.html index 21cce82..5881ca9 100644 --- a/src/app/components/card/card-pricing/card-pricing.component.html +++ b/src/app/components/card/card-pricing/card-pricing.component.html @@ -5,10 +5,10 @@

Play it Now!

| -

{{gameType}}

+

{{gameTitle}}

-

{{gamePrice}}

+

{{gameGenre}}

diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts index 5dc831e..240edd0 100644 --- a/src/app/components/card/card-pricing/card-pricing.component.ts +++ b/src/app/components/card/card-pricing/card-pricing.component.ts @@ -8,9 +8,9 @@ import { Component, Input, OnInit } from '@angular/core'; export class CardPricingComponent implements OnInit { @Input() - gameType:string ="Digital PS4" + gameTitle:string ="Digital PS4" @Input() - gamePrice:string = "R$ 399,90" + gameGenre:string = "R$ 399,90" constructor() { } ngOnInit(): void { diff --git a/src/app/components/card/card.component.css b/src/app/components/card/card.component.css index 7564e12..b14ff25 100644 --- a/src/app/components/card/card.component.css +++ b/src/app/components/card/card.component.css @@ -1,9 +1,10 @@ .card__container{ + background-color: rgba(0, 0, 0, 0.589); position: relative; border:3px solid #3E4357; border-radius: 10px; width: 350px; - height: 500px; + height: 400px; display: flex; overflow: hidden; @@ -11,8 +12,9 @@ } .card__img{ - min-width: 100%; - min-height: 100%; + width: 100%; + height: 100%; + object-fit: contain; transition: transform .8s; } diff --git a/src/app/components/card/card.component.html b/src/app/components/card/card.component.html index 736eb2c..11c05dd 100644 --- a/src/app/components/card/card.component.html +++ b/src/app/components/card/card.component.html @@ -1,17 +1,17 @@ diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts index d2c9e49..71abf31 100644 --- a/src/app/components/card/card.component.ts +++ b/src/app/components/card/card.component.ts @@ -8,13 +8,13 @@ import { Component, Input, OnInit } from '@angular/core'; export class CardComponent implements OnInit { @Input() - gameCover:string = "" + gameThumb:string = "" @Input() - gameLabel:string="" + gamePlatform:string="" @Input() - gameType:string ="XPTO | PS4" + gameTitle:string ="XPTO | PS4" @Input() - gamePrice:string = "R$ 399,90" + gameGenre:string = "R$ 399,90" constructor() { } diff --git a/src/app/models/gameData.ts b/src/app/models/gameData.ts index 4ccf42b..534883e 100644 --- a/src/app/models/gameData.ts +++ b/src/app/models/gameData.ts @@ -1,4 +1,10 @@ export type GameData = { id:number; - name:string + title:string; + developer:string; + thumbnail:string; + shortDescription:string; + platform:string; + genre:string + publisher:string; } \ No newline at end of file diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4613fb7..2893609 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,31 +1,11 @@
- - - - - - - +
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 96ec302..97529c8 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -8,7 +8,7 @@ import { GamesService } from 'src/app/services/games.service'; styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { - itemsPerPage: number = 10; + itemsPerPage: number = 5; currentPage: number = 1; currentPageResults: GameData[] = []; @@ -17,11 +17,9 @@ export class HomeComponent implements OnInit { ) { } ngOnInit(): void { - let result; this.gameService.getAllGames(); this.gameService.onApiCallComplete().subscribe(() => { - result = this.loadPage(1); - console.log(result) + this.loadPage(1); }); } @@ -30,6 +28,7 @@ export class HomeComponent implements OnInit { const endIndex = startIndex + this.itemsPerPage; this.currentPageResults = this.gameService.getAllResults().slice(startIndex, endIndex); this.currentPage = pageNumber; + console.log(this.currentPageResults) return this.currentPageResults; } From d97e878bcb7bd87170fa24e2edc2a2b0e1df5f0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 22:46:08 -0300 Subject: [PATCH 06/12] pagination-button created and logic --- src/app/app.module.ts | 7 +++-- .../pagination-button.component.css | 21 +++++++++++++ .../pagination-button.component.html | 1 + .../pagination-button.component.ts | 19 ++++++++++++ src/app/pages/home/home.component.css | 7 +++++ src/app/pages/home/home.component.html | 30 ++++++++++++++----- src/app/pages/home/home.component.ts | 28 ++++++++++++++--- 7 files changed, 100 insertions(+), 13 deletions(-) create mode 100644 src/app/components/pagination-button/pagination-button.component.css create mode 100644 src/app/components/pagination-button/pagination-button.component.html create mode 100644 src/app/components/pagination-button/pagination-button.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0502bfb..f083a85 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,7 +9,8 @@ import { MenuBarComponent } from './components/menu-bar/menu-bar.component'; import { CardLabelComponent } from './components/card/card-label/card-label.component'; import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component'; import { MenuBarItemComponent } from './components/menu-bar/menu-bar-item/menu-bar-item.component'; -import {HttpClientModule} from '@angular/common/http'; +import { HttpClientModule } from '@angular/common/http'; +import { PaginationButtonComponent } from './components/pagination-button/pagination-button.component'; @NgModule({ declarations: [ @@ -19,7 +20,9 @@ import {HttpClientModule} from '@angular/common/http'; MenuBarComponent, CardLabelComponent, CardPricingComponent, - MenuBarItemComponent + MenuBarItemComponent, + PaginationButtonComponent + ], imports: [ BrowserModule, diff --git a/src/app/components/pagination-button/pagination-button.component.css b/src/app/components/pagination-button/pagination-button.component.css new file mode 100644 index 0000000..ab4491e --- /dev/null +++ b/src/app/components/pagination-button/pagination-button.component.css @@ -0,0 +1,21 @@ +:host { + background-color: #007BFF; + margin-right: 10px; + padding: 10px 10px; + width: 100px; + height: 30px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border: none; + border-radius: 5px; + + } + + .pagination-button-large{ + + cursor: pointer; + pointer-events: auto; + } diff --git a/src/app/components/pagination-button/pagination-button.component.html b/src/app/components/pagination-button/pagination-button.component.html new file mode 100644 index 0000000..d43fd3c --- /dev/null +++ b/src/app/components/pagination-button/pagination-button.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/pagination-button/pagination-button.component.ts b/src/app/components/pagination-button/pagination-button.component.ts new file mode 100644 index 0000000..a79b4f8 --- /dev/null +++ b/src/app/components/pagination-button/pagination-button.component.ts @@ -0,0 +1,19 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +@Component({ + selector: 'app-pagination-button', + templateUrl: './pagination-button.component.html', + styleUrls: ['./pagination-button.component.css'] +}) +export class PaginationButtonComponent { + @Input() pageNumber: number = 0; // Propriedade de entrada para o número da página + @Output() pageChanged = new EventEmitter(); // Evento que emite o número da página quando o botão é clicado + @Input() label:string =''; + + constructor() { } + + onPageButtonClick() { + // Emita o evento com o número da página quando o botão é clicado + this.pageChanged.emit(this.pageNumber); + } +} diff --git a/src/app/pages/home/home.component.css b/src/app/pages/home/home.component.css index d04b0ce..4f35de4 100644 --- a/src/app/pages/home/home.component.css +++ b/src/app/pages/home/home.component.css @@ -8,3 +8,10 @@ align-items: baseline; flex-wrap: wrap; } + +.pagination__container{ + position: absolute; + bottom: 300px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 2893609..6060f51 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,11 +1,27 @@
- + gameTitle="{{game.title}}" + gameGenre="{{game.genre}}"> - -
+ +
+ + + Anterior + + + + Próximo + +
+ Página {{ currentPage }} de {{ totalPages }} +
+
+ + \ No newline at end of file diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 97529c8..70b459d 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Observable, map, range, toArray } from 'rxjs'; import { GameData } from 'src/app/models/gameData'; import { GamesService } from 'src/app/services/games.service'; @@ -10,8 +11,12 @@ import { GamesService } from 'src/app/services/games.service'; export class HomeComponent implements OnInit { itemsPerPage: number = 5; currentPage: number = 1; - + totalGames: number = 0; + totalPages: number = 0; + teste:string = "vai"; currentPageResults: GameData[] = []; + + constructor( private gameService: GamesService ) { } @@ -19,17 +24,32 @@ export class HomeComponent implements OnInit { ngOnInit(): void { this.gameService.getAllGames(); this.gameService.onApiCallComplete().subscribe(() => { - this.loadPage(1); + this.loadPage(1); }); } loadPage(pageNumber: number): GameData[] { const startIndex = (pageNumber - 1) * this.itemsPerPage; const endIndex = startIndex + this.itemsPerPage; - this.currentPageResults = this.gameService.getAllResults().slice(startIndex, endIndex); + const result = this.gameService.getAllResults() + this.totalGames = result.length; + this.currentPageResults = result.slice(startIndex, endIndex); this.currentPage = pageNumber; - console.log(this.currentPageResults) + console.log(this.totalGames) + this.totalPages = Math.ceil(this.totalGames / this.itemsPerPage); return this.currentPageResults; } + getPageNumbers(): Observable { + const totalPages = Math.ceil(this.totalGames / this.itemsPerPage); + const currentPage = this.currentPage; + const itemsToShow = 5; // Quantidade de páginas a serem mostradas + let startPage = Math.max(1, currentPage - itemsToShow); + let endPage = Math.min(totalPages, currentPage + itemsToShow); + + return range(startPage, endPage - startPage + 1).pipe( + toArray() // Converta o Observable em um array + ); + } } + From 8470bb3e87cdf240165d3d4fccb2e6f1c1a916c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Mon, 18 Sep 2023 23:58:41 -0300 Subject: [PATCH 07/12] add routerLink config --- src/app/app-routing.module.ts | 7 ++++++- src/app/components/card/card.component.html | 2 +- src/app/components/card/card.component.ts | 2 ++ src/app/pages/detail/detail.component.css | 0 src/app/pages/detail/detail.component.html | 1 + src/app/pages/detail/detail.component.ts | 23 +++++++++++++++++++++ src/app/pages/home/home.component.html | 1 + src/app/pages/home/home.component.ts | 4 ++-- 8 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 src/app/pages/detail/detail.component.css create mode 100644 src/app/pages/detail/detail.component.html create mode 100644 src/app/pages/detail/detail.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0297262..998c1a8 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,12 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './pages/home/home.component'; +import { DetailComponent } from './pages/detail/detail.component'; -const routes: Routes = []; +const routes: Routes = [ + {path:'',component:HomeComponent}, + {path:'detail/:id', component:DetailComponent} +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/components/card/card.component.html b/src/app/components/card/card.component.html index 11c05dd..acb4782 100644 --- a/src/app/components/card/card.component.html +++ b/src/app/components/card/card.component.html @@ -1,4 +1,4 @@ - + detail works!

diff --git a/src/app/pages/detail/detail.component.ts b/src/app/pages/detail/detail.component.ts new file mode 100644 index 0000000..6b897ee --- /dev/null +++ b/src/app/pages/detail/detail.component.ts @@ -0,0 +1,23 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-detail', + templateUrl: './detail.component.html', + styleUrls: ['./detail.component.css'] +}) +export class DetailComponent implements OnInit { + @Input() + gameId: string = ''; + constructor( + private activeRoute: ActivatedRoute + ) { + this.activeRoute.params.subscribe( + res=>console.log(res) + ) + } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 6060f51..886943b 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,6 +1,7 @@
{ const totalPages = Math.ceil(this.totalGames / this.itemsPerPage); const currentPage = this.currentPage; - const itemsToShow = 5; // Quantidade de páginas a serem mostradas + const itemsToShow = 5; let startPage = Math.max(1, currentPage - itemsToShow); let endPage = Math.min(totalPages, currentPage + itemsToShow); return range(startPage, endPage - startPage + 1).pipe( - toArray() // Converta o Observable em um array + toArray() ); } } From c6bfa29e3e17880ba8f2bbf79844163eaf5ccb44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Tue, 19 Sep 2023 09:57:21 -0300 Subject: [PATCH 08/12] =?UTF-8?q?ajuste=20em=20voltar=20e=20avan=C3=A7ar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/home/home.component.css | 16 +++++++++++++++- src/app/pages/home/home.component.html | 20 ++++++++++---------- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/app/pages/home/home.component.css b/src/app/pages/home/home.component.css index 4f35de4..ab1999b 100644 --- a/src/app/pages/home/home.component.css +++ b/src/app/pages/home/home.component.css @@ -14,4 +14,18 @@ bottom: 300px; display: flex; justify-content: center; -} \ No newline at end of file +} + +.previous-button { + justify-content: flex-start; + } + + .next-button { + justify-content: flex-end; + } + + .pagination-button { + text-align: center; + display: flex; + align-items: center; + } \ No newline at end of file diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 886943b..dc97360 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,5 +1,8 @@
- + + Anterior + - + + Próximo +
- - Anterior - + - - Próximo - +
Página {{ currentPage }} de {{ totalPages }}
From e7df30da2fb40cdff22c8e5e02ef64fffced061c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Tue, 19 Sep 2023 10:00:58 -0300 Subject: [PATCH 09/12] environment files has protected --- .gitignore | 3 +++ src/app/services/games.service.ts | 4 ++-- src/environments/environment.ts | 4 +++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 0711527..492d9ab 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,6 @@ testem.log # System files .DS_Store Thumbs.db + +#Environment files +/src/enviroments diff --git a/src/app/services/games.service.ts b/src/app/services/games.service.ts index dcdb211..5df1789 100644 --- a/src/app/services/games.service.ts +++ b/src/app/services/games.service.ts @@ -16,8 +16,8 @@ export class GamesService { private apiCallCompleteSubject = new Subject(); private httpOptions = { headers: new HttpHeaders({ - 'X-RapidAPI-Key': 'f7MoMGUbuLmshKEI4caExePt4aCAp1SID4EjsnX57i85joFPfh', - 'X-RapidAPI-Host': 'free-to-play-games-database.p.rapidapi.com' + 'X-RapidAPI-Key': environment.apiKey, + 'X-RapidAPI-Host': environment.apiHost }) }; constructor( diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 371bc46..12ba810 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,9 @@ export const environment = { production: false, - freeGameApi:'https://free-to-play-games-database.p.rapidapi.com/api/games' + freeGameApi:'https://free-to-play-games-database.p.rapidapi.com/api/games', + apiKey:'f7MoMGUbuLmshKEI4caExePt4aCAp1SID4EjsnX57i85joFPfh', + apiHost:'free-to-play-games-database.p.rapidapi.com' }; /* From 96aa60dacee5d4170f6d5aea4b66890ff7fa05fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Tue, 19 Sep 2023 10:04:15 -0300 Subject: [PATCH 10/12] orthographic adjust --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 492d9ab..9a17a32 100644 --- a/.gitignore +++ b/.gitignore @@ -42,4 +42,4 @@ testem.log Thumbs.db #Environment files -/src/enviroments +/src/environments/ From aa390103c2aaa602989f39aad95424d399cb8099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Tue, 19 Sep 2023 10:06:51 -0300 Subject: [PATCH 11/12] gitignore --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 9a17a32..fe09128 100644 --- a/.gitignore +++ b/.gitignore @@ -42,4 +42,4 @@ testem.log Thumbs.db #Environment files -/src/environments/ +./src/environments/ From cb7357ecb533728f26b0f03a4032d7020e8f0668 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rossywan=20Fran=C3=A7a?= Date: Tue, 19 Sep 2023 10:19:19 -0300 Subject: [PATCH 12/12] finalizing implementations --- src/app/app-routing.module.ts | 5 ++--- src/app/components/card/card.component.html | 2 +- src/app/pages/detail/detail.component.css | 0 src/app/pages/detail/detail.component.html | 1 - src/app/pages/detail/detail.component.ts | 23 --------------------- 5 files changed, 3 insertions(+), 28 deletions(-) delete mode 100644 src/app/pages/detail/detail.component.css delete mode 100644 src/app/pages/detail/detail.component.html delete mode 100644 src/app/pages/detail/detail.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 998c1a8..73399e2 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,11 +1,10 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './pages/home/home.component'; -import { DetailComponent } from './pages/detail/detail.component'; + const routes: Routes = [ - {path:'',component:HomeComponent}, - {path:'detail/:id', component:DetailComponent} + {path:'',component:HomeComponent} ]; @NgModule({ diff --git a/src/app/components/card/card.component.html b/src/app/components/card/card.component.html index acb4782..5d66644 100644 --- a/src/app/components/card/card.component.html +++ b/src/app/components/card/card.component.html @@ -1,4 +1,4 @@ - + detail works!

diff --git a/src/app/pages/detail/detail.component.ts b/src/app/pages/detail/detail.component.ts deleted file mode 100644 index 6b897ee..0000000 --- a/src/app/pages/detail/detail.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -@Component({ - selector: 'app-detail', - templateUrl: './detail.component.html', - styleUrls: ['./detail.component.css'] -}) -export class DetailComponent implements OnInit { - @Input() - gameId: string = ''; - constructor( - private activeRoute: ActivatedRoute - ) { - this.activeRoute.params.subscribe( - res=>console.log(res) - ) - } - - ngOnInit(): void { - } - -}