Не могу прочитать внутреннюю HTML на нерабочих JS Ti c -Ta c -Toe game

Question

Я создаю JS Ti c -Ta c -То игру, чтобы лучше понять JS и простую игровую логику c. Это простая ттт игра, и я сталкиваюсь с проблемой невозможности захватить innerHTML, чтобы выбрать следующий ход (человек или компьютер). Кроме того, любые советы по улучшению стратегии будут приветствоваться. Я также попытался создать атрибут square в глобальном объекте gameBoard, который можно изменить или получить к нему доступ в любом месте приложения, но столкнулся с проблемой, когда все назначения div были ttt-8 на плате.

// tic-tac-toe 
// human = "O"
// computer = "X" 

import "./styles.css";

// Global gameBoard object. gameBoard.square is not used. Tried to implement 
// but could not build board correctly.
const gameBoard = { board: [], square: null }; 

function play() {
  buildBoard()
};

function turn(square) {
  console.log(square.innerHTML) // THIS DOESN'T SHOW THE innerHTML EITHER X OR O, only "" 
  if (gameBoard.board.indexOf(null) === -1) {
    console.log("No winner!");
    play();
  } else if (square.innerHTML === "O") {
    computer(square);
  } else if (square.innerHTML === "X") {
    human(square);
  }
};

function human(square) {
  let move = square.dataset.idx;
  gameBoard.board[move] = 0;
  square.innerHTML = "O";
  square.classList.add("human");
  checkWinner();
  square.removeEventListener("click", turn());
 };

function computer(square) {
  let move = dumbAI()
  gameBoard.board[move] = 1;
  square.innerHTML = "X";
  square.classList.add("computer");
  checkWinner();
  square.removeEventListener("click", turn());
};


function buildBoard() {
  const container = document.getElementById("ttt-game"); 
  container.innerHTML = "";
  for (let i = 0; i < 9; i++) {
    gameBoard.board.push(null);
    let square = document.createElement("div");
    square.innnerHTML = "&nbsp;";
    square.dataset.idx = i;
    square.id = "ttt-" + i;
    square.addEventListener("click", () => turn(square))
    container.appendChild( square );
  }
};

function checkWinner() {
  let win = null;
  // Horizontal row checks
  for (let i = 0; i < 9; i += 3) {
    if (
      gameBoard.board[i] !== null &&
      gameBoard.board[i + 1] != null &&
      gameBoard.board[i + 2] != null
    ) {
      if (
        gameBoard.board[i] === gameBoard.board[i + 1] &&
        gameBoard.board[i + 1] === gameBoard.board[i + 2]
      ) {
        win = gameBoard.board[i];
      }
    }
    if (win !== null) {
      break;
    }
  };
  // Vertical row checks
  if (win === null) {
    for (let i = 0; i < 3; i++) {
      if (
        gameBoard.board[i] !== null &&
        gameBoard.board[i + 3] !== null &&
        gameBoard.board[i + 6] !== null
      ) {
        if (
          gameBoard.board[i] === gameBoard.board[i + 3] &&
          gameBoard.board[i + 3] === gameBoard.board[i + 6]
        ) {
          win = gameBoard.board[i];
        }
        if (win !== null) {
          break;
        }
      }
    };
  }
  // Diaganal row checks
  if (win === null) {
    if (
      gameBoard.board[0] !== null &&
      gameBoard.board[4] !== null &&
      gameBoard.board[8] !== null
    ) {
      if (
        gameBoard.board[0] === gameBoard.board[4] &&
        gameBoard.board[4] === gameBoard.board[8]
      ) {
        win = gameBoard.board[4];
      }
    }
  };
  if (win === null) {
    if (
      gameBoard.board[2] !== null &&
      gameBoard.board[4] !== null &&
      gameBoard.board[6] !== null
    ) {
      if (
        gameBoard.board[2] === gameBoard.board[4] &&
        gameBoard.board[4] === gameBoard.board[6]
      ) {
        win = gameBoard.board[4];
      }
    }
  };
  // We have a winner
  if (win !== null) {
    console.log("WINNER - " + (win === 0 ? "human" : "Computer"));
    play();
  }
};

function dumbAI() {
  let open = [];
  for (let i = 0; i < 9; i++) {
    if (gameBoard.board[i] === null) {
      open.push(i);
    }
  }
  const random = Math.floor(Math.random() * (open.length - 1));
  return open[random];
}

document.addEventListener('DOMContentLoaded', play())

body {
  font-family: sans-serif;
}

#ttt-game {
  display: grid;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 5px;
}
#ttt-game div {
  font-size: 3em;
  text-align: center;
  background: rgb(158, 143, 143);
  padding: 50px;
}
#ttt-game div.player {
  background: #c2e3ff;
}
#ttt-game div.computer {
  background: #ffebeb;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="ttt-game"></div>

    <script src="src/ttt.js"></script>
  </body>
</html>