ms.html

<style>
  p {
    font-size: 16px;
  }
	#game {
		display: flex;
		flex-wrap: wrap;
    /*width: 600px;*/ /*columns * 30*/
		cursor: pointer;
		border: 1px solid black;
	}
	.box {
		height: 28px;
		width: 28px;
		border: 1px solid black;
		background-color: ccc;
    font-size: 24px;
    text-align: center;
	}
	.blue {
	  color: blue;
	}
	.red {
	  color: red;
	}
  .bg-fade {
		background-color: white;
	}
	.bg-blue {
		background-color: blue;
	}
  .bg-bomb {
    background-color: red;
  }
	.disable-clicks {
		pointer-events: none;
	}
</style>

<h1>Minesweeper<h1>
<p>
  There are <span id="mine-no"></span> mines. <br>
  Right click to <span class="blue">flag</span> a mine. <br>
  Right click again to undo the <span class="blue">flag</span>. <br>
  <span class="red">Red</span> means you clicked on a <span class="red">mine</span>! <br>
  You can carry on playing after clicking a <span class="red">mine</span>.
</p>
<h3>
  Mines Remaining: <span id="mine-remain"></span> 
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  Time: <span id="timer"></span> 
</h3>

<div id="game">
</div>

<br>
<br>
<a href="/">Back to home</a>

<script>
  
  /*
  cells state
  0 - Not clicked
  1 - Clicked, safe
  2 - Flagged
  */
  const BOMBED_CELL_STATE = -1
  const DEFAULT_CELL_STATE = 0
  const CLICKED_CELL_STATE = 1
  const FLAGGED_CELL_STATE = 2
  
	var board = document.getElementById("game")	
	var mineNumberElement = document.getElementById("mine-no")	
  var mineRemainElement = document.getElementById("mine-remain")	
  var timerElement = document.getElementById("timer")	
  
  var boxSize = 30
  var rows = 15
  var columns = 30
  var numberOfCells = rows*columns
  var numberOfMines = Math.floor(numberOfCells/5)
  
  var cellsToClear = numberOfCells - numberOfMines
  var cellsCleared = 0
  var minesActivated = 0
  var minesRemaining = numberOfMines
  var timeElapsed = 0
  var timer = null
  
  mineNumberElement.textContent = numberOfMines
  mineRemainElement.textContent = minesRemaining
  timerElement.textContent = timeElapsed
  
  var mines = new Set();
  while (mines.size < numberOfMines) {
    mines.add(getRandomInt(0,numberOfCells))
  }
    
  console.log(numberOfCells)
  console.log(mines)
  
  var boardWidth = columns * boxSize  
  board.setAttribute("style","width:"+ boardWidth +"px")
  
  createBoard()
  
  function createBoard() {
  	for (var i = 0; i < numberOfCells; i++) {
  		var box = document.createElement('div')
  		box.className = "box";
      box.id =  'cell-' + i
      box.setAttribute('data-state', DEFAULT_CELL_STATE)
      box.setAttribute('data-bomb', getBombNeighboursCount(i))
  		box.onclick = boxClicked
      box.oncontextmenu = boxRightClicked
  		board.appendChild(box)
  	}
    board.addEventListener('click', startTimer)
    board.addEventListener('contextmenu', startTimer)
  }
	
	function boxClicked(event) {
		var box = event.target
    processboxClicked(box)
		console.log("LC: " + box.id)
	};
  
  function getCellID(box) {
    return parseInt(box.id.substring(5))
  }
  
  function updateMinesRemaining(value) {
    minesRemaining += value
    mineRemainElement.textContent = minesRemaining
  }
  
  function updateCellsCleared(value) {
    cellsCleared += value
    if (cellsCleared == cellsToClear) {
      // all cells cleared, game completed!
      stopTimer()
      setTimeout(function() {
        alert("Game Completed! \nTime taken: " + timeElapsed + "s \nMines activated: " + minesActivated)
      }, 1000)
    }
  }
  
  function updateTimer(value) {
    timeElapsed += value
    timerElement.textContent = timeElapsed
  }
  
  function processboxClicked(box) {
    var index = getCellID(box)
    var state = box.getAttribute('data-state')
    
		if (state == DEFAULT_CELL_STATE) {
      // only allow click event for default cell state
      if (mines.has(index)) {
        // clicked on bomb!
        box.setAttribute('data-state', BOMBED_CELL_STATE)
        box.classList.add("bg-bomb")
        // update mines remaining
        updateMinesRemaining(-1)
        minesActivated++
      } else {
        // did not click on bomb
        var bombNeighbours = box.getAttribute('data-bomb')
        box.setAttribute('data-state', CLICKED_CELL_STATE)
        box.classList.add("bg-fade")
        if (bombNeighbours == 0) {
          // no bomb neighbours, simulate clicking neighbours
          var neighbours = getNeighbours(index)
          neighbours.forEach(function(value, key, set) {
            processboxClicked(document.getElementById("cell-" + value))
          })
        } else {
          // fill in the number of bomb neighbours
          box.textContent = bombNeighbours
        }
        updateCellsCleared(1)
      }
		}
  }
	
  function boxRightClicked(event) {
		var box = event.target
    var index = getCellID(box)
    var state = box.getAttribute('data-state')
    
		if (state == DEFAULT_CELL_STATE) {
      // box.textContent = index
      box.setAttribute('data-state', FLAGGED_CELL_STATE)
      box.classList.add("bg-blue")
      // update mines remaining
      updateMinesRemaining(-1)
		} else if (state == FLAGGED_CELL_STATE) {
      box.textContent = ''
      box.setAttribute('data-state', DEFAULT_CELL_STATE)
      box.classList.remove("bg-blue")
      // update mines remaining
      updateMinesRemaining(1)
		}
		
		console.log("RC: " + box.id)
    return false 
  };
  
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; 
    //The maximum is exclusive and the minimum is inclusive
  }
  
  function getBombNeighboursCount(index) {
    var neighbours = getNeighbours(index)
    var count = 0
    
    neighbours.forEach(function(value, key, set) {
      if (mines.has(value)) 
        count++
    })
    
    return count
  }
  
  function getNeighbours(index) {
    //returns a set of index of the cell's neighbours    
    var left = index-1
    var right = index+1
    var up = index-columns
    var down = index+columns
    
    var topLeft = up-1
    var topRight = up+1
    var bottomLeft = down-1
    var bottomRight = down+1
    
    var neighbours = new Set([left, right, up, down,
      topLeft, topRight, bottomLeft, bottomRight])
    
    if (index%columns == 0) {
      // on the left edge, remove left indexes
      neighbours.delete(topLeft)
      neighbours.delete(left)
      neighbours.delete(bottomLeft)
    }
    
    if (index%columns == columns-1) {
      // on the right edge, remove right indexes
      neighbours.delete(topRight)
      neighbours.delete(right)
      neighbours.delete(bottomRight)
    }
    
    // for top and bottom edge, their top and bottom will be out of bounds, 
    // not really necessary to delete the indexes   
    if (index < columns) {
      // on the top edge, remove top indexes
      neighbours.delete(topLeft)
      neighbours.delete(up)
      neighbours.delete(topRight)
    }
    
    if (index >= numberOfCells-columns) {
      // on the bottom edge, remove bottom indexes
      neighbours.delete(bottomLeft)
      neighbours.delete(down)
      neighbours.delete(bottomRight)
    }
    
    return neighbours
  }
  
  function startTimer() {
    if (timer === null) {
      timer = setInterval(function(){ 
        updateTimer(1) 
      }, 1000)
    }
    board.removeEventListener('click', startTimer)
    board.removeEventListener('contextmenu', startTimer)
  }
  
  function stopTimer() {
    clearInterval(timer)
  }
  
</script>