UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Guess the flag with animation

Forums > 100 Days of SwiftUI

After spending more than 2 hours trying to figure out how to solve this and reading solutions from others I came up with much simpler way to solve. Think this will be much easier to understand who is stucked on this challange. But overall I found animations subject hard to digest.

//
//  ContentView.swift
//  GuessTheFlag

import SwiftUI

struct FlagImage: ViewModifier{
    func body(content: Content) -> some View {
        content
            .clipShape(Capsule())
            .overlay(Capsule().stroke(Color.black, lineWidth: 1))
            .shadow(color: Color.black, radius: 2)
    }
}

extension View{
    func something() -> some View{
        self.modifier(FlagImage())
    }
}

struct ContentView: View {
    @State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()

    @State private var correctAnswer = Int.random(in: 0...2)
    @State private var showingScore = false
    @State private var scoreTitle = ""
    @State private var score = 0
    @State private var animationAmount = 0.0
    @State private var correctFlag = false

    var body: some View {

        ZStack{
            LinearGradient(gradient: Gradient(colors: [.blue,.black]), startPoint: .top, endPoint: .bottom)
                .edgesIgnoringSafeArea(.all)

            VStack(spacing: 30){
                VStack{
                    Text("Tap the flag of")
                        .foregroundColor(.white)
                    Text(countries[correctAnswer])
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .fontWeight(.black)
                }

                ForEach(0..<3){number in
                    Button(action: {
                        self.flagTapped(number)
                        withAnimation{
                            self.animationAmount = 360
                        }
                    }){

                        if self.correctFlag{
                            if number == self.correctAnswer{
                                withAnimation{
                                    Image(self.countries[number])
                                        .renderingMode(.original)
                                        .something()
                                        .rotation3DEffect(Angle(degrees: self.animationAmount), axis: (x: 0, y: 1, z: 0))
                                }
                            }
                            else {
                                Image(self.countries[number])
                                    .renderingMode(.original)
                                    .something()
                                    .opacity(0.75)
                            }
                        }
                        else {
                            Image(self.countries[number])
                                .renderingMode(.original)
                                .something()
                        }
                    }
                }

                Text("Score: \(score)")
                    .foregroundColor(.white)
                    .fontWeight(.black)
                Spacer()
            }

        }
        .alert(isPresented: $showingScore){
            Alert(title: Text(scoreTitle), dismissButton: .default(Text("Continue")){
                self.askQuestion()})
        }

    }
    func flagTapped(_ number:Int){
        if number == correctAnswer{
            scoreTitle = "Correct"
            score += 1
            correctFlag = true

        }
        else {
            scoreTitle = "Wrong\n Thats the flag of \(self.countries[correctAnswer])"
            score = score == 0 ? 0 : score - 1
        }

        showingScore = true
    }

    func askQuestion(){
        countries.shuffle()
        correctAnswer = Int.random(in: 0...2)
        correctFlag = false
        animationAmount = 0
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

4      

I wasn't looking at the animation but you've helped me sort out something in my code.

This would not compile

func body(content: Content) -> some View {

content
  .renderingMode((.original))
  .clipShape(Capsule())
  .overlay(Capsule().stroke(Color.black, lineWidth: 1))
  .shadow(color: .black, radius: 20)

But the issue is that .renderingMode() can't be used here. I don't understand why as yet, but having seen yours omitted it I've tweaked my flag example and it looks much better now.

Thank you.

3      

You can solve this by using a custom view (i.e. Flag Image) the applies the 3D rotation effect. Then add that custom view to view that represents the correct answer

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.