How to write a function that checks a winner in tic-tac-toe js?

Question

I'm trying to check the winner in tic-tac-toe js by using the value of dataset and the index of win combination. maybe i need to compare it I want to use the methods some and every but it does not work.

    winCombinations: [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [2, 4, 6],
        [0, 4, 8]
    ]

    getWinner(value, player){
        let boardCells = document.querySelectorAll('[data-cell]');
        return this.winCombinations.some(combination => {
            return combination.every(index => {
                boardCells.forEach(cell => {
                   if(cell.dataset.cell.index === 'x'){
                       console.log('winner!!!')
                   }
                })
                })
            })
    }

user_13936663 · Answer

here is how i would do it

const X_CLASS = 'x';
const CIRCLE_CLASS = 'circle';
const boardCells = document.querySelectorAll('[data-cell]');
let circleTurn;
startGame();

function startGame() { 
  circleTurn = false;
  boardCells.forEach((cell) => { cell.classList.remove(X_CLASS);
  cell.classList.remove(CIRCLE_CLASS);
  cell.removeEventListener('click', handleClick);
  cell.addEventListener('click', handleClick, { once: true }); });
}

function handleClick(e) { 
  const cell = e.target; const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS;
  placeMark(cell, currentClass); 
  if (checkWin(currentClass)) { endGame(false); } 
      else if (isDraw()) { endGame(true); } 
        else { swapTurns();

const X_CLASS = 'x';
const CIRCLE_CLASS = 'circle';
const WINNING_COMBINATIONS = [
    [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 cellElements = document.querySelectorAll('[data-cell]');
const board = document.getElementById('board');
const winningMessageElement = document.getElementById('winningMessage');
const restartButton = document.getElementById('restartButton');
const winningMessageTextElement = document.querySelector('[data-winning-message-text]');
let circleTurn;
startGame();
restartButton.addEventListener('click', startGame);

function startGame() {
    circleTurn = false;
    cellElements.forEach((cell) => {
        cell.classList.remove(X_CLASS);
        cell.classList.remove(CIRCLE_CLASS);
        cell.removeEventListener('click', handleClick);
        cell.addEventListener('click', handleClick, {
            once: true
        });
    });
    setBoardHoverClass();
    winningMessageElement.classList.remove('show');
}

function handleClick(e) {
    const cell = e.target;
    const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS;
    placeMark(cell, currentClass);
    if (checkWin(currentClass)) {
        endGame(false);
    } else if (isDraw()) {
        endGame(true);
    } else {
        swapTurns();
        setBoardHoverClass();
    }
}

function endGame(draw) {
    if (draw) {
        winningMessageTextElement.innerText = 'Draw!';
    } else {
        winningMessageTextElement.innerText = $ {
            circleTurn ? "O's" : "X's"
        }
        Wins!;
    }
    winningMessageElement.classList.add('show');
}

function isDraw() {
    return [...cellElements].every((cell) => {
        return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS);
    });
}

function placeMark(cell, currentClass) {
    cell.classList.add(currentClass);
}

function swapTurns() {
    circleTurn = !circleTurn;
}

function setBoardHoverClass() {
    board.classList.remove(X_CLASS);
    board.classList.remove(CIRCLE_CLASS);
    if (circleTurn) {
        board.classList.add(CIRCLE_CLASS);
    } else {
        board.classList.add(X_CLASS);
    }
}

function checkWin(currentClass) {
    return WINNING_COMBINATIONS.some((combination) => {
        return combination.every((index) => {
            return cellElements[index].classList.contains(currentClass);
        });
    });
}

How to write a function that checks a winner in tic-tac-toe js?

1 Answers