Does devtools from chrome work with methods?

26 Views Asked by At

I´m doing the tic tac toe exercise from the Odin Project (I´m a begginer with javascript, and programming in general). I have a question about how chrome´s devtools breakpoints work with functions that are called as methods.

const gameBoard = (() => {
    const rowNumber = 3;
    const columnNumber = 3;
    const board = [];
    const boardContainer = document.querySelector('#board-container')

    const cell = (row, column) => {
        let value = 0
        const cellRow = row;
        const cellColumn = column;
        const cellID = [cellRow, cellColumn]

        const renderCell = (cell) => {
            const cellDiv = document.createElement('div');
            cellDiv.classList.add('board-cell')
            cellDiv.addEventListener('click', function(e) {
                let activePlayer = game.activePlayer
                if (getCellValue(cellRow, cellColumn) == 0) {
                updateCell(e.target, activePlayer)
                game.changeActivePlayer()
                game.checkIfWin(cellID)
                }
            })
            boardContainer.appendChild(cellDiv)
        }

        const updateCell = (cell, player) => {
            cell.classList.add(player.color)
            gameBoard.board[cellRow][cellColumn].value = game.activePlayer.index
        }
        
        return {value, renderCell, updateCell, getCellValue}
    };

    const getCellValue = (cellRow, cellColumn) => {
        return board[cellRow][cellColumn].value
    };

    const changeCellValue = (cellRow, cellColumn, newValue) => {
        board[cellRow][cellColumn].value = newValue
    }

    const createBoard = () => {
        for (let i = 0 ; i < rowNumber ; i++) {
            board[i] = [];
            for (let j = 0 ; j < columnNumber ; j++) {
                const newCell = cell(i,j)
                newCell.renderCell()
                board[i].push(newCell)
            }
        }  
        console.log('Create board se ejecuta')
    };

    const getRow = (index) => {
        return board[index]
    }

    const getColumn = (index) => {
        let column = []
        for (let i = 0 ; i < rowNumber; i++) {
            column.push(board[i][index])
        }
        return column
    }

    const getDiagonal = (sign) => {
        let diagonal = []
        for (let i = 0 ; i < rowNumber ; i++) {
            diagonal.push(board[i*(sign)][i*(sign)])
        }
        return diagonal
    }

    return {
        board,
        createBoard,
        getCellValue,
        changeCellValue,
        cell,
        getRow,
        getColumn,
        getDiagonal,
    };
})();

const player = ((name, index, color) => {
    let score = 0
    return {name, index, score, color};
});


const game = (() => {
   const player1 = player(prompt('Nombre de jugador 1'), 1, 'red')
   const player2 = player(prompt('Nombre de jugador 2'), 2, 'blue')

   let activePlayer = player1

   const changeActivePlayer = () => {
    (game.activePlayer === player1) ? 
    game.activePlayer = player2 : 
    game.activePlayer = player1
   }

   const checkIfWin = (cell) => {
    let row = gameBoard.getRow(cell[0])
    let column = gameBoard.getColumn(cell[1])
    const checkEqualValues = (line) => {
        let firstElement = line[0]
        for (let i = 0 ; i < line.length ; i++) {
            if (firstElement.value !== line[i].value) {
                return false
            } 
        }
        return true
    }
    return checkEqualValues(row) || checkEqualValues(column) 
    || checkEqualValues(gameBoard.getDiagonal(1)) || checkEqualValues(gameBoard.getDiagonal(-1))
    ? console.log('alguien gano') 
    : null
   }

   return {
    player1,
    player2,
    activePlayer,
    changeActivePlayer,
    checkIfWin,
   }
    
})();

gameBoard.createBoard()
game.changeActivePlayer()

The thing is: When I call my function as a method, and a place a breakpoint there, for example in line 21, and then a click on a cell, the event works, the breakpoint works, but it doesn´t show me the step by step of the function checkIfWin(), it just runs the functions and goes to the next step. And if I place the breakpoint on line 105, and then click on a cell, the breakpoint doesn´t work at all. I can make it work by writing debugger in my code, but I was wondering if it would be possible to make it work with breakpoints.

0

There are 0 best solutions below