GUI for the Tic Tac Toe game

[Lee High]

Hi, Looking for a little help with my next project. The overview of this project is to develop a GUI front-end  for the Tic Tac Toe game I created in earlier programs. I worked though the code and was able to compile the program. But I notice it's not looking the way it should. Your feedback would be greatly appreciated.

package tictactoeguigame;
import games.board.Board;
import games.board.Cell;
import games.board.Mark;
import games.board.Outcome;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;

public class TicTacToeGUIGame extends JFrame{
    private Board gb;
    private int turn;
    
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
       SwingUtilities.invokeLater( new Runnable () {
           @Override
           public void run() { new TicTacToeGUIGame();}
       });
    }
       private void takeTurn(Cell c) {
           Mark curMark = (turn++ % 2 == 0)?Mark.NOUGHT: Mark.CROSS;
           gb.setCell(curMark,c.getRow(),c.getColumn());
       }
    private TicTacToeGUIGame() {
           gb = new Board(3, 3, (ActionEvent ae) -> {
               Cell c = (Cell) ae.getSource();
               takeTurn(c);
           });
           this.add(gb);
           this.setDefaultCloseOperation(EXIT_ON_CLOSE);
           this.setTitle("TIC-TAC-TOE");
           this.setSize(300, 300);
           this.setVisible(true);
       }
}

cell.java

package games.board;
import java.awt.*;
import javax.swing.*;

public class Cell extends JButton {
  @Override
  public void paintComponent(Graphics g) {
      //paint the basic button first
      super.paintComponent(g);
      int offset = 5;
      Graphics2D g2 = (Graphics2D) g;
      g2.setStroke(new BasicStroke(5));
      switch(content) {
          case NOUGHT:
              g2.setColor(Color.RED);
              //Draw O
              g2.drawOval(offset, offset, this.getWidth() - offset * 2, this.getHeight() - offset * 2);
              break;
          case CROSS:
              g2.setColor(Color.BLACK);
              //Draw X
              g2.drawLine(offset, offset, this.getWidth() - offset , this.getHeight() - offset );
              g2.drawLine(this.getWidth() - offset, offset, offset, this.getHeight()- offset);
              break;
      }
  }
  private Mark content;
  private int row, column;
  
  public Cell(int row, int column) {
      this.row = row;
      this.column = column;
  content = Mark.EMPTY;
  }
  public Mark getContent() { return content; }
  public void setContent(Mark content) { this.content = content; }

  public int getRow() { return row; }
  public int getColumn() { return column; }
  }

Board.java

package games.board;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class Board extends JPanel {
  private final Cell[][] cells;
 

public Board(int rows, int columns, ActionListener ah) {
    cells = new Cell[rows][columns];
    this.setLayout(new GridLayout());
    for( int r = 0; r < cells.length; r++) {
       for(int c = 0; c < cells[r].length; c++) {
                cells[r][c] = new Cell(r,c);
                this.add(cells[r][c]);
                cells[r][c].addActionListener(ah);
            }
    }
    
}
    
public void setCell(Mark mark, int row, int column) throws IllegalArgumentException {
    if (cells[row][column].getContent() == Mark.EMPTY)
        cells[row][column].setContent(mark);
    else throw new
 IllegalArgumentException("Player already there!");
}

public Cell getCell(int row, int column) {
return cells[row][column]; }
@Override
  public String toString() {
    StringBuilder str = new StringBuilder();
    
      for (Cell[] cell : cells) {
          str.append("|");
        for (Cell cell1 : cell) {
            switch (cell1.getContent()) {
                case NOUGHT:
                    str.append("O");
                    break;
                case CROSS:
                    str.append("X");
                    break;
                case YELLOW:
                    str.append("Y");
                    break;
                case RED:
                    str.append("R");
                    break;
                case BLUE:
                    str.append("B");
                case GREEN:
                    str.append("G");
                    break;
                case MAGENTA:
                    str.append("M");
                    break;
                case ORANGE:
                    str.append("M");
                    break;
                default:  //EMPTY
                    str.append(" ");
            }
            str.append("|");
        }
          str.append("\n");
      }
    return str.toString();
}
}

Mark.java

package games.board;


public enum Mark {EMPTY, NOUGHT, CROSS, YELLOW, RED, BLUE, GREEN, MAGENTA, ORANGE }

Player.java

package games.board;

public enum Player {FIRST,SECOND} 

[Lee High]

Sorry I missed one more java file.

Outcome.java

package games.board;

public enum Outcome {PLAYER1_WINS, PLAYER2_WINS, CONTINUE, TIE, PLAYER2_WIN, PLAYER1_WIN}

[Vasyl Lyashkevych]

You need to pass parameters (3,3) here

public Board(int rows, int columns, ActionListener ah) {
    cells = new Cell[rows][columns];

->    this.setLayout(new GridLayout(3,3));
   
 for( int r = 0; r < cells.length; r++) {
       for(int c = 0; c < cells[r].length; c++) {
                cells[r][c] = new Cell(r,c);
                this.add(cells[r][c]);
                cells[r][c].addActionListener(ah);
            }
    }
     

}

[Lee High]

I totally overlooked that! Thanks, It's good to have  a second pair of eyes.

[Vasyl Lyashkevych]

Have a nice time!

[Lee High]

Hello again, Trying to wrap up this project  but keep hitting walls. I am able to display and even place X's and O's on the game board, now I am applying the logic to handle each turn and determine the outcome of the game.
I have put in the code but when I compile it, I doesn't  give me an error but I don't get any interaction through the game as well. I believe it's the for(Outcome) { statement, but I'm unsure what to replace it with?

package tictactoeguigame;
import games.board.Board;
import games.board.Cell;
import games.board.Mark;
import games.board.Outcome;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;

public class TicTacToeGUIGame extends JFrame{
    private Board gb;
    private int turn;
    String noughtOutcome = "O Wins!";
    String crossOutcome = "X Wins!";
    String tieOutcome  = "There's a tie!";
    
   
  
    public static void main(String[] args) {
       SwingUtilities.invokeLater( new Runnable () {
           @Override
           public void run() { new TicTacToeGUIGame();}
       });
    }
     private TicTacToeGUIGame() {
           gb = new Board(3, 3, (ActionEvent ae) -> {
               Cell c = (Cell) ae.getSource();
               takeTurn(c);
           });
           this.add(gb);
           this.setDefaultCloseOperation(EXIT_ON_CLOSE);
           this.setTitle("TIC-TAC-TOE");
           this.setSize(300, 300);
           this.setVisible(true);
       }
       private void takeTurn(Cell c) {
           Mark curMark = (turn++ % 2 == 0)?Mark.NOUGHT: Mark.CROSS;
           gb.setCell(curMark,c.getRow(),c.getColumn());
       }
   
     public Outcome getOutcome(){
    Outcome getOutcome = null;
        if(getOutcome == Outcome.CONTINUE) {
            Mark.curMark = (turn ++ % 2 == 0)? Mark.NOUGHT: Mark.CROSS;
        }
        for(getOutcome) {
            if(getOutcome == Outcome.PLAYER1_WIN)
        JOptionPane.showMessageDialog(this, noughtOutcome);
            else if(getOutcome == Outcome.PLAYER2_WIN)
        JOptionPane.showMessageDialog(this, crossOutcome);
            else if(getOutcome == Outcome.TIE)
        JOptionPane.showMessageDialog(this, tieOutcome);
            return null;
        }
        for(int r = 0; r < 3; r++) {
            if(gb.getCell(r,0).getContent() == Mark.NOUGHT && gb.getCell(r,1).getContent() == Mark.NOUGHT
            && gb.getCell(r,2).getContent() == Mark.NOUGHT) {
                return Outcome.PLAYER1_WIN;
            }
        if(gb.getCell (r,0).getContent() == Mark.CROSS && gb.getCell(r,1).getContent() == Mark.CROSS
        && gb.getCell(r,2).getContent() == Mark.CROSS) {
            return Outcome.PLAYER2_WIN;
        }
        }
        if(gb.getCell(0,0).getContent() == Mark.NOUGHT && gb.getCell(1,1).getContent() == Mark.NOUGHT
        && gb.getCell(2,2).getContent() == Mark.NOUGHT || 
        gb.getCell(0,2).getContent() == Mark.NOUGHT && gb.getCell(1,1).getContent() == Mark.NOUGHT
        && gb.getCell(2,0).getContent() == Mark.NOUGHT) {
            return Outcome.PLAYER1_WIN;
        }
        if(gb.getCell(0,0).getContent() == Mark.CROSS && gb.getCell(1,1).getContent() == Mark.CROSS
        && gb.getCell(2,2).getContent() == Mark.CROSS ||
        gb.getCell(0,2).getContent() == Mark.CROSS && gb.getCell(1,1).getContent() == Mark.CROSS
        && gb.getCell(2,0).getContent() == Mark.CROSS) {
            return Outcome.PLAYER2_WIN;
        }
        for(int r = 0; r < 3; ++r) {
            for(int c = 0; c < 3; ++c) {
                if(gb.getCell(r,c).getContent() == Mark.EMPTY)
                    return Outcome.CONTINUE;
            }
        }
        return Outcome.TIE;
    }
}

[Piet Souris]

Thre are some problems with this last code.

1) in class Board, line 12, use:

this.setLayout(new GridLayout(0, columns));

2) in class TicTacToeGUIGame, line 45, this doesn't compile:

Mark.curMark = ....

3) method getOutcome(): this doesn't make sense:

Outcome getOutcome = null;
if(getOutcome == Outcome.CONTINUE) {

4) in line 47, this doesn't compile:

for(getOutcome) {..

.
Can you have a look at these?

[Junilu Lacar]

@OP: The code you posted has a wide range of problems in it. I'll focus on the high-level problem.

The code/design lacks separation of concerns. The GUI logic is tightly bound to the game/domain logic, otherwise known as the "business" logic. That causes all sorts of problems, not the least of which is excessive complexity. Your statements "keep hitting walls... I don't get any interaction... it's the for(Outcome)" are symptoms of overly complex code and code that hasn't been separated across concerns. Imagine if your body had its digestive functions and respiratory functions mixed together in one organ. You'd probably have trouble figuring out if you were having indigestion or asthma.

The Outcome enum also leads you to more procedural instead of object-oriented code/design. The code in the getOutcome() method is definitely procedural code, not object-oriented.

Unless these issues are address, you will continue to hit walls. You might be able to crawl over those walls but your code will bear the marks of the pain you had to go through in finding workaround after workaround and it won't be pretty.

Explaining the things you can do to fix the design properly is going to take more than just a few bullet points though, so I'll post those separately if you're interested in knowing what they are. Be forewarned though, the fixes I will suggest involve throwing away a lot of the code you've written.

[Lee High]

Thank you for your response. You are correct, this codes complexity will only continue to cause me problems. I will take your advice and scrap it and try again. Thanks again!

[Junilu Lacar]

Before you scrap it and try again, make sure you understand the problem, why it's a problem, and what the alternative is.

Separating concerns is not easy, even for those experienced at thinking along those lines. Our brains tend to be greedy and tend to want to get as much of a task done at one go. Also, the untrained brain cannot easily recognize where the separation needs to happen. Yes, the boundary between GUI vs Domain logic seems to be pretty clear cut but the devil is in the details.

My advice is to step through the process of turning this poorly constructed design into a progressively better one. It's a process called refactoring and one you would benefit from learning early on. If you want to get good at programming, you'll have to get used to and be really good at refactoring. Nobody writes perfect code the first, second, third, even fourth time around. Nobody. Not even the best of the best. Well, not all of the time at least. We'll always make a mistake here or there. Beginners will make more mistakes than experts make, obviously. Ironically, it's the beginners who don't refactor as often enough. Most beginners don't refactor at all.

Don't throw away and start over. Refactor and replace with better. The bad is what gets thrown away.

[Lee High]

Hi again, Thanks for all your feedback it has help me get through some of the confusing times I've had with Java code. I reworked the previous code I sent and thought I had it completed. I'm not receiving any errors, but the program is still not allowing me to determine whether Nought wins, Cross wins, or there's a tie. I am reusing a code I used in earlier programs and was able to get it working there, but for some reason can't seam to get it working on this program. Can anyone help?

 package tictactoeguigame;
import games.board.Board;
import games.board.Cell;
import games.board.Mark;
import games.board.Outcome;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;

public class TicTacToeGUIGame extends JFrame{
    private Board gb;
    private int turn;
    private int gameboard;
public Mark getOutcome(){
    Outcome getOutcome = null;
    if(getOutcome == Outcome.CONTINUE){
        Mark curmark = (turn ++ % 2 == 0)?
        Mark.NOUGHT: Mark.CROSS;
    }
        Object noughtOutcome = null;
        Object crossOutcome = null;
        Object tieOutcome = null;
    if(getOutcome == Outcome.PLAYER1_WIN)
        JOptionPane.showMessageDialog(this, noughtOutcome);
    else if(getOutcome == Outcome.PLAYER2_WIN)
        JOptionPane.showMessageDialog(this, crossOutcome);
    else if(getOutcome == Outcome.TIE)
        JOptionPane.showMessageDialog(this,tieOutcome);
    return null;
}

    /**
     *
     * @return NOUGHT if 'O' wins and CROSS if 'X' wins.
     */
    public static int Outcome(){
        int NOUGHT = 0;
        int CROSS = 0;
        int turn = 0;
        int TIE = 0;
        int EMPTY = 0;
        int[][] Outcome = null;
if(Outcome[0][0] + Outcome[0][1] + Outcome[0][2] == 3*NOUGHT) {return NOUGHT;}
if(Outcome[1][0] + Outcome[1][1] + Outcome[1][2] == 3*NOUGHT) {return NOUGHT;}
if(Outcome[2][0] + Outcome[2][1] + Outcome[2][2] == 3*NOUGHT) {return NOUGHT;}

if(Outcome[0][0] + Outcome[1][0] + Outcome[2][0] == 3*NOUGHT) {return NOUGHT;}
if(Outcome[0][1] + Outcome[1][1] + Outcome[2][1] == 3*NOUGHT) {return NOUGHT;}
if(Outcome[0][2] + Outcome[1][2] + Outcome[2][2] == 3*NOUGHT) {return NOUGHT;}

if(Outcome[0][0] + Outcome[1][1] + Outcome[2][2] == 3*NOUGHT) {return NOUGHT;}
if(Outcome[0][2] + Outcome[1][1] + Outcome[2][0] == 3*NOUGHT) {return NOUGHT;}
        

if(Outcome[0][0] + Outcome[0][1] + Outcome[0][2] == 3*CROSS) {return CROSS;}
if(Outcome[1][0] + Outcome[1][1] + Outcome[1][2] == 3*CROSS) {return CROSS;}
if(Outcome[2][0] + Outcome[2][1] + Outcome[2][2] == 3*CROSS) {return CROSS;}
if(Outcome[0][0] + Outcome[1][0] + Outcome[2][0] == 3*CROSS) {return CROSS;}
if(Outcome[0][1] + Outcome[1][1] + Outcome[2][1] == 3*CROSS) {return CROSS;}
if(Outcome[0][2] + Outcome[1][2] + Outcome[2][2] == 3*CROSS) {return CROSS;}

if(Outcome[0][0] + Outcome[1][1] + Outcome[2][2] == 3*CROSS) {return CROSS;}
if(Outcome[0][2] + Outcome[1][1] + Outcome[2][0] == 3*CROSS) {return CROSS;}
        

if(turn<9){
            
    return TIE;
}else{
           
    return EMPTY;
}
}
public static void main(String[] args) {
       SwingUtilities.invokeLater( new Runnable () {
           @Override
           public void run() { new TicTacToeGUIGame();}
       });
    }
       private void takeTurn(Cell c) {
           Mark curMark = (turn++ % 2 == 0)?Mark.NOUGHT: Mark.CROSS;
           gb.setCell(curMark,c.getRow(),c.getColumn());
       }
private TicTacToeGUIGame() {
           gb = new Board(3, 3, (ActionEvent ae) -> {
               Cell c = (Cell) ae.getSource();
               takeTurn(c);
           });
           this.add(gb);
           this.setDefaultCloseOperation(EXIT_ON_CLOSE);
           this.setTitle("TIC-TAC-TOE");
           this.setSize(300, 300);
           this.setVisible(true);
       }
     
 }

I only made changes to the tictactoeguigame.java. all the only classes where untouched. Thanks again.

[Campbell Ritchie]

Sorry I am late to the party, but there is something very wrong with your GUI trying to work out the logic of the game. You said you were adding a GUI to an existing game, which is correct, so why have you get lines 44‑64 at all? Your GUI shou‍ld do things like passing on messages to the game like, “X clicked square 4”. The game will then work out whether that is a valid move, whether the game is won or lost, and update the GUI/display.
Your logic for calculating who won is far too complicated; it can be simplified no end. You can also enhance the game to use a 4×4 board or an n×n board, but your current logic would make such an enhancement very difficult.

[Lee High]

Yes! I was instructed to make my oop version of the tic tac toe game and turn it into a GUI version. The only problem I'm having is I can't get the game to play through and determine whether Nought wins or Cross wins or there is a tie?

[Junilu Lacar]

Does your OOP version work? If it does and if it was properly structured, adapting that program to work with a GUI should not break it.  Imagine replacing the monitor that you're using with your desktop computer and that resulting in your computer not working anymore. That doesn't make sense, right? Neither does it make sense when you say that you made a working OOP version TicTacToe program but broke it when added a GUI. That tells me that your OOP version probably wasn't very OOP after all. Perhaps you should share the code you have for the OOP version that worked. Then we can compare it with the OOP+GUI version of the code that doesn't work.

[Lee High]

Here is my oop version of the game.

package tictactoegame;

public class TicTacToeGame {
public static int[][]gameboard = new int [3][3];
public static final int EMPTY = 0;
public static final int NOUGHT = -1;
public static final int CROSS = 1;

public static int playerVal = 0;
public static int TIE = -2;
public static int turn;

public static void set(int val, int row, int col)
throws IllegalArgumentException {
if (gameboard[row][col] == EMPTY)
gameboard[row][col] = val;
else throw new
IllegalArgumentException("Player already there!");
}
public static void displayBoard() {
for(int r = 0; r < gameboard.length; r++) {
System.out.print("|");
for(int c = 0; c < gameboard[r].length; c++) {
switch(gameboard[r][c]) {
    case NOUGHT:
    System.out.print("O");
    break;
    case CROSS:
    System.out.print("X");
    break;
    default:    //EMPTY
    System.out.print("  ");
    }
    System.out.print("|");
    }
    System.out.print("\n----------\n");
    }
    }
static void createBoard(int rows, int cols) {
 int [][]createBoard = new int [rows][cols];
} 
public static int winOrTie(){
if(gameboard[0][0] + gameboard[0][1] + gameboard[0][2] == 3*NOUGHT) {return NOUGHT;}
if(gameboard[1][0] + gameboard[1][1] + gameboard[1][2] == 3*NOUGHT) {return NOUGHT;}
if(gameboard[2][0] + gameboard[2][1] + gameboard[2][2] == 3*NOUGHT) {return NOUGHT;}

if(gameboard[0][0] + gameboard[1][0] + gameboard[2][0] == 3*NOUGHT) {return NOUGHT;}
if(gameboard[0][1] + gameboard[1][1] + gameboard[2][1] == 3*NOUGHT) {return NOUGHT;}
if(gameboard[0][2] + gameboard[1][2] + gameboard[2][2] == 3*NOUGHT) {return NOUGHT;}

if(gameboard[0][0] + gameboard[1][1] + gameboard[2][2] == 3*NOUGHT) {return NOUGHT;}
if(gameboard[0][2] + gameboard[1][1] + gameboard[2][0] == 3*NOUGHT) {return NOUGHT;}

if(gameboard[0][0] + gameboard[0][1] + gameboard[0][2] == 3*CROSS) {return CROSS;}
if(gameboard[1][0] + gameboard[1][1] + gameboard[1][2] == 3*CROSS) {return CROSS;}
if(gameboard[2][0] + gameboard[2][1] + gameboard[2][2] == 3*CROSS) {return CROSS;}
if(gameboard[0][0] + gameboard[1][0] + gameboard[2][0] == 3*CROSS) {return CROSS;}
if(gameboard[0][1] + gameboard[1][1] + gameboard[2][1] == 3*CROSS) {return CROSS;}
if(gameboard[0][2] + gameboard[1][2] + gameboard[2][2] == 3*CROSS) {return CROSS;}

if(gameboard[0][0] + gameboard[1][1] + gameboard[2][2] == 3*CROSS) {return CROSS;}
if(gameboard[0][2] + gameboard[1][1] + gameboard[2][0] == 3*CROSS) {return CROSS;}

if(turn<9){
    return TIE;
}else{
    return EMPTY;
}
}

public static void main(String[] args) {
        createBoard (3,3);
        int turn = 0;
        int PlayerVal;
        int outcome;
        java.util.Scanner scan = new
        java.util.Scanner(System.in);
        
        do {
            displayBoard();
            playerVal = (turn % 2 == 0) ? NOUGHT : CROSS;
            if(playerVal == NOUGHT) System.out.println("\n-O's turn-");
            else System.out.println("\n-X's turn-");
            System.out.print("Enter row and column:");
            try {
                set(playerVal, scan.nextInt(), scan.nextInt());
            }catch (Exception ex)
            {System.err.println(ex); }
                turn ++;
                outcome = winOrTie();
           } while ( outcome == -2 );
           displayBoard();
           switch (outcome) {
               case NOUGHT:
                   System.out.println("O wins!");
                   break;
               case CROSS:
                   System.out.println("X wins!");
                   break;
               case 0:
                   System.out.println("Tie.");
                   break;
           }
    }
}

[Junilu Lacar]

When all your methods are static, it's not really an OOP program. It's procedural code that's cloaked in the trappings of a class. Sorry, but that's not OOP.

[Campbell Ritchie]

Another problem is that you are putting everything in the one class; you shou‍ld have a Player class, Symbol, Board, or similar.
Also, please indent your code correctly; you cannot see where methods start and finish.