WIP with Play feature

src/app/_shared/models/user-top-items-response.model.ts

@@ -96,4 +96,9 @@ export interface LinkedFrom {
 export interface TopAlbumItem {
   album: Album;
   count: number;
+}
+
+export interface TopArtistsByTrack {
+  artist: Artist;
+  count: number;
 }

src/app/app.routes.ts

@@ -3,11 +3,13 @@ import { LoginComponent } from './components/login/login.component';
 import { HomeComponent } from './components/home/home.component';
 import { AuthorizedComponent } from './components/authorized/authorized.component';
 import { StatsComponent } from './components/stats/stats.component';
+import { PlayComponent } from './components/play/play.component';
 
 export const routes: Routes = [
     { path: "", component: LoginComponent },
     { path: "home", component: HomeComponent },
     { path: "authorized", component: AuthorizedComponent },
     { path: "stats", component: StatsComponent },
+    { path: "play", component: PlayComponent },
     { path: "**", redirectTo: "" }
 ];

src/app/components/home/home.component.ts

@@ -23,7 +23,7 @@ export class HomeComponent implements OnInit {
       this.playCard = {
         imageSource: "/assets/headphones.png",
         title: "Play Heardle",
-        description: "Test your knowledge on how well you know your songs!",
+        description: "Test your knowledge on how well you know your fave songs!",
         url: "play"
       };
 

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

@@ -0,0 +1,17 @@
+<div class="container">
+  play here
+
+  <div>
+    <h2>Hard Mode</h2>
+    <p>1 try per song and clip length is 2 seconds</p>
+  </div>
+
+  <div>
+    <h2>Specific Artist Only</h2>
+    <p>Choose one artist from your most played (only your artists with at least 20 tracks are included)</p>
+  </div>
+
+  <button (click)="play()">
+    Play
+  </button>
+</div>

src/app/components/play/play.component.scss

@@ -0,0 +1,6 @@
+.container {
+  margin: auto;
+  background-color: #212226;
+  border-radius: 20px;
+  max-width: 700px;
+}

src/app/components/play/play.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayComponent } from './play.component';
+
+describe('PlayComponent', () => {
+  let component: PlayComponent;
+  let fixture: ComponentFixture<PlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/play/play.component.ts

@@ -0,0 +1,104 @@
+import { Component, OnInit } from '@angular/core';
+import { Artist, TopArtistsByTrack, Track, UserTopItems, UserTopTracks } from '../../_shared/models/user-top-items-response.model';
+import { SpotifyService } from '../../_shared/services/spotify.service';
+import { UserService } from '../../_shared/services/user.service';
+import { concatMap, finalize } from 'rxjs';
+
+@Component({
+  selector: 'app-play',
+  standalone: true,
+  imports: [],
+  templateUrl: './play.component.html',
+  styleUrl: './play.component.scss'
+})
+export class PlayComponent implements OnInit {
+  isLoading: boolean = false;
+
+  isHardMode: boolean = false;
+  specificArtist!: string;
+
+  timeRanges: string[] = [ "short_term", "medium_term", "long_term" ];
+
+  topTracksMap: Map<string, Track> = new Map<string, Track>();
+  topArtistsByTrackMap: Map<string, TopArtistsByTrack> = new Map<string, TopArtistsByTrack>();
+
+  specificArtistSelection: Artist[] = [];
+
+  constructor(
+    private spotifyService: SpotifyService,
+    private userService: UserService) {
+  }
+
+  ngOnInit(): void {
+    this.isLoading = true;
+    this.spotifyService.getTopItems(this.userService.authTokenSignal(), this.timeRanges[0], 0, "tracks")
+      .pipe(
+        concatMap((response: UserTopItems) => {
+          // handle short term 1
+          this.appendTopTracks((response as UserTopTracks).items);
+
+          return this.spotifyService.getTopItems(this.userService.authTokenSignal(), this.timeRanges[0], 49, "tracks");
+        }),
+        concatMap((response: UserTopItems) => {
+          // handle short term 2
+          this.appendTopTracks((response as UserTopTracks).items);
+
+          return this.spotifyService.getTopItems(this.userService.authTokenSignal(), this.timeRanges[1], 0, "tracks");
+        }),
+        concatMap((response: UserTopItems) => {
+          // handle medium term 1
+          this.appendTopTracks((response as UserTopTracks).items);
+
+          return this.spotifyService.getTopItems(this.userService.authTokenSignal(), this.timeRanges[1], 49, "tracks");
+        }),
+        concatMap((response: UserTopItems) => {
+          // handle medium term 2
+          this.appendTopTracks((response as UserTopTracks).items);
+
+          return this.spotifyService.getTopItems(this.userService.authTokenSignal(), this.timeRanges[2], 49, "tracks");
+        }),
+        concatMap((response: UserTopItems) => {
+          // handle long term 1
+          this.appendTopTracks((response as UserTopTracks).items);
+
+          return this.spotifyService.getTopItems(this.userService.authTokenSignal(), this.timeRanges[1], 0, "tracks");
+        }),
+        finalize(() => {
+          // 
+          this.getTopArtistsByTrack();
+          this.isLoading = false;
+        })
+      ). subscribe((response: UserTopItems) => {
+        // handle long term 2
+        this.appendTopTracks((response as UserTopTracks).items);
+      });
+  }
+
+  appendTopTracks(topTracks: Track[]): void {
+    topTracks.forEach((track: Track) => {
+      if (!this.topTracksMap.has(track.id)) {
+        this.topTracksMap.set(track.id, track);
+      }
+    });
+  }
+
+  getTopArtistsByTrack(): void {
+    this.topTracksMap.forEach((track: Track) => {
+      if (this.topArtistsByTrackMap.has(track.artists[0].id)) {
+        this.topArtistsByTrackMap.get(track.artists[0].id)!.count++;
+      } else {
+        this.topArtistsByTrackMap.set(track.artists[0].id, { artist: track.artists[0], count: 1 });
+      }
+    });
+
+    this.topArtistsByTrackMap.forEach((artist: TopArtistsByTrack) => {
+      if (artist.count < 15) {
+        this.topArtistsByTrackMap.delete(artist.artist.id);
+      }
+    });
+  }
+
+  play(): void {
+
+  }
+}

src/app/components/stats/stats.component.scss

@@ -64,6 +64,7 @@
 
     &__index {
       padding: 0px 30px 0px 10px;
+      min-width: 40px;
     }
 
     &__album-cover {