Day 107 — starting with it.
Basic start
As Paul said, let’s start simple and build something that we are sure it is working, then move on from there. I will write down all of the passages so that it is easy to follow. The first iteration of the project is an emoji concentration card game and I would like to evolve from there so that we can later on just change the text within. Also, I am beginning from an iPhone, which is strange for me, but I want to make it flexible and scalable and this is going to be harder the other way round.
So, after the creation part, let’s edit the Storyboard, bringing out one button and changing its title to be an emoji of our choice and all the while changing the font size to 50 and the shape of the button to something vaguely similar to a card. Make it have a white background colour and change the view background colour to black. Now connect the button to the ViewController file with an action (so that it reacts when tapped) and call it, for now, touchCard(_ sender: UIButton).
What we want here is to have the card “flip” when tapped, right? Paul advised us on how to obtain that effect with an animation but I’m in the super-early stages of this project and I need something much simpler by now.
Just below this action create a new method called flipCard(withEmoji emoji: String, on button: UIButton). Inside it set up a control flow statement so that if the button’s current title is equal to the emoji parameter, the title is set to an empty string for the .normal state and the button’s background colour is set to a tangerine shade of orange. This would mean: if the card is showing the emoji, “flip it “ and show me the back of it. Otherwise set the title to the emoji parameter and the background colour to white.
I still have to understand the difference between the setTitle(_:, for:) method and the titleLabel?.text property. I suppose that if we never change the state of the UIButton then the second would be more appropriate.
At this point we can call the method inside the card’s action.
After testing that this is working we can create a new button that is copy of the first (but remember to disconnect the method) and create a new action for it with the same method call inside it (just call this action something different such as touchSecondCard.
Counting flips to manage score
Create an instance variable (property) called flipCount of type Int with an initial value of 0. Then add a UILabel to the bottom of the screen with our usual tangerine font and a text of “Flips: 0” inside, quite big, let’s say 40 by now, eventually connecting it to the code with an outlet.
Inside the touchCard (and touchSecondCard) method insert an increase by 1 of the flipCount property. After this add a property observer to the flipCount property so that it updates the label’s text.
Now, if we want to move on and make something more complex we would be quite stuck in duplicating the code and that would be really poorly looking and, quite surely, poorly performing. So, before moving on and implementing the next step, we need to get rid of the second touchCard method and disconnect the second button from it, making it now point to the first method.
Inside that same method, also remove the call to the flipCard method as this is not appropriate right now, we are moving on to the next step.
Data driven cards
Duplicate the two cards we have so that we have now four. From the first one create a new type of connection we have not looked at before, called an Outlet connection, which basically creates an array of that interface element type in our code. Go on and connect each one of the cards.
Inside the touchCard method declare a new constant cardNumber with the cardButtons.firstIndex(of: sender) initialiser using conditional binding because firstIndex(of:) returns an Optional Int. Then create an array of Strings that contains (by now) four emoji of your choice as String literals. At this point, inside that conditional binding, call flipCard(withEmoji: emojiChoices[cardNumber], on: sender) and it should work like a charm! I mean, we are very far from the objective of this exercise but, well, at least what we have is working pretty nicely, right?
Before moving on I feel due to give a review on all the basics, that is the Swift Programming Language Language Guide on the swift.org website. I think this is extremely due as it would be my third pass in the language. I always find fascinating how much clearer it becomes when you review something, you really feel your brain digging canyons of knowledge inside your head!
During this day (107) I was able to review:
The Basics
- Constants and Variables
- Comments
- Semicolons
- Integers
- Floating Point Numbers
- Type Safety and Type Inference
- Numeric Literals
If you like what I’m doing here please consider liking this article and sharing it with some of your peers. If you are feeling like being really awesome, please consider making a small donation to support my studies and my writing (please appreciate that I am not using advertisement on my articles).
If you are interested in my music engraving and my publications don’t forget visit my Facebook page and the pages where I publish my scores (Gumroad, SheetMusicPlus, ScoreExchange and on Apple Books).
You can also support me by buying Paul Hudson’s books from this Affiliate Link.
Anyways, thank you so much for reading!
Till the next one!
Music Preparation Services 