path finder

by thebabydino

HTML

<header class="controls">
    <h1>Path Finder</h1>
    <button id="decr" class="size-ctrl">-</button>
    <div id="grid-size">10</div>
    <button id="incr" class="size-ctrl">+</button>
    <button id="change-grid">Set Grid</button>
    <button id="find-path" disabled>Find a path</button>
</header>
<div id="grid">
</div>

CSS

body {
    text-align: center;
}
.controls h1 {
    float: left;
}
.controls button, 
.controls div {
    display: inline-block;
}
.size-ctrl {
    width: 25px;
}
#grid-size {
    width: 40px;
}
#change-grid {
    width: 70px;
}
#grid {
    margin: 25px;
    display: inline-block;
}
.row, col {
    margin: -10px 0;
    padding: 0;
    
}
.col {
    width: 25px;
    height: 25px;
    border-top: dotted 1px grey;
    border-left: dotted 1px grey;
    display: inline-block;
    font: 8px monospace;
    -webkit-transition: 2s;
     -moz-transition: 2s;
      -ms-transition: 2s;
       -o-transition: 2s;
          transition: 2s;
}
.o {
    background: lightblue;
}
.c {
    background: lightgrey;
}
.path {
    background: orangered;
}

JavaScript

var sizeel = document.getElementById("grid-size"),
    grid = [], size = parseInt(sizeel.innerHTML,10), 
    decr = document.getElementById("decr"),
    incr = document.getElementById("incr"),
    chg = document.getElementById("change-grid"),
    find = document.getElementById("find-path"),
    gridHTML = document.getElementById("grid");

decr.addEventListener('click', function(ev) {
    if(size > 1){
        sizeel.innerHTML = --size;
        if(size < 19) incr.disabled = false;
    }
    if(size == 1) this.disabled = true;
}, false);

incr.addEventListener('click', function(ev) {
    if(size < 19) {
        sizeel.innerHTML = ++size;
        if(size > 1) decr.disabled = false;
    }
    if(size == 19) this.disabled = true;
}, false);

chg.addEventListener('click', function(ev) {
    grid = [];
    var b = "";
    for(var i = 0; i < size; i++) {
        grid[i] = [];
        b += "<div class='row'>";
        for(var j = 0; j < size; j++) {
            var celval = (Math.random() > .41), 
                k = i * size + j,
                cls = celval?"o":"c";
            grid[i].push(celval);
            b += "<div id='idx-" + k + "' class='col " + cls + "'>" + k + "</div>";
        }
        b += "</div>"
    }
    gridHTML.innerHTML = b;
    find.disabled = false;
}, false);

find.addEventListener('click', function(ev) {
    var pset = anyPath();
    if(pset.length > 0) {
        var pmin = pset[0];
        for(var i = 0; i < pset.length; i++) {
            if(pset[i].length < pmin.length) pmin = pset[i];
        }
        for(var i = 0; i < pmin.length; i++) {
            var cellid = "idx-" + pmin[i], 
                pathcell = document.getElementById(cellid);
            pathcell.classList.add('path');
        }
        console.log("path");
        console.log(pmin);
    }
    else alert("Sorry, no path could be found!");
    this.disabled = true;
}, false);

var initVis = function(){
    var visited = [];
    for(var i = 0; i < size; i++) {
       ...