diff GeoQuiz/GuessTheCountryView.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/GuessTheCountryView.swift	Fri Oct 07 18:50:38 2022 +0200
+++ b/GeoQuiz/GuessTheCountryView.swift	Sat Oct 08 21:36:40 2022 +0200
@@ -16,16 +16,17 @@
                 .ignoresSafeArea()
             
             GeometryReader { geo in
-                VStack(spacing: 20) {
+                VStack {
                     GameToolbar(game: game, color: .pinkLavender)
                     
                     Spacer()
-    
-                    CityMap(game: game, geo: geo)
+                    
+                    CityMap(game: game)
+                        .frame(height: geo.size.height * 0.35)
                     
                     Spacer()
                     
-                    HStack {
+                    VStack(alignment: .leading) {
                         VStack(alignment: .leading, spacing: 10) {
                             Text("Question \(game.questionCounter) of \(game.data.count)")
                                 .font(.title3)
@@ -37,25 +38,23 @@
                                 .foregroundColor(.white)
                         }
                         
-                        Spacer()
-                    }
-                    
-                    VStack {
-                        ForEach(Array(game.userChoices.keys), id: \.self) { cityName in
-                            Button {
-                                game.answer((key: cityName, value: game.data[cityName]!)) {
-                                    game.selector()
+                        VStack(spacing: 15) {
+                            ForEach(Array(game.userChoices.keys), id: \.self) { cityName in
+                                Button {
+                                    game.answer((key: cityName, value: game.data[cityName]!)) {
+                                        game.selector()
+                                    }
+                                } label: {
+                                    AnswerButton(
+                                        optionName: game.data[cityName]!.country,
+                                        color: .blueBell
+                                    )
+                                    .frame(height: geo.size.height * 0.08)
                                 }
-                            } label: {
-                                AnswerButton(
-                                    optionName: game.data[cityName]!.country,
-                                    color: .blueBell
-                                )
-                                .frame(height: geo.size.height * 0.08)
                             }
                         }
                     }
-                    
+                    .frame(maxWidth: 500)
                 }
                 .padding()
             }
@@ -68,5 +67,11 @@
 struct GuessTheCountryView_Previews: PreviewProvider {
     static var previews: some View {
         GuessTheCountryView()
+            .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro Max"))
+            .previewDisplayName("iPhone 14 Pro Max")
+        
+        GuessTheCountryView()
+            .previewDevice(PreviewDevice(rawValue: "iPad Pro (12.9-inch) (5th generation)"))
+            .previewDisplayName("iPad Pro (12.9-inch) (5th generation)")
     }
 }