Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game

JavaScript
1

Tell us what’s happening:

I seem to be stuck and I’ve tried looking and changing but I can’t seem to know the problem and how to fix #10. The game should display a message indicating the winner to be X or O.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Tic-Tac-Toe</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Board } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<Board />);
    </script>
</body>

</html>

/* file: styles.css */


/* file: index.jsx */
const { useState } = React;

export function Board() {
  const Player = { PlayerX: "X", PlayerO: "O" };

  const [playerTurn, setPlayerTurn] = useState(Player.PlayerX);
  const [buttonsText, setButtonsText] = useState(Array(9).fill(""));
  const [showModal, setShowModal] = useState(false);
  const [modalMessage, setModalMessage] = useState("");

  const winningPositions = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6]
  ];

  const pressButton = (index) => {
    if (buttonsText[index] !== "" || showModal) return;

    const currentPlayer = playerTurn;
    const updated = [...buttonsText];
    updated[index] = currentPlayer;
    setButtonsText(updated);
    setPlayerTurn(currentPlayer === Player.PlayerX ? Player.PlayerO : Player.PlayerX);

    const hasWinner = checkWinner(updated, currentPlayer);
    if (!hasWinner) {
      checkTie(updated);
    }
  };

  const renderButton = (index) => (
    <button
      key={index}
      className="square"
      onClick={() => pressButton(index)}
      disabled={buttonsText[index] !== ""}
    >
      {buttonsText[index]}
    </button>
  );

  const checkWinner = (currentButtons, currentPlayer) => {
    for (const [a, b, c] of winningPositions) {
      if (
        currentButtons[a] === currentPlayer &&
        currentButtons[b] === currentPlayer &&
        currentButtons[c] === currentPlayer
      ) {
        setModalMessage(`Player X has won!`);
        setShowModal(true);
        return true;
      }
    }
    return false;
  };

  const checkTie = (currentButtons) => {
    if (currentButtons.every(cell => cell !== "") && !showModal) {
      setModalMessage("Draw!");
      setShowModal(true);
    }
  };

  const resetGame = () => {
    setButtonsText(Array(9).fill(""));
    setPlayerTurn(Player.PlayerX);
    setShowModal(false);
    setModalMessage("");
  };

  return (
    <div>
      <h2>Next Player: {playerTurn}</h2>
      <h2 id="message">{modalMessage}</h2>

      <div className="button-container">
        {[0, 1, 2].map((row) => (
          <div key={row}>
            {renderButton(row * 3)}
            {renderButton(row * 3 + 1)}
            {renderButton(row * 3 + 2)}
          </div>
        ))}
      </div>

      <div className="reset-game">
        <button id="reset" className="reset-button" onClick={resetGame}>
          Reset game
        </button>
      </div>

      {showModal && (
        <div className="modal-overlay">
          <div className="modal">
            <h2>{modalMessage}</h2>
            <button className="reset-button" onClick={resetGame}>
              Play Again
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15

Challenge Information:

Build a Tic-Tac-Toe Game - Build a Tic-Tac-Toe Game

2

Your setModalMessage is always setting the text to “Player X has won!”. Instead, it should set the message based on which player actually won (X or O).

3

I’ve tried it but it’s still not working.

4

please post your updated code