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

Curriculum Help
1

Tell us what’s happening:

I cant pass 10th condition and I dont know why. I think my code works perfectly fine.

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 */
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  width:100px;
}

.square {
  height: 60px;
  width: 60px;
  margin: 10px;
}

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

export function Board() {

  const lines = [
    [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 [buttons,setButtons] = useState(Array(9).fill(false));
  const [player,setPlayer] = useState("X");
  const [count, setCount] = useState(0);

  const [xPos, setXPos] = useState([]);
  const [yPos, setYPos] = useState([]);

  const [xWin, setXWin] = useState(false);
  const [yWin, setYWin] = useState(false);
  const [msg,setMsg] = useState("Next Player : X");

  function handleClick(index) {

    const btnStatus = buttons.map((value,i) => 
      {return i === index ? player : value} 
    )

    const tempXPos = player == "X" ?  [...xPos,index] : xPos;
    const tempYPos = player == "O" ?  [...yPos,index] : yPos;
    const xStatus = lines.some(line => 
                    line.every(index => 
                    tempXPos.includes(index)));
    const yStatus = lines.some(line => 
                    line.every(index => 
                    tempYPos.includes(index)));
    
    
    
    setMsg(
        xStatus ? "Winner : X" :
        yStatus ? "Winner : O" : 
        count == 8? "Draw" : 
        `Next Player : ${player == "X" ? "O" : "X"}`);
       
    setButtons(prevButtons => btnStatus)
    setXPos(tempXPos);
    setYPos(tempYPos);
    setPlayer(player == "X" ? "O" : "X");
    setCount(count => count+1);

    setXWin(xStatus);
    setYWin(yStatus);

  }

 

  function reset() {
    setButtons(buttons => {return Array(9).fill(false)});
    setXPos(pos => []);
    setYPos(pos => []);
    setXWin(false);
    setYWin(false);
    setPlayer("X");
    setCount(0);
    setMsg("Next Player : X")
    
  }

  return (
    <div>
    <h1>Tic-Tac-Toe</h1>
    <p>{msg}</p>
    <div className='container'>
      
      {
        buttons.map( (_,index) => 
        <button className='square' 
        key={index}
        disabled = {buttons[index] || xWin || yWin}
        onClick={() => handleClick(index)}>
        {buttons[index]}
        </button>
      )}
    
    </div>
    <button id="reset" onClick={reset}>Reset Game</button>
    </div>
  );

}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-tic-tac-toe/67e3a6b7f60b4085588189e6.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hey @playfun510

I checked the lab file and I found that test is expecting Winner: X or Winner: O instead of Winner : X or Winner : O so once you fix that, you should be able to clear the test. Honestly the user stories should’ve been more clearer about this.