[Migration] NPM (#1266)

* chore: add npm + vite for progressive enhancement

* fix: update Dockerfile to copy only the dist folder contents

* fix: update Dockerfile to use multi-stage build for optimized production image

* fix: correct nginx config file copy command in Dockerfile

* chore: add netlify configuration for build and redirects

* fix: add NODE_VERSION to environment in Netlify configuration

* remove wrong dist folder

* Update package.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: split public and src

* migrating all util files from js to ts

* feat: Implement HeightmapGenerator and Voronoi module

- Added HeightmapGenerator class for generating heightmaps with various tools (Hill, Pit, Range, Trough, Strait, etc.).
- Introduced Voronoi class for creating Voronoi diagrams using Delaunator.
- Updated index.html to include new modules.
- Created index.ts to manage module imports.
- Enhanced arrayUtils and graphUtils with type definitions and improved functionality.
- Added utility functions for generating grids and calculating Voronoi cells.

* chore: add GitHub Actions workflow for deploying to GitHub Pages

* fix: update branch name in GitHub Actions workflow from 'main' to 'master'

* chore: update package.json to specify Node.js engine version and remove unused launch.json

* Initial plan

* Update copilot guidelines to reflect NPM/Vite/TypeScript migration

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

* Update src/modules/heightmap-generator.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/utils/graphUtils.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/modules/heightmap-generator.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* feat: Add TIME and ERROR variables to global scope in HeightmapGenerator

* fix: Update base path in vite.config.ts for Netlify deployment

* fix: Update Node.js version in Dockerfile to 24-alpine

---------

Co-authored-by: Marc Emmanuel <marc.emmanuel@tado.com>
Co-authored-by: Marc Emmanuel <marcwissler@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>

public/components/fill-box.js

@@ -0,0 +1,74 @@
+{
+  const style = /* css */ `
+    fill-box:not([disabled]) {
+      cursor: pointer;
+    }
+
+    fill-box > svg {
+      vertical-align: middle;
+      pointer-events: none;
+    }
+
+    fill-box > svg > rect {
+      stroke: #666666;
+      stroke-width: 2;
+    }
+  `;
+
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("type", "text/css");
+  styleElement.innerHTML = style;
+  document.head.appendChild(styleElement);
+}
+
+{
+  const template = document.createElement("template");
+  template.innerHTML = /* html */ `
+    <svg>
+      <rect x="0" y="0" width="100%" height="100%">
+    </svg>
+  `;
+
+  class FillBox extends HTMLElement {
+    constructor() {
+      super();
+
+      this.appendChild(template.content.cloneNode(true));
+      this.querySelector("rect")?.setAttribute("fill", this.fill);
+      this.querySelector("svg")?.setAttribute("width", this.size);
+      this.querySelector("svg")?.setAttribute("height", this.size);
+    }
+
+    static showTip() {
+      tip(this.tip);
+    }
+
+    connectedCallback() {
+      this.addEventListener("mousemove", this.constructor.showTip);
+    }
+
+    disconnectedCallback() {
+      this.removeEventListener("mousemove", this.constructor.showTip);
+    }
+
+    get fill() {
+      return this.getAttribute("fill") || "#333";
+    }
+
+    set fill(newFill) {
+      this.setAttribute("fill", newFill);
+      this.querySelector("rect")?.setAttribute("fill", newFill);
+    }
+
+    get size() {
+      return this.getAttribute("size") || "1em";
+    }
+
+    get tip() {
+      return this.dataset.tip || "Fill style. Click to change";
+    }
+  }
+
+  // cannot use Shadow DOM here as need an access to svg hatches
+  customElements.define("fill-box", FillBox);
+}

public/components/slider-input.js

@@ -0,0 +1,78 @@
+{
+  const style = /* css */ `
+    slider-input {
+      display: flex;
+      align-items: center;
+      gap: .4em;
+    }
+  `;
+
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("type", "text/css");
+  styleElement.innerHTML = style;
+  document.head.appendChild(styleElement);
+}
+
+{
+  const template = document.createElement("template");
+  template.innerHTML = /* html */ `
+    <input type="range" />
+    <input type="number" />
+  `;
+
+  class SliderInput extends HTMLElement {
+    constructor() {
+      super();
+      this.appendChild(template.content.cloneNode(true));
+
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+
+      range.value = number.value = this.value || this.getAttribute("value") || 50;
+      range.min = number.min = this.getAttribute("min") || 0;
+      range.max = number.max = this.getAttribute("max") || 100;
+      range.step = number.step = this.getAttribute("step") || 1;
+
+      range.addEventListener("input", this.handleEvent.bind(this));
+      number.addEventListener("input", this.handleEvent.bind(this));
+      range.addEventListener("change", this.handleEvent.bind(this));
+      number.addEventListener("change", this.handleEvent.bind(this));
+    }
+
+    handleEvent(e) {
+      const value = e.target.value;
+      const isNaN = Number.isNaN(Number(value));
+      if (isNaN || value === "") return e.stopPropagation();
+
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+      this.value = range.value = number.value = value;
+
+      this.dispatchEvent(
+        new CustomEvent(e.type, {
+          detail: {value},
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    set value(value) {
+      const range = this.querySelector("input[type=range]");
+      const number = this.querySelector("input[type=number]");
+      range.value = number.value = value;
+    }
+
+    get value() {
+      const number = this.querySelector("input[type=number]");
+      return number.value;
+    }
+
+    get valueAsNumber() {
+      const number = this.querySelector("input[type=number]");
+      return number.valueAsNumber;
+    }
+  }
+
+  customElements.define("slider-input", SliderInput);
+}