From 7bec17dd52a5f9dbea43de0199f88cc20112a477 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 2 Apr 2025 13:04:22 +0200
Subject: [PATCH] style: Format code for readability and consistency

---
 .../game-result/game-result.component.ts      | 29 +++++----
 .../debt-dialog/debt-dialog.component.ts      | 60 ++++++++++++++-----
 .../components/navbar/navbar.component.html   |  4 +-
 3 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
index 59a6d9f..63ca955 100644
--- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
@@ -13,28 +13,35 @@ import { GameState } from '../../enum/gameState';
         <h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
         <p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
 
-        <div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
+        <div
+          class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30"
+        >
           <div class="grid grid-cols-2 gap-4">
             <div class="text-text-secondary">Einsatz:</div>
-            <div class="font-medium text-right">{{ amount | currency:'EUR' }}</div>
+            <div class="font-medium text-right">{{ amount | currency: 'EUR' }}</div>
 
             <div class="text-text-secondary">
               {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
             </div>
-            <div class="font-medium text-right" [ngClass]="{
-              'text-emerald': isWin,
-              'text-accent-red': isLoss,
-              'text-yellow-400': isDraw
-            }">
-              {{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }}
+            <div
+              class="font-medium text-right"
+              [ngClass]="{
+                'text-emerald': isWin,
+                'text-accent-red': isLoss,
+                'text-yellow-400': isDraw,
+              }"
+            >
+              {{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
               <div *ngIf="isWin" class="text-xs text-text-secondary">
-                (Einsatz {{ amount | currency:'EUR' }} × 2)
+                (Einsatz {{ amount | currency: 'EUR' }} × 2)
               </div>
             </div>
 
-            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Kontostand:</div>
+            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">
+              Kontostand:
+            </div>
             <div class="font-medium text-right border-t border-text-secondary/20 pt-3">
-              {{ balance | currency:'EUR' }}
+              {{ balance | currency: 'EUR' }}
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts
index 90f9a9b..a57dfe0 100644
--- a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts
+++ b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  signal,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { interval, takeWhile } from 'rxjs';
@@ -12,19 +21,22 @@ import { interval, takeWhile } from 'rxjs';
       <div class="modal-card" [@cardAnimation]>
         <h2 class="modal-heading text-accent-red">WARNUNG!</h2>
         <p class="py-2 text-text-secondary mb-4">
-          Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns {{ amount | currency:'EUR' }}.
+          Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns
+          {{ amount | currency: 'EUR' }}.
         </p>
         <p class="py-2 text-accent-red mb-4 font-bold">
           Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!
         </p>
-        <div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
+        <div
+          class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30"
+        >
           <div class="grid grid-cols-2 gap-4">
             <div class="text-text-secondary">Schulden:</div>
-            <div class="font-medium text-right text-accent-red">{{ amount | currency:'EUR' }}</div>
+            <div class="font-medium text-right text-accent-red">{{ amount | currency: 'EUR' }}</div>
           </div>
         </div>
         <div class="text-center mb-6">
-          <div 
+          <div
             class="text-8xl font-bold text-accent-red"
             [class.animate-pulse]="timeLeft() <= 10"
             [class.animate-bounce]="timeLeft() <= 5"
@@ -38,19 +50,39 @@ import { interval, takeWhile } from 'rxjs';
           <div class="text-center mb-6">
             <div class="relative">
               <div class="absolute inset-0 bg-accent-red/20 blur-xl rounded-full"></div>
-              <div class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg">
+              <div
+                class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg"
+              >
                 <div class="flex items-center justify-center gap-4 mb-4">
-                  <svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
+                  <svg
+                    class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
+                    />
                   </svg>
-                  <span class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]">
+                  <span
+                    class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]"
+                  >
                     ZEIT ABGELAUFEN
                   </span>
-                  <svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
+                  <svg
+                    class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
+                    />
                   </svg>
                 </div>
-                <div class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]">
+                <div
+                  class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]"
+                >
                   KONSEQUENZEN FOLGEN
                 </div>
               </div>
@@ -117,7 +149,7 @@ export class DebtDialogComponent implements OnInit, OnDestroy {
     this.timerSubscription = interval(1000)
       .pipe(takeWhile(() => this.timeLeft() > 0))
       .subscribe(() => {
-        this.timeLeft.update(value => value - 1);
+        this.timeLeft.update((value) => value - 1);
         if (this.timeLeft() <= 5) {
           this.warningSound.play();
         }
@@ -138,4 +170,4 @@ export class DebtDialogComponent implements OnInit, OnDestroy {
     this.visible = false;
     this.dialogClosed.emit();
   }
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html
index a4ea516..b34aea5 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.html
+++ b/frontend/src/app/shared/components/navbar/navbar.component.html
@@ -19,7 +19,9 @@
             class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
             routerLink="/home"
           >
-            <span [class]="balance() < 0 ? 'text-accent-red' : ''">{{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
+            <span [class]="balance() < 0 ? 'text-accent-red' : ''">{{
+              balance() | currency: 'EUR' : 'symbol' : '1.2-2'
+            }}</span>
           </div>
           <button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
         }