Dialog box should be better styled and perform correct functionality

computas · Aug 16, 2024 · 96b626c · 96b626c
1 parent 17c10fb
commit 96b626c
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 13 deletions.
diff --git a/...lt/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss b/...lt/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss
@@ -53,8 +53,7 @@
 #confirmExitIdleButtonIcon {
   color: $white_color;
   margin-right: 0.5rem;
-  height: var(--fontSizeSmall);
-}
+  }
 
 #confirmExitHomeButton {
   background-color: $red_color;

diff --git a/...sult/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.ts b/...sult/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.ts
@@ -3,12 +3,11 @@ import { GameStateService } from '@/app/game/services/game-state-service';
 import { routes } from '@/app/shared/models/routes';
 import { Router } from '@angular/router';
 import { MultiplayerService } from '@/app/game/services/multiplayer.service';
-import { Component, inject, ViewEncapsulation } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { DrawingService } from '@/app/game/services/drawing.service';
-
 @Component({
   selector: 'app-confirm-exit-dialog',
   templateUrl: './confirm-exit-dialog.component.html',
@@ -17,17 +16,44 @@ import { DrawingService } from '@/app/game/services/drawing.service';
   standalone: true,
   imports: [MatDialogActions, MatDialogContent, MatButton, MatIcon, TranslatePipe],
 })
-export class ConfirmExitDialogComponent {
+export class ConfirmExitDialogComponent implements OnInit, OnDestroy{
+  readonly dialogRef = inject(MatDialogRef<ConfirmExitDialogComponent>);
+
+  timer: number = 10;
+  countdownInterval: any;
+
   constructor(
     private router: Router,
     private gameStateService: GameStateService,
     private multiplayerService: MultiplayerService,
     private drawingService: DrawingService
   ) {}
 
-  readonly dialogRef = inject(MatDialogRef<ConfirmExitDialogComponent>);
+  ngOnInit(): void {
+      this.startCountdown();
+  }
+
+  ngOnDestroy(): void {
+      this.clearCountdown();
+  }
+
+  startCountdown(): void {
+    this.countdownInterval = setInterval(() => {
+      this.timer -= 1;
+      if (this.timer === 0) {
+        this.goToWelcomePage();
+      }
+    }, 1000);
+  }
+
+  clearCountdown(): void {
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+    }
+  }
 
   onNoClick(): void {
+    this.clearCountdown();
     this.dialogRef.close();
   }
 
@@ -36,6 +62,7 @@ export class ConfirmExitDialogComponent {
   }
 
   goToWelcomePage() {
+    this.clearCountdown();
     this.dialogRef.close();
     this.gameStateService.clearState();
     this.drawingService.clearState();
@@ -46,4 +73,6 @@ export class ConfirmExitDialogComponent {
 
     this.router.navigate([routes.WELCOME]);
   }
+
+
 }
diff --git a/src/app/game/idle-timeout/idle-timeout.component.scss b/src/app/game/idle-timeout/idle-timeout.component.scss
@@ -10,15 +10,15 @@
   padding-left: var(--boxPaddingX);
   padding-right: var(--boxPaddingX);
 
-  width: 60vw;
-  height: 25vh;
+  width: 40vw;
+  height: 30vh;
 }
 
 #countdownText {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 60vw;
+  width: inherit;
   height: 10vh;
   font-size: var(--fontSizeSmall);
 }
@@ -36,6 +36,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
 
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
   font-size: var(--fontSizeSmall);
@@ -51,14 +52,19 @@
 }
 
 #homeButtonText {
-  color: $dark_blue_color;
+  color: $white_color;
   display: flex;
   flex-direction: row;
   align-items: baseline;
   gap: 1rem;
 }
 
 #idleButtonIcon {
-  color: $button_content_color;
   height: var(--fontSizeSmall);
+  color: $white_color;
+}
+
+#homeButton {
+  background-color: $red_color;
 }
+
diff --git a/src/app/game/idle-timeout/idle-timeout.component.ts b/src/app/game/idle-timeout/idle-timeout.component.ts
@@ -20,7 +20,7 @@ export class IdleTimeoutComponent implements OnInit, OnDestroy {
   constructor(
     private router: Router,
     private dialogRef: MatDialogRef<IdleTimeoutComponent>,
-    private translationService: TranslationService
+    private translationService: TranslationService,
   ) {}
 
   startTime = 15;

diff --git a/src/assets/translation/NO.json b/src/assets/translation/NO.json
@@ -13,7 +13,7 @@
   "INTRO_CALL_TO_ACTION_2": " har lært!",
 
   "DIFFICULTY": "Nivå",
-  "DIFFICULTY_MOTIVATION": "Så gøy at du blir med og tegner! :DDDD",
+  "DIFFICULTY_MOTIVATION": "Så gøy at du blir med og tegner!",
   "DIFFICULTY_QUESTION": "Hvor vanskelige ord vil du tegne?",
   "EASY_BUTTON": "Lett",
   "MEDIUM_BUTTON": "Middels",