refactor: improve code formatting and consistency in coastline rendering functions

Author: Azgaar

src/controllers/coastline-editor.ts

@@ -90,7 +90,10 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
   const rand = Alea(PREVIEW_SEED);
   const profile = makeRoughnessProfile(rand, coastSettings.roughnessContrast);
 
-  const pl = 2, pr = 2, pt = 6, pb = 6;
+  const pl = 2,
+    pr = 2,
+    pt = 6,
+    pb = 6;
   const gW = W - pl - pr;
   const gH = H - pt - pb;
   const thresh = Math.min(Math.max(coastSettings.smoothThreshold, 0), 1);
@@ -125,7 +128,11 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
   };
 
   // Helper: stroke curve clipped to a horizontal band
-  const strokeBand = (clipTop: number, clipBot: number, color: string): void => {
+  const strokeBand = (
+    clipTop: number,
+    clipBot: number,
+    color: string,
+  ): void => {
     const h = clipBot - clipTop;
     if (h <= 0) return;
     ctx.save();
@@ -186,27 +193,41 @@ function drawShapePreview(canvas: HTMLCanvasElement): void {
 
   // Generate at canvas scale so all setting changes are immediately visible.
   const basePts: [number, number][] = [
-    [cx,     cy - r],  // top
-    [cx + r, cy    ],  // right
-    [cx,     cy + r],  // bottom
-    [cx - r, cy    ],  // left
+    [cx, cy - r], // top
+    [cx + r, cy], // right
+    [cx, cy + r], // bottom
+    [cx - r, cy], // left
   ];
 
   const shape = fractalize(basePts, Alea(PREVIEW_SEED), coastSettings);
   const path = new Path2D(`${buildCoastlinePath(shape)}Z`);
 
   // Ocean background — radial gradient, lighter at centre
-  const bgGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(W, H) * 0.85);
+  const bgGrad = ctx.createRadialGradient(
+    cx,
+    cy,
+    0,
+    cx,
+    cy,
+    Math.max(W, H) * 0.85,
+  );
   bgGrad.addColorStop(0, "#cce5f5");
   bgGrad.addColorStop(1, "#6aa4cb");
   ctx.fillStyle = bgGrad;
   ctx.fillRect(0, 0, W, H);
 
   // Land fill with drop shadow
-  const landGrad = ctx.createRadialGradient(cx - r * 0.1, cy - r * 0.1, r * 0.05, cx, cy, r * 1.1);
-  landGrad.addColorStop(0,   "#d8c87a");
+  const landGrad = ctx.createRadialGradient(
+    cx - r * 0.1,
+    cy - r * 0.1,
+    r * 0.05,
+    cx,
+    cy,
+    r * 1.1,
+  );
+  landGrad.addColorStop(0, "#d8c87a");
   landGrad.addColorStop(0.5, "#9cbc60");
-  landGrad.addColorStop(1,   "#5c8e40");
+  landGrad.addColorStop(1, "#5c8e40");
 
   ctx.save();
   ctx.shadowColor = "rgba(0,20,60,0.35)";
@@ -223,7 +244,7 @@ function drawShapePreview(canvas: HTMLCanvasElement): void {
   ctx.stroke(path);
 
   // Original polygon skeleton — shows the raw 4-vertex input before fractalization
-  const origPts = shape.origIndices.map(i => shape.points[i]);
+  const origPts = shape.origIndices.map((i) => shape.points[i]);
   ctx.beginPath();
   for (let j = 0; j < origPts.length; j++) {
     const [x, y] = origPts[j];
@@ -256,7 +277,7 @@ function updatePreviews(): void {
 }
 
 function buildDialogHTML(): string {
-  const rows = SLIDER_DEFS.map(({id, label, tip, min, max, step, key}) => {
+  const rows = SLIDER_DEFS.map(({ id, label, tip, min, max, step, key }) => {
     const val = coastSettings[key] as number;
     return /* html */ `
       <tr data-tip="${tip}">
@@ -300,10 +321,12 @@ function setupCoastlineEditor(): void {
     document.body.insertAdjacentHTML("beforeend", buildDialogHTML());
   }
 
-  for (const {id, key} of SLIDER_DEFS) {
+  for (const { id, key } of SLIDER_DEFS) {
     const slider = document.getElementById(id) as HTMLInputElement | null;
     const output = document.getElementById(`${id}Out`) as HTMLElement | null;
-    const resetBtn = document.getElementById(`${id}Reset`) as HTMLElement | null;
+    const resetBtn = document.getElementById(
+      `${id}Reset`,
+    ) as HTMLElement | null;
 
     if (!slider || !output || !resetBtn) continue;
 
@@ -333,7 +356,7 @@ function setupCoastlineEditor(): void {
       title: "Coastline Advanced Settings",
       resizable: false,
       width: "auto",
-      position: {my: "center", at: "center", of: "svg"},
+      position: { my: "center", at: "center", of: "svg" },
     });
   };
 }

src/renderers/coastline-fractal.ts

@@ -15,21 +15,25 @@ export const coastSettings: CoastlineSettings = {
   amplitudeDecay: 0.9,
   minEdge: 1,
   smoothThreshold: 0.25,
-  roughnessContrast: 1.5
+  roughnessContrast: 1.5,
 };
 
 export const PROFILE_SIZE = 256;
 
 // Build a smooth closed roughness envelope via sum-of-cosine harmonics.
 // Intrinsically seam-free; result raised to `contrast` power for calm/rough contrast.
-export function makeRoughnessProfile(rand: () => number, contrast: number): Float32Array {
+export function makeRoughnessProfile(
+  rand: () => number,
+  contrast: number,
+): Float32Array {
   const profile = new Float32Array(PROFILE_SIZE);
   const numHarmonics = 3 + Math.floor(rand() * 3); // 3, 4 or 5
   for (let k = 1; k <= numHarmonics; k++) {
     const amp = rand();
     const phase = rand() * Math.PI * 2;
     for (let i = 0; i < PROFILE_SIZE; i++) {
-      profile[i] += amp * Math.cos((2 * Math.PI * k * i) / PROFILE_SIZE + phase);
+      profile[i] +=
+        amp * Math.cos((2 * Math.PI * k * i) / PROFILE_SIZE + phase);
     }
   }
   let min = Infinity,
@@ -74,7 +78,7 @@ function subdivideEdge(
   profile: Float32Array,
   rand: () => number,
   resultPts: [number, number][],
-  settings: CoastlineSettings
+  settings: CoastlineSettings,
 ): void {
   const dx = x1 - x0;
   const dy = y1 - y0;
@@ -92,9 +96,35 @@ function subdivideEdge(
   const my = (y0 + y1) / 2 + py * disp;
 
   const nextAmp = amplitude * settings.amplitudeDecay;
-  subdivideEdge(x0, y0, mx, my, t0, tm, depth - 1, nextAmp, profile, rand, resultPts, settings);
+  subdivideEdge(
+    x0,
+    y0,
+    mx,
+    my,
+    t0,
+    tm,
+    depth - 1,
+    nextAmp,
+    profile,
+    rand,
+    resultPts,
+    settings,
+  );
   resultPts.push([mx, my]);
-  subdivideEdge(mx, my, x1, y1, tm, t1, depth - 1, nextAmp, profile, rand, resultPts, settings);
+  subdivideEdge(
+    mx,
+    my,
+    x1,
+    y1,
+    tm,
+    t1,
+    depth - 1,
+    nextAmp,
+    profile,
+    rand,
+    resultPts,
+    settings,
+  );
 }
 
 export interface FractalizedShape {
@@ -105,7 +135,7 @@ export interface FractalizedShape {
 export function fractalize(
   points: [number, number][],
   rand: () => number,
-  settings: CoastlineSettings
+  settings: CoastlineSettings,
 ): FractalizedShape {
   const profile = makeRoughnessProfile(rand, settings.roughnessContrast);
 
@@ -147,19 +177,20 @@ export function fractalize(
       profile,
       rand,
       resultPts,
-      settings
+      settings,
     );
   }
 
-  return {points: resultPts, origIndices};
+  return { points: resultPts, origIndices };
 }
 
 export function fractalizeCoastline(
   points: [number, number][],
   featureIndex: number,
-  settings: CoastlineSettings = coastSettings
+  settings: CoastlineSettings = coastSettings,
 ): FractalizedShape {
-  if (points.length < 3) return {points, origIndices: points.map((_, i) => i)};
+  if (points.length < 3)
+    return { points, origIndices: points.map((_, i) => i) };
   const rand = Alea(`${seed}_c${featureIndex}`);
   return fractalize(points, rand, settings);
 }
@@ -170,7 +201,7 @@ export function fractalizeCoastline(
  * Jagged span: centripetal Catmull-Rom (α=0.5) through every fractal sub-point. Rounds sharp kinks into gentle curves.
  */
 export function buildCoastlinePath(shape: FractalizedShape) {
-  const {points: pts, origIndices} = shape;
+  const { points: pts, origIndices } = shape;
   const N = pts.length;
   const M = origIndices.length;
   if (M < 3) return "";
@@ -229,4 +260,3 @@ export function buildCoastlinePath(shape: FractalizedShape) {
 
   return d.join("");
 }
-

src/renderers/index.ts

@@ -13,4 +13,3 @@ import "./draw-relief-icons";
 import "./draw-scalebar";
 import "./draw-state-labels";
 import "./draw-temperature";
-