JSFiddle - React, Tailwind, and code Playground

by jefferyto

HTML

<html>
        <head>         
                <title> Relex, Destroyer of Worlds </title>
       
                <script type="text/javascript" src="RelejsIsABaws.js"> </script>
       
                <link href="RelecssIsTheBest.css" rel="stylesheet" type="text/css">
               
                <link rel="icon" type="image/png" href="images/minesweeperIcon.png">
        </head>
 <body>
                <center>
                        <select id="fieldSize">
                                <option value="8"> Beginner&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8x8 &nbsp;&nbsp;(10 mines) </option>
                                <option value="9"> Beginner&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9x9 &nbsp;&nbsp;(10 mines) </option>
                                <option value="16"> Intermediate 16x16 (40 mines) </option>
                                <option value="30"> Expert&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30x16 (99 mines) </option>
                        </select>
                       
                        <input type="button" value="Start a new game!" onclick="start();"/>
                </center>
        <br/><br/>
       
        <div id="content"></div>
        <center> <div id="minesweeper"></div> </center>
       
        <br/>
        <center> <img src="images/blank.png" id="smiley" width="200px" height="200px"/> </center>
        <br/><br/>
        <input type="button" value="Show all values" onclick="showAll();"/>
 </body>
</html>

JavaScript

/*
Beginner: 8 × 8 or 9 × 9 field with 10 mines
Intermediate: 16 × 16 field with 40 mines
Expert: 30 × 16 field with 99 mines
*/
 
var field = null;
var gameOver = false;
var ammountClicked = 0;
var fieldSize = null;
var mines = null;
 
function start()
{
        //Clear clicks
        ammountClicked = 0;
       
        //Clear the content div, new game inc
        document.getElementById("content").innerHTML = "";
       
        //Put the smiley as happeh ;
        document.getElementById("smiley").src="images/minesweeper_smiley_happy.png";
       
        //Clear potential gameOver status
        gameOver = false;
       
        //The size of the field (SIZE x SIZE)
        fieldSize = document.getElementById("fieldSize").value;
       
        //Ammount of mines in the field(based on the size of the field)
        mines = ( (fieldSize==8) ? 10 : (fieldSize==9) ? 10 : (fieldSize==16) ? 40 : (fieldSize==30) ? 99 : -1);
       
        //Create the field and fill it
    createField(fieldSize, mines);
       
        //Print will hold the table code, it must all be printed at once or it won't work
        var print = "";
       
        print = "<table border='1px' id='minesweeperTable'>";
        for(var i=0; i<fieldSize; i++)
        {
                print += "<tr>";
                for(var j=0; j<fieldSize; j++)
                {
                        print += "<td class='field' id='"+i+";"+j+"' width='25px' height='25px' onclick='clicked(this.id);'></td>";
                }
                print +="</tr>";
        }
        print += "</table><span id='message'></span>";
        document.getElementById("minesweeper").innerHTML = print;
       
        /*
                for(var i=0; i<fieldSize; i++)
                {
                for(var j=0; j<fieldSize; j++)
                {
                        var ad = i+";"+j;
                        document.getElementById(ad).onclick = function(){clicked(this.id, field);};
                }
               ...