refactor: cleaup, format file

index.html

@@ -5511,10 +5511,7 @@
           <button id="markersOverviewRefresh" data-tip="Refresh the Overview screen" class="icon-cw"></button>
           <input type="hidden" id="addedMarkerType" name="addedMarkerType" value="" />
           <span id="markerTypeSelectorWrapper">
-              <button 
+            <button id="markerTypeSelector" data-tip="Select marker type for newly added markers.">❓</button>
-              id="markerTypeSelector"
-              data-tip="Select marker type for newly added markers."
-            >❓</button>
             <div id="markerTypeSelectMenu"></div>
           </span>
           <button
@@ -5677,8 +5674,6 @@
             </select>
           </div>
 
-
-
           <div data-tip="Set sun position (x, y, z) to define shadows">
             <div>Sun position:</div>
             <input id="options3dSunX" type="number" min="-2500" max="2500" step="100" style="width: 4.7em" />
@@ -5686,8 +5681,6 @@
             <input id="options3dSunZ" type="number" min="-1500" max="1500" step="100" style="width: 4.7em" />
           </div>
 
-
-
           <div data-tip="Toggle 3d labels" style="margin: 0.6em 0 0.3em -0.2em">
             <input id="options3dMeshLabels3d" class="checkbox" type="checkbox" />
             <label for="options3dMeshLabels3d" class="checkbox-label"><i>Show 3D labels</i></label>
@@ -5698,9 +5691,12 @@
             <label for="options3dMeshSkyMode" class="checkbox-label"><i>Show sky and extend water</i></label>
           </div>
 
-          <div data-tip="Toggle 3d subdivision. Increases the polygon count. Opening this will take some time. WARNING: Can smooth the sharp points in progress." style="margin: 0.6em 0 0.3em -0.2em">
+          <div
+            data-tip="Increases the polygon count to smooth the sharp points. Please note that it can take some time to calculate"
+            style="margin: 0.6em 0 0.3em -0.2em"
+          >
             <input id="options3dSubdivide" class="checkbox" type="checkbox" />
-            <label for="options3dSubdivide" class="checkbox-label"><i>Smooth Geometry.</i></label>
+            <label for="options3dSubdivide" class="checkbox-label"><i>Smooth geometry</i></label>
           </div>
 
           <div data-tip="Set Sun Color" id="options3dSunColorSection">

modules/ui/3d.js

@@ -96,11 +96,11 @@ window.ThreeD = (function () {
 
   const setScale = function (scale) {
     options.scale = scale;
-    let vertices = geometry.getAttribute('position');
+    let vertices = geometry.getAttribute("position");
     for (let i = 0; i < vertices.count; i++) {
       vertices.setZ(i, getMeshHeight(i));
     }
-    geometry.setAttribute('position',vertices);
+    geometry.setAttribute("position", vertices);
     geometry.verticesNeedUpdate = true;
     geometry.computeVertexNormals();
     geometry.verticesNeedUpdate = false;
@@ -112,7 +112,7 @@ window.ThreeD = (function () {
     options.sunColor = color;
     spotLight.color = new THREE.Color(color);
     render();
-  }
+  };
 
   const setResolutionScale = function (scale) {
     options.resolutionScale = scale;
@@ -170,7 +170,7 @@ window.ThreeD = (function () {
   const toggle3dSubdivision = function () {
     options.subdivide = !options.subdivide;
     redraw();
-  }
+  };
 
   const toggleWireframe = function () {
     options.wireframe = !options.wireframe;
@@ -275,7 +275,11 @@ window.ThreeD = (function () {
     context2d.fillStyle = color;
     context2d.fillText(text, 0, size * quality);
 
-    return textureToSprite(context2d.canvas.toDataURL(), context2d.canvas.width / quality, context2d.canvas.height / quality);
+    return textureToSprite(
+      context2d.canvas.toDataURL(),
+      context2d.canvas.width / quality,
+      context2d.canvas.height / quality
+    );
   }
 
   function get3dCoords(baseX, baseY) {
@@ -332,8 +336,20 @@ window.ThreeD = (function () {
     city_icon_material.wireframe = options.wireframe;
     const town_icon_material = new THREE.MeshPhongMaterial({color: townOptions.iconColor});
     town_icon_material.wireframe = options.wireframe;
-    const city_icon_geometry = new THREE.CylinderGeometry(cityOptions.iconSize * 2, cityOptions.iconSize * 2, cityOptions.iconSize, 16, 1);
+    const city_icon_geometry = new THREE.CylinderGeometry(
-    const town_icon_geometry = new THREE.CylinderGeometry(townOptions.iconSize * 2, townOptions.iconSize * 2, townOptions.iconSize, 16, 1);
+      cityOptions.iconSize * 2,
+      cityOptions.iconSize * 2,
+      cityOptions.iconSize,
+      16,
+      1
+    );
+    const town_icon_geometry = new THREE.CylinderGeometry(
+      townOptions.iconSize * 2,
+      townOptions.iconSize * 2,
+      townOptions.iconSize,
+      16,
+      1
+    );
     const line_material = new THREE.LineBasicMaterial({color: cityOptions.iconColor});
 
     // burg labels
@@ -439,48 +455,45 @@ window.ThreeD = (function () {
 
       img.onload = function () {
         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-        canvas.toBlob((blob)=>{
+        canvas.toBlob(blob => {
-          const blobObj = window.URL.createObjectURL(blob)
+          const blobObj = window.URL.createObjectURL(blob);
           window.setTimeout(() => {
             canvas.remove();
             window.URL.revokeObjectURL(blobObj);
           }, 100);
           resolve(blobObj);
-        })
+        });
-      }
+      };
-    })
+    });
   }
   // create a mesh from pixel data
   async function createMesh(width, height, segmentsX, segmentsY) {
-
     if (texture) texture.dispose();
     if (!options.wireframe) {
-      //Try loading skin texture.
       texture = new THREE.TextureLoader().load(await createMeshTextureUrl(), render);
       texture.needsUpdate = true;
       texture.anisotropy = Renderer.capabilities.getMaxAnisotropy();
     }
 
-
-
     if (material) material.dispose();
-    if(options.wireframe){
     material = new THREE.MeshLambertMaterial();
+
+    if (options.wireframe) {
       material.wireframe = true;
     } else {
-      material = new THREE.MeshLambertMaterial();
       material.map = texture;
       material.transparent = true;
     }
 
-
     if (geometry) geometry.dispose();
     geometry = new THREE.PlaneGeometry(width, height, segmentsX - 1, segmentsY - 1);
-    let vertices = geometry.getAttribute('position');
+
+    let vertices = geometry.getAttribute("position");
     for (let i = 0; i < vertices.count; i++) {
       vertices.setZ(i, getMeshHeight(i));
     }
-    geometry.setAttribute('position',vertices);
+
+    geometry.setAttribute("position", vertices);
     geometry.computeVertexNormals();
     if (mesh) scene.remove(mesh);
     if (options.subdivide) {
@@ -548,7 +561,10 @@ window.ThreeD = (function () {
 
     // scene
     scene = new THREE.Scene();
-    scene.background = new THREE.TextureLoader().load("https://i0.wp.com/azgaar.files.wordpress.com/2019/10/stars-1.png", render);
+    scene.background = new THREE.TextureLoader().load(
+      "https://i0.wp.com/azgaar.files.wordpress.com/2019/10/stars-1.png",
+      render
+    );
 
     // Renderer
     Renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true});

versioning.js

@@ -2,11 +2,8 @@
 
 // version and caching control
 
-
-
 const version = "1.89.39"; // generator version, update each time
 
-
 {
   document.title += " v" + version;
   const loadingScreenVersion = document.getElementById("versionText");
@@ -32,7 +29,7 @@ const version = "1.89.39"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
-        <li>New 3D Scene options and quality improvements.</li>
+        <li>New 3D scene options</li>
         <li>Autosave feature (in Options)</li>
         <li>Google translation support (in Options)</li>
         <li>Religions can be edited and redrawn like cultures</li>