Series: Building a Wordle Clone in SwiftUI

Building a Wordle Clone in SwiftUI

Wordle is a simple yet popular word guessing game. In this series we'll build a clone of this game using SwiftUI. We'll learn how to process and validate text entry, how to organize data flow in a SwiftUI project, and how to build components from the inside out.

Length: about 2 hours


1. Wurdle Part 1 - Letter Grid and Text Input

Subscribers only

In this episode we'll design a letter grid and build up text input using a hidden textfield, displaying the typed letters in our own UI.

2. Typed Letter Animation

Subscribers only

Let's make the letters bounce a little as they are being typed. To do this we'll have to see how animated state changes are performed and how we can restructure our view hierarchy to achieve the results we're after.

3. Wurdle Part 3 - Handling guesses and the enter key

Subscribers only

In this episode we will handle the enter key and migrate our state to contain an array of guesses. We will then refactor to an observable object to better encapsulate state changes and to enable testability.

4. Wurdle Part 4 - Enriching the model

Subscribers only

This time we'll focus on moving on from a simple string to a data structure that can capture the status of each guessed letter.

5. Wurdle Part 5 - Coloring the Letters

Subscribers only

Now that we have some information associated with each of our typed characters, we can use that to color each letter according to its status.

6. Wurdle Part 6 - Letter Flip

Subscribers only

In this episode we create a custom transition using a GeometryEffect to add a nice flip animation for the letters as they are revealed.

7. Wurdle Part 7 - Final Touches

Subscribers only

We now have all the pieces in place to make this game playable. We'll choose a random word, and then move on to detecting won/lost games and provide the ability to restart and keep playing.