refactor: enhance coastline settings with new presets and update fractalization logic

Co-authored-by: Copilot <copilot@github.com>

Author: Azgaar

src/controllers/coastline-editor.ts

@@ -2,7 +2,7 @@ import Alea from "alea";
 import {
   buildCoastlinePath,
   type CoastlineSettings,
-  coastSettings,
+  defaultCoastSettings,
   fractalize,
   makeRoughnessProfile,
   PROFILE_SIZE
@@ -16,7 +16,7 @@ interface SliderDef {
   min: number;
   max: number;
   step: number;
-  key: keyof CoastlineSettings;
+  key: keyof Omit<CoastlineSettings, "enabled">;
 }
 
 const SLIDER_DEFS: SliderDef[] = [
@@ -73,10 +73,74 @@ const SLIDER_DEFS: SliderDef[] = [
     max: 10,
     step: 0.1,
     key: "roughnessContrast"
+  },
+  {
+    id: "coastProfileHarmonics",
+    label: "Roughness zones",
+    tip: "Number of cosine harmonics shaping the roughness envelope. 1 = one large concentrated patch; 8 = many small scattered zones.",
+    min: 1,
+    max: 8,
+    step: 1,
+    key: "profileHarmonics"
+  },
+  {
+    id: "coastLakeSmoothThreshMult",
+    label: "Lake smooth multiplier",
+    tip: "Smooth-threshold multiplier for lake shores. 1 = same roughness as ocean.",
+    min: 0.1,
+    max: 5,
+    step: 0.1,
+    key: "lakeSmoothThreshMult"
   }
 ];
 
-const PREVIEW_SEED = "preview_coastline_42";
+const COAST_PRESETS: Record<string, Omit<CoastlineSettings, "enabled">> = {
+  Default: {
+    ...defaultCoastSettings,
+  },
+  Smooth: {
+    maxDepth: 3,
+    baseAmplitude: 1,
+    amplitudeDecay: 0.6,
+    minEdge: 1,
+    smoothThreshold: 0.3,
+    roughnessContrast: 2.0,
+    profileHarmonics: 1,
+    lakeSmoothThreshMult: 3.0,
+  },
+  Rocky: {
+    maxDepth: 4,
+    baseAmplitude: 3.0,
+    amplitudeDecay: 0.7,
+    minEdge: 0.5,
+    smoothThreshold: 0.05,
+    roughnessContrast: 0.8,
+    profileHarmonics: 7,
+    lakeSmoothThreshMult: 1.2,
+  },
+  Fjords: {
+    maxDepth: 4,
+    baseAmplitude: 2.8,
+    amplitudeDecay: 0.92,
+    minEdge: 0.3,
+    smoothThreshold: 0.25,
+    roughnessContrast: 5.0,
+    profileHarmonics: 2,
+    lakeSmoothThreshMult: 2.5,
+  },
+  Archipelago: {
+    maxDepth: 4,
+    baseAmplitude: 1.8,
+    amplitudeDecay: 0.88,
+    minEdge: 0.5,
+    smoothThreshold: 0.18,
+    roughnessContrast: 1.0,
+    profileHarmonics: 8,
+    lakeSmoothThreshMult: 1.5,
+  },
+};
+
+const PREVIEW_SEED = "preview_coastline";
 
 export function open(): void {
   if (!byId("coastlineSettingsDialog")) {
@@ -90,50 +154,102 @@ export function open(): void {
 
     if (!slider || !output || !resetBtn) continue;
 
-    const defaultVal = coastSettings[key] as number;
+    const defaultVal = defaultCoastSettings[key] as number;
 
     slider.on("input", () => {
       const value = slider.valueAsNumber;
-      coastSettings[key] = value;
+      defaultCoastSettings[key] = value;
       output.textContent = String(value);
       updatePreviews();
       drawFeatures();
     });
 
     resetBtn.on("click", () => {
-      (coastSettings[key] as number) = defaultVal;
+      (defaultCoastSettings[key] as number) = defaultVal;
       slider.value = String(defaultVal);
       output.textContent = String(defaultVal);
       updatePreviews();
       drawFeatures();
     });
   }
 
+  const enabledCb = byId("coastEnabled") as HTMLInputElement | null;
+  const slidersDiv = byId("coastSliders") as HTMLElement | null;
+  const track = byId("coastEnabledTrack") as HTMLElement | null;
+  const thumb = byId("coastEnabledThumb") as HTMLElement | null;
+  if (!enabledCb || !slidersDiv || !track || !thumb) return;
+
+  enabledCb.checked = defaultCoastSettings.enabled;
+  const syncToggle = () => {
+    track.style.background = defaultCoastSettings.enabled ? "#33bb88" : "#bbb";
+    thumb.style.left = defaultCoastSettings.enabled ? "18px" : "2px";
+    slidersDiv.style.opacity = defaultCoastSettings.enabled ? "" : "0.4";
+    slidersDiv.style.pointerEvents = defaultCoastSettings.enabled ? "" : "none";
+    Object.keys(COAST_PRESETS).forEach(name => {
+      const btn = byId(`coastPreset_${name}`) as HTMLButtonElement | null;
+      if (btn) btn.disabled = !defaultCoastSettings.enabled;
+    });
+  };
+
+  syncToggle();
+  enabledCb.on("change", () => {
+    defaultCoastSettings.enabled = enabledCb.checked;
+    syncToggle();
+    updatePreviews();
+    drawFeatures();
+  });
+
+  // Preset buttons
+  for (const name of Object.keys(COAST_PRESETS)) {
+    const btn = byId(`coastPreset_${name}`) as HTMLButtonElement | null;
+    if (!btn) continue;
+    btn.on("click", () => {
+      const preset = COAST_PRESETS[name];
+      for (const {id, key} of SLIDER_DEFS) {
+        if (!(key in preset)) continue;
+        const val = preset[key as keyof typeof preset];
+        defaultCoastSettings[key] = val;
+        const slider = byId(id) as HTMLInputElement | null;
+        const output = byId(`${id}Out`) as HTMLElement | null;
+        if (slider) slider.value = String(val);
+        if (output) output.textContent = String(val);
+      }
+      updatePreviews();
+      drawFeatures();
+    });
+  }
+
   updatePreviews();
   closeDialogs("#culturesEditor, .stable");
 
   $("#coastlineSettingsDialog").dialog({
     title: "Coastline Settings Editor",
     resizable: false,
-    width: "auto",
+    width: 'auto',
     position: {my: "right top", at: "right-10 top+10", of: "svg"}
   });
 }
 
 function buildDialogHTML(): string {
+  const presetButtons = Object.keys(COAST_PRESETS)
+    .map(
+      name => `<button id="coastPreset_${name}" style="font-size:.78em;padding:2px 8px">${name}</button>`
+    )
+    .join("");
+
   const rows = SLIDER_DEFS.map(({id, label, tip, min, max, step, key}) => {
-    const value = coastSettings[key];
+    const value = defaultCoastSettings[key];
     return /* html */ `
       <tr data-tip="${tip}">
-        <td style="padding:4px 8px;white-space:nowrap">${label}</td>
-        <td style="padding:4px 4px">
+        <td style="padding:2px 0;white-space:nowrap">${label}</td>
+        <td style="padding:2px 4px">
           <input id="${id}" type="range" min="${min}" max="${max}" step="${step}" value="${value}"
             style="width:160px;vertical-align:middle"/>
         </td>
-        <td style="padding:4px 6px;min-width:2.8em;text-align:right">
+        <td style="padding:2px 6px;min-width:2em;text-align:right">
           <span id="${id}Out" style="font-family:monospace;font-size:.85em">${value}</span>
         </td>
-        <td style="padding:4px 4px">
+        <td style="padding:2px 0">
           <button id="${id}Reset" title="Reset to default"
             style="font-size:.75em;padding:1px 5px;cursor:pointer">↺</button>
         </td>
@@ -142,19 +258,32 @@ function buildDialogHTML(): string {
 
   return /* html */ `
     <div id="coastlineSettingsDialog" style="display:none">
-      <table style="border-collapse:collapse;width:100%">
-        <tbody>${rows}</tbody>
-      </table>
+      <div style="display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #ddd">
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none" data-tip="Enable or disable coastline fractalization. When disabled, coastlines are simple arcs between feature vertices. Enabling adds naturalistic roughness but can increase rendering time, especially at high detail levels.">
+          <input id="coastEnabled" type="checkbox" ${defaultCoastSettings.enabled ? "checked" : ""}
+            style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"/>
+          <span id="coastEnabledTrack" style="position:relative;display:inline-block;width:36px;height:20px;border-radius:10px;background:${defaultCoastSettings.enabled ? "#33bb88" : "#bbb"};cursor:pointer;flex-shrink:0">
+            <span id="coastEnabledThumb" style="position:absolute;top:2px;left:${defaultCoastSettings.enabled ? "18px" : "2px"};width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)"></span>
+          </span>
+        </label>
+        <div style="display:flex;align-items:center;gap:4px">
+          <span style="color:#999;font-size:.85em">Preset</span>
+          ${presetButtons}
+        </div>
+      </div>
+      <div id="coastSliders">
+        <table style="border-collapse:collapse;width:100%">
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
       <div style="display:flex;gap:6px;margin-top:10px;align-items:flex-start">
         <div style="flex:1;min-width:0">
-          <div style="font-size:.72em;color:#999;margin-bottom:3px">Roughness profile</div>
-          <canvas id="coastRoughnessGraph" width="266" height="100"
-            style="border:1px solid #ccc;border-radius:2px;display:block"></canvas>
+          <div style="color:#999;font-size:.85em;margin-bottom:3px">Roughness profile</div>
+          <canvas id="coastRoughnessGraph" width="auto" height="100" style="display:block"></canvas>
         </div>
         <div>
-          <div style="font-size:.72em;color:#999;margin-bottom:3px">Shape preview</div>
-          <canvas id="coastShapePreview" width="100" height="100"
-            style="border:1px solid #ccc;border-radius:2px;display:block"></canvas>
+          <div style="color:#999;font-size:.85em;margin-bottom:3px">Shape preview</div>
+          <canvas id="coastShapePreview" width="100" height="100" style="display:block"></canvas>
         </div>
       </div>
     </div>`;
@@ -174,24 +303,18 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
   ctx.clearRect(0, 0, W, H);
 
   const rand = Alea(PREVIEW_SEED);
-  const profile = makeRoughnessProfile(rand, coastSettings.roughnessContrast);
-
-  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);
-  const threshY = pt + gH * (1 - thresh);
-  const baseY = pt + gH;
+  const profile = makeRoughnessProfile(rand, defaultCoastSettings.roughnessContrast, defaultCoastSettings.profileHarmonics);
+
+  const thresh = Math.min(Math.max(defaultCoastSettings.smoothThreshold, 0), 1);
+  const threshY = H * (1 - thresh);
+  const baseY = H;
 
   // Pre-compute curve points
   const xs: number[] = [];
   const ys: number[] = [];
   for (let i = 0; i <= PROFILE_SIZE; i++) {
-    xs.push(pl + (i / PROFILE_SIZE) * gW);
-    ys.push(pt + gH * (1 - profile[i % PROFILE_SIZE]));
+    xs.push((i / PROFILE_SIZE) * W);
+    ys.push(H * (1 - profile[i % PROFILE_SIZE]));
   }
 
   // Helper: fill area under curve clipped to a horizontal band
@@ -200,7 +323,7 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
     if (h <= 0) return;
     ctx.save();
     ctx.beginPath();
-    ctx.rect(pl, clipTop, gW, h);
+    ctx.rect(0, clipTop, W, h);
     ctx.clip();
     ctx.beginPath();
     ctx.moveTo(xs[0], ys[0]);
@@ -219,7 +342,7 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
     if (h <= 0) return;
     ctx.save();
     ctx.beginPath();
-    ctx.rect(pl, clipTop, gW, h);
+    ctx.rect(0, clipTop, W, h);
     ctx.clip();
     ctx.beginPath();
     ctx.moveTo(xs[0], ys[0]);
@@ -231,8 +354,8 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
   };
 
   // Rough zone (above threshold): warm orange
-  fillBand(pt, threshY, "rgba(210,90,30,0.20)");
-  strokeBand(pt, threshY, "#c85520");
+  fillBand(0, threshY, "rgba(210,90,30,0.20)");
+  strokeBand(0, threshY, "#c85520");
 
   // Smooth zone (below threshold): cool teal
   fillBand(threshY, baseY, "rgba(30,165,135,0.20)");
@@ -242,8 +365,8 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
   ctx.save();
   ctx.beginPath();
   ctx.setLineDash([4, 3]);
-  ctx.moveTo(pl, threshY);
-  ctx.lineTo(W - pr, threshY);
+  ctx.moveTo(0, threshY);
+  ctx.lineTo(W, threshY);
   ctx.strokeStyle = "rgba(30,140,100,0.75)";
   ctx.lineWidth = 1;
   ctx.stroke();
@@ -253,13 +376,19 @@ function drawRoughnessGraph(canvas: HTMLCanvasElement): void {
   // Zone labels
   ctx.font = "bold 8px sans-serif";
   ctx.textAlign = "left";
-  if (threshY > pt + 12) {
+  if (threshY > 12) {
     ctx.fillStyle = "#c85520";
-    ctx.fillText("ROUGH", pl + 3, pt + 9);
+    ctx.fillText("ROUGH", 12, 11);
   }
   if (baseY - threshY > 10) {
     ctx.fillStyle = "#18a888";
-    ctx.fillText("CALM", pl + 3, baseY - 2);
+    ctx.fillText("CALM", 12, baseY - 4);
+  }
+
+  if (!defaultCoastSettings.enabled) {
+    ctx.fillStyle = "rgba(0,0,0,0.38)";
+    ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = "#fff";
   }
 }
 
@@ -281,7 +410,9 @@ function drawShapePreview(canvas: HTMLCanvasElement): void {
     [cx - r, cy] // left
   ];
 
-  const shape = fractalize(basePts, Alea(PREVIEW_SEED), coastSettings);
+  const shape = defaultCoastSettings.enabled
+    ? fractalize(basePts, Alea(PREVIEW_SEED), defaultCoastSettings)
+    : {points: basePts, origIndices: [0, 1, 2, 3]};
   const path = new Path2D(`${buildCoastlinePath(shape)}Z`);
 
   // Ocean background — radial gradient, lighter at centre
@@ -335,6 +466,18 @@ function drawShapePreview(canvas: HTMLCanvasElement): void {
     ctx.lineWidth = 0.8;
     ctx.stroke();
   }
+
+  if (!defaultCoastSettings.enabled) {
+    ctx.fillStyle = "rgba(0,0,0,0.38)";
+    ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = "#fff";
+    ctx.font = "bold 11px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText("OFF", cx, cy);
+    ctx.textBaseline = "alphabetic";
+    ctx.textAlign = "left";
+  }
 }
 
 declare global {