From 40c402ae36fce63ec3bf8285934bd5dc5689023e Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 2 Apr 2025 13:03:04 +0200
Subject: [PATCH] feat: add hand value display to dealer and player hands

---
 .../components/dealer-hand/dealer-hand.component.ts | 13 ++++++++++++-
 .../components/player-hand/player-hand.component.ts | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts
index b1a40ed..3674d63 100644
--- a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 import { CommonModule } from '@angular/common';
 import { Card } from '@blackjack/models/blackjack.model';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
+import { GameControlsService } from '@blackjack/services/game-controls.service';
 
 @Component({
   selector: 'app-dealer-hand',
@@ -9,7 +10,15 @@ import { PlayingCardComponent } from '../playing-card/playing-card.component';
   imports: [CommonModule, PlayingCardComponent],
   template: `
     <div class="space-y-4">
-      <h3 class="section-heading text-2xl mb-4">Dealer's Karten</h3>
+      <div class="flex justify-between items-center">
+        <h3 class="section-heading text-2xl">Dealer's Karten</h3>
+        <div class="flex items-center gap-2">
+          <div class="text-text-secondary">Punkte:</div>
+          <div class="text-xl font-bold text-accent-red">
+            {{ gameControlsService.calculateHandValue(cards) }}
+          </div>
+        </div>
+      </div>
       <div class="card p-6 !bg-accent-red">
         <div class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-red-400 rounded-lg">
           @if (cards.length > 0) {
@@ -38,6 +47,8 @@ export class DealerHandComponent implements OnChanges {
 
   private lastCardCount = 0;
 
+  constructor(protected gameControlsService: GameControlsService) {}
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['cards']) {
       this.updateCardsWithState();
diff --git a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts
index b921a3c..bca976c 100644
--- a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 import { CommonModule } from '@angular/common';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
 import { Card } from '@blackjack/models/blackjack.model';
+import { GameControlsService } from '@blackjack/services/game-controls.service';
 
 @Component({
   selector: 'app-player-hand',
@@ -9,7 +10,15 @@ import { Card } from '@blackjack/models/blackjack.model';
   imports: [CommonModule, PlayingCardComponent],
   template: `
     <div class="space-y-4">
-      <h3 class="section-heading text-2xl mb-4">Deine Karten</h3>
+      <div class="flex justify-between items-center">
+        <h3 class="section-heading text-2xl">Deine Karten</h3>
+        <div class="flex items-center gap-2">
+          <div class="text-text-secondary">Punkte:</div>
+          <div class="text-xl font-bold text-emerald">
+            {{ gameControlsService.calculateHandValue(cards) }}
+          </div>
+        </div>
+      </div>
       <div class="card p-6 !bg-emerald">
         <div
           class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-emerald-400 rounded-lg"
@@ -40,6 +49,8 @@ export class PlayerHandComponent implements OnChanges {
 
   private lastCardCount = 0;
 
+  constructor(protected gameControlsService: GameControlsService) {}
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['cards']) {
       this.updateCardsWithState();