Lab assignment: Tic Tac Toe.

The topic of the lab today is arrays in java, how to create them and work with them. You need to implement a simplified version of Tic Tac Toe, using the Canvas, Board, Square and PlayGame classes provided in the links below:

Board.java
PlayGame.java
Canvas.java
Square.java

You need to add code to the classes Board.java, write your names and UIN in the class PlayGame.java and modify, if you want to (see suggestion in Stage 2), the class Square.java, to implement the tasks listed in the three stages below.

Stage 1:
Change the Board class to declare a 1-dimensional array of length 9, for storing 9 Squares, and then in the constructor instantiate (that is create objects) 9 squares so that it displays as a 3x3 group of squares, all gray, on the Canvas. Notice that the color must be specified as "gray", not "grey", for the code to work. The figure should look similar to the one below:

In the picture above the size of each square is 70 pixels, and the distance between two adjacent squares is 2 pixels. You can use other sizes if you prefer. Notice that if you position the squares right next to each other, it will be difficult to understand where one square ends and the other starts. You should write a loop for instantiating the 9 squares and storing them inside the array. Programs that do not use the array and do not use loops will be penalized.

Stage 2:
Clicking on a square must toggle its color between grey ("gray") and red.  This should be in the Board class, in the method handleMouseClick(int x, int y).  For this you need to compare the x and y of the point clicked by the mouse to each of the 9 squares in turn. 
Hint: A nice and clean way to do this is the following: Each of the 9 Square objects stores inside itself the x and y coordinates of its upper-left corner and its size. You can add a method named, say didYouJustClickOnMe(int x, int y), in the Square class. The method receives the x and y coordinates of a point and figures out if the point with coordinates x and y is inside the particular Square for which it is being called. It can return true, if the point is inside the square, false otherwise. In the method handleMouseClick(int x, int y) you can loop through the array of 9 Square objects and invoke the method didYouJustClickOnMe(int x, int y), for each object. After you figure out which Square was clicked upon, you need to toggle its color. If it is "gray" make it red, if it is red, make it "gray". Other types of solutions will be accepted too. The execution should look similar to the figure below, in which I clicked once on each of the squares on the diagonal, making them red, and twice on the middle square in the upper row, changing its color to red on the first click, and then back to "gray" on the second click.

Stage 3 (Advanced):
Display a message if at any point there are three red squares in a row, in a column or in diagonal, as in the Tic Tac Toe game.  If so, a message should be given in output with System.out.println(), and the board should get reset to all gray squares.
Hint: Break this problem into smaller ones. You can create three methods, named for instance checkColorOnTheRows(), checkColorOnTheColumns(), checkColorOnTheDiagonals(), each one dealing with a smaller portion of the problem. Remember the 9 squares are stored in a 1-D array of length 9. Don't forget to reset the color of the squares to gray.

Solution:

PlayGame.java
Board.java
Canvas.java
Square.java