Merge pull request 'Add current user balance display in navbar (CAS-26)' (!49) from task/CAS-26/add-balance-to-nav into main

Reviewed-on: https://git.simonis.lol/projects/casino/pulls/49
Reviewed-by: Klan Jattenhoff <jan@kjan.email>
Reviewed-by: lziemke <lea.z4@schule.bremen.de>

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -11,6 +11,11 @@
       </div>
 
       <div class="hidden md:flex items-center space-x-4">
+        <div
+          class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
+        >
+          <span>Balance: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
+        </div>
         @if (!isLoggedIn) {
           <button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
         }

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -1,19 +1,32 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
+import { UserService } from '../../../service/user.service';
 
+import { CurrencyPipe } from '@angular/common';
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, CurrencyPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NavbarComponent {
+export class NavbarComponent implements OnInit {
   isMenuOpen = false;
   private keycloakService: KeycloakService = inject(KeycloakService);
   isLoggedIn = this.keycloakService.isLoggedIn();
 
+  private userService = inject(UserService);
+  private user = this.userService.getCurrentUser();
+
+  public balance = signal(0);
+
+  ngOnInit() {
+    this.user.subscribe((user) => {
+      this.balance.set(user?.balance ?? 0);
+    });
+  }
+
   login() {
     try {
       const baseUrl = window.location.origin;