JSFiddle - React, Tailwind, and code Playground

by cincodenada

HTML

<html>
    <head>
        <title>GrassGrower</title>
    </head>
    <body>
        <div id="status"></div>
        <div id="graphs">
            <div id="field"></div>
            <div id="hist"></div>
            <div style="clear:both;"></div>
        </div>
        <div>
            <div>
                Colors: <br/>
                <label><input type="radio" name="viewwhich" id="viewtime" value="time" checked="checked">Avg. Time Taken</label><br/>
                <label><input type="radio" name="viewwhich" id="viewwins" value="wins">Win Percentage</label><br/>
                <label><input type="radio" name="viewwhich" id="viewfield" value="field">Final Result</label><br/>
            </div>
            Size: <input type="text" id="width" value="9"/> x <input type="text" id="height" value="9"/><br/>
            Number of runs: <input type="text" id="numtimes" value="5"/><br/>
            Animation delay: <input type="text" id="delay" value="50"/> ms<br/>
            <input type="button" id="btngenerate" value="Generate!"/>
            <input type="button" id="btnreset" value="Reset"/>
            <br/>
            <input type="button" id="btnrun" value="Run!"/>
            <input type="button" id="btnstop" value="Stop!"/>
            <br/>
            <!-- Started this, but decided to leave it out
            <input type="button" id="btnadd" value="Add player"/>
            <input type="button" id="btnreset" value="Reset players"/>
            <br/>
            -->
            <div>
                Mode:<br/>
                <label><input type="radio" name="runmode" id="modeanim" value="anim" checked="checked">Animate (slow but pretty)</label><br/>
                <label><input type="radio" name="runmode" id="modemed" value="med">Medium (faster and stable, no animation)</label><br/>
                <label><input type="radio" name="runmode" id="modefast" value="fast">Fastest (much quicker, but may crash!)</label><br/>
            </div>
            <input...

CSS

table {
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
}
td {
    width: 10px;
    height: 10px;
    border: 1px solid #000000;
    margin: 0px;
    padding: 0px;
}

.type_0 { background-color: #CCCCCC !important; }   /* Non-dirt */
.type_1 { background-color: #996633 !important; }   /* Bare Dirt */
.type_2 { background-color: #006600 !important; }   /* Grass */
.type_3 { background-color: #0000FF !important; }   /* Winner! */
.type_4 { background-color: #00FFFF !important; }   /* Taken */

#graphs {
    clear:both;
}
#field {
    float:left;
}
#hist {
    float: left;
    width: 200px;
    clear: right;
}
.histbar { 
    float:left; 
    clear:both; 
    background-color: #000099;
    height: 10px;
}

#leftpane { 
    float:left; 
    border: 2px solid #666666;
    background: #999999;
    margin: 0px 20px 20px 0px;
    padding: 15px;
}

#delay, #height, #width { width: 20px; }
#numtimes { width: 30px; }

JavaScript

var base64chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
generateField();

$('#btngenerate').click(generateField);
$('#btnreset').click(function() { drawField(initialVal); });
$('#btnrun').click(runSim); 
$('#btnstop').click(function() { clearTimeout(curtimeout); }); 
$("input:radio[name='viewwhich']").click( function() {
    if(this.value == 'wins') {
        drawGraphs(wins, topct); 
    } else if(this.value == 'field') {
        drawField(nextFrame, true);
    } else {
        drawGraphs(avgTime, toavg);
    }
});
$("input:radio[name='runmode']").click( function() {
    runmode = $("input:radio[name='runmode']:checked").val();
});

$('#btnsave').click(function() {
    jsonout = {};
    jsonout['width'] = width;
    jsonout['height'] = height;
    jsonout['runs'] = numloops;
    
    readBoard();
    jsonout['field'] = initialVal;
    
    mapkey = gen64(jsonout);
    url = window.location.href;
    //Strip off any existing query
    qpos = url.indexOf('?');
    if(qpos > -1) { url = url.substring(0,qpos) }
    $('#permalink').hide().attr('href',url + '?m=' + mapkey).fadeIn();

    $('#savedboard').val(JSON.stringify(jsonout));
});

$('#btnload').click(function() {
    jsonin = JSON.parse($('#savedboard').val());
    
    width = jsonin['width'];
    height = jsonin['height'];
    numloops = jsonin['runs'];
    $('#width').val(width);
    $('#height').val(height);
    $('#numtimes').val(numloops);
           
    generateField();
    initialVal = jsonin['field'];
    drawField(initialVal, true);
});

function gen64(config) {
    var b64string;
    //Encode in base64
    //Format: 
    //6-bit version
    //12-bit width, 12-bit height
    //Field data, top-to-bottom, left-to-right
    b64string = 'A'; //Version 0
    b64string += b64str(config['width'],2);
    b64string += b64str(config['height'], 2);
    
    curpos = 0;
    curbyte = 0;
    for(x = 0; x < config['width']; x++) {
        for(y = 0; y < config['height']; y++) {
    ...