Merge pull request #19 from hurry-harry/hf-quiz-answer-modal

Implement quiz answer result modal

angular.json

@@ -92,6 +92,14 @@
             "styles": [
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": { 
+              "includePaths": [ 
+                "src",
+                "src/assets/sass",
+                "src/assets/sass/base",
+                "src/assets/sass/components"
+              ]
+            },
             "scripts": []
           }
         },

package.json

@@ -19,7 +19,10 @@
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ng-select/ng-select": "^12.0.6",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.html

@@ -0,0 +1,28 @@
+<div class="result-modal">
+  <div class="modal-header" [ngClass]="(result.isCorrect ? 'result-modal--correct' : 'result-modal--incorrect')">
+    <h4 class="modal-title">{{result.isCorrect ? 'Correct!' : 'Incorrect!'}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
+  </div>
+  <div class="modal-body d-flex flex-column">
+    <div class="pt-0 p-1 mx-auto">
+      {{resultMessage}}
+    </div>
+    <div class="d-flex flex-row ">
+      <img class="result-modal__album-cover" alt="album cover" src="{{result.track.album.images[0].url}}">
+      <div class="d-flex flex-column justify-content-around p-3">
+        <div>
+          {{result.track.name}}
+        </div>
+        <div>
+          {{result.track.artists[0].name}}
+        </div>
+        <div>
+          {{result.track.album.name}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer" [ngClass]="(result.isCorrect ? 'result-modal--correct' : 'result-modal--incorrect')">
+    <button type="button" class="btn btn-outline-dark" (click)="close()">{{closeButtonText}}</button>
+  </div>
+</div>

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;
+  }
+}

src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+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 implements OnInit {
+  @Input() result!: QuizResult;
+
+  activeModal: NgbActiveModal = this.activeModalRef;
+  closeButtonText: string = "Close";
+  resultMessage: string = "";
+
+  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')
+  }
+}

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;
+}

src/app/_shared/services/spotify.service.ts

@@ -21,6 +21,7 @@ export class SpotifyService {
     }
     //#endregion
 
+    //#region Helpers
     artistsToStr(artists: Artist[]): string {
         let result: string = "";
 
@@ -30,4 +31,9 @@ export class SpotifyService {
 
         return result.toLowerCase();
     }
+
+    buildTrackIdentifier(trackName: string, artistsStr: string): string {
+        return trackName.concat(artistsStr).toLowerCase();
+    }
+    //#endregion
 }

src/app/_shared/shared.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+
+export const thirdPartyModules: any[] = [
+  NgbModal
+]
+
+@NgModule({
+  imports: [
+    ...thirdPartyModules
+  ],
+  exports: [
+    ...thirdPartyModules
+  ]
+})
+export class SharedModule { }

src/app/components/home-card/home-card.component.html

@@ -1,5 +1,5 @@
-<div class="card" (click)="navigateTo()" (keypress)="navigateTo()" tabindex="0">
-  <img alt="card icon" class="image card__item" src="{{ card.imageSource }}">
-  <h2 class="card__item">{{ card.title }}</h2>
-  <p class="card__description">{{ card.description }}</p>
+<div class="home-card" (click)="navigateTo()" (keypress)="navigateTo()" tabindex="0">
+  <img alt="card icon" class="home-card__icon home-card__item" src="{{ card.imageSource }}">
+  <h2 class="mt-3">{{ card.title }}</h2>
+  <p class="px-2 pb-2 home-card__description">{{ card.description }}</p>
 </div>

src/app/components/home-card/home-card.component.scss

@@ -1,24 +1,23 @@
-.card {
+@use "../../../assets/sass/base/variables" as *;
+
+.home-card {
   background-color: #62587c;
-  width: 250px;
+  width: 275px;
   height: 200px;
   border-radius: 25px;
   padding: 0.5rem;
   margin: 1rem;
   display: flex;
   flex-wrap: wrap;
-
-  &__item {
-    padding: 1.75rem 0.5rem 0rem 0.5rem;
-  }
+  color: $taeyeon-white;
+  cursor: pointer;
 
   &__description {
-    margin: -2rem 0.75rem 0rem 0.75rem;
     font-weight: 600;
   }
-}
 
-.image {
-  height: 64px;
-  width: 64px;
+  &__icon {
+    width: 64px;
+    height: 64px;
+  }
 }

src/app/components/login/login.component.html

@@ -1,3 +1,8 @@
-<a href="http://localhost:8888/login">
-    <button>login with spotify</button>
-</a>
+<div class="vh-100 h-100 d-flex align-items-center justify-content-center ">
+    <div class="d-flex flex-column align-items-center justify-content-center container__login">
+        <p class="w-75 py-4 container__login__header">View your most played on Spotify, play Heardle with your favourite songs, or a daily Taeyeon Heardle!</p>
+        <a href="http://localhost:8888/login">
+            <button class="w-100 btn btn-success">Login with Spotify</button>
+        </a>
+    </div>
+</div>

src/app/components/login/login.component.scss

@@ -0,0 +1,11 @@
+.container {
+
+  &__login {
+    margin-bottom: 200px;
+
+    &__header {
+      font-weight: bold;
+    }
+
+  }
+}

src/app/components/nav-bar/nav-bar.component.html

@@ -1,6 +1,6 @@
 <div class="nav-bar">
-  <div>
-    <h2>SpotifyTaeyeonShenanigans</h2>
+  <div class="logo" (click)="goToHome()">
+    <h2>TaeyeonShenanigans</h2>
   </div>
   <div>
     @if(user.display_name) {

src/app/components/nav-bar/nav-bar.component.scss

@@ -1,5 +1,4 @@
 .nav-bar {
-  height: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10,4 +9,8 @@
   height: 40px;
   width: 40px;
   border-radius: 50%;
+}
+
+.logo {
+  cursor: pointer;
 }

src/app/components/nav-bar/nav-bar.component.ts

@@ -1,6 +1,7 @@
 import { Component, effect } from '@angular/core';
 import { UserService } from '../../_shared/services/user.service';
 import { UserProfileResponse } from '../../_shared/models/user-profile-response.model';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-nav-bar',
@@ -12,9 +13,16 @@ import { UserProfileResponse } from '../../_shared/models/user-profile-response.
 export class NavBarComponent {
   protected user: UserProfileResponse = {} as UserProfileResponse;
 
-  constructor(private userService: UserService) {
+  constructor(
+    private router: Router,
+    private userService: UserService) {
+
     effect(() => {
       this.user = this.userService.userSignal();
     });
   }
+
+  goToHome(): void {
+    this.router.navigate(['./home']);
+  }
 }

src/app/components/play/play.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="play-container">
   @if (isLoading) {
     loading...
   } @else {
@@ -11,16 +11,16 @@
 </div>
 
 <ng-template #playSettings>
-  <div class="container__row">
-    <div class="container__row__left-section">
+  <div class="play-container__row">
+    <div class="play-container__row__left-section">
       <h2>Hard Mode</h2>
-      <p class="container__row__left-section__sub-text">
+      <p class="play-container__row__left-section__sub-text">
         - One try per song and clip length is 2s instead of 5s.
         <br><br>
         - Time to guess is 10s instead of 20s
       </p>
     </div>
-    <div class="container__row__right-section">
+    <div class="play-container__row__right-section">
       <div class="right-option vert-align-top">
         <label class="switch">
           <input type="checkbox" (change)="toggleHardMode($event)"/>
@@ -30,39 +30,39 @@ <h2>Hard Mode</h2>
     </div>
   </div>
 
-  <div class="container__row">
-    <div class="container__row__left-section">
+  <div class="play-container__row">
+    <div class="play-container__row__left-section">
       <h2>Specific Artist Only</h2>
-      <p class="container__row__left-section__sub-text">
+      <p class="play-container__row__left-section__sub-text">
         - Select an artist you'd like to play with just one artist.
         <br><br>
         - Only your artists with at least 15 tracks are allowed.
       </p>
     </div>
-    <div class="container__row__right-section">
+    <div class="play-container__row__right-section">
       <ng-select class="dropdown" [(ngModel)]="specificArtist" [items]="specificArtistSelection" placeholder="Search..." [searchable]="true" bindLabel="name"
         [clearable]="true">
       </ng-select>
     </div>
   </div>
-  <div class="container__row">
-    <button class="btn btn__play" (click)="play()">
+  <div class="play-container__row">
+    <button class="btn btn-primary btn__play" (click)="play()">
       Play
     </button>
   </div>
 </ng-template>
 
 <ng-template #playMode>
-  <div class="container__row">
-    <div class="container__row__left-section">
+  <div class="play-container__row">
+    <div class="play-container__row__left-section">
       <span>#</span>
       <span class="quiz__index">{{ quizIndex + 1 }}</span>
     </div>
-    <div class="container__row__right-section">
+    <div class="play-container__row__right-section">
       <span class="quiz__timer">{{quizSettings.timer}}</span>
     </div>
   </div>
-  <div class="container__row audio__wave audio__controls">
+  <div class="play-container__row play-container__row__audio-row audio__wave audio__controls">
     <audio controls #musicPlayer class="music-player">
       <source src="{{quizSongs[quizIndex].preview_url}}" allow="autoplay" type="audio/mpeg">
     </audio>
@@ -80,10 +80,10 @@ <h2>Specific Artist Only</h2>
       <span [ngClass]="(isTrackPlaying ? 'audio-stroke' : 'audio-stroke-paused')"></span>
     </div>
     <div>
-      <button class="btn btn__play" (click)="toggleAudio()">{{isTrackPlaying ? 'Pause' : 'Play'}}</button>
+      <button class="btn btn-primary btn__play" (click)="toggleAudio()">{{isTrackPlaying ? 'Pause' : 'Play'}}</button>
     </div>
   </div>
-  <div class="container__row container__row__submit">
+  <div class="play-container__row play-container__row__submit">
     <div id="autocomplete-container" #autocompleteContainer class="autocomplete">
       <input [(ngModel)]="filter" placeholder="Song title..." [ngClass]="(isFocusedSignal() ? 'quiz__input quiz__input--focused' : 'quiz__input')"
         class="quiz__input" (keyup)="handleKeyUp($event)" (focus)="filterTracks()">
@@ -98,6 +98,6 @@ <h2>Specific Artist Only</h2>
         </div>
       }
     </div>
-    <button [disabled]="!selectedAnswer" class="btn btn__submit" (click)="submitAnswer()">Submit</button>
+    <button [disabled]="!selectedAnswer" class="btn btn-primary btn__submit" (click)="submitAnswer()">Submit</button>
   </div>
 </ng-template>