From a9755dacc8a13b43c20c819bfe05871a39bed955 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 16 Sep 2021 10:20:54 +0300
Subject: [PATCH] burg editor - MFCG preview

---
 index.css                    |   6 ++
 index.html                   |  16 ++++-
 main.js                      |   1 -
 modules/markers-generator.js |   2 +-
 modules/ui/burg-editor.js    | 111 ++++++++++++++++++-----------------
 5 files changed, 78 insertions(+), 58 deletions(-)

diff --git a/index.css b/index.css
index a5768367..1b0512fe 100644
--- a/index.css
+++ b/index.css
@@ -36,6 +36,12 @@ textarea {
   width: 100%;
 }
 
+iframe {
+  border: 0;
+  pointer-events: none;
+  width: 100%;
+}
+
 #map {
   background-color: #000000;
   mask-mode: alpha;
diff --git a/index.html b/index.html
index a143b30c..c84bcd61 100644
--- a/index.html
+++ b/index.html
@@ -1947,8 +1947,9 @@
     <div id="burgEditor" class="dialog" style="display: none">
 
       <div id="burgBody" style="padding-bottom: .3em">
-        <svg viewBox="0 0 200 200" width="14em" height="14em"><use id="burgEmblem"></use></svg>
-        <div style="float: right">
+        <div style="display: flex; align-items: center">
+          <svg data-tip="Burg emblem. Click to edit" class="pointer" viewBox="0 0 200 200" width="13em" height="13em"><use id="burgEmblem"></use></svg>
+          <div>
           <div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
 
           <div>
@@ -2003,6 +2004,16 @@
             <div class="label">Elevation:</div>
             <span id="burgElevation"></span> above sea level
           </div>
+          </div>
+        </div>
+
+        <div data-tip="Burg preview in the Medieval Fantasy City Generator. Default seed is a conbimation of map seed and burg id" style="display: flex; flex-direction: column">
+          <div>
+            See in <a id="mfcgLink" target="_blank">City Generator by Watabou</a>. 
+            Seed: <input id="mfcgBurgSeed" style="width: 10em" type="number" min=1 max="1e13" step="1" />
+            <i id="regenerateMFCGBurgSeed" data-tip="Randomize Medieval Fantasy City Generator burg seed" class="icon-arrows-cw pointer" style="margin-left: .1em"></i>
+          </div>
+          <iframe id="mfcgPreview" sandbox="allow-scripts allow-same-origin"></iframe>
         </div>
       </div>
 
@@ -2024,7 +2035,6 @@
           <button id="burgEditAnchorStyle" data-tip="Edit port icon (anchor) style for burg group in Style Editor" class="icon-anchor"></button>
         </div>
 
-        <button id="burgSeeInMFCG" data-tip="Open burg in the Medieval Fantasy City Generator by Watabou. Ctrl + click to change the seed" class="icon-map-o"></button>
         <button id="burgEditEmblem" data-tip="Edit emblem" class="icon-shield-alt"></button>
         <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
         <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
diff --git a/main.js b/main.js
index 25ebb60e..e44ee410 100644
--- a/main.js
+++ b/main.js
@@ -318,7 +318,6 @@ function findBurgForMFCG(params) {
     else if (p[0] === "shantytown") b.shanty = +p[1];
     else b[p[0]] = +p[1]; // other parameters
   }
-  b.MFCGlink = document.referrer; // set direct link to MFCG
   if (params.get("name") && params.get("name") != "null") b.name = params.get("name");
 
   const label = burgLabels.select("[data-id='" + burgId + "']");
diff --git a/modules/markers-generator.js b/modules/markers-generator.js
index c940154b..51286461 100644
--- a/modules/markers-generator.js
+++ b/modules/markers-generator.js
@@ -224,7 +224,7 @@ window.Markers = (function () {
 
       const dungeonSeed = `${seed}${cell}`;
       const name = "Dungeon";
-      const legend = `<div>Undiscovered dungeon. See <a href="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" target="_blank">One page dungeon</a></div><iframe src="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" frameborder="0"></iframe>`;
+      const legend = `<div>Undiscovered dungeon. See <a href="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" target="_blank">One page dungeon</a></div><iframe style="height: 33vh" src="https://watabou.github.io/one-page-dungeon/?seed=${dungeonSeed}" sandbox="allow-scripts allow-same-origin"></iframe>`;
       notes.push({id, name, legend});
       quantity--;
     }
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index 433a9a9d..dce02021 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -10,15 +10,11 @@ function editBurg(id) {
   burgLabels.selectAll("text").call(d3.drag().on("start", dragBurgLabel)).classed("draggable", true);
   updateBurgValues();
 
-  const my = id || d3.event.target.tagName === "text" ? "center bottom-20" : "center top+20";
-  const at = id ? "center" : d3.event.target.tagName === "text" ? "top" : "bottom";
-  const of = id ? "svg" : d3.event.target;
-
   $("#burgEditor").dialog({
     title: "Edit Burg",
     resizable: false,
     close: closeBurgEditor,
-    position: {my, at, of, collision: "fit"}
+    position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"}
   });
 
   if (modules.editBurg) return;
@@ -39,6 +35,8 @@ function editBurg(id) {
   document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture);
   document.getElementById("burgPopulation").addEventListener("change", changePopulation);
   burgBody.querySelectorAll(".burgFeature").forEach(el => el.addEventListener("click", toggleFeature));
+  document.getElementById("mfcgBurgSeed").addEventListener("change", changeSeed);
+  document.getElementById("regenerateMFCGBurgSeed").addEventListener("click", randomizeSeed);
 
   document.getElementById("burgStyleShow").addEventListener("click", showStyleSection);
   document.getElementById("burgStyleHide").addEventListener("click", hideStyleSection);
@@ -46,7 +44,7 @@ function editBurg(id) {
   document.getElementById("burgEditIconStyle").addEventListener("click", editGroupIconStyle);
   document.getElementById("burgEditAnchorStyle").addEventListener("click", editGroupAnchorStyle);
 
-  document.getElementById("burgSeeInMFCG").addEventListener("click", openInMFCG);
+  document.getElementById("burgEmblem").addEventListener("click", openEmblemEdit);
   document.getElementById("burgEditEmblem").addEventListener("click", openEmblemEdit);
   document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg);
   document.getElementById("burglLegend").addEventListener("click", editBurgLegend);
@@ -110,6 +108,9 @@ function editBurg(id) {
     const coaID = "burgCOA" + id;
     COArenderer.trigger(coaID, b.coa);
     document.getElementById("burgEmblem").setAttribute("href", "#" + coaID);
+
+    updateMFCGFrame(b);
+    document.getElementById("mfcgBurgSeed").value = getBurgSeed(b);
   }
 
   // in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
@@ -402,59 +403,63 @@ function editBurg(id) {
     editStyle("anchors", g);
   }
 
-  function openInMFCG(event) {
-    const id = elSelected.attr("data-id");
-    const burg = pack.burgs[id];
-    const defSeed = +(seed + id.padStart(4, 0));
-    if (isCtrlClick(event)) {
-      prompt(
-        `Please provide a Medieval Fantasy City Generator seed. 
-        Seed should be a number. Default seed is FMG map seed + burg id padded to 4 chars with zeros (${defSeed}). 
-        Please note that if seed is custom, "Overworld" button from MFCG will open a different map`,
-        {default: burg.MFCG || defSeed, step: 1, min: 1, max: 1e13 - 1},
-        v => {
-          burg.MFCG = v;
-          openMFCG(v);
-        }
-      );
-    } else openMFCG();
+  function updateMFCGFrame(burg) {
+    const mfcgURL = getMFCGlink(burg);
+    document.getElementById("mfcgPreview").setAttribute("src", mfcgURL);
+    document.getElementById("mfcgLink").setAttribute("href", mfcgURL);
+  }
 
-    function openMFCG(seed) {
-      if (!seed && burg.MFCGlink) {
-        openURL(burg.MFCGlink);
-        return;
-      }
-      const cells = pack.cells;
-      const name = elSelected.text();
-      const size = Math.max(Math.min(rn(burg.population), 100), 6); // to be removed once change on MFDC is done
-      const population = rn(burg.population * populationRate * urbanization);
+  function getBurgSeed(burg) {
+    return burg.MFCG || Number(`${seed}${String(burg.i).padStart(4, 0)}`);
+  }
 
-      const s = burg.MFCG || defSeed;
-      const cell = burg.cell;
-      const hub = +cells.road[cell] > 50;
-      const river = cells.r[cell] ? 1 : 0;
+  function getMFCGlink(burg) {
+    const {cells} = pack;
+    const {name, population, cell} = burg;
+    const burgSeed = getBurgSeed(burg);
+    const size = Math.max(Math.min(rn(population), 100), 6);
+    const people = rn(population * populationRate * urbanization);
 
-      const coast = +burg.port;
-      const citadel = +burg.citadel;
-      const walls = +burg.walls;
-      const plaza = +burg.plaza;
-      const temple = +burg.temple;
-      const shanty = +burg.shanty;
+    const hub = +cells.road[cell] > 50;
+    const river = cells.r[cell] ? 1 : 0;
 
-      const sea = coast && cells.haven[burg.cell] ? getSeaDirections(burg.cell) : "";
-      function getSeaDirections(i) {
-        const p1 = cells.p[i];
-        const p2 = cells.p[cells.haven[i]];
-        let deg = (Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI - 90;
-        if (deg < 0) deg += 360;
-        const norm = rn(normalize(deg, 0, 360) * 2, 2); // 0 = south, 0.5 = west, 1 = north, 1.5 = east
-        return "&sea=" + norm;
-      }
+    const coast = +burg.port;
+    const citadel = +burg.citadel;
+    const walls = +burg.walls;
+    const plaza = +burg.plaza;
+    const temple = +burg.temple;
+    const shanty = +burg.shanty;
 
-      const site = "http://fantasycities.watabou.ru/?random=0&continuous=0";
-      const url = `${site}&name=${name}&population=${population}&size=${size}&seed=${s}&hub=${hub}&river=${river}&coast=${coast}&citadel=${citadel}&plaza=${plaza}&temple=${temple}&walls=${walls}&shantytown=${shanty}${sea}`;
-      openURL(url);
+    const sea = coast && cells.haven[cell] ? getSeaDirections(cell) : "";
+    function getSeaDirections(i) {
+      const p1 = cells.p[i];
+      const p2 = cells.p[cells.haven[i]];
+      let deg = (Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI - 90;
+      if (deg < 0) deg += 360;
+      const norm = rn(normalize(deg, 0, 360) * 2, 2); // 0 = south, 0.5 = west, 1 = north, 1.5 = east
+      return "&sea=" + norm;
     }
+
+    const baseURL = "https://watabou.github.io/city-generator/?random=0&continuous=0";
+    const url = `${baseURL}&name=${name}&population=${people}&size=${size}&seed=${burgSeed}&hub=${hub}&river=${river}&coast=${coast}&citadel=${citadel}&plaza=${plaza}&temple=${temple}&walls=${walls}&shantytown=${shanty}${sea}`;
+    return url;
+  }
+
+  function changeSeed() {
+    const id = +elSelected.attr("data-id");
+    const burg = pack.burgs[id];
+    const burgSeed = +this.value;
+    burg.MFCG = burgSeed;
+    updateMFCGFrame(burg);
+  }
+
+  function randomizeSeed() {
+    const id = +elSelected.attr("data-id");
+    const burg = pack.burgs[id];
+    const burgSeed = rand(1e9 - 1);
+    burg.MFCG = burgSeed;
+    updateMFCGFrame(burg);
+    document.getElementById("mfcgBurgSeed").value = burgSeed;
   }
 
   function openEmblemEdit() {