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

JavaScript
1

Tell us what’s happening:

Everything is working as it should, but I am not passing test 9 and I am not sure why
“Clicking on a button.square element should result in no change.”
any help is appreciated :slight_smile:

Your code so far

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


/* file: styles.css */


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


export function Board() {
  

const [count, setCount] = useState(0);
const [x, setX] = useState(false)
const [resetB, setReset] = useState()
const [xValue, setXValue] = useState([]) 
const [oValue, setOValue] = useState([])
const [isDisabled, setDisabled] = useState(win)


const btn1 = useRef(null)
const btn2 = useRef(null)
const btn3 = useRef(null)
const btn4 = useRef(null) 
const btn5 = useRef(null)
const btn6 = useRef(null)
const btn7 = useRef(null)
const btn8 = useRef(null)
const btn9 = useRef(null)

const winOrLose = useRef(null)

 let blockArr = [{id: "b1", value: btn1} , {id: "b2", value: btn2} ,{id: "b3", value: btn3},{id: "b4", value: btn4}, {id: "b5", value: btn5} ,{id: "b6", value: btn6},{ id: "b7", value: btn7}, {id: "b8", value: btn8}, {id: "b9", value: btn9}];



let xo = '';
let win = false

const resetGame = () => {
  setX(false)
  setReset(true)
  setCount(0) 
  Object.keys(blockArr).map(item => {
    blockArr[item].value.current.innerText = null
    blockArr[item].value.current.disabled = false
  })
  setDisabled(false)
  setXValue([])
  setOValue([])
  winOrLose.current.innerText = ''; 
  win = false
}
 
 

const handleXO = (btn, id)=> {
   
    setX(!x)
   setCount(count + 1)
   setReset(false)
   
    if(resetB === true || count === 0){
  xo = ''
 }
  if(x === true){
    btn.current.disabled = true
    xo = "O" 
   setOValue(prev => [...prev, id]) 
   
  } else{ 
    btn.current.disabled = true
    xo = "X"
    setXValue(prev => [...prev, id]) 
   
  }


  return btn.current.innerText = xo  
}

useEffect(() => { 
 win === true ? setDisabled(true) : setDisabled(false);
}, [oValue, xValue, win])




//123,456,789 or 159,357 or 147,258,369

const winner = () => {  
    let winCombos = [['b1', 'b2', 'b3'], ['b4', 'b5', 'b6'], ['b7', 'b8', 'b9'], ['b1', 'b5', 'b9'], ['b3', 'b5', 'b7'], ['b1', 'b4', 'b7'], ['b2', 'b5', 'b8'], ['b3', 'b6', 'b9']]
    for(let i = 0; i < winCombos.length; i++){
     
      
      if(xValue.includes(winCombos[i][0]) && xValue.includes(winCombos[i][1]) && xValue.includes(winCombos[i][2])){
           win = true
         winOrLose.current.innerText = "Winner: X"
      }else if(oValue.includes(winCombos[i][0]) && oValue.includes(winCombos[i][1]) && oValue.includes(winCombos[i][2])){
          win = true
         winOrLose.current.innerText = "Winner: O"
      }
    }
  
   if(oValue.length + xValue.length === 9 && win === false){
   
    win = true
    winOrLose.current.innerText = "Draw"
  };

 } 

  return (
    <div id="container">
  <div id="grid-box" > 
      
  {Object.keys(blockArr).map(item => (
    <button className="square" id={blockArr[item].id} disabled={isDisabled}  key={"button" + item} ref={blockArr[item].value} onClick={() => handleXO(blockArr[item].value, blockArr[item].id)}></button>))}
    </div> 
    <p id="result" ref={winOrLose}>{winner()}</p> 
     <button id="reset" onClick={resetGame}>Reset</button>  
    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.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

4

Hi @lynders

  1. Passing test 9 is one of the task requirements that you should follow (like in a real project).
  2. This requirement affects the logic of the component, so handleXO should include check #9 before executing further function logic. (then code will pass the tests)
  3. Not sure that using let xo and let win is a good practice to store variables.