Creating a playing piece for Reversi GUI using Java Swing

Question

ive created a basic GUI for Reversi using JPanels to represent the board in a GridLayout. At the moment when a piece is played the square that is clicked changes colour. Ive been trying to get a circular piece instead to change and the background to stay the same.

Ive searched around quite a bit and I can't seem to find a way to do this?

--Edit--

The code for the constructor. When a piece is played a Mouse listener just updates the board

Public boardGUI(int num){

    game = new reversiGame(num, false);
    Dimension boardSize = new Dimension(600, 600);

    numSquares = num; 

    layeredPane = new JLayeredPane();
    getContentPane().add(layeredPane);
    layeredPane.setPreferredSize(boardSize);
    layeredPane.addMouseListener(this);

    board = new JPanel();
    layeredPane.add(board, JLayeredPane.DEFAULT_LAYER);

    board.setLayout( new GridLayout(numSquares, numSquares) );
    board.setPreferredSize( boardSize );
    board.setBounds(0, 0, boardSize.width, boardSize.height);

    for (int i = 0; i < (numSquares * numSquares); i++) {
        JPanel square = new JPanel( new BorderLayout() );
        square.setBorder(BorderFactory.createLineBorder(Color.black));
        square.setBackground(Color.green);
        board.add( square );

        int row = (i/numSquares);
        int col = (i % numSquares);

        if ((row + 1 == numSquares / 2 & col + 1 == numSquares/2) || row == numSquares/2 & col == numSquares/2){
            square.setBackground(Color.white);
        }

        if ((row + 1 == numSquares / 2 & col == numSquares/2) || row == numSquares/2 & col + 1 == numSquares/2){
            square.setBackground(Color.black);
        }
     }  
}

The updateBaord function

public void updateBoard(){
    int x = 0;
    int y = 0;

    ImageIcon black = new ImageIcon("Images/large-black-sphere.ico");
    ImageIcon white = new ImageIcon("Images/large-white-sphere.ico");
    for(int i = 0; i < numSquares; i++){
        for(int j = 0; j < numSquares; j++){

            x = i * (600/numSquares);
            y = j * (600/numSquares);
            Component c =  board.findComponentAt(x, y);
            GridType g = game.getGridType(i, j);

            if (g.equals(GridType.WHITE)){
                JPanel temp = (JPanel) board.getComponent( i + j );
                piece = new JLabel(white);
                temp.add(piece);
                //c.setBackground(Color.white);
            }
            else if(g.equals(GridType.BLACK)){
                JPanel temp = (JPanel)board.getComponent( i + j );
                piece = new JLabel(black);
                temp.add(piece);
                //c.setBackground(Color.black);
            }
            else{
                //c.setBackground(Color.GREEN);
            }



        }
    }

}

Answer 1

Add JLabel to each grid on the game board. Then you can use Icons to represent the reversi pieces. Then when you want to change the reversi pieces you change the Icon of the label.

The ChessBoard example here: How do I make my custom Swing component visible? shows how this might be done.

Answer 2

… using an ImageIcon, though when I run it, it doesn't show up.

You may need to invoke repaint(); ColorIcon in MVCGame is an example.

Looking closer, your updateBoard() method appears to be adding a new label to an existing panel without either removing the old label or validating the panel's layout. Instead, update the Icon in place.