JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<script src="http://bulgariajs.org/files/class.js"></script>
<div id="parent"></div>

CSS

.maze-table td {
    width: 20px;
    height: 20px;
    -webkit-transition: background-color 2s;
    -webkit-transition: background-color 2s;
    transition: background-color 2s;
    /* We don't like M$ */
}

JavaScript

var maze = [[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [1,1,0,1,1,1,0,1,0,1,1,1,1,1,0],
            [0,1,1,1,1,0,0,1,0,1,1,1,0,1,0],
            [0,1,0,0,0,0,0,1,0,1,1,1,0,1,0],
            [0,1,0,1,0,0,1,1,0,1,1,1,0,1,0],
            [0,1,0,1,1,0,1,1,0,1,1,1,0,1,0],
            [0,1,0,1,1,1,1,1,0,1,1,1,0,1,0],
            [0,1,0,1,0,0,1,0,0,1,0,0,0,1,0],
            [0,1,0,1,0,0,1,0,0,1,0,0,0,1,0],
            [0,1,0,1,0,0,1,0,0,1,0,1,1,1,0],
            [0,1,0,1,1,1,1,0,0,1,0,1,1,1,0],
            [0,1,1,1,1,0,1,1,1,1,1,1,1,0,0],
            [0,0,0,0,0,0,0,1,1,1,0,1,1,1,3]];

var STATES = {
    WALL: 0,
    NON_VISITED: 1,
    VISITED: 2,
    TARGET: 3
};

var Maze = Class.extend({
    init: function (maze) {
        this._maze = maze;
    },
    visit: function (x, y) {
        if (!this._maze[x]) return false;
        if (this._maze[x][y] === STATES.NON_VISITED) {
            this._maze[x][y] = STATES.VISITED;
            return true;
        }
        return false;
    },
    bfsAnimated: function () {
        this._queue = this._queue || [[0,0]];
        var self = this,
            current;
        
        function visitNode(x, y) {
            if (!this._maze[x]) return;
            if (this._maze[x][y] === STATES.NON_VISITED) {
                this.visit(x, y);
                this._queue.push([x, y]);
            }
            if (this._maze[x][y] === STATES.TARGET) {
                this._queue.push([x, y]);
            }
        }
        visitNode = visitNode.bind(this);
        
        while (queue.length) {
            current = self._queue.shift();
            if (this._maze[current[0]][current[1]] === STATES.TARGET) {
                return true;
            }
            visitNode(current[0] + 1, current[1])
            visitNode(current[0] - 1, current[1])
            visitNode(current[0], current[1] + 1)
            visitNode(current[0], current[1] - 1)
            self.bfsAnimated();
        }
    },
    render: function () {
       ...