JSFiddle - React, Tailwind, and code Playground

by jackwanders

HTML

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

CSS

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
}
#board {
    margin: 10px;
    border: solid #aaa;
    border-width: 1px 0 0 1px;
}
.cell {
    float: left;
    border: solid #aaa;
    border-width: 0 1px 1px 0;
}
.hover-row,
.hover-col {
    background: #f9f9f9;
}

JavaScript

var Game = {
    gridSize: 40,
    cellSize: 10,
    allCells: [],
    filterCells: function(filter,invert) {
        return $.grep(this.allCells,filter,invert);
    },
    init: function() {
        var board = $('#board'),
            cellSource = $('<div class="cell">'),
            cell, x, y,
            that = this;
    
        board.css({
            height: this.gridSize * this.cellSize + 'px',
            width: this.gridSize * this.cellSize + 'px'
        });
        cellSource.css({
            height: this.cellSize - 1 + 'px',
            width: this.cellSize - 1 + 'px'
        });
        for (x = 0; x < this.gridSize; x++) {
            for (y = 0; y < this.gridSize; y++) {
                cell = cellSource.clone(true);
                cell.attr('id', x + '-' + y).data({
                    x: x,
                    y: y,
                    neighbors: 0
                }).appendTo(board);
                this.allCells.push(cell);
            }
        }
    }
}

$(function() {
    Game.init();
});