ApplePie-SwiftUI

This is a version of the ApplePie project that appears in the Develop in Swift Fundamentals curriculum (https://apple.co/developinswiftfundamentals), but re-done in SwiftUI.

The intention is to show you how you might translate a familiar UI to SwiftUI and what it means for your code. You will be able to compare and constrast this project against your own ApplePie project from Develop in Swift Explorations.

For this project, you will need:

• A Mac (running Catalina, macOS 10.15, at least)
• Xcode (version 12 is better)

The Setup

In ApplePie, in Fundamentals, your focus is on building the layout for a fun word guessing game. The game logic has been implemented for SwiftUI in the Model folder in the ApplePieGame.swift and ApplePieGameViewModel.swift files.

In the ContentView there is a @StateObject instance of the model that you can use to drive your user experience.

    @StateObject private var game = ApplePieGameViewModel()

Our UI should look like this:

This is the user interface we're going to replicate in SwiftUI. In the Asset catalog for the app we already have the different states that the tree will be in, as wrong guesses are made.

Steps

UI Layout

Add a few Views in ContentView.swift to match the layout on the image above.

Hint: You'll need a combiniation of stacks, Buttons, and Image. You can make use of view modifiers to better match the screenshot above or can focus on the bare minimum to achieve the functionality of allowing a person to type in a question and receive an answer.

Reactive Interface

Using the game property, hook up the underscores to fill in when the correct letters are guessed, disable letter buttons that have been selected.

Hint: Can you translate the steps from the Apple Pie project at the end of Unit 2 in Develop in Swift Fundamentals from UIKit to SwiftUI?

Re-usable Views

Can you reduce some of the complexity of the code by making a re-usable TreeImageView to update on wrong guesses to show the correct tree image from the Asset catalog? What else might you make a re-usable view to reduce the amount of repetitive code you have?

Next Steps

Make sure to test your app.

• Do letter buttons get disabled when they are selected?
• Does the tree image update appropriately when wrong letters are guessed?
• Do blanks get replaced with correct letter guesses?
• Do wins and losses get updated and the UI refreshed when the game is finished?

Can you spot other issues you might want to address?