JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<body>
    <div id="header">
        <h1>Minesweeper</h1>
    </div>
    <div id="nav">
        <ul>
            <li id="playTab" class="active">Play</li>
        </ul>
    </div>

    <div id="centerField">
        <div id="field"></div>
        <div align="center">
            <input type="button" value="I give up" onclick="showAll(playingField)">
        </div>
    </div>

    <div id="leftBody">
        <div id="play" class="show">
            <h2>To get started</h2>
            <p>Enter the number of rows &amp; columns to size the playing field and select the mine density (higher = more mines)</p>
            <form name="fieldSettings">
            <label for="rows">Rows: </label>
                <input type="text" name="rows" size="1">
                <label for="cols">Columns: </label>
                <input type="text" name="cols" size="1">
            <label for="density">Mine Density: </label>
            <select name="density">
                <option value="0.2">20%</option>
                <option value="0.3" selected="selected">30%</option>
                <option value="0.4">40%</option>
            </select>
        <input type="button" value="Generate Playing Field" onclick="startHere()">
    
        </form>
        <h2>How to play</h2>
            <p> Find the empty squares while avoiding the mines</p>
            <p> Click on any square to check it but be careful!  If you click on a mine, the game is over.</p>
            <p> If a square shows a number, it is telling you how many mines lay hidden in the eight surrounding squares.</p>
            <p><strong>Tip:</strong> Right-click a square to flag it as a mine. Right-click again to make it a question mark.  Right-click a third time to clear it.</p>
           Original: <a href="http://andrewackerman.cu.cc/ms.html">http://andrewackerman.cu.cc/ms.html</a> 
        </div>       
        </div>
   </div>
</body>

CSS

body {
    padding:0;
    border:0;
    margin:10px;
    background-color:white;
    font:12px arial;
}

li {
    height: 20px;
    width: 60px;
    text-align: center;
}

#header {
    width:35%;
    height: 33px;
    float: left;
    border-bottom: 3px solid blue;
}

h1 {
    color: blue;
    font:26px arial;
    margin: 0;
}

#nav {
    width:65%;
    float: right;
    border-bottom: 3px solid blue;
}

#nav ul{
    margin: 0;
    padding: 0;
    text-align:right;
}

#nav ul li{
    display: inline-block;
    margin-left: 24px;
    padding: 5px 10px;
    border: 3px solid blue;
    border-bottom: none;
    color: blue;
    background-color:white;
    font: 16px arial;
}

#nav ul li a{
    text-decoration: none;
    cursor:pointer;
}

#nav ul li:hover{
    background-color: blue;
    color: white;
    font-weight: bolder;
}

#nav ul li.active{
    background-color: blue;
    color: white;
    font-weight: bolder;
}

#leftBody {
    float:right;
    width: 400px;
    padding: 10px;
    border: 3px solid blue;
    border-top: none;
    background-color:#6599FF;
}

#leftBody div.hidden {
    display:none;
}

#leftBody div.show {
    background-color:#6599FF;
    color:white;
}
 
#centerField {
    float: left;
    margin: 20px;
}
    
#field {
    border:1px solid black;
    background-color:lightgrey;
    display:inline-block;
}

#field span {
    display:inline-block;
        
}

#field span .unknown {
    height:19px;
    width:19px;
    text-align:center;
    vertical-align:middle;
    border:2px;
    border-style:outset; 
    border-color: white lightgrey lightgrey white;
    color: black;
    background-color:transparent; 
    cursor:pointer;
}

#field span .marked {
    height:19px;
    width:19px;
    text-align:center;
    vertical-align:middle;
    border:2px;
    border-style:outset; 
    border-color: white lightgrey lightgrey white;
    color: black;
    background-color:transparent; 
}

#field span .known {
    height:17px;
    width:17px;
   ...

JavaScript

/*  
Here are the different possible values for each cell on the playing field: 
CU = Clear, Unmarked.  Has not been checked.  The 1st of 2 possible initial values 
BU = Bomb, Unmarked.  Has not been checked.  The 2nd of 2 possible initial values 
BM = Bomb, Marked (correctly) by user as being a bomb.  
BX = Bomb, eXploded.  User just clicked on this cell and lost the game. (This cell will be painted red when field is revealed.)
CM = Clear, Marked (incorrectly) by user as being a bomb.  
C? = Clear, marked as user as possibly a bomb. 
B? = Bomb, marked as user as possibly a bomb. 
0-8 = Clear cell.  Has been checked.  The number refers to how many bombs are in adjacent cells
*/



// this creates the array with bombs and clear cells 
function startHere() {
    document.getElementById("field").innerHTML = "";
    rows = document.fieldSettings.rows.value;
    cols = document.fieldSettings.cols.value;
    density = document.fieldSettings.density.value;
    cells = rows * cols;
    playingField = [];
    for (i=0 ; i<cells ; i++) {
        if (Math.random()<density) {
            playingField.push("BU");
            } else {
            playingField.push("CU");
        }
    }
    drawField(playingField);

// We need this array for later 
    iterateAround = [];
}


// NEW this creates the playing field.  Optimized by appending all the html text to "fieldHtml" and only writing to the DOM once 
function drawField(playingField) {
    var fieldLength = playingField.length;
    var fieldHtml = '';
    for (i=0 ; i<fieldLength ; i++) {
        fieldHtml += '<span id="' + i + '"> <button type="button" class="unknown" onclick="checkCell(' +i + ')" oncontextmenu="markCell(' +i + '); return false"></button></span>';
        if (i%cols === (cols-1)) {
            fieldHtml += '</br>';
        } 
    }
    document.getElementById("field").innerHTML = fieldHtml; 
}


// if a player right-clicks on a cell, we want this to mark the cell somehow - IN PROGRESS 
function...