feat: add stand and get game features to blackjack game

2025-03-27 15:22:24 +01:00 · 2025-03-27 15:22:24 +01:00 · d90fcdcf1e
commit d90fcdcf1e
parent 4e8530c861
13 changed files with 446 additions and 32 deletions
--- 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
@ -0,0 +1,124 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { CommonModule, CurrencyPipe } from '@angular/common';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'app-game-result',
+  standalone: true,
+  imports: [CommonModule, CurrencyPipe],
+  template: `
+    <div
+      *ngIf="visible"
+      [@fadeInOut]
+      class="modal-bg"
+    >
+      <div 
+        class="modal-card"
+        [@cardAnimation]
+      >
+        <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="grid grid-cols-2 gap-4">
+            <div class="text-text-secondary">Einsatz:</div>
+            <div class="font-medium text-right">{{ amount }} €</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 ? '-' : '+' }}{{ amount }} €
+            </div>
+            
+            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Gesamt:</div>
+            <div 
+              class="font-medium text-right border-t border-text-secondary/20 pt-3"
+              [ngClass]="{
+                'text-emerald': isWin,
+                'text-accent-red': isLoss,
+                'text-white': isDraw
+              }"
+            >
+              {{ isWin ? '+' : (isLoss ? '-' : '') }}{{ amount }} €
+            </div>
+          </div>
+        </div>
+        
+        <button
+          type="button"
+          (click)="visible = false"
+          class="button-primary w-full py-2"
+        >
+          Verstanden
+        </button>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./game-result.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('300ms ease-out', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate('200ms ease-in', style({ opacity: 0 }))
+      ])
+    ]),
+    trigger('cardAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'scale(0.8)' }),
+        animate('350ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
+      ])
+    ])
+  ]
+})
+export class GameResultComponent {
+  @Input() gameState: string = '';
+  @Input() amount: number = 0;
+  @Input() set show(value: boolean) {
+    this.visible = value;
+  }
+  
+  visible = false;
+  
+  get isWin(): boolean {
+    return this.gameState === 'PLAYER_WON';
+  }
+  
+  get isLoss(): boolean {
+    return this.gameState === 'PLAYER_LOST';
+  }
+  
+  get isDraw(): boolean {
+    return this.gameState === 'DRAW';
+  }
+  
+  getResultTitle(): string {
+    if (this.isWin) return 'Gewonnen!';
+    if (this.isLoss) return 'Verloren!';
+    if (this.isDraw) return 'Unentschieden!';
+    return '';
+  }
+  
+  getResultMessage(): string {
+    if (this.isWin) return 'Glückwunsch! Du hast diese Runde gewonnen.';
+    if (this.isLoss) return 'Schade! Du hast diese Runde verloren.';
+    if (this.isDraw) return 'Diese Runde endet unentschieden. Dein Einsatz wurde zurückgegeben.';
+    return '';
+  }
+  
+  getResultClass(): string {
+    if (this.isWin) return 'text-emerald';
+    if (this.isLoss) return 'text-accent-red';
+    if (this.isDraw) return 'text-yellow-400';
+    return '';
+  }
+}