diff GeoQuiz/GuessTheCapitalView.swift @ 10:a793f33f05fb

refactor code and fix layout
author Dennis C. M. <dennis@denniscm.com>
date Sat, 08 Oct 2022 21:36:40 +0200
parents e09959b4e4a8
children f1967f8cc67b
line wrap: on
line diff
--- a/GeoQuiz/GuessTheCapitalView.swift	Fri Oct 07 18:50:38 2022 +0200
+++ b/GeoQuiz/GuessTheCapitalView.swift	Sat Oct 08 21:36:40 2022 +0200
@@ -16,18 +16,19 @@
                 .ignoresSafeArea()
             
             GeometryReader { geo in
-                VStack(spacing: 20) {
+                VStack {
                     GameToolbar(game: game, color: .atomicTangerine)
                     
                     Spacer()
                     
                     FlagImage(flagSymbol: game.correctAnswer.value.flag, cornerRadius: 20)
+                        .clipShape(RoundedRectangle(cornerRadius: 20))
                         .shadow(radius: 10)
                         .frame(height: geo.size.height * 0.15)
                     
                     Spacer()
                     
-                    HStack {
+                    VStack(alignment: .leading) {
                         VStack(alignment: .leading, spacing: 10) {
                             Text("Question \(game.questionCounter) of \(game.data.count)")
                                 .font(.title3)
@@ -39,24 +40,23 @@
                                 .foregroundColor(.white)
                         }
                         
-                        Spacer()
-                    }
-                    
-                    VStack {
-                        ForEach(Array(game.userChoices.keys), id: \.self) { countryName in
-                            Button {
-                                game.answer((key: countryName, value: game.data[countryName]!)) {
-                                    game.selector()
+                        VStack(spacing: 15) {
+                            ForEach(Array(game.userChoices.keys), id: \.self) { countryName in
+                                Button {
+                                    game.answer((key: countryName, value: game.data[countryName]!)) {
+                                        game.selector()
+                                    }
+                                } label: {
+                                    AnswerButton(
+                                        optionName: game.data[countryName]!.capital,
+                                        color: .chinaPink
+                                    )
+                                    .frame(height: geo.size.height * 0.08)
                                 }
-                            } label: {
-                                AnswerButton(
-                                    optionName: game.data[countryName]!.capital,
-                                    color: .chinaPink
-                                )
-                                .frame(height: geo.size.height * 0.08)
                             }
                         }
                     }
+                    .frame(maxWidth: 500)
                 }
                 .padding()
             }
@@ -66,10 +66,14 @@
     }
 }
 
-struct GuessCapitalView_Previews: PreviewProvider {
+struct GuessTheCapitalView_Previews: PreviewProvider {
     static var previews: some View {
-        NavigationView {
-            GuessTheCapitalView()
-        }
+        GuessTheCapitalView()
+            .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro Max"))
+            .previewDisplayName("iPhone 14 Pro Max")
+        
+        GuessTheCapitalView()
+            .previewDevice(PreviewDevice(rawValue: "iPad Pro (12.9-inch) (5th generation)"))
+            .previewDisplayName("iPad Pro (12.9-inch) (5th generation)")
     }
 }