одним словом щось таке
<!DOCTYPE html>
<html>
<head>
<title>Best location</title>
<meta charset="UTF-8" />
<style>
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*/
}
</style>
<script>
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");
distances[side_index][index] = 0;
//check if we are new best
best_spot = checkBest(distances, best_spot, side_index, street_size);
//now go back and recalculate distances
var k = 0;
console.log("last_locations:" + last_locations);
if (last_locations[index] >=0) {
k = Math.floor((side_index - last_locations[index]) / 2);
} else {
k = side_index;
}
for(let i = 1; i<=k; i++) {
let current_index = side_index-i;
distances[current_index][index] = i;
let max_distance = Math.max(...distances[current_index]);
best_spot = checkBest(distances, best_spot, current_index, street_size);
let look_back_li = document.getElementById("side"+(current_index));
look_back_li.className = "red";
setTimeout(function () {
look_back_li.className = "black";
}, delay/2);
}
last_locations[index] = side_index;
}
});
setTimeout(function () {
current_li.className = "black";
if (best_spot >=0 ) {
document.getElementById("side"+best_spot).className = "yellow";
}
}, delay);
if (++side_index < size) {
setTimeout(function() {
streetLoop(size, side_index)
}, delay);
} else {
console.log(JSON.stringify(distances));
console.log("best spot:" + best_spot);
}
}) (street_size, 0);
}
function generateStreet () {
best_spot = -1;
street = [];
var street_size = parseInt(document.getElementById("street_size").value);
console.log("street_size:"+street_size);
buildings = document.getElementById("buildings").value.split(",");
console.log("buildings:"+buildings);
console.log("total buildings available:"+buildings.length);
var max_per_side = parseInt(document.getElementById("max_per_side").value);
console.log("max_per_side:"+max_per_side);
var density = parseFloat(document.getElementById("density").value);
console.log("density:"+density);
if (density > 1) density = 1;
if (density <= 0) density = 0.1;
var rand_multilier = buildings.length*Math.floor(1/density);
console.log("rand_multilier:"+rand_multilier);
var street = [];
document.getElementById("streetMapUl").innerHTML = "";
document.getElementById("streetJSON").innerHTML = "";
for (i=0; i<street_size;i++) {
var side = [];
for (j=0; j<max_per_side; j++) {
var l = Math.floor(Math.random() * rand_multilier);
//console.log("random number:"+l);
if (l < buildings.length) {
if (side.indexOf(buildings[l]) === -1) {
side.push(buildings[l]);
}
}
}
street.push(side);
document.getElementById("streetMapUl").innerHTML +=
"<li id='side"+i+"'>"+side.join(',')+"</li>"
}
document.getElementById("streetJSON").innerHTML = JSON.stringify(street);
}
function checkBest(distances, best_spot, current_index, street_size) {
let max_distance = Math.max(...distances[current_index]);
console.log("max distance for " +(current_index)+ ":" + max_distance + " " + distances[current_index]);
if (max_distance < street_size) {
var previous_max = street_size + 1;
if (best_spot > 0 ) {
previous_max = Math.max(...distances[best_spot]);
}
if (previous_max > street_size || max_distance < previous_max ||
max_distance == previous_max && (distances[current_index]).reduce((a, b) => a + b, 0) < (distances[best_spot]).reduce((a, b) => a + b, 0)) {
if (best_spot > 0 ) {
document.getElementById("side"+best_spot).className = "black";
}
best_spot = current_index;
console.log("best spot: " + best_spot + " distance: " + max_distance + " " + distances[current_index]);
}
}
return best_spot;
}
</script>
</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>
