diff --git a/.gitignore b/.gitignore index 0711527..fe09128 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,6 @@ testem.log # System files .DS_Store Thumbs.db + +#Environment files +./src/environments/ diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0297262..73399e2 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './pages/home/home.component'; -const routes: Routes = []; + +const routes: Routes = [ + {path:'',component:HomeComponent} +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4146f1f..f083a85 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,9 @@ 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'; +import { HttpClientModule } from '@angular/common/http'; +import { PaginationButtonComponent } from './components/pagination-button/pagination-button.component'; @NgModule({ declarations: [ @@ -16,11 +19,15 @@ import { CardPricingComponent } from './components/card/card-pricing/card-pricin CardComponent, MenuBarComponent, CardLabelComponent, - CardPricingComponent + CardPricingComponent, + MenuBarItemComponent, + PaginationButtonComponent + ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] 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 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..5d66644 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..13a17c8 100644 --- a/src/app/components/card/card.component.ts +++ b/src/app/components/card/card.component.ts @@ -8,13 +8,15 @@ 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" + @Input() + gameId:string = ''; constructor() { } 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..6d5fb04 100644 --- a/src/app/components/menu-bar/menu-bar.component.css +++ b/src/app/components/menu-bar/menu-bar.component.css @@ -1,44 +1,29 @@ -.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 > a > img:hover{ + transition: transform .8s; + transform: scale(1.1); + } -.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..bcd9b45 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -1,18 +1,14 @@
-
- + > +
+
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/models/gameData.ts b/src/app/models/gameData.ts new file mode 100644 index 0000000..534883e --- /dev/null +++ b/src/app/models/gameData.ts @@ -0,0 +1,10 @@ +export type GameData = { + id:number; + 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.css b/src/app/pages/home/home.component.css index d04b0ce..ab1999b 100644 --- a/src/app/pages/home/home.component.css +++ b/src/app/pages/home/home.component.css @@ -8,3 +8,24 @@ align-items: baseline; flex-wrap: wrap; } + +.pagination__container{ + position: absolute; + bottom: 300px; + display: flex; + justify-content: center; +} + +.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 4613fb7..dc97360 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,31 +1,28 @@
- + + 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 007fef0..31a1820 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,4 +1,7 @@ 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'; @Component({ selector: 'app-home', @@ -6,10 +9,47 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { + itemsPerPage: number = 5; + currentPage: number = 1; + totalGames: number = 0; + totalPages: number = 0; + teste:string = "vai"; + currentPageResults: GameData[] = []; - constructor() { } + + constructor( + private gameService: GamesService + ) { } ngOnInit(): void { + this.gameService.getAllGames(); + this.gameService.onApiCallComplete().subscribe(() => { + this.loadPage(1); + }); + } + + loadPage(pageNumber: number): GameData[] { + const startIndex = (pageNumber - 1) * this.itemsPerPage; + const endIndex = startIndex + this.itemsPerPage; + const result = this.gameService.getAllResults() + this.totalGames = result.length; + this.currentPageResults = result.slice(startIndex, endIndex); + this.currentPage = pageNumber; + 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; + let startPage = Math.max(1, currentPage - itemsToShow); + let endPage = Math.min(totalPages, currentPage + itemsToShow); + + return range(startPage, endPage - startPage + 1).pipe( + toArray() + ); + } } + diff --git a/src/app/services/games.service.ts b/src/app/services/games.service.ts new file mode 100644 index 0000000..5df1789 --- /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': environment.apiKey, + 'X-RapidAPI-Host': environment.apiHost + }) + }; + 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..12ba810 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,10 @@ // 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', + apiKey:'f7MoMGUbuLmshKEI4caExePt4aCAp1SID4EjsnX57i85joFPfh', + apiHost:'free-to-play-games-database.p.rapidapi.com' }; /*