Slots Display -Lesson 13 (14 Days Challenge)

Hi,
I can’t seem to make the slots display appear on the app. Here’s a screenshot and the whole code pasted. Any advice?

Thank you!

//
// ContentView.swift
// L13 APP
//
// Created by Ellie on 2/9/23.
//

import SwiftUI

struct ContentView: View {

@State var slot1 = 1
@State var slot2 = 1
@State var slot3 = 1
@State var credits = 1000

var body: some View {
    VStack(spacing: 20.0) {
        Spacer()
        Text("SwiftUI Slots!").font(.largeTitle)
        Spacer()
        
        Text("Credits \(credits)")
        
        HStack {
            
            Image("star\(slot1)")
                .resizable()
                .aspectRatio(contentMode: .fit)
            
            Image("cherry\(slot2)")
                .resizable()
                .aspectRatio(contentMode: .fit)
            
            Image("apple\(slot3)")
                .resizable()
                .aspectRatio(contentMode: .fit)
            
        }
        Spacer()
        Button("Spin") {
            slot1 = Int.random(in: 1...3)
            slot2 = Int.random(in: 1...3)
            slot3 = Int.random(in: 1...3)
            
            
            if slot1 == slot2 && slot2 == slot3 {
                credits += 15
            }
            else {
                credits -= 5
            }
        }
        .padding()
        .padding([.leading, .trailing], 40)
        .foregroundColor(.white)
        .background(Color(.systemPink))
        .cornerRadius(25)
        .font(.system(size: 18, weight: .bold, design: .default))
        Spacer()
    }
}

}

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

Hi Ellie,

You are kind of on the right track but what you need to do is rename the image assets to something that makes is easy to add a number too.

For example rather than apple, cherry and star… consider naming them such that the only thing different is the number on the end.

So when you use string interpolation the value of the variable is the key.

Hope that gives you a clue.

Hi there I am facing the same issue as the person you have just helped. my code is below and when i press the play button the imges dissappear. please get back to me on this case as soon as possible. thanks!

//
//  ContentView.swift
//  SlotsGame-BonusChallenge
//
//  Created by Hashim Mahmood on 20/02/2023.
//

import SwiftUI

struct ContentView: View {
    
    @State var img1 = "fruit 1"
    @State var img2 = "fruit 2"
    @State var img3 = "fruit 3"
    
    @State var credits = 1000
    @State var slot1 = 1
    @State var slot2 = 1
    @State var slot3 = 1
    
    var body: some View {
      
        ZStack{
           
            VStack{
                
                Spacer()
             Text("SwiftUI Slots!")
                    .font(.largeTitle)
                Spacer()
                Text("Credits : ...")
                Spacer()
                
                HStack{
                 
                    Image(img1)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                    Image(img2)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                    Image(img3)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                    
                    
                }
                Spacer()
                
                Button{
                   
                    play()
                    
                } label: {
                    Image("Image")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                }
                
                
                
            }
        }
    }
    
    func play(){
        
        // Randomize the numbers
                       slot1 = Int.random(in: 1...3)
                       slot2 = Int.random(in: 1...3)
                       slot3 = Int.random(in: 1...3)
        
        img1 = "fruit" + String(slot1)
        img2 = "fruit" + String(slot2)
        img3 = "fruit" + String(slot3)
        
    }
    
}

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


the following image is the output of the code i have also given. as you can see there are none of the three images since they dissappeared since i ran the code and pressed the play button.

What are the image names in your Assets catalogue? If they are “fruit 1”, “fruit 2” and “fruit 3” then remove the space so that you have “fruit1”, “fruit2” and “fruit3”.

1 Like

Amazing! It works now! thanks for your help.