diff --git a/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss b/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss index 0cf36f93..80f8a91d 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss +++ b/src/app/game/game-intermediate-result/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/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.ts b/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.ts index 9ca57d59..48061a2a 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.ts +++ b/src/app/game/game-intermediate-result/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,7 +16,12 @@ 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); + + timer: number = 10; + countdownInterval: any; + constructor( private router: Router, private gameStateService: GameStateService, @@ -25,9 +29,31 @@ export class ConfirmExitDialogComponent { private drawingService: DrawingService ) {} - readonly dialogRef = inject(MatDialogRef); + 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 index 33f2e41b..a9fa4ea2 100644 --- 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,7 +52,7 @@ } #homeButtonText { - color: $dark_blue_color; + color: $white_color; display: flex; flex-direction: row; align-items: baseline; @@ -59,6 +60,11 @@ } #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 index 1d374470..38c8cd60 100644 --- 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, - private translationService: TranslationService + private translationService: TranslationService, ) {} startTime = 15; diff --git a/src/assets/translation/NO.json b/src/assets/translation/NO.json index b1c4d85c..52057aa0 100644 --- 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",