diff GeoQuiz/GuessThePopulationView.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/GuessThePopulationView.swift	Fri Oct 07 18:50:38 2022 +0200
+++ b/GeoQuiz/GuessThePopulationView.swift	Sat Oct 08 21:36:40 2022 +0200
@@ -8,13 +8,73 @@
 import SwiftUI
 
 struct GuessThePopulationView: View {
+    @StateObject var game = CountryGame()
+    
     var body: some View {
-        Text("Hello, World!")
+        ZStack {
+            LinearGradient(gradient: .quaternary, startPoint: .top, endPoint: .bottom)
+                .ignoresSafeArea()
+            
+            GeometryReader { geo in
+                VStack {
+                    GameToolbar(game: game, color: .maizeCrayola)
+                    
+                    Spacer()
+                    
+                    FlagImage(flagSymbol: game.correctAnswer.value.flag, cornerRadius: 20)
+                        .clipShape(RoundedRectangle(cornerRadius: 20))
+                        .shadow(radius: 10)
+                        .frame(height: geo.size.height * 0.15)
+                    
+                    Spacer()
+                    
+                    VStack(alignment: .leading) {
+                        VStack(alignment: .leading, spacing: 10) {
+                            Text("Question \(game.questionCounter) of \(game.data.count)")
+                                .font(.title3)
+                                .foregroundColor(.white.opacity(0.7))
+                            
+                            Text("What is the population of \(game.correctAnswer.key)?")
+                                .font(.title)
+                                .fontWeight(.semibold)
+                                .foregroundColor(.white)
+                        }
+                        
+                        VStack(spacing: 15) {
+                            ForEach(Array(game.userChoices.keys), id: \.self) { countryName in
+                                Button {
+                                    game.answer((key: countryName, value: game.data[countryName]!)) {
+                                        game.selector()
+                                    }
+                                } label: {
+                                    let population = game.data[countryName]!.population
+                                    AnswerButton(
+                                        optionName: population.formattedWithSeparator,
+                                        color: .middleRed
+                                    )
+                                    .frame(height: geo.size.height * 0.08)
+                                }
+                            }
+                        }
+                    }
+                    .frame(maxWidth: 500)
+                }
+                .padding()
+            }
+        }
+        .navigationBarHidden(true)
+        .modifier(GameAlertsModifier(game: game))
     }
 }
 
-struct GuessThePopulation_Previews: PreviewProvider {
+struct GuessThePopulationView_Previews: PreviewProvider {
     static var previews: some View {
         GuessThePopulationView()
+            .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro Max"))
+            .previewDisplayName("iPhone 14 Pro Max")
+        
+        GuessThePopulationView()
+            .previewDevice(PreviewDevice(rawValue: "iPad Pro (12.9-inch) (5th generation)"))
+            .previewDisplayName("iPad Pro (12.9-inch) (5th generation)")
     }
 }