Programming tictactoe part 1 and part 2
This assignment is meant to give you additional experience with the Gradle build system, and with the software testing tools that you were introduced to during our earlier participation assignment. For this project, you will implement a working two-player Tic-Tac-Toe game.
Fork and clone the following GitHub repository: https://github.com/jsnellen/cs310-tic-tac-toe
(NOTE: you should clone this repository from the command line, as described in “Version Control, Part 2.” Use the command git clone https://github.com/USERNAME/cs310-tic-tac-toe and replace “USERNAME” with your own user name!)
Open a Command Prompt or terminal window, and switch the working directory to the root of the Git project folder from the previous step. Run the Gradle build tool, including all unit/acceptance tests, by entering the following command at the prompt, just as you did in Participation Assignment #2:
gradle clean build jacocoTestReport runrobot
(The project is incomplete, so at this point the tests will fail. If the tests do not run at all, check to ensure that you have properly cloned the repository, and that the working directory is properly set to the root of the project folder.)
Complete the implementation, using the incomplete versions provided in the repository as a starting point. The only files that you should need to edit at this point are the Java source files:
You will find them in the following folder (relative to the root of your project folder):
Your implementation must pass all unit tests and acceptance tests! Don’t forget to regularly commit your changes to your local Git repository!
After you have completed your work, push your completed project files to your GitHub repository, and submit the URL of the repository to Blackboard, along with the hash code of the commit that represents your completed work (enter these on separate lines in the “Comment” box when you submit them).
To test your application after a successful build, enter the following command from the root of your project folder:
java -jar build\libs\cs310-tic-tac-toe-1.0.jar
(If your JAR file has a different name, use it instead.)
Your first version of this program will use the console for input and output; Part Two of this assignment will involve upgrading your implementation to use a GUI. To make this transition easier, the provided implementation is structured using the Model-View-Controller design pattern, in which the board is the Model, the terminal window is the View, and the Controller receives and processes keyboard input.
When your game is finished, the output should precisely match the following example (the players’ input is shown in bold):
Player 1 (X) Move:
Enter the row and column numbers, separated by a space: 1 1
Player 2 (O) Move:
Enter the row and column numbers, separated by a space: 0 1012
Player 1 (X) Move:
Enter the row and column numbers, separated by a space: 0 0
Player 2 (O) Move:
Enter the row and column numbers, separated by a space: 1 2
Player 1 (X) Move:
Enter the row and column numbers, separated by a space: 2 2
After you have completed Part One of this assignment (and don’t move on until you do!), you should now expand your implementation of Tic-Tac-Toe into a GUI version using the Java Swing toolkit. It is recommended that you make one last commit, with a message indicating that this commit represents your completed work on Part One, before proceeding. After that, create a new branch, as seen in Participation Project #1 and as described in the lecture notes, before beginning your work on Part Two. Note that you are not creating a new repository for Part Two; instead, your work on Part Two will be done within the same project and repository, but within a new branch!
Begin your work on Part Two by making the following changes to your project files:
Delete the TicTacToeViewTest.java unit test (we will be using the Robot Framework to test the View; see below).
Add the attached TicTacToeGUITests.robot acceptance test file (copy it into the same folder as the original TicTacToeTests.robot file). At the highest level, these tests are identical to those in Part One, but are designed to interact with the GUI.
Replace the build.gradle build script with the attached version, which adds the Swing library and bumps the version number to 2.0.
If you used the Model-View-Controller pattern as recommended in Part One, you should need to make no changes to your Model. To implement the GUI, your new View should extend the JPanel class and implement the ActionListener interface. For the sake of simplicity, you may find it convenient to combine the functions of the View and Controller into a new, unified View class, removing the Controller as a separate class in the process; in effect, the actionPerformed() method of the View (which handles the button clicks and other GUI interactions) will act as the new controller. The new View class should extend the JPanel class and implement the ActionListener interface.
(EDIT: The attached “TicTacToeView.java” is a partial View implementation that you can use as a starting point.)
Here is an example of how your GUI should look:
In your JPanel, the squares of the board should be implemented as a two-dimensional array of JButton objects with a preferred size of 64 x 64 pixels, and whose names are set to “SquareXY” (replacing X with the row and Y with the column):
squares = new JButton[width][width];
// loop through every row and col
squares[row][col] = new JButton();
squares[row][col].setName(“Square” + row + col);
// finish initializing JButton; add to JPanel
In addition, to display the winning player at the end of the game, you should add a JLabel called “ResultLabel” to the bottom of the window:
resultLabel = new JLabel();
(The reason these names are so important is that, during the acceptance tests, the Robot Framework will open the window, register “clicks” with the button elements, and check the results shown in the labels directly. In order to do this, it must be able to refer to these elements by name; see Lines 7, 10, 14, 19, and 21 of TicTacToeGUITests.robot.)
To get the correct button layout, I suggest creating a separate JPanel as a “container” for the buttons, using the GridLayout layout manager. Create the new JPanel in the constructor for your TicTacToeView …
JPanel squaresPanel = new JPanel(new GridLayout(width,width));
… and add the buttons to this JPanel as you create them, instead of adding them directly to the TicTacToeView. Finally, add the panel to the TicTacToeView (which is itself a JPanel):
When the players click on the buttons, the button text should be set to the players’ marks, “X” or “O”; after a winner is determined, the buttons should be disabled so that no further moves can be entered. Display output messages (such as the result at the end of the game) in ResultLabel: this result should be shown in the label as the Result enumeration value, all by itself, converted to uppercase. In your main class, when you create a new JFrame to display your JPanel, its name should be set to “Tic-Tac-Toe”:
TicTacToeView view = new TicTacToeView(model);
JFrame win = new JFrame(“Tic-Tac-Toe”);