JSFiddle - React, Tailwind, and code Playground

by shryme

HTML

<canvas id="canvas" width="450" height="300"></canvas>
<ul>
    <li class="button" id="start_button"><a href="">Start</a>
    </li>
    <li class="button" id="stop_button"><a href="">Stop</a>
    </li>
    <li class="button" id="random_button"><a href="">Randomize</a>
    </li>
    <li class="button" id="clear_button"><a href="">Clear</a>
    </li>
</ul>

CSS

li {
    display: inline;
    margin: 4px;
    padding: 2px;
    background-color: #BBB;
    border: solid 1px black;
}
li a {
    color: black;
    text-decoration: none;
    font-family:"Helvetica Neue", Helvetica, Arial;
    font-weight: bold;
    padding: 2px;
}
li a:hover {
    color: white;
}

JavaScript

$(document).ready(function () {

    var canvas = $("#canvas")[0];



    var ctx = canvas.getContext("2d");

    var ALIVE = 1;
    var DIED = 2;
    var DEAD = 8;
    var NONE = null;


    var alivecolors = {
        1: "C2FFC9",
        2: "215c73",
        3: "#215c73",
        4: "#215c73",
        5: "#17307a",
        6: "#100a45",
        7: "#100a45",
        8: "black"
    };
    var highlightcolors = {
        1: "yellow",
        2: "#552222"
    };

    var w = $("#canvas").width();
    var h = $("#canvas").height();



    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = "black";
    ctx.strokeRect(0, 0, w, h);

    // let's draw some random cells;
    var cs = 3; //cellsize
    var cells = new Array();
    var new_cells = new Array();
    var mousex = 0;
    var mousey = 0;

    var rows = Math.floor(h / cs);
    var cols = Math.floor(w / cs);

    function init() {


        $("#start_button")[0].onclick = start_playing;
        $("#stop_button")[0].onclick = stop_playing;
        $("#random_button")[0].onclick = randomize;
        $("#clear_button")[0].onclick = clear_canvas;
        canvas.onclick = conway_loop;
        init_cells();
        draw_cells();
    }
    init();

    function highlight_cell(e) {
        mousex = Math.floor(e.layerX / cs);
        mousey = Math.floor(e.layerY / cs);
    }

    function highlight_neighbours(x, y) {
        for (var ix = -1; ix <= 1; ix++) {
            for (var iy = -1; iy <= 1; iy++) {
                var nx = x + ix;
                var ny = y + iy;
                if (cells[nx] && cells[nx][ny]) {
                    ctx.fillStyle = highlightcolors[cells[nx][ny]];
                    ctx.fillRect(nx * cs, ny * cs, cs, cs);
                }
            }
        }
    }

    function stop_playing() {
        if (typeof game_loop != "undefined") clearInterval(game_loop);
        clearInterval(game_loop);
        return false;
    }

    function start_playing() {
       ...