fix: cells ids can go over UINT16_MAX (v1.97.11)

index.html

@@ -1590,10 +1590,20 @@
             <tr
               data-tip="Set number of points to be used for graph generation. Highly affects performance. 10K is the only recommended value"
             >
-              <td></td>
+              <td>
+                <i data-locked="0" id="lock_points" class="icon-lock-open"></i>
+              </td>
               <td>Points number</td>
               <td>
-                <input id="pointsInput" type="range" min="1" max="13" value="4" data-cells="10000" />
+                <input
+                  id="pointsInput"
+                  data-stored="points"
+                  type="range"
+                  min="1"
+                  max="13"
+                  value="4"
+                  data-cells="10000"
+                />
               </td>
               <td>
                 <output id="pointsOutputFormatted" style="color: #053305">10K</output>
@@ -8052,8 +8062,8 @@
     <script src="modules/ui/stylePresets.js?v=1.96.00"></script>
 
     <script src="modules/ui/general.js?v=1.96.00"></script>
-    <script src="modules/ui/options.js?v=1.97.08"></script>
-    <script src="main.js?v=1.97.00"></script>
+    <script src="modules/ui/options.js?v=1.97.11"></script>
+    <script src="main.js?v=1.97.11"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js?v=1.96.00"></script>

main.js

@@ -1208,7 +1208,7 @@ function reGraph() {
   pack.cells.g = createTypedArray({maxValue: grid.points.length, from: newCells.g});
   pack.cells.q = d3.quadtree(newCells.p.map(([x, y], i) => [x, y, i]));
   pack.cells.h = createTypedArray({maxValue: 100, from: newCells.h});
-  pack.cells.area = createTypedArray({maxValue: UINT16_MAX, from: pack.cells.i}).map(getCellArea);
+  pack.cells.area = createTypedArray({maxValue: UINT32_MAX, from: pack.cells.i}).map(getCellArea);
 
   TIME && console.timeEnd("reGraph");
 }

modules/ui/options.js

@@ -119,9 +119,9 @@ function updateOutputToFollowInput(ev) {
 
 // Option listeners
 const optionsContent = byId("optionsContent");
-optionsContent.addEventListener("input", function (event) {
-  const id = event.target.id;
-  const value = event.target.value;
+
+optionsContent.addEventListener("input", event => {
+  const {id, value} = event.target;
   if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange();
   else if (id === "pointsInput") changeCellsDensity(+value);
   else if (id === "culturesSet") changeCultureSet();
@@ -133,10 +133,8 @@ optionsContent.addEventListener("input", function (event) {
   else if (id === "transparencyInput") changeDialogsTheme(themeColorInput.value, value);
 });
 
-optionsContent.addEventListener("change", function (event) {
-  const id = event.target.id;
-  const value = event.target.value;
-
+optionsContent.addEventListener("change", event => {
+  const {id, value} = event.target;
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed("seed change");
   else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUiSize(value);
@@ -146,8 +144,8 @@ optionsContent.addEventListener("change", function (event) {
   else if (id === "stateLabelsModeInput") options.stateLabelsMode = value;
 });
 
-optionsContent.addEventListener("click", function (event) {
-  const id = event.target.id;
+optionsContent.addEventListener("click", event => {
+  const {id} = event.target;
   if (id === "restoreDefaultCanvasSize") restoreDefaultCanvasSize();
   else if (id === "optionsMapHistory") showSeedHistoryDialog();
   else if (id === "optionsCopySeed") copyMapURL();
@@ -327,6 +325,7 @@ const cellsDensityMap = {
 };
 
 function changeCellsDensity(value) {
+  pointsInput.value = value;
   const cells = cellsDensityMap[value] || 1000;
   pointsInput.dataset.cells = cells;
   pointsOutputFormatted.value = getCellsDensityValue(cells);
@@ -536,6 +535,7 @@ function applyStoredOptions() {
     const key = localStorage.key(i);
 
     if (key === "speakerVoice") continue;
+
     const input = byId(key + "Input") || byId(key);
     const output = byId(key + "Output");
 
@@ -544,6 +544,8 @@ function applyStoredOptions() {
     if (output) output.value = value;
     lock(key);
 
+    if (key === "points") changeCellsDensity(+value);
+
     // add saved style presets to options
     if (key.slice(0, 5) === "style") applyOption(stylePreset, key, key.slice(5));
   }
@@ -581,6 +583,7 @@ function randomizeOptions() {
   const randomize = new URL(window.location.href).searchParams.get("options") === "default"; // ignore stored options
 
   // 'Options' settings
+  if (randomize || !locked("points")) changeCellsDensity(4); // reset to default, no need to randomize
   if (randomize || !locked("template")) randomizeHeightmapTemplate();
   if (randomize || !locked("regions")) regionsInput.value = regionsOutput.value = gauss(18, 5, 2, 30);
   if (randomize || !locked("provinces")) provincesInput.value = provincesOutput.value = gauss(20, 10, 20, 100);

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.97.10"; // generator version, update each time
+const version = "1.97.11"; // generator version, update each time
 
 {
   document.title += " v" + version;