JSFiddle - React, Tailwind, and code Playground

vatoSupport Minesweeper Game

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://jennperrin.com/support/css/bootstrap.css">
<link rel="stylesheet" href="https://jennperrin.com/support/css/custom.css">
<link rel="stylesheet" href="https://jennperrin.com/support/css/styles.css">
<script src="https://jennperrin.com/support/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="container no-padding">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
            </div>
        </div>
    </div>
</nav>
<div class="container-fluid headerBar">
    <div class="container no-padding">
        <p class="site-title"><a href="https://jennperrin.com/support" rel="home"><img src="https://jennperrin.com/support/images/logo-header.png" alt="authosSupport" /></a>
        </p>
        <p class="site-description">Forkable Fiddle</p>
        <p class="newSupportBtn"> <a data-toggle="modal" href="#jump" class="btn btn-info btn-lg btnIcon"><i class="fa fa-bomb"></i> Minesweeper</a>

        </p>
    </div>
</div>
<div class="container"></div>
<div class="modal fade" id="jump" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span>
               ...

CSS

@import url(http://fonts.googleapis.com/css?family=Muli:200, 300, 400, 700);

#minesweep{
    width:190px;
    margin:20px auto;
}

#minesweep:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both;
}

.box{
    display:block;
    float:left;
    width:20px;
    height:20px;
    border: 1px solid #ffffff;
    background-image: linear-gradient(#3b8dbd, #357faa);
    text-align:center;
    line-height:20px;
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
}

.box:hover{
    cursor:pointer;
    background:#296283;
}

span.opened{
    background:#2f7096;
}

span.checked,span.checked:hover{
   background-image: linear-gradient(#d9534f, #d43f3a);
}

span.bomb{
    display:inline-block;
    width:10px;
    height:10px;
    margin-top:4px;
    border:1px solid #df8a13;
    background:#a94442;
}

JavaScript

//variables
var lvl1w = 9;
var lvl1h = 9;
var lvl1m = 10;

var mineField;
var opened;

startGame();
function startGame(){
	mineField = new Array();
	opened = 0;

	//creating on array
	for(var i=0; i<lvl1h; i++){
		mineField[i] = new Array();
		for(var j=0; j<lvl1w; j++){
			mineField[i].push(0);
		}
	}

	//placing mines
	var placedMines = 0;
	var randomRow,randomCol;
	while(placedMines < lvl1m){
		randomRow = Math.floor(Math.random() * lvl1h);
		randomCol = Math.floor(Math.random() * lvl1w);
		if(mineField[randomRow][randomCol] == 0){
			mineField[randomRow][randomCol] = 9;
			placedMines++;
		}
	}

	//placing digits
	for(var i=0; i < lvl1h; i++){
		for(var j=0; j<lvl1w; j++){
			if(mineField[i][j] == 9){
				for(var ii=-1; ii<=1; ii++){
					for(var jj=-1; jj<=1; jj++){
						if(ii!=0 || jj!=0){
							if(tileValue(i+ii,j+jj) != 9 && tileValue(i+ii,j+jj) != -1){
								mineField[i+ii][j+jj]++;
							}
						}
					}
				}
			}
		}
	}

	//placing in page
	for(var i=0; i<lvl1h; i++){
		for(var j=0; j<lvl1w; j++){
			var tile = $("#minesweep").append("<span id='"+i+""+j+"' data-row='"+i+"' data-col='"+j+"' class='box first'></span>");
		}
	}

	$("#minesweep span.box").on('contextmenu',function(e){
		e.preventDefault();
		if($(this).hasClass("checked")){
			$(this).removeClass("checked");
		} else {
			$(this).addClass("checked");
		}
	});

	$("#minesweep span.box").click(function(){
		if(!$(this).hasClass('checked')){
			var tile = $(this);
			var clickedRow = tile.data('row');
			var clickedCol = tile.data('col');
			var clickedVal = mineField[clickedRow][clickedCol];

			if(clickedVal == 0){
				floodFill(clickedRow,clickedCol);
			}

			if(clickedVal > 0 && clickedVal < 9){
				tile.removeClass('first');
				tile.html(clickedVal);
				opened++;
			}

			if(clickedVal == 9){
				tile.removeClass('first');
				tile.append("<span class='bomb'></span>");
				$("#minesweep").after('<p class="text-center message"><span class="text-danger"><i class="fa fa-bomb"></i>...