JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<button id="start">Start</button>
<div id="GameBoard"></div>

CSS

tr{
    padding: 0px;
    margin: 0px;
}

td{
    padding: 0px;
    margin: 0px;
}

#start{
    width:  60px;
    height: 20px;
}
#GameBoard{
    width:  250px;
    border: 1px solid black;
}
.unselectedSquare{
    height: 20px;
    width: 20px;
    background-color: grey;
}
.selectedSquare{
    height: 20px;
    width: 20px;
    background-color: light-grey;
}

JavaScript

// my work in a fiddle https://jsfiddle.net/pghu0t0h/
var MAX_ROWS = 10;
var MAX_COLS = 10;
var difficulty = 7;
var grid = [];

var squareClass = function(x,y,bomb){
	var newSquare = {
		X: x,
        Y: y,
        isBomb: bomb,
        isexpanded: false,
        number: 0
    };
    return newSquare;
}

var CalculateNumbers = function(){
	for(var r = 0; r < MAX_ROWS; r++){
	    for(var c = 0; c < MAX_COLS; c++){
	    	var bombCount = 0;
	    	var surroundingIndexes=[
		    	{x:c-1, y: r-1},
		    	{x:c-1, y: r},
		    	{x:c-1, y: r+1},

		    	{x:c, y: r-1},
		    	{x:c, y: r+1},

		    	{x:c+1, y: r-1},
		    	{x:c+1, y: r},
		    	{x:c+1, y: r+1},
		    ];
		    for(index in surroundingIndexes){
		    	var curIndex = surroundingIndexes[index];
		    	if(curIndex.x >= 0 && curIndex.x < MAX_COLS && curIndex.y >= 0 && curIndex.y < MAX_ROWS){
		    		if(grid[curIndex.y][curIndex.x].isBomb){
		    			bombCount++;
		    		}
		    	}
		    } 
		    grid[r][c].number = bombCount;  
	    }
	}	
}

var SetupGame = function(){
	var gameBoard = '<table id="gameTable">';
	for(var r = 0; r < MAX_ROWS; r++){
		grid[r]= [];
		gameBoard += '<tr>';
	    for(var c = 0; c < MAX_COLS; c++){
	    	var bomb = (Math.floor((Math.random() * 100) + 1) < (difficulty*2));
	    	grid[r][c] = squareClass(c,r,bomb);
	    	gameBoard += '<td><button id="square_'+c+'_'+r+'" class="unselectedSquare" data-x="'+c+'" data-y="'+r+' data-bomb="'+bomb+'"></button></td>';
	    }
	    gameBoard += '</tr>';
	}	
	gameBoard += '</table>';
	$("#GameBoard").html(gameBoard);
    
    $(".unselectedSquare").click(function(){
        var _x = parseInt($(this).attr("data-x"));
        var _y = parseInt($(this).attr("data-y"));
        var square = grid[_y][_x];
        show(square);
    });

    CalculateNumbers();
}

var show = function(curSqr){
    var squareName = "#square_"+curSqr.X+'_'+curSqr.Y;
    $(squareName).removeClass("unselectedSquare");
   ...