communication to the backend works

src/app/app.config.ts

@@ -1,8 +1,9 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http'
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
 };

src/app/jump.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ providedIn: 'root' })
+export class JumpService {
+  private apiUrl = 'http://localhost:8080/game/jump';
+
+  constructor(private http: HttpClient) {}
+
+  registerJump() {
+    return this.http.get<{ totalJumps: number }>(this.apiUrl, {});
+  }
+}

src/app/mario/mario.component.ts

@@ -1,4 +1,5 @@
 import { Component, HostListener, OnInit } from '@angular/core';
+import { JumpService } from '../jump.service';
 
 @Component({
   selector: 'app-mario',
@@ -49,7 +50,7 @@ import { Component, HostListener, OnInit } from '@angular/core';
         { x: 5800, y: 500, width: 160, height: 10 },
         { x: 6100, y: 400, width: 140, height: 10 }
       ];
-    
+
       ngOnInit(): void {
         this.canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
         this.ctx = this.canvas.getContext('2d')!;
@@ -58,6 +59,10 @@ import { Component, HostListener, OnInit } from '@angular/core';
         this.mario.y = this.canvasHeight - 100;
         this.loop();
       }
+
+      totalJumps = 0;
+
+      constructor(private jumpService: JumpService) {}
     
       @HostListener('window:keydown', ['$event'])
       handleKeyDown(event: KeyboardEvent) {
@@ -66,6 +71,10 @@ import { Component, HostListener, OnInit } from '@angular/core';
         if (event.key === ' ' && this.mario.onGround) {
           this.mario.dy = -this.mario.jumpStrength;
           this.mario.onGround = false;
+          this.jumpService.registerJump().subscribe({
+            next: (res) => this.totalJumps = res.totalJumps,
+            error: (err) => console.error('Jump API error:', err)
+          });
         }
       }
     
@@ -144,6 +153,10 @@ import { Component, HostListener, OnInit } from '@angular/core';
         this.ctx.fillRect(this.canvasWidth - 60, this.canvas.height - 160, 20, 100);
         this.ctx.fillStyle = 'black';
         this.ctx.fillText('🏁', this.canvasWidth - 60, this.canvas.height - 170);
+
+        this.ctx.fillStyle = 'black';
+        this.ctx.font = '20px Arial';
+        this.ctx.fillText(`Jumps: ${this.totalJumps}`, this.canvas.width - 150, 30);
       }
     
       private scrollToMario() {

src/main.ts

@@ -1,7 +1,13 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
-import { MarioComponent } from './app/mario/mario.component';
+import { provideHttpClient } from '@angular/common/http';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));
+
+  bootstrapApplication(AppComponent, {
+    providers: [
+      provideHttpClient()
+    ]
+  });