Add(NewDesign): ajout de la gestion paramètre de la partie

ArkitDoushiQi/ArkitDoushiQi/Views/Components/Controls/EditTextComponent.swift

@@ -9,24 +9,42 @@ import SwiftUI
 
 struct EditTextComponent: View {
     let explanation: LocalizedStringKey
-    @State private var name: String
+    @Binding var name: String
-    
-    init(explanation: LocalizedStringKey, value: String) {
-        self.explanation = explanation
-        self._name = State(initialValue: value)
-    }
     
     var body: some View {
-        Form {
+        VStack(alignment: .leading) {
-            Section(header: Text(explanation)) {
+            Text(explanation)
+                .font(.caption)
+                .foregroundColor(.gray)
+            
             TextField("", text: $name)
+                .padding(10)
+                .background(Color(.systemGray6))
+                .cornerRadius(5)
+                .placeholder(when: name.isEmpty) {
+                    Text(explanation).foregroundColor(.gray)
+                }
+        }
     }
+}
+
+extension View {
+    func placeholder<Content: View>(
+        when shouldShow: Bool,
+        alignment: Alignment = .leading,
+        @ViewBuilder placeholder: () -> Content) -> some View {
+        
+        ZStack(alignment: alignment) {
+            placeholder().opacity(shouldShow ? 1 : 0)
+            self
         }
     }
 }
 
+
 struct EditTextComponent_Previews: PreviewProvider {
     static var previews: some View {
-        EditTextComponent(explanation: LocalizedStringKey("Nom du Joueur 1"), value: "Joueur 1")
+        EditTextComponent(explanation: "Nom du Joueur 1", name: .constant("Joueur 1"))
     }
 }
+

ArkitDoushiQi/ArkitDoushiQi/Views/Components/Visuals/ProfileEdit.swift

@@ -7,16 +7,19 @@
 
 import SwiftUI
 
-struct ProfileEdit: View {
+struct ProfileEdit: View, KeyboardReadable {
     let color: Color
     let profileWidth: CGFloat
     let profileHeight: CGFloat
     let defaultImage: Image
     let imageTextChange: LocalizedStringKey
     let playerNameKey: LocalizedStringKey
+    @Binding var playerName: String
+    @State private var keyboardHeight: CGFloat = 0
+    @State private var isKeyboardVisible: Bool = false
 
     var body: some View {
-        VStack(alignment: .leading, spacing: 10) {
+        VStack(alignment: .leading) {
             EditImageComponent(
                 color: color,
                 profileWidth: profileWidth,
@@ -25,27 +28,30 @@ struct ProfileEdit: View {
                 imageTextChange: imageTextChange
             ).padding(.horizontal)
             
-            VStack(alignment: .leading, spacing: 5) {
+            EditTextComponent(explanation: playerNameKey, name: $playerName)
-                Text(playerNameKey)
-                    .font(.headline)
-                    .foregroundColor(.gray)
-                TextField("", text: .constant("")) // Modifier ici selon votre logique
-                    .textFieldStyle(RoundedBorderTextFieldStyle())
-                    .font(.title3) // Taille de police augmentée
-            }
                 .padding(.horizontal)
         }
+        .padding(.bottom, isKeyboardVisible ? keyboardHeight : 0)
+        .animation(.easeOut(duration: 0.3), value: keyboardHeight)
+        .onReceive(keyboardPublisher) { height in
+            withAnimation {
+                self.keyboardHeight = height
+                self.isKeyboardVisible = height > 0
+            }
+        }
     }
 }
 
 struct ProfileEdit_Previews: PreviewProvider {
     static var previews: some View {
         ProfileEdit(color: Color(.red),
-                    profileWidth: 80,
+                    profileWidth: 100,
-                    profileHeight: 80,
+                    profileHeight: 100,
                     defaultImage: Image("profil"),
-                    imageTextChange: "Changer d'avatar",
+                    imageTextChange: "Changer l'avatar",
-                    playerNameKey: "Nom du Joueur 1"
+                    playerNameKey: "Nom du Joueur 1",
+                    playerName: .constant("Joueur 1")
         )
     }
 }
+

ArkitDoushiQi/ArkitDoushiQi/Views/GameParametersMenuView.swift

@@ -9,58 +9,53 @@ import SwiftUI
 import PhotosUI
 
 struct GameParametersMenuView: View, KeyboardReadable {
-    @State private var selectedGameType: GameType = .PvP
     @State private var selectedAIOption: AI = .RandomAction
     @State private var selectedRulesOption: Rules = .Regular
+    @State private var selectedGameType: GameType = .PvP
+    @State private var isKeyboardVisible = false
+    @State private var playerName1 = NSLocalizedString("Nom du Joueur 1", comment: "")
+    @State private var playerName2 = NSLocalizedString("Nom du Joueur 2", comment: "")
     @State private var keyboardHeight: CGFloat = 0
 
     var body: some View {
-        NavigationStack {
+        GeometryReader { geometry in
-            VStack(alignment: .leading, spacing: 15) {
+            ScrollView {
-                Text(LocalizedStringKey("Paramètres de partie"))
+                VStack(alignment: .leading) {
+                    Text("Paramètres de partie")
                         .bold()
-                    .font(.largeTitle)
+                        .font(.title)
-                    .padding(.top, 20)
+                        .padding()
-
-                PickerComponent(title: LocalizedStringKey("Sélectionne le type de partie :"),
-                                selectedOption: $selectedGameType,
-                                options: GameType.allCases)
-                    .padding(.horizontal)
                     
-                PickerComponent(title: LocalizedStringKey("Sélectionne les règles :"),
+                    PickerComponent(title: "Sélectionne le type de partie :", selectedOption: $selectedGameType, options: GameType.allCases)
-                                selectedOption: $selectedRulesOption,
+                    PickerComponent(title: "Sélectionne les règles :", selectedOption: $selectedRulesOption, options: Rules.allCases)
-                                options: Rules.allCases)
-                    .padding(.horizontal)
                     
                     if selectedGameType == .PvAI {
-                    PickerComponent(title: LocalizedStringKey("Sélectionne une IA :"),
+                        PickerComponent(title: "Sélectionne une IA :", selectedOption: $selectedAIOption, options: AI.allCases)
-                                    selectedOption: $selectedAIOption,
-                                    options: AI.allCases)
-                        .padding(.horizontal)
                     }
                     
-                ProfileEdit(color: Color(.red), profileWidth: 80, profileHeight: 80, defaultImage: Image("profil"), imageTextChange: LocalizedStringKey("changer l'avatar du joueur 1"), playerNameKey: LocalizedStringKey("Nom du Joueur 1"))
+                    ProfileEdit(color: Color(.red), profileWidth: 100, profileHeight: 100, defaultImage: Image("profil"), imageTextChange: "Changer l'avatar du joueur 1", playerNameKey: "Nom du Joueur 1", playerName: $playerName1)
                     
                     if selectedGameType == .PvP {
-                    ProfileEdit(color: Color(.blue), profileWidth: 80, profileHeight: 80, defaultImage: Image("profil"), imageTextChange: LocalizedStringKey("changer l'avatar du joueur 2"), playerNameKey: LocalizedStringKey("Nom du Joueur 2"))
+                        ProfileEdit(color: Color(.blue), profileWidth: 100, profileHeight: 100, defaultImage: Image("profil"), imageTextChange: "Changer l'avatar du joueur 2", playerNameKey: "Nom du Joueur 2", playerName: $playerName2)
                     }
                     
-                Spacer()
+                    if !isKeyboardVisible {
-
+                        ButtonComponent(title: "Lancer la partie") {
-                ButtonComponent(title: LocalizedStringKey("Lancer la partie")) {
                             GameView()
                         }
-                .padding(.horizontal, 32)
+                        .padding(EdgeInsets(top: 10, leading: 32, bottom: 10, trailing: 32))
-                .padding(.bottom, 20)
+                    }
                 }
+                .padding(.bottom, isKeyboardVisible ? keyboardHeight : 0)
+                .animation(.easeOut(duration: 0.3), value: keyboardHeight)
                 .onReceive(keyboardPublisher) { height in
                     withAnimation {
-                    self.keyboardHeight = height
+                        self.keyboardHeight = height - geometry.safeAreaInsets.bottom
+                        self.isKeyboardVisible = height > 0
+                    }
                 }
+                .frame(minHeight: geometry.size.height)
             }
-            .padding(.horizontal, 20)
-            .padding(.bottom, keyboardHeight) // Ajouter le padding en bas pour éviter le clavier
-            .padding(.top, 20) // Ajuster le padding en haut si nécessaire
         }
     }
 }