Day 19 - 100 Days of Swift

4 minute read

Project 2 (part 1)

Day 19 is the first part of the second project. This project is a game where you are given the name of a country and you have to guess which of three displayed flags is that country’s flag. You get the project set up. You add some buttons to the interface. You add the flag images to the asset catalog. You write a function that sets the three buttons’ images, and you make a few tweaks to the border so you can see the edges of white flags.

The first thing you do is create a new “Single View App”. You embed the provided view controller in a navigation controller, and you add the three buttons that will be used to display the flags. Then you import the flag images into the asset catalog, and set a default for each of the three buttons. Finally, you add a few constraints to keep them horizontally centered, with a little space between them and add outlets to ViewController:

Next you add a couple of properties to hold the information about the game:

1
2
var countries: [String] = []
var score = 0

Then he asks you to add all the countries to the countries variable in viewDidLoad. I decided to pull it out to a setup() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private func setup() {
    countries = ["estonia",
                 "france",
                 "germany",
                 "ireland",
                 "italy",
                 "monaco",
                 "nigeria",
                 "poland",
                 "russia",
                 "spain",
                 "uk",
                 "us"]
}

Then he has you add a function to set up the flags that are displayed on the three buttons. Right now, when it is called it just sets the three buttons to display the first three countries in the array:

1
2
3
4
5
func askQuestion() {
    button1.setImage(UIImage(named: countries[0]), for: .normal)
    button2.setImage(UIImage(named: countries[1]), for: .normal)
    button3.setImage(UIImage(named: countries[2]), for: .normal)
    }

And, of course, you need to call it in viewDidLoad:

1
2
3
4
5
6
override func viewDidLoad() {
    super.viewDidLoad()

    setup()
    askQuestion()
}

Then he has you add a border to the flag buttons. After adding the code to my setup function, it looked like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private func setup() {
    countries = ["estonia",
                 "france",
                 "germany",
                 "ireland",
                 "italy",
                 "monaco",
                 "nigeria",
                 "poland",
                 "russia",
                 "spain",
                 "uk",
                 "us"]

    button1.layer.borderWidth = 1
    button2.layer.borderWidth = 1
    button3.layer.borderWidth = 1

    button1.layer.borderColor = UIColor.lightGray.cgColor
    button2.layer.borderColor = UIColor.lightGray.cgColor
    button3.layer.borderColor = UIColor.lightGray.cgColor

}

That seemed a little repetitive to me though, so I added an extension on UIButton that looks like this:

1
2
3
4
5
6
extension UIButton {
    func addBorder(width: CGFloat = 1, color: UIColor = .lightGray) {
        self.layer.borderColor = color.cgColor
        self.layer.borderWidth = width
    }
}

With that addition, my final setup() function looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private func setup() {
    countries = ["estonia",
                 "france",
                 "germany",
                 "ireland",
                 "italy",
                 "monaco",
                 "nigeria",
                 "poland",
                 "russia",
                 "spain",
                 "uk",
                 "us"]

    button1.addBorder()
    button2.addBorder()
    button3.addBorder()
}

Not a huge gain. In this context, I think it is actually more lines of code. But it means I get autocomplete, I only have to write the long chain calls once, and I have one single place I can go to change the default values. At the end of the day it looks like this:

You can find my version of the project at the end of Day 19 on Github here.

Reflections

Today was pretty simple again. I like that we’re going to get to build some games. And I like that it is reinforcing stuff we’ve already covered. And I like that there were a couple of places I could try to improve on how he wanted us to build the app. It’s a good excuse to explore and try things out. But I don’t like leaving stuff in an unfinished state. Every time I have to force myself not to go on to Part 2. It is good for developing will power I guess.