Step $1$

Create a class called TicTacToe. Place it in a file called TicTacToe.java

Have your class extend from JFrame

Have your class implement ActionListener and MouseListener.

Create all of the methods needed for the ActionListener and MouseListener interfaces.

Make sure to import javax.swing.$*,$ java.awt.$*$ and java.awt.event.$*$

Step $2$

Before defining your attributes you need to create a container called content and initialize it by sending the getContentPane$()$ message to this.

Define your application's attributes. The TicTacToe program has three different kinds of fields that you must define before you can compile the program successfully. Make sure you define your fields and check for errors before you attempt to go further.

Program Arrays

The TicTacToe program has two "parallel", $3$ x $3,$ two dimensional arrays. Start your programming by defining these two arrays:

The first of these is an array of JLabel objects. This array, named grid, is used to display the actual Xs and Os on your screen. Each JLabel will display an X$,$ and O$,$ or a blank.

The second array is an array of char primitives. This array, named game, is used to simplify keeping score as the game is played. Each element in game contains a space $\text{'}\text{'}$ if the position has yet to be played, an $\text{'}$X$\text{'},$ if the position contains an X$,$ and an $\text{'}$O$\text{'}$ if the position contains an O$.$

Graphical User$-$Interface Fields

In addition to the JLabels that make up the array named grid, the TicTacToe application contains the following user$-$interface elements. Define these elements after you've finished defining your arrays:

A JButton object named restart. The user can restart the game by clicking this Button.

A JPanel named p$.$ Use the default constructor to create p; it will hold the JLabels in grid

A JLabel named status. This will keep the user informed of the game's progress. You might want to initialize status to a helpful welcome message.

Primitive Fields

Your program will contain the following primitive fields which you'll use as you play the game:

An int named numClicks that will keep track of how many X$\text{'}$s and O$\text{'}$s are displayed.

A boolean named isDone which is used to determine when the game is finished. Initialize isDone to false.

A boolean named isXTurn which is used to determine whose turn it is to click. Initialize isXTurn to true$--$we'll assume that X always goes first.

Once you've defined these fields, make sure your program contains no errors. If it does, then you've made a mistake defining the fields; go back and double$-$check your work until the errors have disappeared.

Step $3$

Write the constructor. There are four tasks to complete in this step. After you've finished writing the constructor, check one last time for errors before going on$.$ When you finish this step, you should be able to run your application and see that its appearance is satisfactory.

Set The Layout

Your application will use BorderLayout for the application itself, even though the JPanel that contains the game's labels will use a GridLayout. Since the BorderLayout is the default layout for swing you will not have to set the layout on the content pane.

Add The Status Label

Add the JLabel named status to the top of your application. When you do so$,$ also change the JLabel's appearance like this:

Swing components by default are transparent so they take on the background color of the container they are added to$.$ Because of this, you must send your status JLabel the setOpaque message passing a parameter of true

Set the JLabel background to yellow, the foreground to blue

Set the JLabel font to a nice $12$pt bold Helvetica

Initialize The Main Panel

You want to display the JLabel objects in the grid array using a $3$ x $3$ grid on the screen. Fortunately, Java's GridLayout is just what you need. Before you add the JLabel objects to your JPanel, however, there are a few things you need to do to prepare your main JPanel.

Use the setLayout$()$ method to change the JPanel object p so that it uses a GridLayout. Leave three pixels between cells in the grid.

Change the JPanel's background color to black. $($This adds the lines between JLabels.$)$

Add the JPanel to the center of the content pane.

Initialize The Grid

In Step $1,$ you created a $3$ x $3$ array of JLabel references named grid. Each of the elements in grid, however, is not yet a JLabel; instead grid is populated with $9$ null JLabel references. To fix that, you need to use a pair of nested for loops to create $9$ JLabel objects and place them into your array.

Here's what you do$.$ Write a pair of nested for loops. Use row for the outer loop index and have it go from $0$ to $2.$ Use col for the inner loop index and have it go from $0$ to $2.$ Inside the inner loop, do the following:

Create a JLabel object using new, and place it in the corresponding element in the array. $($grid$[$row$][$col$]).$

Attach a MouseListener to the JLabel object using addMouseListener$($this$).$ Note that this is different than using MouseMotionListener