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-row {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px; /* won't work */
    perspective: 1000px;
    /* we hate IE and Opera */
}
.maze-wall, .maze-visited, .maze-non-visited, .maze-target {
    width: 20px;
    height: 20px;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* we hate IE and Opera */
}

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

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

.maze-visited {
    background-color: #00ff00;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.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 queue = [],
            self = this,
            current;

        visitNode(0, 0);

        function visitNode(i, j) {
            if (self.get(i, j) === STATES.NON_VISITED) {
                self.visit(i, j);
                queue.push([i, j]);
            }
            if (self.get(i, j) === STATES.TARGET) {
                queue.push([i, j]);
            }
        }
        while (queue.length) {
            current = queue.shift();
            if (this.get(current[0], current[1]) === 3) {
                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);
        }
        return false;
    }
});

var TableMaze = Maze.extend({
    prefix: 't-',
    init: function (maze, container, classes) {
        this._super(maze);
       ...