Fix idle-component

src/app/game/shared-components/idle-timeout/idle-timeout.component.html

@@ -0,0 +1,13 @@
+<div mat-dialog-content id="countdownText">
+  <p>
+    {{ 'AUTO_END_MESSAGE' | translate }} <strong>{{ timer }}</strong> {{ 'SECONDS' | translate }}
+  </p>
+</div>
+<div mat-dialog-actions id="actions">
+  <button class="idleButton" id="homeButton" (click)="goHome()" [@buttonClickEffect]="buttonStateHome">
+    <span id="homeButtonText"><mat-icon id="idleButtonIcon">home</mat-icon>{{ 'END_NOW_BUTTON' | translate }}</span>
+  </button>
+  <button class="idleButton" id="stayButton" (click)="closeDialog()" [@buttonClickEffect]="buttonStateCancel">
+    {{ 'RESUME_BUTTON' | translate }}
+  </button>
+</div>

src/app/game/shared-components/idle-timeout/idle-timeout.component.scss

@@ -0,0 +1,81 @@
+@import '../../../../variables.scss';
+
+.cdk-overlay-backdrop.cdk-overlay-dark-backdrop.cdk-overlay-backdrop-showing {
+  background: rgba(20, 33, 61, 0.8);
+}
+
+.cdk-overlay-container .cdk-overlay-pane {
+  border-radius: 1.5rem;
+  overflow: hidden;
+  padding-left: var(--boxPaddingX);
+  padding-right: var(--boxPaddingX);
+
+  width: auto;
+  height: auto; 
+  min-height: 3vh;
+  min-width: 5vw;
+}
+
+#countdownText {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: inherit;
+  height: 10vh;
+  font-size: var(--fontSizeSmall);
+  padding: 1rem;
+  text-align: center;
+  word-wrap: break-word;
+  margin: 1vh;
+}
+
+#actions {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.idleButton {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1; 
+  flex-basis: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  padding: 0.5rem 1rem; 
+  font-size: var(--fontSizeSmall);
+  border-radius: 10rem;
+  margin-bottom: 1rem;
+  margin-inline: 1rem;
+
+  background: $white_color;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+
+.idleButton :focus {
+  background-color: $white_color;
+}
+
+#homeButtonText {
+  color: $white_color;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+#idleButtonIcon {
+  height: auto;
+  width: auto;
+  color: $white_color;
+  font-size: 50px;
+}
+
+#homeButton {
+  background-color: $red_color;
+}
+

src/app/game/shared-components/idle-timeout/idle-timeout.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatDialogRef, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { ViewEncapsulation } from '@angular/core';
+import { routes } from '../../../shared/models/routes';
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { TranslationService } from '@/app/core/translation.service';
+import { TranslatePipe } from '@/app/core/translation.pipe';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'app-idle-timeout',
+  templateUrl: './idle-timeout.component.html',
+  styleUrls: ['./idle-timeout.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatIcon, TranslatePipe],
+  animations: [
+    trigger('buttonClickEffect', [
+      state('normal', style({transform: 'scale(1)',})),
+      state('clicked', style({transform: 'scale(1.1)',})),
+      transition('normal => clicked', [animate('0.1s ease-out')]),
+      transition('clicked => normal', [animate('0.1s ease-in')]),
+    ])
+  ]
+})
+export class IdleTimeoutComponent implements OnInit, OnDestroy {
+  constructor(
+    private router: Router,
+    private dialogRef: MatDialogRef<IdleTimeoutComponent>,
+    private translationService: TranslationService,
+  ) {}
+
+  startTime = 15;
+  timer = 0;
+  countdown = 0;
+  buttonStateHome = 'normal';
+  buttonStateCancel = "normal";
+
+  ngOnInit(): void {
+    this.timer = this.startTime;
+    this.countdown = window.setInterval(() => {
+      this.timer -= 1;
+      if (this.timer === 0) {
+        this.resetTimer();
+        this.goHome();
+      }
+    }, 1000);
+    this.translationService.loadTranslations(this.translationService.getCurrentLang()).subscribe();
+  }
+
+  goHome() {
+    this.buttonStateHome = "clicked";
+    setTimeout(() => {
+      this.buttonStateHome = "normal";
+      setTimeout(() => {
+        clearInterval(this.countdown);
+        this.dialogRef.close();
+        this.router.navigate([routes.LANDING]);
+      }, 100)
+    }, 100);
+  }
+
+  closeDialog() {
+    this.buttonStateCancel = "clicked";
+    setTimeout(() => {
+      this.buttonStateCancel = "normal";
+      setTimeout(() => {
+        clearInterval(this.countdown);
+        this.dialogRef.close();
+      }, 100)
+    }, 100);
+  }
+
+  resetTimer() {
+    clearInterval(this.countdown);
+    this.timer = this.startTime;
+  }
+
+  ngOnDestroy(): void {
+    this.resetTimer();
+  }
+}