diff --git a/images/preview.png b/images/preview.png
index 7ae64245..2b150732 100644
Binary files a/images/preview.png and b/images/preview.png differ
diff --git a/index.html b/index.html
index 86980b54..bafa2939 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,6 @@
#loading-text span:nth-child(2), #mapOverlay > span:nth-child(2) {animation-delay: 1s;}
#loading-text span:nth-child(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;}
@keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}}
-
diff --git a/main.js b/main.js
index 1e819b21..b3614efe 100644
--- a/main.js
+++ b/main.js
@@ -111,14 +111,14 @@ legend.on("mousemove", () => tip("Drag to change the position. Click to hide the
// main data variables
let grid = {}; // initial grapg based on jittered square grid and data
let pack = {}; // packed graph and data
-let seed,
- mapId,
- mapHistory = [],
- elSelected,
- modules = {},
- notes = [];
+let seed;
+let mapId;
+let mapHistory = [];
+let elSelected;
+let modules = {};
+let notes = [];
let rulers = new Rulers();
-let customization = 0; // 0 - no; 1 = heightmap draw; 2 - states draw; 3 - add state/burg; 4 - cultures draw
+let customization = 0;
let biomesData = applyDefaultBiomesSystem();
let nameBases = Names.getNameBases(); // cultures-related data
@@ -155,20 +155,24 @@ let populationRate = +document.getElementById("populationRateInput").value;
let urbanization = +document.getElementById("urbanizationInput").value;
applyStoredOptions();
-let graphWidth = +mapWidthInput.value,
- graphHeight = +mapHeightInput.value; // voronoi graph extention, cannot be changed arter generation
-let svgWidth = graphWidth,
- svgHeight = graphHeight; // svg canvas resolution, can be changed
+
+// voronoi graph extention, cannot be changed arter generation
+let graphWidth = +mapWidthInput.value;
+let graphHeight = +mapHeightInput.value;
+
+// svg canvas resolution, can be changed
+let svgWidth = graphWidth;
+let svgHeight = graphHeight;
+
landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
oceanLayers.append("rect").attr("id", "oceanBase").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
-void (function removeLoading() {
- d3.select("#loading").transition().duration(4000).style("opacity", 0).remove();
- d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove();
- d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
- d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
-})();
+// remove loading screen
+d3.select("#loading").transition().duration(4000).style("opacity", 0).remove();
+d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove();
+d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
+d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
// decide which map should be loaded or generated on page load
void (function checkLoadParameters() {
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index b3fb4ce5..a2d52f57 100644
--- a/modules/ui/3d.js
+++ b/modules/ui/3d.js
@@ -1,20 +1,43 @@
"use strict";
window.ThreeD = (function () {
- // set default options
- const options = {scale: 50, lightness: 0.7, shadow: 0.5, sun: {x: 100, y: 600, z: 1000}, rotateMesh: 0, rotateGlobe: 0.5, skyColor: "#9ecef5", waterColor: "#466eab", extendedWater: 0, labels3d: 0, resolution: 2};
+ const options = {
+ scale: 50,
+ lightness: 0.7,
+ shadow: 0.5,
+ sun: {x: 100, y: 600, z: 1000},
+ rotateMesh: 0,
+ rotateGlobe: 0.5,
+ skyColor: "#9ecef5",
+ waterColor: "#466eab",
+ extendedWater: 0,
+ labels3d: 0,
+ resolution: 2
+ };
// set variables
- let Renderer, scene, camera, controls, animationFrame, material, texture, geometry, mesh, ambientLight, spotLight, waterPlane, waterMaterial, waterMesh, raycaster;
-
- const drawCtx = document.createElement("canvas").getContext("2d");
- const drawSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
- document.body.appendChild(drawSVG);
+ let Renderer,
+ scene,
+ camera,
+ controls,
+ animationFrame,
+ material,
+ texture,
+ geometry,
+ mesh,
+ ambientLight,
+ spotLight,
+ waterPlane,
+ waterMaterial,
+ waterMesh,
+ raycaster;
let labels = [];
let icons = [];
let lines = [];
+ const context2d = document.createElement("canvas").getContext("2d");
+
// initiate 3d scene
const create = async function (canvas, type = "viewMesh") {
options.isOn = true;
@@ -210,16 +233,16 @@ window.ThreeD = (function () {
}
async function createTextLabel({text, font, size, color, quality}) {
- drawCtx.font = `${size * quality}px ${font}`;
- drawCtx.canvas.width = drawCtx.measureText(text).width;
- drawCtx.canvas.height = size * quality * 1.25; // 25% margin as text can overflow the font size
- drawCtx.clearRect(0, 0, drawCtx.canvas.width, drawCtx.canvas.height);
+ context2d.font = `${size * quality}px ${font}`;
+ context2d.canvas.width = context2d.measureText(text).width;
+ context2d.canvas.height = size * quality * 1.25; // 25% margin as text can overflow the font size
+ context2d.clearRect(0, 0, context2d.canvas.width, context2d.canvas.height);
- drawCtx.font = `${size * quality}px ${font}`;
- drawCtx.fillStyle = color;
- drawCtx.fillText(text, 0, size * quality);
+ context2d.font = `${size * quality}px ${font}`;
+ context2d.fillStyle = color;
+ context2d.fillText(text, 0, size * quality);
- return textureToSprite(drawCtx.canvas.toDataURL(), drawCtx.canvas.width / quality, drawCtx.canvas.height / quality);
+ return textureToSprite(context2d.canvas.toDataURL(), context2d.canvas.width / quality, context2d.canvas.height / quality);
}
function get3dCoords(baseX, baseY) {
@@ -578,5 +601,21 @@ window.ThreeD = (function () {
});
}
- return {create, redraw, update, stop, options, setScale, setLightness, setSun, setRotation, toggleLabels, toggleSky, setResolution, setColors, saveScreenshot, saveOBJ};
+ return {
+ create,
+ redraw,
+ update,
+ stop,
+ options,
+ setScale,
+ setLightness,
+ setSun,
+ setRotation,
+ toggleLabels,
+ toggleSky,
+ setResolution,
+ setColors,
+ saveScreenshot,
+ saveOBJ
+ };
})();