Add swipe indicators when `accessibilityDifferentiateWithoutColor` is true

day-086/Projects/Flashzilla/Flashzilla/Scenes/Card Deck/CardDeckContainerView.swift

@@ -11,6 +11,8 @@ import CypherPoetSwiftUIKit
 
 
 struct CardDeckContainerView {
+    @Environment(\.accessibilityDifferentiateWithoutColor) var differentiateWithoutColor
+
     @ObservedObject var viewModel: ViewModel = .init()
 }
 
@@ -20,16 +22,27 @@ extension CardDeckContainerView: View {
 
     var body: some View {
         GeometryReader { geometry in
-            VStack {
-                CardDeckView(
-                    width: min(max(800, geometry.size.width) * 0.8, 480),
-                    height: min(max(800, geometry.size.width) * 0.8, 480) * 0.6,
-                    cards: self.viewModel.cards,
-                    onRemove: { (card, index) in self.cardRemoved(at: index) }
-                )
-                .padding()
+            ZStack {
+                VStack {
+                    CardDeckView(
+                        width: min(max(800, geometry.size.width) * 0.8, 480),
+                        height: min(max(800, geometry.size.width) * 0.8, 480) * 0.5,
+                        cards: self.viewModel.cards,
+                        onRemove: { (card, index) in self.cardRemoved(at: index) }
+                    )
+                    .padding()
+                }
+                
+                if self.differentiateWithoutColor {
+                    VStack {
+                        Spacer()
+
+                        self.swipeDirectionIndicators
+                    }
+                }
             }
         }
+        .padding()
         .background(Color("CardDeckBackground"))
         .edgesIgnoringSafeArea(.all)
     }
@@ -43,6 +56,26 @@ extension CardDeckContainerView {
 
 // MARK: - View Variables
 extension CardDeckContainerView {
+    
+    private var swipeDirectionIndicators: some View {
+        HStack {
+            Image(systemName: "xmark.circle")
+                .padding()
+                .background(Color.black.opacity(0.7))
+                .clipShape(Circle())
+            
+            Spacer()
+            
+            
+            Image(systemName: "checkmark.circle")
+                .padding()
+                .background(Color.black.opacity(0.7))
+                .clipShape(Circle())
+        }
+        .foregroundColor(.white)
+        .font(.largeTitle)
+        
+    }
 }
 
 

day-086/Projects/Flashzilla/Flashzilla/Scenes/Card Deck/CardDeckView.swift

@@ -31,7 +31,7 @@ extension CardDeckView: View {
                     horizontalSensitivity: 1.0,
                     onRemove: { _ in self.onRemove?(card, index) }
                 )
-                .stacked(at: index, outOf: deckSize, offsetMultiple: 10)
+                .stacked(at: index + 1, outOf: deckSize, offsetMultiple: CGFloat(30 / deckSize))
             }
         }
         .frame(width: width, height: height)