Teach Java Workshop
A GUI for Tic-Tac-Toe

• The basic elements of writing a gui, including use of listener(s).
• Taking an existing program, understanding it, and modifying only what you need.

Text Only Program

Here is an overview of the text-only tic-tac-toe game we are providing for this homework.

The program includes an application that plays a game of tic-tac-toe against a human opponent. The program includes a class {\tt TTTGame} that supports the following interface:

interface TTTGameI {
  void move(int i, int j);
  //  place next player's symbol in square[i,j] and update game state

  void move(int k);
  //  same as above where k = i*N + j

  int winner();
  // determine is if either player has won the game; returns BLANK, X,  or O

  int bestMove();
  // determines best move available for next player

  boolean gameOver()
  // returns true if game is over
}

When you construct an instance of this class, it sets up a game with an empty board. The program follows a very polite protocol. It permits the opponent to go first but does not insist on it. It never moves on its own. It has methods that determine the best move for the next player and whether the current board has a winner. If the client of a TTTGame tries to make a move after a game is over or to make an illegal move, the TTTGame throws an exception.

The text-only program is located in the file http://www.cs.rice.edu/~cork/teachjava/code/TTTControl.java. It is written in as close a style as possible to the Model-View-Controller design pattern without introducing a separate event processing thread. There is also a more conventional version of the program in the file http://www.cs.rice.edu/~cork/teachjava/code/TTTBoard.java. The program is driven by a simulated event loop that treats type commands as events. This loop interacts with the rest of the program only by executing a listener that was passed to it by the TTTView who received it from the TTTControl.

What you must do is rewrite the classes TTTView class and the TTTControl class to use a graphical frame with a 3x3 grid of buttons and a display to indicate the status of the game (who has won at the end). You can additional buttons such as reset button to play another game or a button to select whom will go first. We recommend that you let the human player go first as the default.

For the array of buttons, you will probably want to use the GridLayoutManager which you can read about in Java in a Nutshell or the online documentation.

We suggest designing your TTTView class first. It is similar to the click counter example from yesterday in that the only components of the view are buttons (presumably stored in an array) and a Label field for displaying messages. You can write and test the {\tt TTTView} class before writing the controller. The controller should create an instance of TTTGame, install the appropriate listeners and then terminate. If you want to include a button to play another game, this operation can be handled by the listener attached to this button! When the human player presses an enabled button on the tic-tac-toe board, the listener for the button, which was unlabeled, places the appropriate label, either X or O, on the button, and disables it. The listener then passes the move to the TTTGame, which updates its internal state of the board. The listener then asks the TTTGame if the game is over and if what the outcome was. It displays this outcome as a message of the form X wins, O wins, or draw. If the game is not over, the listener asks TTTGame to pick a move and updates the message label.

If the game is not over, the listener invokes the necessary method to get the computer's next move and updates the GUI to reflect this move.

Note: you should use the available methods in the Board class to determine if the game is over, and if so, who won. Do not maintain a copy of the board state in your GUI code. The GUI needs nothing more than the 3x3 grid of buttons to record its understanding of the state of the board.