JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Spiral</title>
    <style type="text/css">
        img{
            padding:0;
            margin:0;
        }
        td{
            width: 25px;
            height: 25px;
            border: 1px solid black;
            border-collapse: collapse;
            text-align: right;
        }
        td{
            padding: 0;
            margin: 0;
        }
        .rainbow{
            /*mozilla rainbow gradient*/
            background-image: -moz-linear-gradient( left top, right bottom ,
            from(red),
            color-stop(16%, orange),
            color-stop(32%, yellow),
            color-stop(48%, green),
            color-stop(60%, blue),
            color-stop(76%, indigo),
            to(violet));

            /*webkit rainbow gradient*/
            background-image: -webkit-gradient(linear,  left top,  left bottom,
            color-stop(0.00, red),
            color-stop(16%, orange),
            color-stop(32%, yellow),
            color-stop(48%, green),
            color-stop(60%, blue),
            color-stop(76%, indigo),
            color-stop(1.00, violet));
        }
    </style>
</head>
<body>

</body>
</html>

JavaScript

var Spiral = (function(){
function generate(columns, rows){
    var columnGenerator = Array(columns).join('.');
    var rowGenerator = Array(rows).join('.');
    var table = rowGenerator.split('.').map(function(){
        return columnGenerator.split('.')
    });
    return table;
}

function tryTurnRight(table, row, column, index, direction, wall){
    switch (direction) {
        case 'right':
            row++
            if (row in table) {
                walk(table, row, column - 1, index, 'down', wall);
            }
            break;
        case 'up':
            row++;
            if ((column + 1) in table[row]) {
                walk(table, row, column + 1, index, 'right', wall);
            }
            break;
        case 'down':
            row--;
            if ((column - 1) in table[row]) {
                walk(table, row, column - 1, index, 'left', wall);
            }
            break;
        case 'left':
            row--
            if (row in table) {
                walk(table, row, column + 1, index, 'up', wall);
            }
            break;
    }
    return table;
}

function walk(table, row, column, index, direction, wall){
    index = index || 0;
    row = row || 0;
    column = column || 0;

    direction = direction || 'right';

    if (row in table) {
        if (column in table[row]) {
            if (table[row][column] === '') {
                table[row][column] = index;
                switch (direction) {
                    case 'right':
                        column++;
                        break;
                    case 'down':
                        row++;
                        break;
                    case 'left':
                        column--;
                        break;
                    case 'up':
                        row--;
                        break;
                }
                walk(table, row, column, index + 1, direction);
            } else {
                if (wall)return...