CSCI142: Computer Science 2
Lab 8 - Connect Four GUI


You will be re-implementing the client side for the game of Connect Four as a graphical user interface (GUI). You will reuse the server design we used in the previous laboratory assignment, so the protocol and game rules are unchanged.

Program Design

The design utilizes the Model-View-Controller pattern, on top of a network interface.

ConnectFourBoard plays the role of the model. It is an observable subject, notifying any observer of any change in its state. Enough public methods are included to help observers find out what that state is.

ConnectFourGUI (or the provided ConnectFourPTUI) plays the role of both the view and controller, taking input from, and sending output to, the user. The class also observes the model in order to keep its visual display up to date. But in addition, this class can tell from the board's state when it is time for its user to choose a move. After that particular update call, the part of the GUI that receives user input is briefly enabled, and the resulting choice is directly communicated to the network client for transmission to the server.

NetworkClient is the class responsible for network communication. It opens the connection to the server, gets the game parameters, and instructs the ConnectFourBoard object to finish its initialization accordingly. Note that this class spawns a thread that listens for incoming server messages (see the Design section for more information).

Input and Output Requirements


As before the provided server requires the port on the command line.

    java connectfour.server.ConnectFourServer port


The GUI client is run on the command line with the hostname and port of the server to connect. A more modern options format is used here.
    java connectfour.gui.ConnectFourGUI host port

Class Diagram

A class diagram including the public state/methods is being provided to you here. Note this does not include any private state or methods that you may need to write on your own.


Javadocs for the provided source code is provided to you here:


Your job is basically to fill in the code in to effect a complete graphical version of the game. You have considerable leeway in the UI design. However, for basic operation, if you want to do something other than click on squares to choose moves, check with your instructor first.

You should not edit any class files besides, but you are free to add other source code to the connectfour.gui package.


Only 10% of your grade is based on the design this time, since it is largely given to you. Nevertheless, here are some rules you should follow to get the design points.

The provided plain-text user interface (PTUI) inherits a home-grown class that was designed to be used similarly to how Application is used within a JavaFX program. But be careful; there are differences.

Other Suggestions

You have complete freedom in how you implement your GUI, as long as it functions correctly. You do not need to create a grid of buttons like the instructor solution unless you want to. A row of buttons at the top for dropping the pieces is sufficient, and you can use the remainder as a grid to draw the pieces into. Just make sure that when it is not this players turn to move that the buttons remain inactive.

There are many examples posted in the week's lecture area on the web site. If you look at them you may get insights as to how to implement things.

Use the discussion topic in MyCourses! Remember that it's OK to post a few lines of code, either to get help, or to provide help to others.


The grade breakdown for this lab is as follows:


You should zip up your src directory into a file named and submit it to the dropbox on MyCourses by the due date. Do not use absolute file path names in your code! They do not port. Instead, look at using the Image class and the getResourceAsStream method in class Class.