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.