Tic Tac Toe v2

tic-tac-toe-v2.js

<style>
.container {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
}

.cell {
    width: 50px;
    height: 50px;
    background: silver;
    border: 1px solid blue;
    
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;

    cursor: pointer;
}

</style>

<div class="container">
  
    <div class="row" id="row1">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
  
    
    <div class="row" id="row2">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    
    <div class="row" id="row3">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    
  </div>



<script>
    const row1cells = document.querySelectorAll('#row1 .cell');
    // console.log({row1cells})

    const row2cells = document.querySelectorAll('#row2 .cell');
    // console.log({row2cells})

    const row3cells = document.querySelectorAll('#row3 .cell');
    // console.log({row3cells})

    const cells = [row1cells, row2cells, row3cells];
    // console.log({cells});

    let lastValue = null;

    cells.forEach(function(row, index) {
      row.forEach(function(cell) {
      
        cell.addEventListener('click', function(event) {
          const newValue = lastValue === 'X' ? '0' : 'X';
          event.target.innerHTML = newValue;
          lastValue = newValue;

          const checkConditionRow1 = cells[0][0].innerHTML === cells[0][1].innerHTML && cells[0][1].innerHTML  === cells[0][2].innerHTML && cells[0][0].innerHTML !== "";
          const checkConditionRow2 = cells[1][0].innerHTML === cells[1][1].innerHTML && cells[1][1].innerHTML  === cells[1][2].innerHTML && cells[1][0].innerHTML !== "";
          const checkConditionRow3 = cells[2][0].innerHTML === cells[2][1].innerHTML && cells[2][1].innerHTML  === cells[2][2].innerHTML && cells[2][0].innerHTML !== "";

          const checkConditionColumn1 = cells[0][0].innerHTML === cells[1][0].innerHTML && cells[1][0].innerHTML  === cells[2][0].innerHTML && cells[0][0].innerHTML !== "";
          const checkConditionColumn2 = cells[0][1].innerHTML === cells[1][1].innerHTML && cells[1][1].innerHTML  === cells[2][1].innerHTML && cells[0][1].innerHTML !== "";
          const checkConditionColumn3 = cells[0][2].innerHTML === cells[1][2].innerHTML && cells[1][2].innerHTML  === cells[2][2].innerHTML && cells[0][2].innerHTML !== "";

          const checkConditionDiagonal1 = cells[0][0].innerHTML === cells[1][1].innerHTML && cells[1][1].innerHTML  === cells[2][2].innerHTML && cells[0][0].innerHTML !== "";
          const checkConditionDiagonal2 = cells[0][2].innerHTML === cells[1][1].innerHTML && cells[1][1].innerHTML  === cells[2][0].innerHTML && cells[0][2].innerHTML !== "";

          if (checkConditionRow1 || checkConditionRow2 || checkConditionRow3) {
            alert('S-a produs o linie orizontala castigatoare cu' + event.target.innerHTML);
          }
          if (checkConditionColumn1 || checkConditionColumn2 || checkConditionColumn3) {
            alert('S-a produs o linie verticala castigatoare cu ' + event.target.innerHTML);
          }
          if (checkConditionDiagonal1 || checkConditionDiagonal2) {
            alert('S-a produs o linie diagonala castigatoare cu ' + event.target.innerHTML);
          }
        })

      })
    }) 

</script>

<!--
Orizontala
* [0][0]   [0][1]   [0][2] = randul 1
* [1][0]   [1][1]   [1][2] = randul 2
* [2][0]   [2][1]   [2][2] = randul 3

Verticala
* [0][0]   [1][0]   [2][0] = coloana 1
* [0][1]   [1][1]   [2][1] = coloana 2
* [0][2]   [1][2]   [2][2] = coloana 3

Diagoana
* [0][0]   [1][1]   [2][2] = diagonala 1
* [0][2]   [1][1]   [2][0] = diagonala 2
 -->