17. Styling and keeping score

Lesson 17:

By implementing the score keeping, we’ll learn the importance of understanding scope. We’ll also add additional graphics to liven the app up!

Completed Xcode Project

iOS Training Courses

Wall of Fame

By completing this tutorial, you’ve done more than 99% of the people who dream of building their own app but never take any action.

Give yourself a pat on the back and then click the card below to send out a tweet to inspire others!

I’ll see your tweet and I’ll add your name below and a link to your Twitter profile.

I completed the War Card Game app! @CodeWithChrisClick To Tweet

After you complete the tutorial, Click to Tweet above and pronounce your victory! I’ll add your name below:

Be sure to check out my courses to continue your learning!

Next Lesson: What’s Next
Previous Lesson: 16. Determining a winner – IF statements

83 thoughts on “17. Styling and keeping score”

  1. Hi Chris, The other night I was working on this and it was all building successfully. Now I’m suddenly failing to build, with the following errors:

    • Signing for “[War]” requires a development team. Select a development team in the project editor.
    • Code signing is required for product type ‘Application’ in SDK ‘iOS 10.2’

    The only things that I changed (AFAIK) are:
    1. Installed an OS X Security update
    2. Moved the project folder from ~/Documents/CodeWithChris Tutorials/ to ~/Developer/CodeWithChrisTutorials/ (does this move somehow change the signing requirements?)

    What changed? Any insight or links would be helpful.

    • Hey Gecko, are you running on the simulator or device? I don’t think the move would prompt those changes! From the project properties, you can select a development team if you have an iOS developer account. Let me know what you find!

      • Hi, and thanks for replying. I ended up reverting to a Time Machine file from a couple days earlier, which cleared it up. Still don’t know what caused the change. I was using the Simulator. Thanks again!

  2. Hi Chris,
    I enjoyed your first 17 lessons and I’ve decided to continue learning wiht you, I just had a question.
    When I try to run the “war” project on my iphone 6plus I get this error :” Could not locate device support files. This iPhone 6 Plus is running iOS 10.2.1 (14D27), which may not be supported by this version of Xcode.”
    I’m using Version 8.0 (8A218a) of Xcode. If both Xcode and my iPhone are running the latest versions, how can they be incompatible?
    I’ve done a quick research online but can’t seem to find a solution. I’ve tried with 3 different iPhones and get the same error.

  3. hi Chris, i want to one more thing. Now i can make this war card but i don’t how to install it into my devices. I also try to search for it but still i’m can not install into my devices, can u help me please

  4. Hi Chris, I ran the war game on my ipad for several days but today it suddenly didn’t work. When I click the war game icon on my ipad, a quick flash appears and then nothing shows up. Do you know why? How to solve this problem?

  5. Hi Chris, I just succeeded in building the war game. Thank you for the easy-to-follow tutorial! I am considering to build an app that takes the users’ input and yield some results accordingly. How to achieve that?

    • Hey Alice! That’s awesome! Look up some tutorials on UITextField. That’s the “textbox” for iOS. It’s something that we do inside my courses so consider joining those if it fits your budget! Once again, thanks for learning with me!

      • Thank you Chris for telling me the keyword. I appreciate it. If I had no financial problem, I’d love to follow your courses for sure since you really make them easy to follow.

  6. I loved the course, thank you! It is just the right length, your instructions are clear and concise, and I was able to complete it. Cheers.

  7. I really appreciate that you don’t advertise your paid course constantly in your free videos. But I think you could do a little more because I was not even aware you had a paid course. I would suggest something like a brief “did you know there’s a full course available after this intro series?” pop up in each video. Just brief. Then something more definite in the very last video

    • Hey Tony, thanks for the feedback! I also have people mistaking this 17 lesson series as the entire beginner course when in fact it’s 73 lessons long. Thanks for confirming what I need to do here 🙂

  8. https://uploads.disquscdn.com/images/ed130e8c8cb202b862c9b2b20919cb559086b48e8a7a74d067f095e0f1f63e01.jpg https://uploads.disquscdn.com/images/f655cecadad6dd341db1ea587fba9067db84507063e10d4e9202ebe3c5d88eae.jpg Hey Chris! Thanks for an amazing set of videos!
    Ran into one small problem. Hoping you could help. Lesson 17, at 2:14 where you’re updating the left label, you choose the leftScoreLabel which is a UILabel type whereas with me it’s a UIStackView type. This is quite confusing for me. Because it does not have a text attribute to it, and thus, I can’t update the label.

    Hope to hear from you soon!

    • Hey Salar, it looks like when you dragged the blue line into your view controller, you selected the stack view instead of the label.

      You need to kill that IBOutlet and redo it but this time making sure you’re dragging the label and not connecting a UIStackView.

      First, delete your “leftScoreLabel” property

      Then, go into your storyboard, right click on each of your stack views (it’ll pop up a dialog box to show you what it’s connected to) to find out which stackview is connected to your “leftScoreLabel” property and then break that connection by clicking the little “x” beside the connection.

      Then start over and try to add the IBOutlet property for the label!

  9. Hey, Chris! First, I want to say that this guide is simply awesome. I finished the first app successfully and had a lot of fun doing it – way better than reading a book. I will definitely buy the other parts of your course!

    The only question I have is about resizing the War logo and the Deal Button. I was restyling the app a little just to have fun with it, but I couldn’t quite figure out how to resize those two elements. I resized the cards and the score Labels by changing properties of the respective stacks, like their constraints and the spacing between items inside it. Could you help me out there?

    Thanks a lot!

    • Hey Bruno, thanks for your kind words and thanks for learning with me!

      There’re two ways you could go about this.
      1. You could set a width or height for your logo/deal button however, this wouldn’t really scale well. I recommend only setting the width OR the height since you already have an aspect ratio constraint in place.
      2. You could add a “Equal Widths” constraint between your button and another element and then after that, click on the new constraint and change the multiplier to be like 1/3, 1/4 etc.. so that the logo/deal button is relatively sized to something else. This would be preferable!

      • Hello Chris, it’s me again!

        Your solution worked, all is fine in Bruno’s Swiftland. But now I have an entirely different issue with my own code! Is it ok if I send you an email or should I post the code here?

        Thank you in advance!

        • Hey Bruno, is this related to the war app? I’m barely keeping up with helping beginners in my courses and tutorials that I have to reject requests to help with personal projects unfortunately!

    • Hey Charles, it looks like when you were connecting your IBOutlets, you may have accidentally click and dragged the UIStackView and created an outlet for that, instead of for the label.
      Just go into your storyboard, right click the UIStackView to pop open the connection menu, click the “x” to break the connection of the stackview to the IBOutlet named LeftScoreLabel and RightScoreLabel.

      Then in your view controller, delete the IBOutlet properties RightScoreLabel and LeftScoreLabel.

      Finally, try to make the connection for the labels again, this time clicking the label and dragging the blue line from that. It may help to do the dragging from the Document Outline instead. Document Outline is that tree diagram in your storyboard that shows you all the elements you have on the storyboard!

      • Thanks Chris! It’s working perfectly now. That was a great project for learning to make apps. I’m surprised that you offer that much content for free one the web. (Although I did end up buying the whole package, so it might be a good marketing technique.) :-0

  10. Hey Chris,

    I have a question regarding the scope of the variables and IBOulets that maybe you covered earlier but can’t seem to find it. In the video when you talk about the scope of the variables to keep score you basically made them “global” by moving them to the class declaration rather than the method, until then we are fine, my confusion comes when you increment those variables, why is not “self.enemyScore” which you usually do when referring to IBOutlets, is this a common practice? is there any right or wrong here? i made my code by using self.enemyScore += 1 and it still works fine.

    Thanks in advance.

  11. my code is all working but what about the labels and the image view at the top?? when i rotate the iOS simulator to stretched view from portrait view all of them disappears..

  12. whatever i am adding as per u in this video whether its the image or the label its not visible in the stretched view… i guess my auto-layout is not working for those controls..please help..

  13. whatever i put the size of image in the image view like that of your war image view.. my that image view is not visible in the stretched view though it is visible in the portrait view… why so??? n reply soon..i m unable to proceed further..

  14. tell me one thing Chris.. i m now not an beginner as far as i rate myself as an iOS developer and all credits to your tutorials man..keep up the work.!
    btw i’m kind off a stucked with the image view constraints part especially the war and image part…my data value for constraints are not making the auto layout mode work properly for the war image view in both portrait and stretched view you have added…so just need your assistance that what should be the ideal width and height dimensions of the 3x image which i can export using prepo app to 1x and 2x respectively??? do reply..kind of in a mess..

  15. Hey Chris, first off great videos. Really thank you. Can you please tell me how did you create the graphics ? and I hope you start teaching android app development too…

  16. What I’d like to do now is have some sort of screen where when you reach 10 you win and then have an option to rematch. How could I do that or is that too complicated? Thanks for the help.

    • Hello! Well you’re already tracking the number of wins with a variable. All you need to do is use an IF statement to determine if that number is 10 or greater, then reset all the variables for a rematch. In terms of popping a dialog box to prompt the user, it’s something that you can learn in the full beginner course or you can google to find tutorials on the UIAlertController class!

  17. Chris, again like everyone on here, great job!. so easy to follow and understand. at first this was all gibberish to me but its starting to make some sense. So I just finished Lesson 15 and have my War app up and running but I wanted to implement an additional step to see if I understood the concepts. Basically I added a UILabel under the deal button and my intention was it to say “Tie!” everytime the same card showed up. I set all the constraints, declared the IBOutlet ‘gameTie’, declared a var ‘gameTieLabel’ in the playRoundTapped method and also added the code in the if statement:

    else if firstRandomNumber == secondRandomNumber {

    var gameTieLable = String ()

    //TO DO: if cards are a tie
    gameTieLable += “Tie!”
    self.gameTie.text = String (gameTieLable)

    When I run the program, the score updates accordingly. but when two of the same cards show up the text “Tie!” shows up but doesn’t disappear when you tap the Deal button to play the next round. Help if you can. I’ve spent 2 hours trying to figure out this one problem.


    • Hey Gerald, as the first line of code in your method when deal is tapped, just set the label to empty string “”, so each time you tap it, it clears that text and then only sets it if it’s a tie.
      Good job on the bonus functionality!

      • Hey Chris, great job teaching! I am trying to understand everything ( i am from Norway). You are a really great teacher, I like how detailed you are!

        I tried following Gerald’s extension and make a “Tie” label.
        When you say “just set the label to empty string “” “, what do you mean? I don’t fully understand everything yet..


        Edit: I got it! It took me some time but i think i figured it out. It works, so thats good!
        I put this code in the first line of the Method deal is tapped:

        self.gameTie.text = String(“”)

        It is good that you did not answer my question. It really made me think and learn a lot!
        I am going to pay for the rest of the course now 🙂

  18. Hey Chris! i finished all 15 lessons and it was great, i really want to continue coding. Are there any more lessons? where can i find them?

    • Hey Eugenio! Yup there’s up to about 80 lessons and you can find them in the paid course! Either click “What’s next” on this page or go to the “Store” link at the top of my site. I’m glad you enjoyed them and thanks for watching!

  19. Hey Chris! I just finished your 15 lesson trial and I got to admit, it was pretty damn awesome to create a fully functioning app in under 3 hours. I think I will be paying for the course awesome work. Better than Udemy, Treehouse, or Lynda and I have tried them all and had less results and more stress.

    • Hey Oberon, that’s amazing that you were able to do it in just 3 hours! Congratulations!
      And those are very big compliments that I’m not sure I’m worthy of, but I very much appreciate 🙂
      Thank you for making my day!

  20. Hey Chris! With the app i am trying to make tab bar. How do I change the image for each tab? I’ve tried tapping image and eriting what I want but it will not work. And how do I make the switch work for what I want it to work for?

      • I just added a TabBarController. We have a Robotics competition tomorrow. I want the user to be able to tap the tab bar and it will move to another page.

        • Hey DTurner, I’m sorry that I didn’t get back to you before your competition.
          When you add a TabBarController to your storyboard, it’ll come with 2 view controllers attached to it. Each of those view controllers will also have a tab in them representing what image it is.
          To change the image, click on the tab on one of those two view controllers and on the right hand pane, change the image from the “image” dropdown.

Leave a Comment