[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>

src/utils/debugUtils.ts

@@ -0,0 +1,114 @@
+import {curveBundle, line, max, min} from "d3";
+import { normalize } from "./numberUtils";
+import { getGridPolygon } from "./graphUtils";
+import { C_12 } from "./colorUtils";
+import { round } from "./stringUtils";
+
+/**
+ * Drawing cell values and polygons for debugging purposes
+ * @param {any[]} data - Array of data values corresponding to each cell
+ * @param {any} packedGraph - The packed graph object containing cell positions
+ */
+export const drawCellsValue = (data: any[], packedGraph: any): void => {
+  window.debug.selectAll("text").remove();
+  window.debug
+    .selectAll("text")
+    .data(data)
+    .enter()
+    .append("text")
+    .attr("x", (_d: any, i: number) => packedGraph.cells.p[i][0])
+    .attr("y", (_d: any, i: number) => packedGraph.cells.p[i][1])
+    .text((d: any) => d);
+}
+/**
+ * Drawing polygons colored according to data values for debugging purposes
+ * @param {number[]} data - Array of numerical values corresponding to each cell
+ * @param {any} terrs - The SVG group element where the polygons will be drawn
+ */
+export const drawPolygons = (data: number[], terrs: any, grid: any): void => {
+  const maximum: number = max(data) as number;
+  const minimum: number = min(data) as number;
+  const scheme = window.getColorScheme(terrs.select("#landHeights").attr("scheme"));
+
+  data = data.map(d => 1 - normalize(d, minimum, maximum));
+  window.debug.selectAll("polygon").remove();
+  window.debug
+    .selectAll("polygon")
+    .data(data)
+    .enter()
+    .append("polygon")
+    .attr("points", (_d: number, i: number) => getGridPolygon(i, grid))
+    .attr("fill", (d: number) => scheme(d))
+    .attr("stroke", (d: number) => scheme(d));
+}
+
+/**
+ * Drawing route connections for debugging purposes
+ * @param {any} pack - The packed graph object containing cell positions and routes
+ */
+export const drawRouteConnections = (packedGraph: any): void => {
+  window.debug.select("#connections").remove();
+  const routes = window.debug.append("g").attr("id", "connections").attr("stroke-width", 0.8);
+
+  const points = packedGraph.cells.p;
+  const links = packedGraph.cells.routes;
+
+  for (const from in links) {
+    for (const to in links[from]) {
+      const [x1, y1] = points[from];
+      const [x3, y3] = points[to];
+      const [x2, y2] = [(x1 + x3) / 2, (y1 + y3) / 2];
+      const routeId = links[from][to];
+
+      routes
+        .append("line")
+        .attr("x1", x1)
+        .attr("y1", y1)
+        .attr("x2", x2)
+        .attr("y2", y2)
+        .attr("data-id", routeId)
+        .attr("stroke", C_12[routeId % 12]);
+    }
+  }
+}
+
+/**
+ * Drawing a point for debugging purposes
+ * @param {[number, number]} point - The [x, y] coordinates of the point to draw
+ * @param {Object} options - Options for drawing the point
+ * @param {string} options.color - Color of the point
+ * @param {number} options.radius - Radius of the point
+ */
+export const drawPoint = ([x, y]: [number, number], {color = "red", radius = 0.5}): void => {
+  window.debug.append("circle").attr("cx", x).attr("cy", y).attr("r", radius).attr("fill", color);
+}
+
+/**
+ * Drawing a path for debugging purposes
+ * @param {[number, number][]} points - Array of [x, y] coordinates representing the path
+ * @param {Object} options - Options for drawing the path
+ * @param {string} options.color - Color of the path
+ * @param {number} options.width - Stroke width of the path
+ */
+export const drawPath = (points: [number, number][], {color = "red", width = 0.5}): void => {
+  const lineGen = line().curve(curveBundle);
+  window.debug
+    .append("path")
+    .attr("d", round(lineGen(points) as string))
+    .attr("stroke", color)
+    .attr("stroke-width", width)
+    .attr("fill", "none");
+}
+
+declare global {
+  interface Window {
+    debug: any;
+    getColorScheme: (name: string) => (t: number) => string;
+    
+    drawCellsValue: typeof drawCellsValue;
+    drawPolygons: typeof drawPolygons;
+    drawRouteConnections: typeof drawRouteConnections;
+    drawPoint: typeof drawPoint;
+    drawPath: typeof drawPath;
+  } 
+}