Heads or Tails Game, What's Wrong?

Hi,

I'm trying to convert an already Swift 5 game to SwiftUI. Almost everything works except when it's time to change the image based on the choice. Here's the code:


import SwiftUI
import Foundation

struct ContentView: View {
  
  @State private var randomIndex: Int = 0
  
    var body: some View {
      
      VStack() {
      
      Image("TwoSides")
      .resizable()
      .frame(width: 170, height: 90, alignment: .center)
      .position(x: 100, y: 40)
        
        Text("Heads or Tails").fontWeight(.bold)
        .frame(width: CGFloat(200), height: CGFloat(5), alignment: .center)
          .position(x: 90, y: 40)
        
        Button(action: {
                    
          let array = ["Heads","Tails"]
          let randomIndex = Int(arc4random_uniform(UInt32(array.count)))
          
             if (randomIndex == 1)
                {
                  
                  print("Heads")
                  Image("Heads")
                  .resizable()
                  .frame(width: 170, height: 90,alignment: .center)
                  
                   
                      
              }else {
                    print("Tails")
                    Image("Tails")
                    .resizable()
                    .frame(width: 170, height: 90,alignment: .center)
                    .position(x: 100, y: 40)
          }
                 
          
        }) {
          
          VStack {
          
          Text("Flip Coin")
          .padding(15)
          .background(Color.green)
          .foregroundColor(Color.white)
          
          
        }
           
        }
      }
  }
        
}

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


Any ideas would be greatful.


Dan Uff

Replies

You declare a view inside a button action, which is meaningless in SwiftUI. (I believe Xcode has shown you some warnings, no?)

What do you want to do with the button action? Want to replace the image TwoSides, or something else?

Thanks for the reply.


When a user taps the button, the coin will "flip" and randomly choose which side it wants....i.e. Heads or Tails.

Please try to clarify, you have only one button with text "Flip Coin", so I can see what the button is.

But you do not have anything named as coin in your code, so I do not understand what the coin is.


You want to show sort of flipping animation somewhere I guess, but where?

I'm not worried about the flipping animation yet, I just want the following:


1. User taps the 'Flip Coin' button.

2. The device selects which side it wants (heads or tails).

3. Device shows the correct side of the coin. <--- This is the problem.


The coins are two seperate images. I cannot get the device to show the correct image when it's done flipping the coin.


The word 'coin' is just a label for the button. No value assigned to it.

Sorry, I cannot get you correctly.

I understand that flipping animation is not your main concern (at lease not yet).


But where do you want that coin to be shown? Below the image "TwoSides"? Or replacing it? Or somewhere in the view modally?

When a user first goes into the app, they are presented with the TwoCoins image (kind of like an introduction).


Then, when they tap on the button, that image woud be replaced by the coin and by showing what ever answer the device comes up with, heads or tails.


To give you a better idea, here's the finished product on the app store (I am converting that to SwiftUI).


id1498335106


Thanks again for ALL your help!

Dan

So you Want to replace the image TwoSides . Then you can write something like this...

import SwiftUI

struct ContentView: View {
    
    @State private var imageName: String = "TwoSides"
    
    var body: some View {
        VStack() {
            ZStack {
                Image(imageName)
                    .resizable()
                    .frame(width: 170, height: 90, alignment: .center)
                    .position(x: 100, y: 40)
            }
            
            Text("Heads or Tails").fontWeight(.bold)
                .frame(width: CGFloat(200), height: CGFloat(5), alignment: .center)
                .position(x: 90, y: 40)
            
            Button(action: {
                let array = ["Heads","Tails"]
                let randomIndex = Int.random(in: 0..<array.count)
                self.imageName = array[randomIndex]
            }) {
                VStack {
                    Text("Flip Coin")
                        .padding(15)
                        .background(Color.green)
                        .foregroundColor(Color.white)
                }
            }
        }
    }
}

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

Thank you. I'll try it and let you know.


Dan