Vite ice split draft

index.html

@@ -365,7 +365,6 @@
           data-tip="Click to show the Menu"
           data-shortcut="Tab"
           class="options glow"
-          onclick="showOptions(event)"
         >
           ►
         </button>
@@ -391,7 +390,6 @@
             data-tip="Click to hide the Menu"
             data-shortcut="Tab or Esc"
             class="options"
-            onclick="hideOptions(event)"
           >
             ◄
           </button>
@@ -7657,8 +7655,8 @@
     <script type="module" src="/src/modules/submap.js"></script>
     <script type="module" src="/src/modules/fonts.js"></script>
     <script type="module" src="/src/modules/ui/stylePresets.js"></script>
-    <script type="module" src="/src/modules/ui/options.js"></script>
     <script type="module" src="/src/modules/zoom.js"></script>
+    <script type="module" src="/src/modules/ui/options.ts"></script>
 
     <script type="module" src="/src/main.ts"></script>
 

src/dialogs/dialogs/ice-editor.ts

@@ -21,7 +21,7 @@ export function open() {
   const type = elSelected.attr("type") ? "Glacier" : "Iceberg";
   if (byId("iceRandomize")) byId("iceRandomize")!.style.display = type === "Glacier" ? "none" : "inline-block";
 
-  const $iceSize = byId("iceSize") as HTMLInputElement;
+  const $iceSize = byId<'input'>("iceSize");
   if ($iceSize) {
     $iceSize.style.display = type === "Glacier" ? "none" : "inline-block";
     if (type === "Iceberg") $iceSize.value = elSelected.attr("size");
@@ -39,11 +39,11 @@ export function open() {
   isLoaded = true;
 
   // add listeners
-  byId("iceEditStyle")?.on("click", () => editStyle("ice"));
-  byId("iceRandomize")?.on("click", randomizeShape);
-  byId("iceSize")?.on("input", changeSize);
-  byId("iceNew")?.on("click", toggleAdd);
-  byId("iceRemove")?.on("click", removeIce);
+  byId("iceEditStyle").on("click", () => editStyle("ice"));
+  byId("iceRandomize").on("click", randomizeShape);
+  byId("iceSize").on("input", changeSize);
+  byId("iceNew").on("click", toggleAdd);
+  byId("iceRemove").on("click", removeIce);
 
   function randomizeShape() {
     const c = grid.points[+elSelected.attr("cell")];

src/layers/renderers/drawIce.ts

@@ -0,0 +1,22 @@
+import { getGridPolygon } from "utils/graphUtils";
+import { P, normalize, rn, last } from "utils";
+import { clipPoly } from "utils/lineUtils";
+import { ERROR } from "config/logging";
+import * as d3 from "d3";
+
+export function drawIce() {
+  const ice = d3.select("#ice");
+  const { ice: icePack } = pack;
+
+  for (const shield of icePack.iceShields) {
+    ice
+      .append("polygon")
+      .attr("points", shield.points.toString())
+  }
+
+  for (const iceberg of icePack.icebergs) {
+    ice
+    .append("polygon")
+    .attr("points", iceberg.points.toString())
+  }
+}

src/modules/ui/options.ts

@@ -32,15 +32,17 @@ byId<'button'>("optionsTrigger").on("click", showOptions);
 byId<'button'>("optionsHide").on("click", hideOptions);
 
 // Window Objects
-const {Zoom, COA, Cloud, ThreeD, Names} = window;
+const {COA, Cloud, ThreeD, Names, Zoom} = window;
+
 
 // DIV elements
 const tooltip = byId<'div'>("tooltip");
 
 // Options pane elements
 const optionsTrigger = byId<'button'>("optionsTrigger");
 const regenerate = byId<'button'>("regenerate");
-const optionsDiv = byId<'div'>("optionsContainer");
+const optionsContainer = byId<'div'>("optionsContainer");
+const optionsDisplay = byId<'div'>("options");
 const collapsible = byId<'div'>("collapsible");
 const layersContent = byId<'div'>("layersContent");
 const styleContent = byId<'div'>("styleContent");
@@ -140,47 +142,47 @@ export function showOptions(event: Event) {
   }
 
   regenerate.style.display = "none";
-  optionsDiv.style.display = "block";
+  optionsDisplay.style.display = "block";
   optionsTrigger.style.display = "none";
 
   if (event) event.stopPropagation();
 }
 
 // Hide options pane on trigger click
 export function hideOptions(event: Event) {
-  optionsDiv.style.display = "none";
+  optionsDisplay.style.display = "none";
   optionsTrigger.style.display = "block";
   if (event) event.stopPropagation();
 }
 
 // To toggle options on hotkey press
 export function toggleOptions(event: MouseEvent) {
-  if (optionsDiv.style.display === "none") showOptions(event);
+  if (optionsContainer.style.display === "none") showOptions(event);
   else hideOptions(event);
 }
 
 // Toggle "New Map!" pane on hover
 optionsTrigger.on("mouseenter", function () {
   if (optionsTrigger.classList.contains("glow")) return;
-  if (optionsDiv.style.display === "none") regenerate.style.display = "block";
+  if (optionsContainer.style.display === "none") regenerate.style.display = "block";
 });
 
 collapsible.on("mouseleave", function () {
   regenerate.style.display = "none";
 });
 
 // Activate options tab on click
-optionsDiv
+optionsContainer
   .querySelector("div.tab")!
   .on("click", function (event: any ) { // MARKER: any
     if (event.target.tagName !== "BUTTON") return;
     const id = event.target.id;
-    const active = optionsDiv.querySelector(".tab > button.active");
+    const active = optionsContainer.querySelector(".tab > button.active");
     if (active && id === active.id) return; // already active tab is clicked
 
     if (active) active.classList.remove("active");
-    byId(id)!.classList.add("active");
-    optionsDiv
+    byId(id).classList.add("active");
+    optionsContainer
       .querySelectorAll<HTMLElement>(".tabcontent")
       .forEach((e: HTMLElement) => {e.style.display = "none"});
 
@@ -207,9 +209,9 @@ async function showSupporters() {
 }
 
 // on any option or dialog change
-optionsDiv.on("change", storeValueIfRequired);
+optionsContainer.on("change", storeValueIfRequired);
 dialogDiv.on("change", storeValueIfRequired);
-optionsDiv.on("input", updateOutputToFollowInput);
+optionsContainer.on("input", updateOutputToFollowInput);
 dialogDiv.on("input", updateOutputToFollowInput);
 
 function storeValueIfRequired(ev: any) { // MARKER: any
@@ -320,10 +322,10 @@ function changeMapSize() {
 
 // just apply canvas size that was already set
 export function applyMapSize() {
-  const zoomMin = Number(zoomExtentMin.value);
-  const zoomMax = Number(zoomExtentMax.value);
-  graphWidth = Number(mapWidthInput.value);
-  graphHeight = Number(mapHeightInput.value);
+  const zoomMin = zoomExtentMin.valueAsNumber;
+  const zoomMax = zoomExtentMax.valueAsNumber;
+  graphWidth = mapWidthInput.valueAsNumber;
+  graphHeight = mapHeightInput.valueAsNumber;
   svgWidth = Math.min(graphWidth, window.innerWidth);
   svgHeight = Math.min(graphHeight, window.innerHeight);
   svg.attr("width", svgWidth).attr("height", svgHeight);
@@ -537,7 +539,7 @@ function changeUIsize(value: number) {
 
   uiSizeInput.valueAsNumber = uiSizeOutput.valueAsNumber = value;
   document.getElementsByTagName("body")[0].style.fontSize = rn(value * 10, 2) + "px";
-  optionsDiv.style.width = value * 300 + "px";
+  optionsContainer.style.width = value * 300 + "px";
 }
 
 function getUImaxSize() {
@@ -1126,7 +1128,7 @@ async function enter3dView(type) {
       resizeStop: resize3d,
       close: enterStandardView
     });
-  } else document.body.insertBefore(canvas, optionsDiv);
+  } else document.body.insertBefore(canvas, optionsContainer);
 
   toggle3dOptions();
 }

src/scripts/generation/pack/generateIce.ts

@@ -0,0 +1,91 @@
+import { ERROR } from "config/logging";
+import { aleaPRNG } from "scripts/aleaPRNG";
+import { IIce, Iiceberg } from "types/pack/ice";
+import { clipPoly, last, normalize, P, rn } from "utils";
+
+export function generateIce(
+  cells: Pick<IPack["cells"], "i" | "h" | "c" | "v" | "p">,
+  vertices: IGraphVertices,
+  temp: Int8Array,
+  features: TGridFeatures,
+  gridCells: Pick<IGrid["cells"], "f" | "t">,
+): IIce {
+  const shieldMin = -8; // max temp to form ice shield (glacier)
+  const icebergMax = 1; // max temp to form an iceberg
+  const nOfCells = cells.i.length;
+  const used = new Uint8Array(cells.i.length);
+
+  Math.random = aleaPRNG(seed);
+  const icePack: IIce = { icebergs: [], iceShields: [] };
+  for (const i of cells.i) {
+    const temperature = temp[i];
+    if (temperature > icebergMax) continue; // too warm: no ice
+    if (temperature > shieldMin && cells.h[i] >= 20) continue; // non-glacier land: no ice
+
+    if (temperature <= shieldMin) {
+      // very cold: ice shield
+      if (used[i]) continue; // already rendered
+      const onborder = cells.c[i].some((n) => temp[n] > shieldMin);
+      if (!onborder) continue; // need to start from onborder cell
+      const vertex = cells.v[i].find((v) =>
+        vertices.c[v]?.some((i) => temp[i] > shieldMin)
+      );
+      if (vertex === undefined) continue; // no suitable vertex found
+      const chain = connectVertices(vertex);
+      if (chain.length < 3) continue;
+      const points = clipPoly(chain.map((v) => vertices.p[v]));
+      icePack.iceShields.push({ points, type: "iceShield" });
+      continue;
+    }
+    // mildly cold: iceberd
+    if (P(normalize(temperature, -7, 2.5))) continue; // t[-5; 2] cold: skip some cells
+    if (gridCells.f[i] !== 0 && (features[gridCells.f[i]] as IGridFeature).type === "lake") continue; // lake: no icebers // MARKER as IGridFeature
+    let size = (6.5 + temperature) / 10; // iceberg size: 0 = full size, 1 = zero size
+    if (gridCells.t[i] === -1) size *= 1.3; // coasline: smaller icebers
+    size = Math.min(size * (0.4 + Math.random() * 1.2), 0.95); // randomize iceberg size
+    icePack.icebergs.push(generateIceberg(i, size));
+  }
+  return icePack;
+
+  // Helper functions
+  function generateIceberg(i: number, size: number): Iiceberg {
+    const cellMidPoint = cells.p[i];
+    const points = cells.v[i].map(v => vertices.p[v]).map((point) => [
+      (point[0] + (cellMidPoint[0] - point[0]) * size) | 0,
+      (point[1] + (cellMidPoint[1] - point[1]) * size) | 0,
+    ]);
+    return { points, cell: i, size: rn(1 - size, 2) };
+  }
+
+  // connect vertices to chain
+  function connectVertices(start: number) {
+    const chain = []; // vertices chain to form a path
+    for (
+      let i = 0, current = start;
+      i === 0 || (current !== start && i < 20000);
+      i++
+    ) {
+      const prev = last(chain); // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const currentVertex = vertices.c[current]; // cells adjacent to vertex
+      currentVertex
+        .filter((cellIndicie) => temp[cellIndicie] <= shieldMin)
+        .forEach((cellIndice) => (used[cellIndice] = 1));
+      const c0 = currentVertex[0] >= nOfCells || temp[currentVertex[0]] > shieldMin;
+      const c1 = currentVertex[1] >= nOfCells || temp[currentVertex[1]] > shieldMin;
+      const c2 = currentVertex[2] >= nOfCells || temp[currentVertex[2]] > shieldMin;
+      const vertexNeighbors = vertices.v[current]; // neighboring vertices
+      if (vertexNeighbors[0] !== prev && c0 !== c1)
+        current = vertexNeighbors[0];
+      else if (vertexNeighbors[1] !== prev && c1 !== c2)
+        current = vertexNeighbors[1];
+      else if (vertexNeighbors[2] !== prev && c0 !== c2)
+        current = vertexNeighbors[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
+}

src/scripts/generation/pack/pack.ts

@@ -11,6 +11,7 @@ import {repackGrid} from "./repackGrid";
 import {generateRivers} from "./rivers/generateRivers";
 import {specifyRivers} from "./rivers/specifyRivers";
 import {generateRoutes} from "./routes/generateRoutes";
+import { generateIce } from "./generateIce";
 
 const {Biomes} = window;
 
@@ -161,6 +162,7 @@ export function createPack(grid: IGrid): IPack {
 
   const rivers = specifyRivers(rawRivers, cultureIds, cultures);
   const features = generateLakeNames(mergedFeatures, cultureIds, cultures);
+  const ice = generateIce(cells, vertices, temp, features, grid.cells);
 
   // Military.generate();
   // Markers.generate();
@@ -198,7 +200,8 @@ export function createPack(grid: IGrid): IPack {
     routes,
     religions,
     provinces,
-    events
+    events,
+    ice
   };
 
   return pack;

src/scripts/generation/pack/repackGrid.ts

@@ -9,6 +9,7 @@ import {calculateVoronoi} from "../graph";
 
 const {LAND_COAST, WATER_COAST, DEEPER_WATER} = DISTANCE_FIELD;
 
+
 // repack grid cells: discart deep water cells, add land cells along the coast
 export function repackGrid(grid: IGrid) {
   TIME && console.time("repackGrid");