Best street side

Calculate location of best street side

by Vo_Vik

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Best location</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app">
		<h2>Street params</h2>
		<div id="params">
			<label>Coma separated list of available buildings</label>
			<br/><input size="256" id="buildings" value="shop,gym,school" />
			<br/><label>Street size<label>
			<br/><input id="street_size" value="10" />
			<br/><label>Max buildings per side</label>
			<br/><input id="max_per_side" value="3" />
			<br/><label>Search for buildings(Coma separated list)</label>
			<br/><input id="search" size="256" value="shop,gym,school" />
      <br/><label>Density coefficient (0-1]</label>
			<br/><input id="density" value="0.25" />
      <br/><label>Visualization delay [0-1000]</label>
      <br/><input id="delay" value="500" />
			<br/><button type="button" onclick="generate()" id="run">Generate Street</button>
      <button type="button" onclick="run()" id="run">Find Best Spot</button>
		</div>
    <div id="streetJSON"></div>
    <div id="streetMap">
      <ul id="streetMapUl"></ul>
    </div>
	</div>
</body>

</html>

CSS

ul {
  list-style: none; /* Remove default bullets */
}
ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: black; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.black::before {
  color: black;  /*bullet color*/
}
.green::before {
  color: green;  /*bullet color*/
}
.red::before {
  color: red;  /*bullet color*/
}
.yellow::before {
  color: yellow;  /*bullet color*/
}

JavaScript

var street = [];
var buildings = [];
var delay = 1000;
var best_spot = -1;
function generate() {
  console.log("start street generation");
  generateStreet();
};
function run() {
  var distances = [];
  var last_locations = [];
  var best_spot = -1;
	var search = document.getElementById("search").value.split(",");
  console.log("search:"+search);
  console.log("total buildings to search:"+search.length);
  var NotFoundException = {};
  try {
    search.forEach(function (search_building, index){
      if (buildings.indexOf(search_building) === -1) {
        NotFoundException.message = search_building + " not found";
        throw NotFoundException;
      }
      last_locations[index] = -1;
    });
  } catch (e) {
  	if (e !== NotFoundException) throw e;
    console.log(NotFoundException.message);
	}
  
  delay = parseInt(document.getElementById("delay").value);
  if (delay > 1000) delay = 1000;
  if (delay < 0) delay = 0;
  console.log("delay:"+delay);
  
  try {
  	street = JSON.parse(document.getElementById("streetJSON").innerHTML);
  } catch (e) {
  	return;
  }
  console.log("street size:"+street.length);

  if (!street.length) return;
  var street_size = street.length;
  
  (function streetLoop(size, side_index) {
  	console.log("Checking side #"+side_index);
    //console.log(document.getElementById("side"+side_index).innerHTML);
  	var current_li = document.getElementById("side"+side_index);
    current_li.className = "green";
    distances.push([]);
  	search.forEach(function (search_building, index){
    	if (side_index > 0) {
      	distances[side_index].push(distances[side_index-1][index] + 1);
        if(distances[side_index][index] > street_size) 
        	distances[side_index][index] = street_size;
      } else {
      	distances[side_index].push(street_size);
      }
    });
    search.forEach(function (search_building, index){
    	if (street[side_index].indexOf(search_building) !== -1) {
        console.log(search_building + " found");
       ...