From ca742eb73fad48d253960f5bc84b3f0806cab2f6 Mon Sep 17 00:00:00 2001
From: Matt Bruce <mbrucedogs@gmail.com>
Date: Wed, 31 Dec 2025 09:57:45 -0600
Subject: [PATCH] Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

---
 .../Blackjack/Views/Table/CardStackView.swift | 47 ++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/Blackjack/Blackjack/Views/Table/CardStackView.swift b/Blackjack/Blackjack/Views/Table/CardStackView.swift
index cef4ea7..af0c525 100644
--- a/Blackjack/Blackjack/Views/Table/CardStackView.swift
+++ b/Blackjack/Blackjack/Views/Table/CardStackView.swift
@@ -30,22 +30,34 @@ struct CardStackView: View {
     /// This prevents width changes during dealing by pre-allocating placeholder space.
     let minimumCardSlots: Int
     
+    /// Whether placeholders should use staggered (overlapped) layout like dealt cards.
+    /// - `true`: Placeholders overlap using `cardSpacing` (use for bordered containers like player hand)
+    /// - `false`: Placeholders side-by-side (use for borderless containers like dealer hand)
+    let staggeredPlaceholders: Bool
+    
     /// Number of additional placeholders needed to reach minimum slots.
     private var placeholdersNeeded: Int {
         max(0, minimumCardSlots - cards.count)
     }
     
+    /// Spacing to use for empty placeholder state
+    private var placeholderSpacing: CGFloat {
+        staggeredPlaceholders ? cardSpacing : Design.Spacing.small
+    }
+    
     /// Scaled animation duration based on dealing speed.
     private var animationDuration: Double {
         Design.Animation.springDuration * dealingSpeed
     }
     
     var body: some View {
-        HStack(spacing: cards.isEmpty && placeholdersNeeded > 0 ? Design.Spacing.small : cardSpacing) {
+        // Use staggered or side-by-side spacing based on configuration
+        HStack(spacing: cards.isEmpty && placeholdersNeeded > 0 ? placeholderSpacing : cardSpacing) {
             if cards.isEmpty && placeholdersNeeded > 0 {
                 // Show placeholders when empty
-                ForEach(0..<placeholdersNeeded, id: \.self) { _ in
+                ForEach(0..<placeholdersNeeded, id: \.self) { index in
                     CardPlaceholderView(width: cardWidth)
+                        .zIndex(Double(index))
                 }
             } else {
                 // Show actual cards
@@ -95,6 +107,7 @@ struct CardStackView: View {
 
 extension CardStackView {
     /// Creates a card stack for the dealer (with hole card support).
+    /// Uses side-by-side placeholders since dealer area has no border.
     static func dealer(
         cards: [Card],
         showHoleCard: Bool,
@@ -116,11 +129,13 @@ extension CardStackView {
                 x: Design.DealAnimation.dealerOffsetX,
                 y: Design.DealAnimation.dealerOffsetY
             ),
-            minimumCardSlots: 2
+            minimumCardSlots: 2,
+            staggeredPlaceholders: false  // Side-by-side (no border to show shrink)
         )
     }
     
     /// Creates a card stack for the player (all cards face up).
+    /// Uses staggered placeholders to match dealt card layout (prevents container shrink).
     /// - Parameter minimumCardSlots: Minimum slots to reserve (default 2 for initial deal).
     static func player(
         cards: [Card],
@@ -143,14 +158,15 @@ extension CardStackView {
                 x: Design.DealAnimation.playerOffsetX,
                 y: Design.DealAnimation.playerOffsetY
             ),
-            minimumCardSlots: minimumCardSlots
+            minimumCardSlots: minimumCardSlots,
+            staggeredPlaceholders: true  // Staggered (bordered container shows shrink)
         )
     }
 }
 
 // MARK: - Previews
 
-#Preview("Empty") {
+#Preview("Empty - Staggered") {
     ZStack {
         Color.Table.felt.ignoresSafeArea()
         CardStackView(
@@ -162,7 +178,26 @@ extension CardStackView {
             showCardCount: false,
             isFaceUp: { _ in true },
             dealOffset: .zero,
-            minimumCardSlots: 2
+            minimumCardSlots: 2,
+            staggeredPlaceholders: true
+        )
+    }
+}
+
+#Preview("Empty - Side by Side") {
+    ZStack {
+        Color.Table.felt.ignoresSafeArea()
+        CardStackView(
+            cards: [],
+            cardWidth: 60,
+            cardSpacing: -20,
+            showAnimations: true,
+            dealingSpeed: 1.0,
+            showCardCount: false,
+            isFaceUp: { _ in true },
+            dealOffset: .zero,
+            minimumCardSlots: 2,
+            staggeredPlaceholders: false
         )
     }
 }