🔀 Merge branch 'hugo/feature/Update-ObserveThenTouchToSelect-UI'

Modules/GameEngineKit/Sources/_NewSystem/Views/ActionButton/ActionButton+Listen.swift

@@ -0,0 +1,34 @@
+// Leka - iOS Monorepo
+// Copyright 2023 APF France handicap
+// SPDX-License-Identifier: Apache-2.0
+
+import DesignKit
+import SwiftUI
+
+struct ActionButtonListen: View {
+    @ObservedObject var audioPlayer: AudioPlayer
+
+    var body: some View {
+        Button {
+            audioPlayer.play()
+        } label: {
+            Image(systemName: "speaker.2")
+                .font(.system(size: 100, weight: .medium))
+                .foregroundColor(.accentColor)
+                .padding(40)
+        }
+        .frame(width: 200)
+        .disabled(audioPlayer.isPlaying)
+        .buttonStyle(ActionButtonStyle(progress: audioPlayer.progress))
+        .scaleEffect(audioPlayer.isPlaying ? 1.0 : 0.8, anchor: .center)
+        .shadow(
+            color: .accentColor.opacity(0.2),
+            radius: audioPlayer.isPlaying ? 6 : 3, x: 0, y: 3
+        )
+        .animation(.spring(response: 0.3, dampingFraction: 0.45), value: audioPlayer.isPlaying)
+    }
+}
+
+#Preview {
+    ActionButtonListen(audioPlayer: AudioPlayer(audioRecording: AudioRecordingModel(name: "drums", file: "drums")))
+}

Modules/GameEngineKit/Sources/_NewSystem/Views/ActionButton/ActionButton+Observe.swift

@@ -0,0 +1,98 @@
+// Leka - iOS Monorepo
+// Copyright 2023 APF France handicap
+// SPDX-License-Identifier: Apache-2.0
+
+import DesignKit
+import SwiftUI
+
+struct AnimatableBlur: AnimatableModifier {
+    var blurRadius: CGFloat
+
+    var animatableData: CGFloat {
+        get { blurRadius }
+        set { blurRadius = newValue }
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .blur(radius: blurRadius)
+    }
+}
+
+struct AnimatableSaturation: AnimatableModifier {
+    var saturation: Double
+
+    var animatableData: Double {
+        get { saturation }
+        set { saturation = newValue }
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .saturation(saturation)
+    }
+}
+
+struct ActionButtonObserve: View {
+    let image: String
+
+    @Binding var imageWasTapped: Bool
+
+    var body: some View {
+        if let uiImage = UIImage(named: image) {
+            Button {
+                withAnimation {
+                    imageWasTapped = true
+                }
+            } label: {
+                VStack {
+                    Image(systemName: "hand.tap")
+                        .resizable()
+                        .frame(width: 70, height: 70)
+                        .foregroundColor(.white)
+                    Text("Tap to reveal")
+                        .font(.title)
+                        .foregroundColor(.white)
+                }
+                .transition(.opacity)
+                .opacity(imageWasTapped ? 0 : 1)
+                .frame(width: 460, height: 460)
+                .contentShape(RoundedRectangle(cornerRadius: 10))
+            }
+            .disabled(imageWasTapped)
+            .background {
+                Image(uiImage: uiImage)
+                    .resizable()
+                    .frame(width: 460, height: 460)
+                    .clipShape(RoundedRectangle(cornerRadius: 10))
+                    .modifier(AnimatableBlur(blurRadius: imageWasTapped ? 0 : 20))
+                    .modifier(AnimatableSaturation(saturation: imageWasTapped ? 1 : 0))
+
+            }
+        } else {
+            Text("❌\nImage not found:\n\(image)")
+                .multilineTextAlignment(.center)
+                .overlay {
+                    Circle()
+                        .stroke(Color.red, lineWidth: 5)
+                }
+                .frame(
+                    width: 460,
+                    height: 460
+                )
+        }
+    }
+}
+#Preview {
+
+    struct ActionObserveButtonContainer: View {
+        @State var imageWasTapped = false
+        var body: some View {
+            ActionButtonObserve(
+                image: "placeholder-observe_then_touch_to_select", imageWasTapped: $imageWasTapped)
+        }
+    }
+
+    return ActionObserveButtonContainer()
+
+}

Modules/GameEngineKit/Sources/_NewSystem/Views/ActionButton/ActionButton+Style.swift

@@ -0,0 +1,58 @@
+// Leka - iOS Monorepo
+// Copyright 2023 APF France handicap
+// SPDX-License-Identifier: Apache-2.0
+
+import DesignKit
+import SwiftUI
+
+struct ActionButtonStyle: ButtonStyle {
+    var progress: CGFloat
+
+    func makeBody(configuration: Self.Configuration) -> some View {
+        configuration.label
+            .mask(Circle().inset(by: 4))
+            .background(
+                Circle()
+                    .fill(
+                        Color.white, strokeBorder: DesignKitAsset.Colors.gameButtonBorder.swiftUIColor,
+                        lineWidth: 4
+                    )
+                    .overlay(
+                        Circle()
+                            .trim(from: 0, to: progress)
+                            .stroke(Color.accentColor, style: StrokeStyle(lineWidth: 10, lineCap: .round))
+                            .rotationEffect(.degrees(-90))
+                            .animation(.easeOut(duration: 0.2), value: progress)
+                    )
+            )
+            .contentShape(Circle())
+    }
+}
+
+#Preview {
+    HStack(spacing: 80) {
+        Button {
+            print("Pressed!")
+        } label: {
+            Text("Press me")
+                .frame(width: 200, height: 200)
+        }
+        .buttonStyle(ActionButtonStyle(progress: 0.0))
+
+        Button {
+            print("Pressed!")
+        } label: {
+            Text("Press me")
+                .frame(width: 200, height: 200)
+        }
+        .buttonStyle(ActionButtonStyle(progress: 0.5))
+
+        Button {
+            print("Pressed!")
+        } label: {
+            Text("Press me")
+                .frame(width: 200, height: 200)
+        }
+        .buttonStyle(ActionButtonStyle(progress: 1.0))
+    }
+}

Modules/GameEngineKit/Sources/_NewSystem/Views/ListenThenTouchToSelect/ListenThenTouchToSelectView.swift

@@ -45,7 +45,7 @@ public struct ListenThenTouchToSelectView: View {
         let interface = Interface(rawValue: viewModel.choices.count)
 
         HStack(spacing: 0) {
-            ActionListenButton(audioPlayer: audioPlayer)
+            ActionButtonListen(audioPlayer: audioPlayer)
                 .padding(20)
 
             Divider()