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-wall, .maze-visited, .maze-non-visited, .maze-target {
    width: 20px;
    height: 20px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.maze-wall {
    background-color: #000;
}

.maze-non-visited {
    background-color: #0000ff;
}

.maze-visited {
    background-color: #00ff00;
}

.maze-target {
    background-color: #ff0000;
}

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,
    VISITED: 2,
    NON_VISITED: 1,
    TARGET: 3
};

var Maze = Class.extend({
    init: function (lst) {
        this._graph = lst;
    },
    visit: function (i, j) {
        if (this._graph[i][j] !== 0) {
            this._graph[i][j] = 2;
            return true;
        }
        return false;
    },
    get: function (i, j) {
        if (!this._graph[i]) return undefined;
        return this._graph[i][j];
    },
    bfs: function () {
        var self = this,
            current;
        this._queue = this._queue || [[0,0]];

        if (!this._queue.length) return false;

        setTimeout(function () {
            current = self._queue.shift();
            if (self.get(current[0], current[1]) === 3) {
                return true;
            }
            self._bfsVisitNode(current[0] + 1, current[1]);
            self._bfsVisitNode(current[0] - 1, current[1]);
            self._bfsVisitNode(current[0], current[1] + 1);
            self._bfsVisitNode(current[0], current[1] - 1);
            self.bfs();
        }, this._timeout);
    },
    _bfsVisitNode: function (i, j) {
        if (this.get(i, j) === STATES.NON_VISITED) {
            this.visit(i, j);
            this._queue.push([i, j]);
        }
        if (this.get(i, j) === STATES.TARGET) {
            this._queue.push([i, j]);
        }
    },
    _timeout: 100
});

var TableMaze =...