diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ebeb75b..4c1dffa 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -10,6 +10,7 @@ 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: [
@@ -17,6 +18,7 @@ import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
FolderUploadComponent,
NavbarComponent,
NavbarComponent,
+ WaitingGameComponent,
],
imports: [
BrowserModule,
diff --git a/frontend/src/app/folder-upload/folder-upload.component.html b/frontend/src/app/folder-upload/folder-upload.component.html
index 55c6c67..4214630 100644
--- a/frontend/src/app/folder-upload/folder-upload.component.html
+++ b/frontend/src/app/folder-upload/folder-upload.component.html
@@ -37,6 +37,7 @@
Train your model
+ Play a game while you wait!
@@ -82,5 +83,6 @@
Test your model
+
diff --git a/frontend/src/app/waiting-game/waiting-game.component.css b/frontend/src/app/waiting-game/waiting-game.component.css
new file mode 100644
index 0000000..c76b5ef
--- /dev/null
+++ b/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;
+}
+
diff --git a/frontend/src/app/waiting-game/waiting-game.component.html b/frontend/src/app/waiting-game/waiting-game.component.html
new file mode 100644
index 0000000..8a69117
--- /dev/null
+++ b/frontend/src/app/waiting-game/waiting-game.component.html
@@ -0,0 +1,7 @@
+
diff --git a/frontend/src/app/waiting-game/waiting-game.component.spec.ts b/frontend/src/app/waiting-game/waiting-game.component.spec.ts
new file mode 100644
index 0000000..4e88fdf
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [WaitingGameComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(WaitingGameComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/waiting-game/waiting-game.component.ts b/frontend/src/app/waiting-game/waiting-game.component.ts
new file mode 100644
index 0000000..7d3a8b6
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/frontend/src/assets/cacti-large-1.png b/frontend/src/assets/cacti-large-1.png
new file mode 100644
index 0000000..d002ac8
Binary files /dev/null and b/frontend/src/assets/cacti-large-1.png differ
diff --git a/frontend/src/assets/dino-1.png b/frontend/src/assets/dino-1.png
new file mode 100644
index 0000000..b065319
Binary files /dev/null and b/frontend/src/assets/dino-1.png differ