JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<div id="m">&nbsp;</div>

CSS

#m {
    display:inline-block;
    background:#55AAFF;
    border:3px outset #aaaaaa;
    padding:4px;
}
#m #status{ border:2px inset #eeeeee; width:100%; margin:1px 1px 3px 1px; color:#fff; }
#m #status input { text-align:center; }
#m #mineField{ border:2px inset #eeeeee; padding:1px; }
#m span{
    display:inline-block;
    background:#dddddd;
    width:15px;
    height:15px;
    margin:1px 1px 0 0;
    font-family:georgia;
    font-size:8pt;
    text-align:center;
    cursor:pointer;
}
#m #minesLeft{ font-weight:bold; }
#m .tile{  }
#m .mine{ background-color:red; }
#m .clue{ background-color:lightblue; font-weight:bold; }
#m .flag{ background-color:orange; }

JavaScript

var mWidth  = 30;
        var mHeight = 24;
        var mNumber = 80;
 
        var mStatus = 1;            // 0-lose 1-playing 2-win
        var mFlags  = mNumber;
        var mFields = 0;
        var mArr    = [];
        var mClues  = [];
        var mPinned  = [];
        var mColors = ['#000000', '#0000FF', '#008200', '#FF0000', '#000084', '#840000', '#008284', '#840084', '#FF7F00', '#FF00FF', '#FFFFFF'];
 
        
    function revealField(obj){
        if(mStatus==1){
            var tmp = obj.id.slice(1).split('x');
            var i = Number(tmp[0]);
            var j = Number(tmp[1]);
            if(mArr[i][j] == 1) lose(); else {
                for(a=i-1;a<=i+1;a++) for(b=j-1;b<=j+1;b++)  if(mClues[a][b]==0) rollback(a,b,1);
            }
            showField(i,j);
        }
    }
 
    function rollback(i,j) {
        if (i > 0 && i <= mHeight && j >0 && j <= mWidth)
            if(mClues[i][j] == 0 && mArr[i][j]==0){
                var c = 0;
                for(a=i-1;a<=i+1;a++) for(b=j-1;b<=j+1;b++) if(a!=i&&b!=j) c+=mArr[a][b];
                mClues[i][j] = 10;
                showField(i,j);
                if (c == 0) {
                    rollback(i-1,j-1);
                    rollback(i-1,j);
                    rollback(i-1,j+1);
                    rollback(i,j-1);
                    rollback(i,j+1);
                    rollback(i+1,j-1);
                    rollback(i+1,j);
                    rollback(i+1,j+1);
                }
            } else if(mClues[i][j]!=10 && mArr[i][j]==0) showField(i,j);
    }
 
    function showField(i,j){
        var obj = document.getElementById('m'+i+'x'+j);
        if(mArr[i][j] == 1){
            obj.className ='mine';
        } else {
            if(hasClass(obj,'clue')) return;
            if(hasClass(obj,'flag')) {++mFlags; mPinned[i][j] = 0; document.getElementById('minesLeft').innerHTML = mFlags;}
            ++mFields;
            obj.className ='clue';
            obj.innerHTML =...