Learn Courses My Dashboard

Lesson 13 spin button

slots disappear every time i click spin. Not sure what am getting wrong, looked over the code form the war challenge and this but still not sure what am missing. I looked at previous post but just got confused, any help would be appreciated. Thanks.

@static360

Can you paste your code in as text, rather than providing a screenshot.

To format the code nicely, place 3 back-ticks ``` on the line above your code and 3 back-ticks ``` on the line below your code. Like this:

```
Code goes here
```

The 3 back-ticks must be the ONLY characters on the line. The back-tick character is located on the same keyboard key as the tilde character ~ (which is located below the Esc key - QWERTY keyboard).

Alternatively after you paste in your code, select that code block and click the </> button on the toolbar. This does the same thing as manually typing the 3 back ticks on the line above and below your code.

This also makes it easier for anyone assisting as they can copy the code and carry out some testing.

import SwiftUI

struct ContentView: View {
  //property declarations
   @State var Slot1 = "fruit1"
   @State var Slot2 = "fruit2"
   @State var Slot3 = "fruit3"
   @State var Score = 1000
    
    var body: some View {
    
        
        ZStack(){
            
            
    VStack(){
        
        Spacer()
        
        Text("SwiftUI Slots!")
            .font(.title)
            .fontWeight(.semibold)
            .padding()
            
        
        Spacer()
            .padding(.bottom)
        
        HStack(){
            
           Text("Credits:")
                        Text(String(Score))

        }
            
                
        Spacer()
            .padding(.bottom)
        
        HStack(spacing: 16.0) {
            //Image("fruit\(slot1)")
            Spacer()
                .padding()
            Image(Slot1)
                .resizable()
                .scaledToFit()
            Spacer()
                .padding()
            Image(Slot2)
                .resizable()
                .scaledToFit()
            Spacer()
                .padding()
            Image(Slot3)
                .resizable()
                .scaledToFit()
            Spacer()
                .padding()
        }
        .padding(.horizontal)
        
        
        Spacer()
            .padding(.bottom)
        
        Button(action: {
            
            //generate random image. number corresponds to how many types of images. check asset for clarification
            let slotRand1 = Int.random(in: 1...3)
            let slotRand2 = Int.random(in: 1...3)
            let slotRand3 = Int.random(in: 1...3)
            
            //update slots and score
            Slot1 = "fruit2" + String(slotRand1)
            Slot2 = "fruit3" + String(slotRand2)
            Slot3 = "fruit1" + String(slotRand3)
            
            Score += 1
            
        }, label: {
            
            Text("Spin")
                        .fontWeight(.semibold)
                        .foregroundColor(Color.white)
                        .padding(25.0)
                        .frame(width: 125.0, height: 40.0)
                        .background(/*@START_MENU_TOKEN@*//*@PLACEHOLDER=View@*/Color.red/*@END_MENU_TOKEN@*/)
                        .cornerRadius(/*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/)
                        
        })
        
        
        Spacer()
            .padding(.bottom)
    }
        }
       
        
    }
    
   
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.dark)
            .previewDevice("iPhone 12")
            .previewLayout(.device)
    }
}

Let me know if you needed the whole code or just the code for button that i pasted above.

@static360

Yes I need all of the code so that I know what you are doing in the body property

Whole code pasted

The fix so that the random numbers work on each of your Slot1, Slot2 and Slot3 images is to change it from:

                    Slot1 = "fruit2" + String(slotRand1)
                    Slot2 = "fruit3" + String(slotRand2)
                    Slot3 = "fruit1" + String(slotRand3)

to

                    Slot1 = "fruit" + String(slotRand1)
                    Slot2 = "fruit" + String(slotRand2)
                    Slot3 = "fruit" + String(slotRand3)

The other thing that is affecting the layout of your View and cramping things up is the use of .padding() attached to each of your Spacer() elements. Remove those and the View can breathe.

Otherwise you’ve done a good job.

Thanks for this. All issue resolved and lesson completed…that felt good…although still had to look up some stuff. still feels good.

1 Like