merge synchronizing dynamic modules

index.css

@@ -470,17 +470,17 @@ input[type="color"] {
   border: 1px solid #a9a9a9;
 }
 
-input[type='color']::-webkit-color-swatch-wrapper {
+input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
 }
 
-#options input[type='color'] {
+#options input[type="color"] {
   width: 4.5em;
   height: 1em;
   border: 0;
 }
 
-#convertImageDialog input[type='color'] {
+#convertImageDialog input[type="color"] {
   width: 38px;
   padding: 0;
   border: 0;
@@ -495,7 +495,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
   font-size: smaller;
 }
 
-#options input[type='range'] {
+#options input[type="range"] {
   height: 8px;
   background: 0;
   appearance: none;
@@ -504,7 +504,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
   padding: 0;
 }
 
-#options input[type='range']::-webkit-slider-thumb {
+#options input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border-radius: 15%;
   width: 0.91em;
@@ -516,7 +516,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
   box-shadow: 0.5px 0.5px 0px var(--dark-solid);
 }
 
-#options input[type='range']::-moz-range-thumb {
+#options input[type="range"]::-moz-range-thumb {
   -moz-appearance: none;
   border-radius: 15%;
   width: 0.73em;
@@ -527,22 +527,22 @@ input[type='color']::-webkit-color-swatch-wrapper {
   box-shadow: 0.5px 0.5px 0px var(--dark-solid);
 }
 
-#options input[type='range']::-webkit-slider-runnable-track {
+#options input[type="range"]::-webkit-slider-runnable-track {
   height: 2px;
   background: #ffffff;
 }
 
-#options input[type='range']::-moz-range-track {
+#options input[type="range"]::-moz-range-track {
   -moz-appearance: none;
   background-color: #ffffff;
   height: 2px;
 }
 
-#options input[type='number'] {
+#options input[type="number"] {
   font-size: 0.8em;
 }
 
-#options input[type='text'] {
+#options input[type="text"] {
   border: 0px;
   width: 62%;
   font-size: smaller;
@@ -553,7 +553,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
   font-size: smaller;
 }
 
-#optionsContent input[type='number'] {
+#optionsContent input[type="number"] {
   border: 0;
   text-align: right;
   background-color: transparent;
@@ -561,8 +561,8 @@ input[type='color']::-webkit-color-swatch-wrapper {
   -moz-appearance: textfield;
 }
 
-#optionsContent input[type='number']::-webkit-inner-spin-button,
+#optionsContent input[type="number"]::-webkit-inner-spin-button,
-#optionsContent input[type='number']::-webkit-outer-spin-button {
+#optionsContent input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -582,7 +582,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
   text-align: left;
 }
 
-#optionsContent input[type='range'] {
+#optionsContent input[type="range"] {
   width: 100%;
 }
 
@@ -606,7 +606,7 @@ input[type='color']::-webkit-color-swatch-wrapper {
   transform: translate(0px, 1px);
 }
 
-#styleElements input[type='range'] {
+#styleElements input[type="range"] {
   width: 64%;
 }
 
@@ -629,16 +629,6 @@ input[type='color']::-webkit-color-swatch-wrapper {
   width: 100%;
 }
 
-#styleSelectFont > option {
-  font-size: 2em;
-}
-
-#sticked {
-  display: flex;
-  justify-content: space-evenly;
-  width: 100%;
-}
-
 #sticked button {
   background-color: transparent;
   font-weight: bold;

modules/dynamic/editors/states-editor.js

@@ -294,13 +294,13 @@ function statesEditorAddLines() {
   $body.innerHTML = lines;
 
   // update footer
-  statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length;
+  byId("statesFooterStates").innerHTML = pack.states.filter(s => s.i && !s.removed).length;
-  statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
+  byId("statesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
-  statesFooterBurgs.innerHTML = totalBurgs;
+  byId("statesFooterBurgs").innerHTML = totalBurgs;
-  statesFooterArea.innerHTML = `${si(totalArea)} ${unit}`;
+  byId("statesFooterArea").innerHTML = si(totalArea) + unit;
-  statesFooterPopulation.innerHTML = si(totalPopulation);
+  byId("statesFooterArea").dataset.area = totalArea;
-  statesFooterArea.dataset.area = totalArea;
+  byId("statesFooterPopulation").innerHTML = si(totalPopulation);
-  statesFooterPopulation.dataset.population = totalPopulation;
+  byId("statesFooterPopulation").dataset.population = totalPopulation;
 
   // add listeners
   $body.querySelectorAll(":scope > div").forEach($line => {

modules/dynamic/heightmap-selection.js

@@ -1,7 +1,6 @@
 const initialSeed = generateSeed();
 let graph = getGraph(grid);
 
-const initialSeed = generateSeed();
 appendStyleSheet();
 insertHtml();
 addListeners();
@@ -97,19 +96,6 @@ function appendStyleSheet() {
       justify-self: end;
     }
 
-    @media (max-width: 600px) {
-      .heightmap-selection_container {
-        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-        grid-gap: 4px;
-      }
-    }
-
-    @media (min-width: 2000px) {
-      .heightmap-selection_container {
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      }
-    }
-
     .heightmap-selection article {
       padding: 4px;
       border-radius: 8px;
@@ -322,20 +308,6 @@ async function drawPrecreatedHeightmap(id) {
   article.querySelector("img").src = dataUrl;
 }
 
-function drawTemplatePreview(id) {
-  const heights = HeightmapGenerator.fromTemplate(graph, id);
-  const dataUrl = drawHeights(heights);
-  const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
-  article.querySelector("img").src = dataUrl;
-}
-
-async function drawPrecreatedHeightmap(id) {
-  const heights = await HeightmapGenerator.fromPrecreated(graph, id);
-  const dataUrl = drawHeights(heights);
-  const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
-  article.querySelector("img").src = dataUrl;
-}
-
 function regeneratePreview(article, id) {
   graph = getGraph(graph);
   const seed = generateSeed();

modules/dynamic/hierarchy-tree.js

@@ -62,18 +62,8 @@ export function open(props) {
 }
 
 function appendStyleSheet() {
-  const styles = /* css */ `
+  const style = document.createElement("style");
-
+  style.textContent = /* css */ `
-    #hierarchyTree {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    #hierarchyTree > svg {
-      height: 100%;
-    }
-
     #hierarchyTree_selectedOrigins > button {
       margin: 0 2px;
     }
@@ -428,6 +418,7 @@ function selectElement(d) {
         </div>
       `;
     });
+
     byId("hierarchyTree_originSelector").innerHTML = /*html*/ `
       <form style="max-height: 35vh">
         ${selectableElementsHtml.join("")}

modules/io/load.js

@@ -435,7 +435,6 @@ async function parseLoadedData(data) {
       resolveVersionConflicts(versionNumber);
     }
 
-
     void (function checkDataIntegrity() {
       const cells = pack.cells;
 

utils/arrayUtils.js

@@ -58,59 +58,3 @@ function createTypedArray({maxValue, length, from}) {
   if (!from) return new typedArray(length);
   return typedArray.from(from);
 }
-
-function unique(array) {
-  return [...new Set(array)];
-}
-
-// deep copy for Arrays (and other objects)
-function deepCopy(obj) {
-  const id = x => x;
-  const dcTArray = a => a.map(id);
-  const dcObject = x => Object.fromEntries(Object.entries(x).map(([k, d]) => [k, dcAny(d)]));
-  const dcAny = x => (x instanceof Object ? (cf.get(x.constructor) || id)(x) : x);
-  // don't map keys, probably this is what we would expect
-  const dcMapCore = m => [...m.entries()].map(([k, v]) => [k, dcAny(v)]);
-
-  const cf = new Map([
-    [Int8Array, dcTArray],
-    [Uint8Array, dcTArray],
-    [Uint8ClampedArray, dcTArray],
-    [Int16Array, dcTArray],
-    [Uint16Array, dcTArray],
-    [Int32Array, dcTArray],
-    [Uint32Array, dcTArray],
-    [Float32Array, dcTArray],
-    [Float64Array, dcTArray],
-    [BigInt64Array, dcTArray],
-    [BigUint64Array, dcTArray],
-    [Map, m => new Map(dcMapCore(m))],
-    [WeakMap, m => new WeakMap(dcMapCore(m))],
-    [Array, a => a.map(dcAny)],
-    [Set, s => [...s.values()].map(dcAny)],
-    [Date, d => new Date(d.getTime())],
-    [Object, dcObject]
-    // other types will be referenced
-    // ... extend here to implement their custom deep copy
-  ]);
-
-  return dcAny(obj);
-}
-
-function getTypedArray(maxValue) {
-  console.assert(
-    Number.isInteger(maxValue) && maxValue >= 0 && maxValue <= 4294967295,
-    `Array maxValue must be an integer between 0 and 4294967295, got ${maxValue}`
-  );
-
-  if (maxValue <= UINT8_MAX) return Uint8Array;
-  if (maxValue <= UINT16_MAX) return Uint16Array;
-  if (maxValue <= UINT32_MAX) return Uint32Array;
-  return Uint32Array;
-}
-
-function createTypedArray({maxValue, length, from}) {
-  const typedArray = getTypedArray(maxValue);
-  if (!from) return new typedArray(length);
-  return typedArray.from(from);
-}