Finished the SwiftUI Slots App? Post your Screenshot Here!

We’ve got a shiny new badge to award!

If you’ve finished the SwiftUI Slots app, post your screenshot of it in this thread and one of us moderators will award the badge to you :slight_smile:

If you haven’t done this tutorial series yet, you can find it here !

Hi Chris,
I finished the SwiftUI Slots app
Thanks for the great lesson! Great Job. :+1:

1 Like


Chris: Finished the challenge except for scoring the diagonals. Will do that tonight! :slight_smile:
You’ll notice I have a minor “improvement” to my version. The green background is ONLY applied to the winning cards.


Slots challenge completed.
First image is Spin Middle with only the Middle Row being randomised and scored.

Second image is Spin All with scoring at row level and diagonals.


Wow, one of the first finishers of this challenge. Congrats, FayDev_2020! Three badges now for ya! Excellent!

1 Like

Cheers, Balazs_Turoczy! You’re on a roll! Enjoy your new badge!

Congrats, jrosengarden! I’m sure you’ll figure out the diagonals. Enjoy your brand new badge!

Cheers, Chris! :slight_smile:

Hi, sorry I wasn’t sure where to ask and I posted here. I can make it look similar but can’t make all 9 of them random without duplicating symbols and giving them numbers 0~8 (3x apple, 3x cherry, 3x star). Is there a way to give apple more than 1 number? so that for example, apple could be 0 & 3 & 6. I’m looking at War card game tutorial and see if I could find a solution but no luck yet… Many thanks, Yuki

Hello there. Thank you for your guides, Chris

If I press the first button: & If I press the second button:


Hi Everyone,

When try and I won the row, (single or max spin), the background color doesn’t change to the green color.

I want to add sound effects to the games if Chris accepts it.

Great Job. :+1:

Single Spin Pic:

Max Spin Pic:

1 Like

Thanks for your Tuto
I completed the challenge
I would like to add sounds to
I perhaps to have the feeling of a real wheel
Thanks a lot

1 Like

After extracting the Symbols View (CardView) out to a separate view and passing bindings for the symbols and backgrounds, I extended the numbers array to cater for 9 elements so that I could then have 3 groups of HStack’s containing the 3 symbols.

So you would have ‘numbers’ array elements 0, 1, 2 for the first group; 3, 4, 5 for the second and 6, 7, 8 for the third. Effectively you have a grid like this:

0 1 2
3 4 5
6 7 8

Just watched your solution video. Great code refactoring.

For something different, I used a boolean to change the opacity of the Top and Bottom rows to 0.1 based on if it was a single row spin or the maximum. Here’s how it looks.

Thank you Chris! I think I started to understand the way to fix this but, how is it possible to extend the numbers? My understanding is that 0=apple, 1=star and 2=cherry and whenever I try adding more numbers to identify each square (0~8), I’d have errors because there are 3=???, 4=???..

The numbers 0, 1, 2 is used for symbols___, right? Do I need NEW @State private var number____?

I’m very new to coding and my brain might explode! hahaha
Many many thanks

I see where you are misunderstanding.

Each element in the numbers array holds the position of the symbol in the symbols array. In other words if the numbers array has the value 2, that corresponds to the third position in the array symbols which is the cherry. Remember in all of this that the array indexes start at 0.

The numbers array can only hold the values 0 , 1 or 2 in each position. Every position in the numbers array corresponds to a symbol on the screen be it an apple, star or cherry.

Does that make sense?

So your numbers array could look like this:
@State private var numbers = [0, 1, 2, 2, 0, 1, 2, 1, 0] which gives you the 9 symbols on the screen.


Ah! That’s how it works. It makes sense now. The position in the @State is the numbers in here “CardView(symbol: $symbols[numbers[3]], background: $backgrounds[3])”.

Thank you so much!! I have managed to complete the challenge now. I think…

1 Like

I think the challenge was to match the images horizontally and diagonally only… but you’ve got the right idea anyway. Well done.

1 Like