Optimized Reused Values for Loops

modules/ui/burg-editor.js

@@ -181,7 +181,8 @@ function editBurg(id) {
     const basic = group.id === "cities" || group.id === "towns";
 
     const burgsInGroup = [];
-    for (let i=0; i < group.children.length; i++) {
+    let numberOfChildren = group.children.length;
+    for (let i=0; i < numberOfChildren; i++) {
       burgsInGroup.push(+group.children[i].dataset.id);
     }
     const burgsToRemove = burgsInGroup.filter(b => !pack.burgs[b].capital);

modules/ui/burgs-overview.js

@@ -422,12 +422,14 @@ function overviewBurgs() {
   function importBurgNames(dataLoaded) {
     if (!dataLoaded) {tip("Cannot load the file, please check the format", false, "error"); return;}
     const data = dataLoaded.split("\r\n");
-    if (!data.length) {tip("Cannot parse the list, please check the file format", false, "error"); return;}
+    let dataLength = data.length;
+    let numberOfBurgs = burgs.length;
+    if (!dataLength) {tip("Cannot parse the list, please check the file format", false, "error"); return;}
 
     let change = [], message = `Burgs will be renamed as below. Please confirm`;
     message += `<table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`;
     const burgs = pack.burgs.filter(b => b.i && !b.removed);
-    for (let i=0; i < data.length && i <= burgs.length; i++) {
+    for (let i=0; i < dataLength && i <= numberOfBurgs; i++) {
       const v = data[i];
       if (!v || !burgs[i] || v == burgs[i].name) continue;
       change.push({id:burgs[i].i, name: v});
@@ -442,7 +444,8 @@ function overviewBurgs() {
       buttons: {
         Cancel: function() {$(this).dialog("close");},
         Confirm: function() {
-          for (let i=0; i < change.length; i++) {
+          let changeLength = change.length;
+          for (let i=0; i < changeLength; i++) {
             const id = change[i].id;
             pack.burgs[id].name = change[i].name;
             burgLabels.select("[data-id='" + id + "']").text(change[i].name);

modules/ui/editors.js

@@ -620,7 +620,8 @@ function selectIcon(initial, callback) {
     ];
 
     let row = "";
-    for (let i=0; i < icons.length; i++) {
+    let numberOfIcons = icons.length;
+    for (let i=0; i < numberOfIcons; i++) {
       if (i%17 === 0) row = table.insertRow(i/17|0);
       const cell = row.insertCell(i%17);
       cell.innerHTML = icons[i];

modules/ui/elevation-profile.js

@@ -52,7 +52,8 @@ function showElevationProfile(data, routeLen, isRiver) {
   let lastBurgCell = 0;
   let burgCount = 0;
   let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, mih: 100, mah: 0, points:[]};
-  for (let i=0, prevB=0, prevH=-1; i  <data.length; i++) {
+  let dataLength = data.length;
+  for (let i=0, prevB=0, prevH=-1; i < dataLength; i++) {
     let cell = data[i];
     let h = pack.cells.h[cell];
     if (h < 20) h = 20;
@@ -93,7 +94,8 @@ function showElevationProfile(data, routeLen, isRiver) {
   function downloadCSV() {
     let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
 
-    for (let k=0; k < chartData.points.length; k++) {
+    let numberOfPoints = chartData.points.length;
+    for (let k=0; k < numberOfPoints; k++) {
       let cell = chartData.cell[k];
       let burg = pack.cells.burg[cell];
       let biome = pack.cells.biome[cell];
@@ -136,15 +138,16 @@ function showElevationProfile(data, routeLen, isRiver) {
   }
 
   function draw() {
+    let dataLength = data.length;
     chartData.points = [];
     let heightScale = 100 / parseInt(epScaleRange.value);
 
     heightScale *= .9; // curves cause the heights to go slightly higher, adjust here
 
-    const xscale = d3.scaleLinear().domain([0, data.length]).range([0, chartWidth]);
+    const xscale = d3.scaleLinear().domain([0, dataLength]).range([0, chartWidth]);
     const yscale = d3.scaleLinear().domain([0, chartData.ma * heightScale]).range([chartHeight, 0]);
 
-    for (let i=0; i<data.length; i++) {
+    for (let i=0; i < dataLength; i++) {
       chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]);
     }
 
@@ -157,12 +160,16 @@ function showElevationProfile(data, routeLen, isRiver) {
     let colors = getColorScheme();
     const landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
 
-    if (chartData.mah == chartData.mih) {
-      landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:" + getColor(chartData.mih, colors) + ";stop-opacity:1");
-      landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:" + getColor(chartData.mah, colors) + ";stop-opacity:1");
+    let mihChartData = chartData.mih;
+    let mahChartData = chartData.mah;
+
+    if (chartData.mah == mihChartData) {
+      landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:" + getColor(mihChartData, colors) + ";stop-opacity:1");
+      landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:" + getColor(mahChartData, colors) + ";stop-opacity:1");
     } else {
-      for (let k=chartData.mah; k >= chartData.mih; k--) {
-        let perc = 1 - (k - chartData.mih)  / (chartData.mah - chartData.mih);
+
+      for (let k=mahChartData; k >= mihChartData; k--) {
+        let perc = 1 - (k - mihChartData)  / (mahChartData - mihChartData);
         landdef.append("stop").attr("offset", perc*100 + "%").attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1");
       }
     }
@@ -263,13 +270,14 @@ function showElevationProfile(data, routeLen, isRiver) {
     const add = 15;
 
     let xwidth = chartData.points[1][0] - chartData.points[0][0];
-    for (let k=0; k<chartData.points.length; k++) {
+    let numberOfPoints = chartData.points.length;
+    for (let k=0; k < numberOfPoints; k++) {
       if (chartData.burg[k] > 0) {
         let b = chartData.burg[k];
 
         let x1 = chartData.points[k][0]; // left side of graph by default
         if (k > 0) x1 += xwidth/2; // center it if not first
-        if (k == chartData.points.length-1) x1 = chartWidth + xOffset; // right part of graph
+        if (k == numberOfPoints-1) x1 = chartWidth + xOffset; // right part of graph
         y1+=add;
         if (y1 >= yOffset) y1 = add;
 

modules/ui/layers.js

@@ -728,7 +728,7 @@ function drawStates() {
     const chain = []; // vertices chain to form a path
     let land = vertices.c[start].some(c => cells.h[c] >= 20 && cells.state[c] !== t);
     function check(i) {state = cells.state[i]; land = cells.h[i] >= 20;}
-    
+
     for (let i=0, current = start; i === 0 || current !== start && i < 20000; i++) {
       const prev = chain[chain.length - 1] ? chain[chain.length - 1][0] : -1; // previous vertex in chain
       chain.push([current, state, land]); // add current vertex to sequence
@@ -760,7 +760,7 @@ function drawBorders() {
   const sUsed = new Array(pack.states.length).fill("").map(a => []);
   const pUsed = new Array(pack.provinces.length).fill("").map(a => []);
 
-  for (let i=0; i < cells.i.length; i++) {
+  for (let i=0; i < n; i++) {
     if (!cells.state[i]) continue;
     const p = cells.province[i];
     const s = cells.state[i];

modules/ui/options.js

@@ -295,7 +295,8 @@ function applyStoredOptions() {
   if (localStorage.getItem("distanceUnit")) applyOption(distanceUnitInput, localStorage.getItem("distanceUnit"));
   if (localStorage.getItem("heightUnit")) applyOption(heightUnit, localStorage.getItem("heightUnit"));
 
-  for (let i=0; i < localStorage.length; i++) {
+  let localStorageLength = localStorage.length;
+  for (let i=0; i < localStorageLength; i++) {
     const stored = localStorage.key(i), value = localStorage.getItem(stored);
     const input = document.getElementById(stored+"Input") || document.getElementById(stored);
     const output = document.getElementById(stored+"Output");

modules/ui/style.js

@@ -1111,7 +1111,8 @@ function addFonts(url) {
 // Update font list for Label and Burg Editors
 function updateFontOptions() {
   styleSelectFont.innerHTML = "";
-  for (let i=0; i < fonts.length; i++) {
+  let numberOfFonts = fonts.length;
+  for (let i=0; i < numberOfFonts; i++) {
     const opt = document.createElement('option');
     opt.value = i;
     const font = fonts[i].split(':')[0].replace(/\+/g, " ");

modules/ui/tools.js

@@ -109,7 +109,8 @@ function regenerateBurgs() {
   const burgsCount = manorsInput.value == 1000 ? rn(sorted.length / 5 / (grid.points.length / 10000) ** .8) + states.length : +manorsInput.value + states.length;
   const spacing = (graphWidth + graphHeight) / 150 / (burgsCount ** .7 / 66); // base min distance between towns
 
-  for (let i=0; i < sorted.length && burgs.length < burgsCount; i++) {
+  let sortedLength = sorted.length;
+  for (let i=0; i < sortedLength && burgs.length < burgsCount; i++) {
     const id = burgs.length;
     const cell = sorted[i];
     const x = cells.p[cell][0], y = cells.p[cell][1];