Project 1 - Hangman
Github Classroom Link
Project Overview
In this project, you will be implementing Hangman. Clone the repository link provided to you by Github Classroom and open the file Hangman.xcodeproj.
First, open the folder called Assets.xcassets. This folder houses all of the image assets for an iOS project. You should see 7 images, depicting the various stages of a hangman game. We will use these images to communicate the game state to our user.
Next, take a look at the file called ViewControllerModel.swift. This file will contain all of our game logic and communicate any changes to our ViewController. HangmanTests.swift contains all of the testing code for this file.
Finally, you will set up the user interface in ViewController.swift. Please hold off on building out the user interface until you pass all of the tests for ViewControllerModel.
Protocols and the Delegation Pattern
This project’s architecture will use the delegation pattern we went over last lecture. In ViewControllerModel.swift, we have a protocol called VCModelDelegate. Our model class ViewControllerModel also has a property called delegate of type VCModelDelegate.
This pattern allows our model class to call the protocol methods of the delegate when neccessary, keeping the UI logic fully separate from the model logic. Whenever we make a change to the model, we can simply call delegate?.updateView(), prompting our ViewController to update the UI to reflect the changes. Similarly, when the ViewController receives user input, we can simply pass it off to the model for processing by calling model.makeGuess(), with the confidence that the model will ask us to update the view if changes are made.
UIImageView and UIImage
This project will also provide a brief introduction to UIImageView and UIImage. These two UI elements in combination allow us to use the images in Assets.xcassets to build our user interface. A UIImage is merely a data representation of an image; it cannot be added to a user interface alone. To create a UIImage object from an asset in the Assets.xcassets folder, we can use the following initializer
UIImage(named: "hangman0") ?? UIImage()
Keep in mind that the UIImage generated by the initializer is optional, so you can unwrap it by providing an empty UIImage() as a default value.
To add the UIImage to the user interface, we have to wrap it in a UIImageView. A UIImageView behaves exactly like a normal view and takes a UIImage as an argument in its initializer
let image = UIImage(named: "hangman0") ?? UIImage()
let imageView = UIImageView(image: image)
We can change the image displayed by the UIImageView on the fly by simply modifying the image property.
ViewControllerModel
Fill out each function inside of ViewControllerModel. Run the tests in HangmanTests.swift to verify your solutions.
Do not modify the possibleWords array until you pass all the tests. After the tests pass, add the words you’d like.
ViewController
To build out the UI, use the provided hangmanImageView, a UITextField for user input, a UIButton to make a guess, a UILabel to display the dashed String, and a UIStackView to tie together the TextField, Button, and Label.
Outside of these components, feel free to customize the UI in any way. We will award an extra point to any particularly impressive designs!
Submission
This project is due in two weeks, on October 21 at 11:59 pm. If you would like to request one-on-one help, please make a private Piazza post and we’ll set up some time to look at your code. As always, if you need an extension, please communicate that to us and we’d be happy to grant it.
Project 1 - Hangman
Github Classroom Link
Project Overview
In this project, you will be implementing Hangman. Clone the repository link provided to you by Github Classroom and open the file
Hangman.xcodeproj.First, open the folder called
Assets.xcassets. This folder houses all of the image assets for an iOS project. You should see 7 images, depicting the various stages of a hangman game. We will use these images to communicate the game state to our user.Next, take a look at the file called
ViewControllerModel.swift. This file will contain all of our game logic and communicate any changes to ourViewController.HangmanTests.swiftcontains all of the testing code for this file.Finally, you will set up the user interface in
ViewController.swift. Please hold off on building out the user interface until you pass all of the tests forViewControllerModel.Protocols and the Delegation Pattern
This project’s architecture will use the delegation pattern we went over last lecture. In
ViewControllerModel.swift, we have a protocol calledVCModelDelegate. Our model classViewControllerModelalso has a property calleddelegateof typeVCModelDelegate.This pattern allows our model class to call the protocol methods of the delegate when neccessary, keeping the UI logic fully separate from the model logic. Whenever we make a change to the model, we can simply call
delegate?.updateView(), prompting ourViewControllerto update the UI to reflect the changes. Similarly, when theViewControllerreceives user input, we can simply pass it off to the model for processing by callingmodel.makeGuess(), with the confidence that the model will ask us to update the view if changes are made.UIImageView and UIImage
This project will also provide a brief introduction to
UIImageViewandUIImage. These two UI elements in combination allow us to use the images inAssets.xcassetsto build our user interface. AUIImageis merely a data representation of an image; it cannot be added to a user interface alone. To create aUIImageobject from an asset in theAssets.xcassetsfolder, we can use the following initializerKeep in mind that the
UIImagegenerated by the initializer is optional, so you can unwrap it by providing an emptyUIImage()as a default value.To add the
UIImageto the user interface, we have to wrap it in aUIImageView. AUIImageViewbehaves exactly like a normal view and takes aUIImageas an argument in its initializerWe can change the image displayed by the
UIImageViewon the fly by simply modifying theimageproperty.ViewControllerModel
Fill out each function inside of
ViewControllerModel. Run the tests inHangmanTests.swiftto verify your solutions.Do not modify the
possibleWordsarray until you pass all the tests. After the tests pass, add the words you’d like.ViewController
To build out the UI, use the provided
hangmanImageView, aUITextFieldfor user input, aUIButtonto make a guess, aUILabelto display the dashed String, and aUIStackViewto tie together the TextField, Button, and Label.Outside of these components, feel free to customize the UI in any way. We will award an extra point to any particularly impressive designs!
Submission
This project is due in two weeks, on October 21 at 11:59 pm. If you would like to request one-on-one help, please make a private Piazza post and we’ll set up some time to look at your code. As always, if you need an extension, please communicate that to us and we’d be happy to grant it.