update toastr

src/ui/angular.json

@@ -19,7 +19,7 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.css","node_modules/ngx-toastr/toastr.css"],
             "scripts": []
           },
           "configurations": {

src/ui/package.json

@@ -23,7 +23,7 @@
     "@angular/router": "^17.3.2",
     "@moby-it/poker-core": "^2.1.3",
     "immer": "^10.0.4",
-    "ngx-toastr": "^18.0.0",
+    "ngx-toastr": "^19.0.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"

src/ui/src/app/app.config.ts

@@ -1,14 +1,14 @@
 import { ApplicationConfig, ErrorHandler, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { ToastrModule } from 'ngx-toastr';
+import { HTTP_INTERCEPTORS, HttpClientModule, provideHttpClient } from '@angular/common/http';
+import { ToastrModule, provideToastr } from 'ngx-toastr';
 import { environment } from '../environments/environment';
 import { routes } from './app.routes';
 import { GlobalErrorHandler } from './errorHandler';
 import { API_URL } from './shared/config/apiUrl.token';
 import { TokenInterceptor } from './token.interceptor';
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { BrowserAnimationsModule, provideAnimations } from "@angular/platform-browser/animations";
 export const appConfig: ApplicationConfig = {
   providers: [
     { provide: API_URL, useValue: environment.apiUrl },
@@ -19,14 +19,12 @@ export const appConfig: ApplicationConfig = {
     },
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
     provideRouter(routes),
-    importProvidersFrom([
-      HttpClientModule,
-      BrowserAnimationsModule,
-      ToastrModule.forRoot({
-        positionClass: 'toast-bottom-right',
-        timeOut: 5000,
-        closeButton: true,
-      }),
-    ]),
+    provideAnimations(),
+    provideHttpClient(),
+    provideToastr({
+      positionClass: 'toast-bottom-right',
+      timeOut: 5000,
+      closeButton: true,
+    })
   ]
 };

src/ui/src/app/auth/user.ts

@@ -1,6 +1,6 @@
-export interface User {
+export type User = {
   id: string;
   username: string;
   email: string;
   score: number;
-}
+};

src/ui/src/app/leaderboards/leaderboards.component.ts

@@ -9,7 +9,12 @@ import { UserScore } from './userScores.dto';
   templateUrl: './leaderboards.component.html',
   imports: [LeaderboardsPositionPipe],
   standalone: true,
-  styleUrls: ['./leaderboards.component.scss'],
+  styles: `
+  :host {
+  display: block;
+  min-height: 100vh;
+}
+`,
 })
 export class LeaderboardsComponent {
   constructor(

src/ui/src/app/leaderboards/userScores.dto.ts

@@ -1,5 +1,5 @@
-export interface UserScore {
+export type UserScore = {
   username: string;
   score: string;
   gamesPlayed: number;
-}
+};

src/ui/src/app/play/play.component.ts

@@ -8,8 +8,20 @@ import { RevealedCardsToggleComponent } from './revealed-cards-toggle/revealed-c
 @Component({
   selector: 'ppo-play',
   imports: [GuessBoxComponent, PokerTableComponent, RevealedCardsToggleComponent],
-  templateUrl: './play.component.html',
-  styleUrls: ['./play.component.css'],
+  template: `
+  <div class="container">
+  <div class="play-area">
+    <ppo-revealed-cards-toggle></ppo-revealed-cards-toggle>
+    <ppo-poker-table [round]="round()"></ppo-poker-table>
+    <ppo-guess-box></ppo-guess-box>
+  </div>
+</div>
+`,
+  styles: `
+  :host {
+  flex: 1;
+  display: flex;
+}`,
   standalone: true
 })
 export class PlayComponent implements OnDestroy, OnInit {
@@ -19,6 +31,7 @@ export class PlayComponent implements OnDestroy, OnInit {
     private toastr: ToastrService
   ) { }
   round = this.pokerOddsFacade.currentRound;
+
   ngOnInit(): void {
     if (this.authStore.isLoggedIn()) {
       const activeToast = this.toastr.info(