From f6523972574b1ab362f4b77343caf5812f904b2c Mon Sep 17 00:00:00 2001 From: Simon Grimme <9295182+grimsi@users.noreply.github.com> Date: Fri, 19 Aug 2022 01:21:49 +0200 Subject: [PATCH] Added nicer display for ratings in the detail view --- frontend/src/app/app.module.ts | 6 +++- .../game-detail-view.component.html | 16 ++++++--- .../game-detail-view.component.ts | 36 ++++++++++--------- .../progress-bar-color.directive.spec.ts | 8 +++++ .../progress-bar-color.directive.ts | 34 ++++++++++++++++++ 5 files changed, 78 insertions(+), 22 deletions(-) create mode 100644 frontend/src/app/directives/progress-bar-color.directive.spec.ts create mode 100644 frontend/src/app/directives/progress-bar-color.directive.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index bc2d9d4..266abab 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -51,6 +51,8 @@ import { NgModelChangeDebouncedDirective } from './directives/ng-model-change-de import { FooterComponent } from './components/footer/footer.component'; import {MatExpansionModule} from "@angular/material/expansion"; import {MatSelectModule} from "@angular/material/select"; +import {MatProgressBarModule} from "@angular/material/progress-bar"; +import { ProgressBarColorDirective } from './directives/progress-bar-color.directive'; @NgModule({ declarations: [ @@ -69,6 +71,7 @@ import {MatSelectModule} from "@angular/material/select"; MappedGamesTableComponent, UnmappedFilesTableComponent, NgModelChangeDebouncedDirective, + ProgressBarColorDirective, FooterComponent ], imports: [ @@ -108,7 +111,8 @@ import {MatSelectModule} from "@angular/material/select"; MatListModule, MatAutocompleteModule, MatExpansionModule, - MatSelectModule + MatSelectModule, + MatProgressBarModule, ], providers: [ { diff --git a/frontend/src/app/components/game-detail-view/game-detail-view.component.html b/frontend/src/app/components/game-detail-view/game-detail-view.component.html index b35200e..3222aa0 100644 --- a/frontend/src/app/components/game-detail-view/game-detail-view.component.html +++ b/frontend/src/app/components/game-detail-view/game-detail-view.component.html @@ -6,11 +6,20 @@ Game cover -
+

{{game.title}}

-

Rating: {{game.totalRating}}/100

Release: {{game.releaseDate | date: 'longDate'}}

-

{{game.summary}}

+

{{game.summary}}

+ +
+

Critics Rating ({{game.criticsRating}}/100)

+ +
+ +
+

User Rating ({{game.userRating}}/100)

+ +
@@ -57,7 +66,6 @@
- diff --git a/frontend/src/app/components/game-detail-view/game-detail-view.component.ts b/frontend/src/app/components/game-detail-view/game-detail-view.component.ts index c7a92c8..b499f52 100644 --- a/frontend/src/app/components/game-detail-view/game-detail-view.component.ts +++ b/frontend/src/app/components/game-detail-view/game-detail-view.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component} from '@angular/core'; import {ActivatedRoute, Params, Router} from "@angular/router"; import {DetectedGameDto} from "../../models/dtos/DetectedGameDto"; import {GamesService} from "../../services/games.service"; @@ -8,30 +8,25 @@ import {GamesService} from "../../services/games.service"; templateUrl: './game-detail-view.component.html', styleUrls: ['./game-detail-view.component.scss'] }) -export class GameDetailViewComponent implements OnInit { +export class GameDetailViewComponent { game!: DetectedGameDto; constructor(private route: ActivatedRoute, private router: Router, private gamesService: GamesService) { - this.route.params.subscribe( params => { - this.gamesService.getGame(params['slug']).subscribe({ - next: game => this.game = game, - error: error => { - if(error.status === 404) { - this.router.navigate(['/library']); - } else { - console.error(error); - } - } - }); + this.gamesService.getGame(this.route.snapshot.params['slug']).subscribe({ + next: game => this.game = game, + error: error => { + if (error.status === 404) { + this.router.navigate(['/library']); + } else { + console.error(error); + } + } }); } - ngOnInit(): void { - } - public downloadGame(): void { this.gamesService.downloadGame(this.game.slug); } @@ -46,7 +41,7 @@ export class GameDetailViewComponent implements OnInit { const units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const dp = 1; let u = -1; - const r = 10**dp; + const r = 10 ** dp; do { bytes /= thresh; @@ -62,4 +57,11 @@ export class GameDetailViewComponent implements OnInit { this.router.navigate(['/library'], {queryParams: params}); } + mapRatingToColor(rating: number): string { + if(rating >= 75) return '#388e3c'; + if(rating >= 50) return '#fbc02d'; + if(rating >= 25) return '#f57c00'; + return '#d32f2f'; + } + } diff --git a/frontend/src/app/directives/progress-bar-color.directive.spec.ts b/frontend/src/app/directives/progress-bar-color.directive.spec.ts new file mode 100644 index 0000000..8410bb0 --- /dev/null +++ b/frontend/src/app/directives/progress-bar-color.directive.spec.ts @@ -0,0 +1,8 @@ +import { ProgressBarColorDirective } from './progress-bar-color.directive'; + +describe('ProgressBarColorDirective', () => { + it('should create an instance', () => { + const directive = new ProgressBarColorDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/directives/progress-bar-color.directive.ts b/frontend/src/app/directives/progress-bar-color.directive.ts new file mode 100644 index 0000000..474082c --- /dev/null +++ b/frontend/src/app/directives/progress-bar-color.directive.ts @@ -0,0 +1,34 @@ +import { Directive, Input, OnChanges, SimpleChanges, ElementRef } from '@angular/core'; + +@Directive({ + selector: '[progressBarColor]' +}) +export class ProgressBarColorDirective implements OnChanges{ + static counter = 0; + + @Input() progressBarColor!: string; + styleEl:HTMLStyleElement = document.createElement('style'); + + //generate unique attribule which we will use to minimise the scope of our dynamic style + uniqueAttr = `app-progress-bar-color-${ProgressBarColorDirective.counter++}`; + + constructor(private el: ElementRef) { + const nativeEl: HTMLElement = this.el.nativeElement; + nativeEl.setAttribute(this.uniqueAttr,''); + nativeEl.appendChild(this.styleEl); + } + + ngOnChanges(changes: SimpleChanges): void{ + this.updateColor(); + } + + updateColor(): void{ + // update dynamic style with the uniqueAttr + this.styleEl.innerText = ` + [${this.uniqueAttr}] .mat-progress-bar-fill::after { + background-color: ${this.progressBarColor}; + } + `; + } + +}