JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<div id="board"></div>

CSS

.t { border: 1px solid #ccc; width: 10px; height: 10px; font-size: 1px; float: left; }
.r { clear: left; }
.tws { background-color: #f00; }
.dws { background-color: #fcc; }
.dls { background-color: lightblue; }
.tls { background-color: blue; }

JavaScript

(function ($) {
    function padLeft(i, x, c) {
        var s = i.toString();
        while (s.length < x) {
            s = c + s;
        }
        
        return s;
    }
    var $board = $('#board'),
        c = 0, cx = 17,
        r = 0, rx = 17,
        midc = Math.floor(cx / 2),
        maxc = cx - 1,
        midr = Math.floor(rx / 2),
        maxr = rx - 1,
        cs = '', 
        tws, dws, tls, dls,
        sc = [], sci = 0,
        $cell;
sc[0] = []; 
    sc[0][0] = "tws";
sc[0][3] = "dls";
sc[0][8] = "tws";
sc[0][13] = "dls";
sc[0][16] = "tws";
sc[1] = []; 
    sc[1][1] = "dws";
sc[1][6] = "tls";
sc[1][10] = "tls";
sc[1][15] = "dws";
sc[2] = []; 
    sc[2][2] = "dws";
sc[2][7] = "dls";
sc[2][9] = "dls";
sc[2][14] = "dws";
sc[3] = []; 
    sc[3][0] = "dls";
sc[3][3] = "dws";
sc[3][8] = "dls";
sc[3][13] = "dws";
sc[3][16] = "dls";
sc[4] = []; 
    sc[4][4] = "dws";
sc[4][12] = "dws";
sc[5] = []; 
    sc[5][5] = "dws";
sc[5][11] = "dws";
sc[6] = []; 
    sc[6][1] = "tls";
sc[6][6] = "tls";
sc[6][10] = "tls";
sc[6][15] = "tls";
sc[7] = []; 
    sc[7][2] = "dls";
sc[7][7] = "dls";
sc[7][9] = "dls";
sc[7][14] = "dls";
sc[8] = []; 
    sc[8][0] = "tws";
sc[8][3] = "dls";
sc[8][8] = "dws";
sc[8][13] = "dls";
sc[8][16] = "tws";
sc[9] = []; 
    sc[9][2] = "dls";
sc[9][7] = "dls";
sc[9][9] = "dls";
sc[9][14] = "dls";
sc[10] = []; 
    sc[10][1] = "tls";
sc[10][6] = "tls";
sc[10][10] = "tls";
sc[10][15] = "tls";
sc[11] = []; 
    sc[11][5] = "dws";
sc[11][11] = "dws";
sc[12] = []; 
    sc[12][4] = "dws";
sc[12][12] = "dws";
sc[13] = []; 
    sc[13][0] = "dls";
sc[13][3] = "dws";
sc[13][8] = "dls";
sc[13][13] = "dws";
sc[13][16] = "dls";
sc[14] = []; 
    sc[14][2] = "dws";
sc[14][7] = "dls";
sc[14][9] = "dls";
sc[14][14] = "dws";
sc[15] = []; 
    sc[15][1] = "dws";
sc[15][6] = "tls";
sc[15][10] = "tls";    
sc[15][15] = "dws";    
sc[16] = []; 
    sc[16][0] = "tws";
sc[16][3] = "dls";
sc[16][8] = "tws";
sc[16][13] = "dls";
sc[16][16] = "tws";    
    for (;...