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,16 @@
+import { byId } from "utils/nodeUtils";
+
+export function drawIce() {
+  const ice = byId("ice");
+  const { ice: icePack } = pack;
+
+  let innerHTML = "";
+  for (const shield of icePack.iceShields) {
+    innerHTML += `<polygon points="${shield.points.toString()}" />`;
+  }
+
+  for (const iceberg of icePack.icebergs) {
+    innerHTML += `<polygon points="${iceberg.points.toString()}" />`;
+  }
+  ice.innerHTML = innerHTML;
+}

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,102 @@
+import { ERROR } from "config/logging";
+import { aleaPRNG } from "scripts/aleaPRNG";
+import { clipPoly, getGridPolygonWithGrid, last, normalize, P, rn } from "utils";
+
+export function generateIce(
+  gridCells: Pick<IGrid["cells"],"i" | "h" | "c"| "v" | "f" | "t" | "temp">,
+  vertices: IGraphVertices,
+  gridPoints: TPoints,
+  features: TGridFeatures,
+): IIce {
+  const shieldMin = -8; // max temp to form ice shield (glacier)
+  const icebergMax = 1; // max temp to form an iceberg
+  const nOfCells = gridCells.i.length;
+  const used = new Uint8Array(gridCells.i.length);
+
+  Math.random = aleaPRNG(seed);
+  const icePack: IIce = { icebergs: [], iceShields: [] };
+  for (const i of gridCells.i) {
+    const temperature = gridCells.temp[i];
+    if (temperature > icebergMax) continue; // too warm: no ice
+    if (temperature > shieldMin && gridCells.h[i] >= 20) continue; // non-glacier land: no ice
+
+    if (temperature <= shieldMin) {
+      // very cold: ice shield
+      if (used[i]) continue; // already rendered
+      const onborder = gridCells.c[i].some((n) => gridCells.temp[n] > shieldMin);
+      if (!onborder) continue; // need to start from onborder cell
+      const vertex = gridCells.v[i].find((v) =>
+        vertices.c[v]?.some((i) => gridCells.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, transform: { x: 0, y: 0 } });
+      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 = gridPoints[i];
+    const points: TPoints = getGridPolygonWithGrid(i, gridCells, vertices)
+      .map((point) => [
+        (point[0] + (cellMidPoint[0] - point[0]) * size) | 0,
+        (point[1] + (cellMidPoint[1] - point[1]) * size) | 0,
+      ]);
+    return {
+      points,
+      transform: { x: 0, y: 0 },
+      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) => gridCells.temp[cellIndicie] <= shieldMin)
+        .forEach((cellIndice) => (used[cellIndice] = 1));
+      const c0 =
+        currentVertex[0] >= nOfCells || gridCells.temp[currentVertex[0]] > shieldMin;
+      const c1 =
+        currentVertex[1] >= nOfCells || gridCells.temp[currentVertex[1]] > shieldMin;
+      const c2 =
+        currentVertex[2] >= nOfCells || gridCells.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;
+  }
+}