added a dino game

frontend/src/app/app.module.ts

@@ -10,13 +10,15 @@ import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {HttpClientModule} from "@angular/common/http";
 import {ToastrModule} from "ngx-toastr";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import { WaitingGameComponent } from './waiting-game/waiting-game.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     FolderUploadComponent,
     NavbarComponent,
     NavbarComponent,
+    WaitingGameComponent,
   ],
   imports: [
     BrowserModule,

frontend/src/app/folder-upload/folder-upload.component.html

@@ -37,6 +37,7 @@ <h2>Train your model</h2>
         </div>
         <!-- Start Training Button -->
         <p><button class="btn btn-secondary" role="button" (click)="startTraining()" [disabled]="!isUploadSuccessfull ||isTrainingRunning" >Start training &raquo;</button></p>
+        <h5 *ngIf="isTrainingRunning"> Play a game while you wait!</h5>
       </div>
 
       <div class="col-12 col-md-6">
@@ -82,5 +83,6 @@ <h2>Test your model</h2>
     </div>
 
   </div> <!-- /container -->
+  <app-waiting-game *ngIf="isTrainingRunning"></app-waiting-game>
 
 </main>

frontend/src/app/waiting-game/waiting-game.component.css

@@ -0,0 +1,74 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+.game {
+  width: 600px;
+  height: 200px;
+  border: 1px solid #000000;
+  margin: auto;
+}
+#dino {
+  width: 70px;
+  height: 70px;
+  background-image: url('/assets/dino-1.png');
+  background-size: auto 70px;
+  position: relative;
+  top: 143px;
+}
+.jump {
+  animation: jump 0.3s linear;
+}
+
+@keyframes jump {
+  0% {
+    top: 143px; /*distance from the top of the parent element*/
+  }
+  30% {
+    top: 115px;
+  }
+  50% {
+    top: 70px;
+  }
+  80% {
+    top: 115px;
+  }
+  100% {
+    top: 143px;
+  }
+}
+#cactus {
+  width: 20px;
+  height: 40px;
+  position: relative;
+  top: 91px;
+  left: 580px; /*width of frame - width of cactus*/
+  background-image: url('/assets/cacti-large-1.png');
+  background-size: 20px 40px;
+  animation: cactus-block 1.2s infinite linear;
+}
+@keyframes cactus-block {
+  0% {
+    left: 600px;
+  }
+  100% {
+    left: -20px;
+  }
+}
+
+.restart-button {
+  height: 40px; /* align button height with cactus */
+  padding: 0 20px;
+  font-size: 16px;
+  cursor: pointer;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  margin-left: 20rem;
+}
+
+.restart-button:hover {
+  background-color: #0056b3;
+}
+

frontend/src/app/waiting-game/waiting-game.component.html

@@ -0,0 +1,7 @@
+<div>
+  <div class="game">
+    <div id="dino" #dino></div>
+    <div id="cactus" #cactus></div>
+  </div>
+  <button class="restart-button" *ngIf="!isAlive" (click)="resetGame()">Restart Game</button>
+</div>

frontend/src/app/waiting-game/waiting-game.component.spec.ts

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

frontend/src/app/waiting-game/waiting-game.component.ts

@@ -0,0 +1,76 @@
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import {DataService} from "../services/data.service";
+import {ToastrService} from "ngx-toastr";
+
+@Component({
+  selector: 'app-waiting-game',
+  templateUrl: './waiting-game.component.html',
+  styleUrls: ['./waiting-game.component.css']
+})
+export class WaitingGameComponent implements AfterViewInit {
+  @ViewChild('dino', { static: false }) dino!: ElementRef;
+  @ViewChild('cactus', { static: false }) cactus!: ElementRef;
+  isAlive = true;
+
+  ngAfterViewInit() {
+    document.addEventListener('keydown', () => this.startGame());
+  }
+
+  startGame() {
+    if (this.isAlive) {
+      this.jump();
+      this.checkAlive();
+    }
+  }
+
+  jump() {
+    if (this.dino.nativeElement.classList != "jump") {
+      this.dino.nativeElement.classList.add("jump");
+      setTimeout(() => {
+        this.dino.nativeElement.classList.remove("jump");
+      }, 300);
+    }
+  }
+
+  checkAlive() {
+    let checkAliveInterval = setInterval(() => {
+      let dinoTop = parseInt(window.getComputedStyle(this.dino.nativeElement).getPropertyValue("top"));
+      let cactusLeft = parseInt(window.getComputedStyle(this.cactus.nativeElement).getPropertyValue("left"));
+
+      if (cactusLeft > 0 && cactusLeft < 70 && dinoTop >= 143) {
+        this.dino.nativeElement.style.animationPlayState = "paused";
+        this.cactus.nativeElement.style.animationPlayState = "paused";
+        this.isAlive = false;
+        clearInterval(checkAliveInterval);
+      }
+    }, 10);
+  }
+
+  resetGame() {
+    this.isAlive = true;
+
+    // Pause animations
+    this.dino.nativeElement.style.animationPlayState = 'paused';
+    this.cactus.nativeElement.style.animationPlayState = 'paused';
+
+    // Reset positions
+    this.dino.nativeElement.style.top = '143px';
+    this.cactus.nativeElement.style.left = '600px';
+
+    // Remove the cactus animation class to reset it
+    this.cactus.nativeElement.style.animation = 'none';
+
+    // Force reflow (repaint) to restart the animation
+    void this.cactus.nativeElement.offsetWidth;
+
+    // Add the animation back
+    this.cactus.nativeElement.style.animation = '';
+
+    // Restart animations
+    this.dino.nativeElement.style.animationPlayState = 'running';
+    this.cactus.nativeElement.style.animationPlayState = 'running';
+
+    // Restart the checkAlive interval
+    this.checkAlive();
+  }
+}