[iOS]Building an app from scratch — SlapJack. Part 1

MYH
彼得潘的 Swift iOS App 開發教室
5 min readJul 28, 2021

--

Prologue

Hi guys! New day, new challenge. This one is really special to me for multiple reasons. First off, I’m not a guy with abundant experience in coding, and unlike other iOS apps that I did, this one didn’t have a single preset function for me to utilize, so I had to build every things literally from scratch. I don’t know about you guys, but this really is a big step for me. Wow I can really blabber on and on nonstop, huh? Sorry guys, lol. Let’s cut to the chase.

To those people who don’t know what slapjack is, here’s a video. What you see up there is a video of Jimmy Fallon show. Well, I’m a big fan of late night show, Jimmy Kimmel, James Gordon, Jimmy Fallon; you name it, I’ve seen it. Among all these shows, slapjack is one of the most entertaining sections to me. Like Jimmy said in the video, SlapJack is the same as BlackJack, but at the end of the game, the winner gets to slap the loser with his giant foam hand. And I’m gonna be totally honest here, I don’t fully understand all the rules in BlackJack (probably because we don’t have any casino here in Taiwan),so all the rules that I set in this project came directly from my observation through watching these videos. And here are the rules:

Rules:
1. “J”, “Q”, “K” are counted as 10.
2. ”Ace” can be counted as 1 or 11. (which will be the greatest challenge
3. The dealer will deal himself/herself two cards with one covered and deal the player two cards at the start of each turn.
4. The player can decide whether or not to hit or to stay.
5. Once the player chooses to stay, the player’s cards are all set and cannot be added or subtracted.
6.After the player chooses to stay, the dealer will reveal his/her covered card and decide whether or not he/she wants to add more cards based on the number he/she gets.
7.If the dealer turns out to have the same value as the the player, the dealer loses the round and gets slap.
8.If the player has blackjack, he/she automatically wins the round.

And that’s probably all the rules I took into consideration when I was building this app. Since this app contains a lot of aspects that I think wroth mentioning, I’ll break it down in four sections. And you know what, I put the best to the last, the hardest part in the project, or as I like to call it, the “ONE” dilemma.

For this article, I’ll talk about:
1. @IBDesignable & @IBInspectable.
2. enum and setting up the deck.
3. setting up the StoryBoard.
4. The “ONE” Dilemma.

And here’s the demo of my app. (Apologize in advance if the demo feel a little bit laggy, I’m still using a 2015 MacBook Pro.)

Alright, without further ado, let’s dive in.

@IBDesignable & @IBInspectable

Xcode is kind enough to give us lots of parameters in attributes inspector to adjust the outlook of certain element. However, the attributes inspector can only do so much. Some things still need to be done through codes. For example, the corner radius of certain view can be set through this line:

view.layer.cornerRadius

After setting the @IBInspectable and subclassing in identity inspector, you can find the new parameters in the attributes inspector. And now, changing the value of that certain parameter would be so much more easier.

As for @IBDesignable, this simply lets you see the changes on your design live in your storyboard. However, my 2015 MacBook pro seems to have a trouble updating the storyboard. Too hot to handle, I guess.

enum and setting up the deck

I know I can also use array to do the same thing, but I had had never used enumeration before I did this project, so you know, might as well.

The main reason why I’m choosing enum to create types is that it’s safer. For example, if I want to create a variable that represents six of heart, I might have to write something like this.

let sixOfHeart = [“6”, “heart”]

But if I use enum, it can help me spare the trouble of accidentally alter the value in the String, so it would look somewhat like this.

let sixOfHeart = [Rank.six.rawValue, Suit.heart.rawValue]

I know I probably didn’t explain it that well, so I’m gonna leave a link down below. It’s from raywenderlich, and it helps me tremendously.

Now that we’re all clear on enum, let’s create a deck for the dealer.

Just two simple for-loop will help us with just that, and it will return an array with 52 element representing each card in the deck. If you find yourself not being able to find “allCases” property, it’s because your enum didn’t conform to the CaseIterable protocol. Then, we wrote the drawACard function to randomly choose a card from the deck. (Noted that you should also remove the cards that got draw from the deck. I did that in my viewController, though.)

--

--