Connect 4 - from console to GUI

[ellendm]

I have a fully working version of connect four for the console. Now I would like to get it into a nice gui.

I use a class BoardPanel extends JPanel, in that class I create a 2D array of JLabels and fill the panel with them.

grid= new JLabel[rows][columns];
        for (int x = 0; x < rows; x++){
            for (int y = 0; y < columns; y++){
                grid[x][y] = new JLabel(empty);      //empty is an ImageIcon
                grid[x][y].setBorder(new LineBorder(Color.BLACK));
                super.add(grid[x][y]);
            }
        }

Now I'm looking for a way to "sync" my console board (a 2D array) with my array of JLabels.

Console board:

public void setBoard () {
         for (int indexRow = 0; indexRow <rows; indexRow ++) {
             for (int indexColumn = 0; indexColumn < columns; indexColumn ++) {
                 board [indexRow] [indexColumn] = empty;       //here 'empty' is a ' '-character
             }
         }

public String show () {
         String s = "";
         for (int indexRow= 0; indexRow<rows; indexRow++) {/ / print the numbers for the first row
             s + = String.format ("% d", rows - indexRow);
             for (int indexColumn = 0; indexColumn <columns; indexColumn++) {
                 s + = String.format ("% c", board [indexRow] [indexColumn]);
             }
             s + = String.format ("\ n ");
         }
         s + = "";
         for (int index = 1; index <= columns; index + +)
             s + = "" + index + "";
         return s;
     }

[ozzyman]

So what part of the code are you having trouble with?

To sync the board with the array of JLabels is pretty straight-forward:
every time a move is made, your 2D board array stores the data of the current board, and you should have an "updateBoard()" method which translates the data to the GUI by either setting the JLabel text or icons depending on the data in the array.

[ellendm]

My biggest problem is the updatemethod, I don't really know how to do that.

[ozzyman]

okay so you have to make a GUI first, make all the buttons on the board and load them into a 2D array to match your 2D data array.

JButton[][] BoardArray = new JButton[8][8]; //allocate for 8x8 board of buttons

then every time a move is made, loop through your data array & translate the info e.g.

for (int i=0; i<BoardArray[0].length; i++) {
    for (int j=0; j<BoardArray[0].length; j++) {
        BoardArray[i][j].setText("boardData[i][j]");
    }
}

Now, i'm sure you don't want to just setText, but you get the picture...