'Minesweeper with Undo feature. How to unreveal all of the revealed nearby tiles to tile 0?

I'm trying to implement a Minesweeper game with the Undo feature. I used Stack data structure, the stack will push the tile that has been clicked on and pop it out when I clicked the Undo button. With the game Minesweeper, when I undo on a Tiled that has 0 value, it supposes to not only hide the opened tiled clicked on, but also the adjacent tiles that may have the same value 0. But it only could close the Tile has value 0 that I have clicked on, not all surrounding tiles like so.

I have attached the javascript code below on the function to pass in the Tiled that the stack pop() out.

const TILE_STATUSES = {
    HIDDEN: "hidden",
    MINE: "mine",
    NUMBER: "number",
    MARKED: "marked",
  }
function createBoard(boardSize, numberOfMines) {
    const board = []
    const minePositions = getMinePositions(boardSize, numberOfMines)
   
    for (let x = 0; x < boardSize; x++) {
      const row = []
      for (let y = 0; y < boardSize; y++) {
        const element = document.createElement("div")
        element.dataset.status = TILE_STATUSES.HIDDEN
        const tile = {
          element,
          x,
          y,
          mine: minePositions.some(positionMatch.bind(null, { x, y })),
          get status() {
            return this.element.dataset.status
          },
          set status(value) {
            this.element.dataset.status = value
          },
    
        }
  
        row.push(tile)
      }
      board.push(row)
    }
  
    return board
  }
function markTile(tile) {
  if (
    tile.status !== TILE_STATUSES.HIDDEN &&
    tile.status !== TILE_STATUSES.MARKED
  ) {
    return
  }

  if (tile.status === TILE_STATUSES.MARKED) {
    tile.status = TILE_STATUSES.HIDDEN
  } else {
    tile.status = TILE_STATUSES.MARKED
  }
}
function revealTile(board,tile){
    if (tile.status !== TILE_STATUSES.HIDDEN) {
        return
      }
    
      if (tile.mine) {
        tile.status = TILE_STATUSES.MINE
        return
      }
      tile.status = TILE_STATUSES.NUMBER
      const adjacentTiles = nearbyTiles(board, tile)
      const mines = adjacentTiles.filter(t => t.mine)
      if (mines.length === 0) {
        adjacentTiles.forEach(revealTile.bind(null, board))
      } else {
        tile.element.textContent = mines.length
      }
}
function changeTile(board,tile){
  if (tile.status !== TILE_STATUSES.HIDDEN) {
      return
    }
  
    if (tile.mine) {
      tile.status = TILE_STATUSES.MINE
      return
    }
    tile.status = TILE_STATUSES.NUMBER
    const adjacentTiles = nearbyTiles(board, tile)
    const mines = adjacentTiles.filter(t => t.mine)
    if (mines.length === 0) {
      adjacentTiles.forEach(changeTile.bind(null, board))
    } else {
      tile.element.textContent = mines.length
    }
    return adjacentTiles
}
function checkWin(board) {
    return board.every(row => {
      return row.every(tile => {
        return (
          tile.status === TILE_STATUSES.NUMBER ||
          (tile.mine &&
            (tile.status === TILE_STATUSES.HIDDEN ||
              tile.status === TILE_STATUSES.MARKED))
        )
      })
    })
  }
function checkLose(board) {
    return board.some(row => {
      return row.some(tile => {
        return tile.status === TILE_STATUSES.MINE
      })
    })
  }

function remarkTile(board,tile){
    if(tile.status === TILE_STATUSES.HIDDEN){
        return 
    }
    else if(tile.status === TILE_STATUSES.MINE){
        tile.status === TILE_STATUSES.HIDDEN
    }
    else if(tile.status === TILE_STATUSES.NUMBER ){
        if(tile.element.textContent === ''){
            console.log('j')
        }
        tile.element.textContent = null
    }
    tile.status = TILE_STATUSES.HIDDEN
}

function nearbyTiles(board, { x, y }) {
    const tiles = []
  
    for (let xOffset = -1; xOffset <= 1; xOffset++) {
      for (let yOffset = -1; yOffset <= 1; yOffset++) {
        const tile = board[x + xOffset]?.[y + yOffset]
        if (tile) tiles.push(tile)
      }
    }
  
    return tiles
  }

  function getMinePositions(boardSize, numberOfMines) {
    const positions = []
  
    while (positions.length < numberOfMines) {
      const position = {
        x: randomNumber(boardSize),
        y: randomNumber(boardSize),
      }
  
      if (!positions.some(positionMatch.bind(null, position))) {
        positions.push(position)
      }
    }
  
    return positions
  }
  
  function positionMatch(a, b) {
    return a.x === b.x && a.y === b.y
  }
  
  function randomNumber(size) {
    return Math.floor(Math.random() * size)
  }
<body>
  <h3 class="title">Minesweeper</h3>
  <div class="subtext">
    Mines Left: <span data-mine-count></span>
  </div>
  <button id="undo"> Undo </button>
  <div class="board"></div>
</body>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source