Create the Front End

00:00 Build a Game Front End for the Console. So far, you’ve been working on an abstract tic-tac-toe game engine library, which provides the building blocks for the game.

00:11 In this section, you’ll bring it to life by coding a separate project that relies on this library. It’s going to be a bare-bones game running in the text-based console.

00:22 The most important aspect of any game front end is providing visual feedback to the players through a graphical interface. Because you are constrained to the text-based console in this example, you’ll take advantage of ANSI escape codes to control things such as text formatting and placement.

00:40 Create the renderers module in your console front end, and then define a concrete class that extends the tic-tac-toe’s abstract Renderer in it.

01:10 If you’re using Visual Studio Code and it doesn’t resolve the imports, try quitting and reopening the editor. As you can see on-screen, this worked for me, allowing the imports to be resolved correctly.

01:23 The ConsoleRenderer class overrides the only abstract method responsible for visualizing the game’s current state. In this case, you start by clearing the screen’s content using a helper function, which you can define below the class.

01:42 The string literal seen on-screen represents a non-printable escape character, which starts a special code sequence. The letter c that follows encodes the command to clear the screen.

01:55 Note that the print() function automatically ends the text with a newline character. To avoid adding an unnecessary blank line, you can disable this by setting the end argument. When there’s a winner, you’ll want to distinguish their winning marks with blinking text.

02:11 You can define another helper function to encode blinking text using the relevant ANSI escape code.

02:22 Here you wrap the supplied text with opening and closing ANSI escape codes using an f-string. To render the tic-tac-toe grid filled with player’s marks, you’ll format a multiline template string and use the textwrap module to remove the indentation.

02:58 The print_solid() function takes a sequence of cells and prints them with an additional gutter around the top left corner. It contains numbered rows and columns indexed by letters.

03:16 The gutter will make it easier for the player to specify the coordinates of the target cell where they want to put their mark

03:27 While this basic display would work okay, improving this would be desirable. In the next section of the course, you’ll take a look at how to make a couple of improvements to make the game more visually appealing when a winner is declared.