text: document.addEventListener("DOMContentLoaded", () => {
    const playgroungDisplay = document.querySelector(".playground")
    const scoreDisplay = document.querySelector(".score-text")
    const maxScoreDislpay = document.querySelector(".max-score-text")
    const resultDisplay = document.querySelector(".result-text")
    const width = 4
  
    let squares = []
    let score = (maxScore = 0)
    let newGame = false
  
    moved = combined = true
  
    function createBoard() {
      for (let i = 0; i < width * width; i++) {
        square = document.createElement("div")
        square.innerHTML = " "
        playgroungDisplay.appendChild(square)
        squares.push(square)
      }
      generate()
      generate()
    }
    createBoard()
  
    function generate() {
      randomNumber = Math.floor(Math.random() * squares.length)
      if (squares[randomNumber].innerHTML == " " && (combined || moved)) {
        squares[randomNumber].innerHTML = 2
        checkForGameOver()
        moved = false
      } else generate()
    }
  
    function moveRight() {
      for (let i = 0; i < 16; i++) {
        if (i % 4 === 0) {
          let totalOne = squares[i].innerHTML
          let totalTwo = squares[i + 1].innerHTML
          let totalThree = squares[i + 2].innerHTML
          let totalFour = squares[i + 3].innerHTML
          let row = [
            parseInt(totalOne),
            parseInt(totalTwo),
            parseInt(totalThree),
            parseInt(totalFour),
          ]
  
          let filteredRow = row.filter((num) => num)
          let missing = 4 - filteredRow.length
          let zeros = Array(missing).fill(" ")
          let newRow = zeros.concat(filteredRow)
  
          squares[i].innerHTML = newRow[0]
          squares[i + 1].innerHTML = newRow[1]
          squares[i + 2].innerHTML = newRow[2]
          squares[i + 3].innerHTML = newRow[3]
        }
      }
      moved = true
    }
  
    function moveLeft() {
      for (let i = 0; i < 16; i++) {
        if (i % 4 === 0) {
          let totalOne = squares[i].innerHTML
          let totalTwo = squares[i + 1].innerHTML
          let totalThree = squares[i + 2].innerHTML
          let totalFour = squares[i + 3].innerHTML
          let row = [
            parseInt(totalOne),
            parseInt(totalTwo),
            parseInt(totalThree),
            parseInt(totalFour),
          ]
  
          let filteredRow = row.filter((num) => num)
          let missing = 4 - filteredRow.length
          let zeros = Array(missing).fill(" ")
          let newRow = filteredRow.concat(zeros)
  
          squares[i].innerHTML = newRow[0]
          squares[i + 1].innerHTML = newRow[1]
          squares[i + 2].innerHTML = newRow[2]
          squares[i + 3].innerHTML = newRow[3]
        }
      }
      moved = true
    }
  
    function moveUp() {
      for (let i = 0; i < 4; i++) {
        let totalOne = squares[i].innerHTML
        let totalTwo = squares[i + width].innerHTML
        let totalThree = squares[i + width * 2].innerHTML
        let totalFour = squares[i + width * 3].innerHTML
        let column = [
          parseInt(totalOne),
          parseInt(totalTwo),
          parseInt(totalThree),
          parseInt(totalFour),
        ]
  
        let filteredColumn = column.filter((num) => num)
        let missing = 4 - filteredColumn.length
        let zeros = Array(missing).fill(" ")
        let newColumn = filteredColumn.concat(zeros)
  
        squares[i].innerHTML = newColumn[0]
        squares[i + width].innerHTML = newColumn[1]
        squares[i + width * 2].innerHTML = newColumn[2]
        squares[i + width * 3].innerHTML = newColumn[3]
      }
      moved = true
    }
  
    function moveDown() {
      for (let i = 0; i < 4; i++) {
        let totalOne = squares[i].innerHTML
        let totalTwo = squares[i + width].innerHTML
        let totalThree = squares[i + width * 2].innerHTML
        let totalFour = squares[i + width * 3].innerHTML
        let column = [
          parseInt(totalOne),
          parseInt(totalTwo),
          parseInt(totalThree),
          parseInt(totalFour),
        ]
  
        let filteredColumn = column.filter((num) => num)
        let missing = 4 - filteredColumn.length
        let zeros = Array(missing).fill(" ")
        let newColumn = zeros.concat(filteredColumn)
  
        squares[i].innerHTML = newColumn[0]
        squares[i + width].innerHTML = newColumn[1]
        squares[i + width * 2].innerHTML = newColumn[2]
        squares[i + width * 3].innerHTML = newColumn[3]
      }
      moved = true
    }
  
    function transform() {
      for (let i = 0; i < width * width; i++) {
        if (squares[i].innerHTML == " ") squares[i].innerHTML = 0
      }
    }
  
    function combineRow() {
      transform()
      for (let i = 0; i < 15; i++) {
        if (squares[i].innerHTML === squares[i + 1].innerHTML) {
          let combinedTotal =
            parseInt(squares[i].innerHTML) + parseInt(squares[i + 1].innerHTML)
          squares[i].innerHTML = combinedTotal
          console.log(combinedTotal)
          squares[i + 1].innerHTML = " "
          score += combinedTotal
          scoreDisplay.innerHTML = score
        }
      }
      checkForWin()
      combined = true
    }
  
    function combineColumn() {
      transform()
      for (let i = 0; i < 12; i++) {
        if (squares[i].innerHTML === squares[i + width].innerHTML) {
          let combinedTotal =
            parseInt(squares[i].innerHTML) +
            parseInt(squares[i + width].innerHTML)
          squares[i].innerHTML = combinedTotal
          squares[i + width].innerHTML = " "
          score += combinedTotal
          scoreDisplay.innerHTML = score
        }
      }
      checkForWin()
      combined = true
    }
  
    function control(e) {
      if (!newGame) {
        if (e.keyCode === 37) {
          keyLeft()
        } else if (e.keyCode === 38) {
          keyUp()
        } else if (e.keyCode === 39) {
          keyRight()
        } else if (e.keyCode === 40) {
          keyDown()
        }
      }
    }
    document.addEventListener("keyup", control)
  
    function keyRight() {
      moveRight()
      combineRow()
      moveRight()
      generate()
    }
  
    function keyLeft() {
      moveLeft()
      combineRow()
      moveLeft()
      generate()
    }
  
    function keyUp() {
      moveUp()
      combineColumn()
      moveUp()
      generate()
    }
  
    function keyDown() {
      moveDown()
      combineColumn()
      moveDown()
      generate()
    }
  
    function checkForWin() {
      for (let i = 0; i < squares.length; i++) {
        if (squares[i].innerHTML == 2048) {
          resultDisplay.innerHTML = "You won!"
  
          gameMessage.classList.toggle("open")
          newGame = true
        }
      }
    }
  
    function checkForGameOver() {
      let zeros = 0
      for (let i = 0; i < squares.length; i++) {
        if (squares[i].innerHTML == " ") {
          zeros++
        }
      }
      if (zeros === 0) {
        resultDisplay.innerHTML = "You lost :("
  
        gameMessage.classList.toggle("open")
        newGame = true
      }
    }
  
    function addColours() {
      for (let i = 0; i < squares.length; i++) {
        if (squares[i].innerHTML == " ") {
          squares[i].style.backgroundColor = "rgba(238,228,218,.35)"
          squares[i].style.color = "rgba(238,228,218,0)"
        }
        if (squares[i].innerHTML == 2) {
          squares[i].style.backgroundColor = "#eee4da"
          squares[i].style.color = "#776e65"
        }
        if (squares[i].innerHTML == 4) {
          squares[i].style.backgroundColor = "#ede0c8"
          squares[i].style.color = "#776e65"
        }
        if (squares[i].innerHTML > 4) squares[i].style.color = "#f9f6f2"
        if (squares[i].innerHTML == 8)
          squares[i].style.backgroundColor = "#f2b179"
        if (squares[i].innerHTML == 16)
          squares[i].style.backgroundColor = "#f59563"
        if (squares[i].innerHTML == 32)
          squares[i].style.backgroundColor = "#f67c5f"
        if (squares[i].innerHTML == 64)
          squares[i].style.backgroundColor = "#f65e3b"
        if (squares[i].innerHTML == 128) {
          squares[i].style.backgroundColor = "#edcf72"
          squares[i].style.fontSize = "50px"
          squares[i].style.lineHeight = "100px"
        }
        if (squares[i].innerHTML == 256) {
          squares[i].style.backgroundColor = "#edcc61"
          squares[i].style.fontSize = "50px"
          squares[i].style.lineHeight = "100px"
        }
        if (squares[i].innerHTML == 512) {
          squares[i].style.backgroundColor = "#edc850"
          squares[i].style.fontSize = "50px"
          squares[i].style.lineHeight = "100px"
        }
        if (squares[i].innerHTML == 1024) {
          squares[i].style.backgroundColor = "#edc53f"
          squares[i].style.fontSize = "40px"
          squares[i].style.lineHeight = "100px"
        }
        if (squares[i].innerHTML == 2048) {
          squares[i].style.backgroundColor = "#edc22e"
          squares[i].style.fontSize = "35px"
          squares[i].style.lineHeight = "100px"
        }
      }
    }
    addColours()
  
    var myTimer = setInterval(addColours, 60)
  
    let closeGameMessage = document.querySelector(".close-game-message")
    let gameMessage = document.querySelector(".result-container")
  
    closeGameMessage.onclick = function () {
      gameMessage.classList.toggle("open")
      refreshBoard()
    }
  
    function refreshBoard() {
      if (score > maxScore) {
        maxScore = score
      }
  
      while (playgroungDisplay.firstChild) {
        playgroungDisplay.removeChild(playgroungDisplay.firstChild)
      }
      squares = []
      score = 0
  
      newGame = false
  
      maxScoreDislpay.innerHTML = maxScore
      scoreDisplay.innerHTML = score
  
      createBoard()
    }
  
    let startNewGame = document.querySelector(".new-game")
  
    startNewGame.onclick = function () {
      refreshBoard()
    }
  })
  