From 8767893d72969b0eecef6669bf700447e6fb106a Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 6 Mar 2021 00:36:22 +0300 Subject: [PATCH] v1.6.10 - updated points number input to a generic style --- index.html | 6 ++-- main.js | 28 +++-------------- modules/heightmap-generator.js | 56 +++++++++++++++++----------------- modules/ui/options.js | 29 ++++++++++++------ 4 files changed, 56 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index b68f1b75..27e2b3be 100644 --- a/index.html +++ b/index.html @@ -938,14 +938,14 @@ - + Points number - + - 10K + 10K diff --git a/main.js b/main.js index 448babbe..e486d8f7 100644 --- a/main.js +++ b/main.js @@ -12,21 +12,6 @@ const TIME = !PRODUCTION; const WARN = 1; const ERROR = 1; -// constants to link density values to number of cells -const POINTS_1K = 1; -const POINTS_2K = 2; -const POINTS_5K = 3; -const POINTS_10K = 4; -const POINTS_20K = 5; -const POINTS_30K = 6; -const POINTS_40K = 7; -const POINTS_50K = 8; -const POINTS_60K = 9; -const POINTS_70K = 10; -const POINTS_80K = 11; -const POINTS_90K = 12; -const POINTS_100K = 13; - // if map version is not stored, clear localStorage and show a message if (rn(localStorage.getItem("version"), 2) !== rn(version, 2)) { localStorage.clear(); @@ -367,10 +352,11 @@ function showWelcomeMessage() {
  • River generation code refactored and optimized
  • Rivers discharge (flux) and mouth width calculated
  • Lake editor rework
    • -
  • Lake type defined dynamically based on evaporation and river system
    • +
  • Lake type based on evaporation and river system
  • Lake flux, inlets and outlet tracked properly
    • -
  • Lake outlet rendered with starting width depending on flux
    • +
  • Lake outlet width depends on flux
  • Lakes now have names
    • +
  • Rulers rework (v1.61)
    • @@ -628,12 +614,8 @@ function generateSeed() { // Place points to calculate Voronoi diagram function placePoints() { TIME && console.time("placePoints"); - let cellsDesired = 10000 * (+densityInput.value - POINTS_5K); // generate 10k points for each densityInput point - switch (+densityInput.value) { - case POINTS_1K: cellsDesired = 1000; break; - case POINTS_2K: cellsDesired = 2000; break; - case POINTS_5K: cellsDesired = 5000; break; - } + + const cellsDesired = +pointsInput.dataset.cells; const spacing = grid.spacing = rn(Math.sqrt(graphWidth * graphHeight / cellsDesired), 2); // spacing between points before jirrering grid.boundary = getBoundaryPoints(graphWidth, graphHeight, spacing); grid.points = getJitteredGrid(graphWidth, graphHeight, spacing); // jittered square grid diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js index b241c78e..d9943819 100644 --- a/modules/heightmap-generator.js +++ b/modules/heightmap-generator.js @@ -186,38 +186,38 @@ } function getBlobPower() { - switch (+densityInput.value) { - case POINTS_1K: return .93; - case POINTS_2K: return .95; - case POINTS_5K: return .96; - case POINTS_10K: return .98; - case POINTS_20K: return .985; - case POINTS_30K: return .987; - case POINTS_40K: return .9892; - case POINTS_50K: return .9911; - case POINTS_60K: return .9921; - case POINTS_70K: return .9934; - case POINTS_80K: return .9942; - case POINTS_90K: return .9946; - case POINTS_100K: return .995; + switch (+pointsInput.dataset.cells) { + case 1000: return .93; + case 2000: return .95; + case 5000: return .96; + case 10000: return .98; + case 20000: return .985; + case 30000: return .987; + case 40000: return .9892; + case 50000: return .9911; + case 60000: return .9921; + case 70000: return .9934; + case 80000: return .9942; + case 90000: return .9946; + case 100000: return .995; } } function getLinePower() { - switch (+densityInput.value) { - case POINTS_1K: return .74; - case POINTS_2K: return .75; - case POINTS_5K: return .78; - case POINTS_10K: return .81; - case POINTS_20K: return .82; - case POINTS_30K: return .83; - case POINTS_40K: return .84; - case POINTS_50K: return .855; - case POINTS_60K: return .87; - case POINTS_70K: return .885; - case POINTS_80K: return .91; - case POINTS_90K: return .92; - case POINTS_100K: return .93; + switch (+pointsInput.dataset.cells) { + case 1000: return .74; + case 2000: return .75; + case 5000: return .78; + case 10000: return .81; + case 20000: return .82; + case 30000: return .83; + case 40000: return .84; + case 50000: return .855; + case 60000: return .87; + case 70000: return .885; + case 80000: return .91; + case 90000: return .92; + case 100000: return .93; } } diff --git a/modules/ui/options.js b/modules/ui/options.js index 25a927b0..d7dc264d 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -102,7 +102,7 @@ const optionsContent = document.getElementById("optionsContent"); optionsContent.addEventListener("input", function(event) { const id = event.target.id, value = event.target.value; if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange(); - else if (id === "densityInput" || id === "densityOutput") changeCellsDensity(+value); + else if (id === "pointsInput") changeCellsDensity(+value); else if (id === "culturesInput") culturesOutput.value = value; else if (id === "culturesOutput") culturesInput.value = value; else if (id === "culturesSet") changeCultureSet(); @@ -276,15 +276,26 @@ function copyMapURL() { } function changeCellsDensity(value) { - switch (value) { - case POINTS_1K : densityOutput.value = "1K"; break; - case POINTS_2K : densityOutput.value = "2K"; break; - case POINTS_5K : densityOutput.value = "5K"; break; - default: densityOutput.value = (value-POINTS_5K) * 10 + "K"; + const convert = v => { + if (v == 1) return 1000; + if (v == 2) return 2000; + if (v == 3) return 5000; + if (v == 4) return 10000; + if (v == 5) return 20000; + if (v == 6) return 30000; + if (v == 7) return 40000; + if (v == 8) return 50000; + if (v == 9) return 60000; + if (v == 10) return 70000; + if (v == 11) return 80000; + if (v == 12) return 90000; + if (v == 13) return 100000; } - if (value > POINTS_50K) densityOutput.style.color = "#b12117"; - else if (value > POINTS_10K) densityOutput.style.color = "#dfdf12"; - else densityOutput.style.color = "#038603"; + const cells = convert(value); + + pointsInput.setAttribute("data-cells", cells); + pointsOutput.value = cells / 1000 + "K"; + pointsOutput.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305"; } function changeCultureSet() {