Challenge 13 with Array doesn't properly work【14 Day challenge】

App Development
1

Hey I’ve tried to solve the challenge with arrays (which Chris unfortunately didn’t in his solution and I kept running into the same problem I don’t know how to fix. Basically, once every image is the same, the images stop refreshing and stay the same even after pressing the button for 100 times. Even the suggestions on the forum post similar code but don’t seem to run into the problem. Could someone look into this?
image

@State var creditAmount:Int = 1000
@State var items:[String] = ["apple","cherry","star"]

var body: some View {
    
    VStack() {
        Text("SwiftUI Slots!").font(.largeTitle)
        Text("Credits: \(creditAmount)")
        
        HStack {
            Image(items[0]).resizable().scaledToFit()
            Image(items[1]).resizable().scaledToFit()
            Image(items[2]).resizable().scaledToFit()
        }
        
        Button {
            let firstItemRandom = Int.random(in: 0...2)
            let secondItemRandom = Int.random(in: 0...2)
            let thirdItemRandom = Int.random(in: 0...2)
            items[0] = items[firstItemRandom]
            items[1] = items[secondItemRandom]
            items[2] = items[thirdItemRandom]
        } label: {
            ZStack {
                RoundedRectangle(cornerRadius: 50)
                    .fill(.red)
                    .frame(width: 150, height: 50)
                    .hueRotation(Angle(degrees: -15))
                Text("Spin")
                    .font(.system(size: 20))
                    .fontWeight(.semibold)
                    .foregroundColor(Color.white)
                // if [0] == [1] == [2] increase, else decrease
            }
        }

       
    }
}
2

Using an array for the apple, cherry and star is fine.

Consider defining a variable for each slot position to hold an index value to that array. Then in your button you assign a random number to each of those slot positions.

Here is your code modified slightly but still sticking to your array idea.

struct ContentView: View {
    @State var creditAmount:Int = 1000
    @State var items:[String] = ["apple","cherry","star"]
    @State var slot1 = 0
    @State var slot2 = 0
    @State var slot3 = 0

    var body: some View {

        VStack() {
            Text("SwiftUI Slots!").font(.largeTitle)
            Text("Credits: \(creditAmount)")

            HStack {
                Image(items[slot1]).resizable().scaledToFit()
                Image(items[slot2]).resizable().scaledToFit()
                Image(items[slot3]).resizable().scaledToFit()
            }

            Button {
                slot1 = Int.random(in: 0...2)
                slot2 = Int.random(in: 0...2)
                slot3 = Int.random(in: 0...2)
            } label: {
                ZStack {
                    RoundedRectangle(cornerRadius: 50)
                        .fill(.red)
                        .frame(width: 150, height: 50)
                        .hueRotation(Angle(degrees: -15))
                    Text("Spin")
                        .font(.system(size: 20))
                        .fontWeight(.semibold)
                        .foregroundColor(Color.white)
                    // if [0] == [1] == [2] increase, else decrease
                }
            }
        }
    }
}
3

Changing it to that it gives me the same result… once I have 3 of the same image it wont change… I don’t know why. Can you try running it on your end and see if you get that same thing? Just do demonstrate it, I put in a button with the click amount.
image
image
image

struct ContentView: View {

@State var creditAmount:Int = 1000
@State var items:[String] = ["apple","cherry","star"]
@State var slot0 = 0
@State var slot1 = 0
@State var slot2 = 0
@State var temp = 0

var body: some View {
    
    VStack() {
        Text("SwiftUI Slots!").font(.largeTitle)
        Text("Credits: \(creditAmount)")
        
        HStack {
            Image(items[0]).resizable().scaledToFit()
            Image(items[1]).resizable().scaledToFit()
            Image(items[2]).resizable().scaledToFit()
        }
        
        Button {
            slot0 = Int.random(in: 0...2)
            slot1 = Int.random(in: 0...2)
            slot2 = Int.random(in: 0...2)
            items[0] = items[slot0]
            items[1] = items[slot1]
            items[2] = items[slot2]
            
            temp += 1
            
        } label: {
            VStack {
                ZStack {
                    RoundedRectangle(cornerRadius: 50)
                        .fill(.red)
                        .frame(width: 150, height: 50)
                        .hueRotation(Angle(degrees: -15))
                    Text("Spin")
                        .font(.system(size: 20))
                        .fontWeight(.semibold)
                        .foregroundColor(Color.white)
                    // if [0] == [1] == [2] increase, else decrease
                }
                Text("Click amount: \(temp)")
            }
        }
    }
}
4

Look closely at the code I sent you.

The changes include adding the three slot variables

    @State var slot1 = 0
    @State var slot2 = 0
    @State var slot3 = 0

changing the HStack code to:

            HStack {
                Image(items[slot1]).resizable().scaledToFit()
                Image(items[slot2]).resizable().scaledToFit()
                Image(items[slot3]).resizable().scaledToFit()
            }

and changing the button action code to:

                slot1 = Int.random(in: 0...2)
                slot2 = Int.random(in: 0...2)
                slot3 = Int.random(in: 0...2)
1 Like
5

Oh wow I’m a donkey…
Thanks for taking your time!