From b2a63c3c85efd7b9ac38ad5c2880e6cc29e655bb Mon Sep 17 00:00:00 2001 From: hurry-harry Date: Tue, 13 Feb 2024 16:40:39 +0800 Subject: [PATCH] Finish quiz answer result modal --- .../modals/quiz-answer/quiz-answer.modal.html | 36 +++++++++++++------ .../modals/quiz-answer/quiz-answer.modal.scss | 20 +++++++++++ .../modals/quiz-answer/quiz-answer.modal.ts | 34 +++++++++++++++--- src/app/_shared/models/result-modal.model.ts | 9 +++++ src/app/components/play/play.component.ts | 7 ++-- src/assets/sass/base/_variables.scss | 7 ++-- src/styles.scss | 2 +- 7 files changed, 95 insertions(+), 20 deletions(-) create mode 100644 src/app/_shared/models/result-modal.model.ts diff --git a/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.html b/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.html index 870fb94..a2eac65 100644 --- a/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.html +++ b/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.html @@ -1,12 +1,28 @@ -
-

Correct!

- -
-
-
- album cover +
+
+

{{result.isCorrect ? 'Correct!' : 'Incorrect!'}}

+ +
+
+
+ {{resultMessage}} +
+
+ album cover +
+
+ {{result.track.name}} +
+
+ {{result.track.artists[0].name}} +
+
+ {{result.track.album.name}} +
+
+
+
+
+
-
-
-
\ No newline at end of file diff --git a/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.scss b/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.scss index e69de29..ac4de60 100644 --- a/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.scss +++ b/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.scss @@ -0,0 +1,20 @@ +@use '../../../../../assets/sass/base/variables' as *; + +.result-modal { + color: $taeyeon-black; + font-weight: bold; + + &--correct { + background: $green; + } + + &--incorrect { + background: $red; + } + + &__album-cover { + height: 175px; //10rem + width: 175px; + border-radius: 20px; + } +} \ No newline at end of file diff --git a/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.ts b/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.ts index fb2a22d..4eee367 100644 --- a/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.ts +++ b/src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.ts @@ -1,17 +1,41 @@ -import { Component, Input } from "@angular/core"; +import { Component, Input, OnInit } from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; -import { Track } from "../../../models/user-top-items-response.model"; +import { QuizResult } from "../../../models/result-modal.model"; +import { CommonModule } from "@angular/common"; +import { Router } from "@angular/router"; @Component({ standalone: true, selector: 'app-quiz-answer-modal', templateUrl: './quiz-answer.modal.html', styleUrls: ['./quiz-answer.modal.scss'], + imports: [CommonModule] }) -export class QuizAnswerModal { - @Input() track!: Track; +export class QuizAnswerModal implements OnInit { + @Input() result!: QuizResult; activeModal: NgbActiveModal = this.activeModalRef; + closeButtonText: string = "Close"; + resultMessage: string = ""; - constructor(private activeModalRef: NgbActiveModal) { } + constructor( + private activeModalRef: NgbActiveModal, + private router: Router) { } + + ngOnInit(): void { + if (this.result.isCorrect) + this.resultMessage = "You got it right!"; + else + this.resultMessage = "The right answer is..." + + if (this.result.isLastQuestion) + this.closeButtonText = "Home"; + } + + close(): void { + if (this.result.isLastQuestion) + this.router.navigate(['./home']); + else + this.activeModal.close('Close click') + } } \ No newline at end of file diff --git a/src/app/_shared/models/result-modal.model.ts b/src/app/_shared/models/result-modal.model.ts new file mode 100644 index 0000000..d90fb0d --- /dev/null +++ b/src/app/_shared/models/result-modal.model.ts @@ -0,0 +1,9 @@ +import { Track } from "./user-top-items-response.model"; + +export interface QuizResult { + isCorrect: boolean; + isLastQuestion: boolean; + + track: Track; + score: number; +} \ No newline at end of file diff --git a/src/app/components/play/play.component.ts b/src/app/components/play/play.component.ts index d2aa5a8..7312439 100644 --- a/src/app/components/play/play.component.ts +++ b/src/app/components/play/play.component.ts @@ -8,6 +8,7 @@ import { NgSelectModule } from '@ng-select/ng-select'; import { FormsModule } from '@angular/forms'; import { HARD_MODE_DURATION, HARD_MODE_TIMER, NORMAL_DURATION, NORMAL_TIMER, NUMBER_OF_SONGS, VOLUME_DECREMENTER, VOLUME_INCREMENTER } from '../../_shared/constants/settings.constants'; import { QuizSettings } from '../../_shared/models/quiz.model'; +import { QuizResult } from '../../_shared/models/result-modal.model'; import { QuizAnswerModal } from '../../_shared/components/modals/quiz-answer/quiz-answer.modal'; import { NgbModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; @@ -179,9 +180,11 @@ export class PlayComponent implements OnInit { console.log('correct'); this.quizScore++; const modalRef: NgbModalRef = this.modalService.open(QuizAnswerModal); - modalRef.componentInstance.track = this.selectedAnswer; + (modalRef.componentInstance.result as QuizResult) = { isCorrect: true, isLastQuestion: (this.quizIndex === 4), score: this.quizScore, track: this.quizSongs[this.quizIndex]!}; } else { - // this.nextTrack(); + console.log('incorrect'); + const modalRef: NgbModalRef = this.modalService.open(QuizAnswerModal); + (modalRef.componentInstance.result as QuizResult) = { isCorrect: false, isLastQuestion: (this.quizIndex === 4), score: this.quizScore, track: this.quizSongs[this.quizIndex]!}; } } diff --git a/src/assets/sass/base/_variables.scss b/src/assets/sass/base/_variables.scss index 884f053..31d7ee9 100644 --- a/src/assets/sass/base/_variables.scss +++ b/src/assets/sass/base/_variables.scss @@ -2,6 +2,9 @@ $taeyeon-white: #eeeeee; $taeyeon-gray: #6E7280; $taeyeon-dark-gray: #31364A; +$taeyeon-black: #444444; +$taeyeon-red: #d9534c; +$taeyeon-green: #3c8f4f; // Color system $gray-100: #f8f9fa; @@ -30,10 +33,10 @@ $red-light: #ffc4c5; // BOOTSTRAP VARIABLE COLORS TO CALL $primary: $taeyeon-dark-gray; $secondary: $taeyeon-gray; -$success: $green; +$success: $taeyeon-green; $info: $cyan; $warning: $yellow; -$danger: $red; +$danger: $taeyeon-red; $danger-light: $red-light; $light: $gray-100; $dark: $gray-800; \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 4ae31b1..ce06a79 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -16,7 +16,7 @@ html body { // background-color: #31364A; border: 0px; border-radius: 5px; - color: $taeyeon-white; + // color: $taeyeon-white; font-size: 20px; font-weight: 600; opacity: 0.5;