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 + }; })();