Need help inserting buttons into Tic Tac Toe game - javafx

Question

I have a tic tac toe game that is made for us but I have to insert a button or two so the user can select if they want to be an X or and O. Can you guys help me modify this code please? I am unsure of how to do this because every time I try to add something it doesn't compile. Your help is much appreciated.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.Ellipse;
public class TicTacToe extends Application {
private char whoseTurn = 'X';
private Cell[][] cell = new Cell[3][3];
private Label lblStatus = new Label("X's turn to play");
#Override
public void start(Stage primaryStage) {
GridPane pane = new GridPane();
for (int i = 0; i < 3; i++)
for (int j = 0; j < 3; j++)
pane.add(cell[i][j] = new Cell(), j, i);
BorderPane borderPane = new BorderPane();
borderPane.setCenter(pane);
borderPane.setBottom(lblStatus);
Scene scene = new Scene(borderPane, 550, 470);
primaryStage.setTitle("Wild TicTacToe");
primaryStage.setScene(scene);
primaryStage.show();
primaryStage.setResizable(false);
}
/** Determine if the cell are all occupied */
public boolean isFull() {
for (int i = 0; i < 3; i++)
for (int j = 0; j < 3; j++)
if (cell[i][j].getToken() == ' ')
return false;
return true;
}
/** Determine if the player with the specified token wins */
public boolean isWon(char token) {
for (int i = 0; i < 3; i++)
if (cell[i][0].getToken() == token
&& cell[i][1].getToken() == token
&& cell[i][2].getToken() == token) {
return true;
}
for (int j = 0; j < 3; j++)
if (cell[0][j].getToken() == token
&& cell[1][j].getToken() == token
&& cell[2][j].getToken() == token) {
return true;
}
if (cell[0][0].getToken() == token
&& cell[1][1].getToken() == token
&& cell[2][2].getToken() == token) {
return true;
}
if (cell[0][2].getToken() == token
&& cell[1][1].getToken() == token
&& cell[2][0].getToken() == token) {
return true;
}
return false;
}
public class Cell extends Pane {
private char token = ' ';
public Cell() {
setStyle("-fx-border-color: black");
this.setPrefSize(2000, 2000);
this.setOnMouseClicked(e -> handleMouseClick());
}
/** Return token */
public char getToken() {
return token;
}
/** Set a new token */
public void setToken(char c) {
token = c;
if (token == 'X') {
Line line1 = new Line(10, 10,
this.getWidth() - 10, this.getHeight() - 10);
line1.endXProperty().bind(this.widthProperty().subtract(10));
line1.endYProperty().bind(this.heightProperty().subtract(10));
Line line2 = new Line(10, this.getHeight() - 10,
this.getWidth() - 10, 10);
line2.startYProperty().bind(
this.heightProperty().subtract(10));
line2.endXProperty().bind(this.widthProperty().subtract(10));
// Add the lines to the pane
this.getChildren().addAll(line1, line2);
}
else if (token == 'O') {
Ellipse ellipse = new Ellipse(this.getWidth() / 2,
this.getHeight() / 2, this.getWidth() / 2 - 10,
this.getHeight() / 2 - 10);
ellipse.centerXProperty().bind(
this.widthProperty().divide(2));
ellipse.centerYProperty().bind(
this.heightProperty().divide(2));
ellipse.radiusXProperty().bind(
this.widthProperty().divide(2).subtract(10));
ellipse.radiusYProperty().bind(
this.heightProperty().divide(2).subtract(10));
ellipse.setStroke(Color.BLACK);
ellipse.setFill(Color.WHITE);
getChildren().add(ellipse); // Add the ellipse to the pane
}
}
/* Handle a mouse click event */
private void handleMouseClick() {
// If cell is empty and game is not over
if (token == ' ' && whoseTurn != ' ') {
setToken(whoseTurn); // Set token in the cell
// Check game status
if (isWon(whoseTurn)) {
lblStatus.setText(whoseTurn + " won! The game is over.");
whoseTurn = ' '; // Game is over
}
else if (isFull()) {
lblStatus.setText("Draw! The game is over.");
whoseTurn = ' '; // Game is over
}
else {
// Change the turn
whoseTurn = (whoseTurn == 'X') ? 'O' : 'X';
// Display whose turn
lblStatus.setText(whoseTurn + "'s turn.");
}
}
}
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}

Answer 1

Can't really see why adding a button would be a problem when you've already created this program using fairly advanced JavaFX code.
Just see the Button documentation on how to create a Button. Then add your button(s) to e.g. a HBox that you then add to your BorderPane:
Button xButton = new Button("X");
Button obutton = new Button("O");
HBox buttonBar = new HBox();
buttonBar.getChildren().addAll(xButton, oButton);
borderPane.setTop(buttonBar);
With that said. In your scenario, maybe a ToggleButton would be a better option. It allows the button to be selected, which would help in providing some visual feedback that O or X has been chosen properly.