allow to edit MFCG link

index.css

@@ -2277,10 +2277,10 @@ svg.button {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  max-width: 22em;
-  background-color: #fff;
+  max-width: 23em;
   padding: 1.2em;
-  border: solid 1px #000;
+  background-color: var(--bg-dialogs);
+  border: solid 1px var(--dark-solid);
   font-size: 1.2em;
   z-index: 1000;
 }

index.html

@@ -2036,9 +2036,12 @@
         <div id="mfcgPreviewSection" data-tip="Burg preview in the Medieval Fantasy City Generator. Default seed is a combination 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>.
+            <div id="mfcgBurgSeedSection">
               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>
+            <i id="addCustomMFCGBurgLink" data-tip="Provide custom link to the burg map" class="icon-pencil pointer" style="margin-left: .1em"></i>
+          </div>
           <iframe id="mfcgPreview" sandbox="allow-scripts allow-same-origin"></iframe>
         </div>
       </div>
@@ -3656,7 +3659,7 @@
     <div id="prompt" style="display: none" class="dialog">
       <form id="promptForm">
         <div id="promptText"></div>
-        <input id="promptInput" type="number" step=.01 placeholder="type value" autocomplete="off" required>
+        <input id="promptInput" type="number" step=.01 placeholder="type value" autocomplete="off">
         <button type="submit">Confirm</button>
         <button type="button" id="promptCancel" formnovalidate>Cancel</button>
       </form>

modules/ui/burg-editor.js

@@ -37,6 +37,7 @@ function editBurg(id) {
   burgBody.querySelectorAll(".burgFeature").forEach(el => el.addEventListener("click", toggleFeature));
   document.getElementById("mfcgBurgSeed").addEventListener("change", changeSeed);
   document.getElementById("regenerateMFCGBurgSeed").addEventListener("click", randomizeSeed);
+  document.getElementById("addCustomMFCGBurgLink").addEventListener("click", addCustomMfcgLink);
 
   document.getElementById("burgStyleShow").addEventListener("click", showStyleSection);
   document.getElementById("burgStyleHide").addEventListener("click", hideStyleSection);
@@ -112,7 +113,13 @@ function editBurg(id) {
     if (options.showMFCGMap) {
       document.getElementById("mfcgPreviewSection").style.display = "block";
       updateMFCGFrame(b);
+
+      if (b.link) {
+        document.getElementById("mfcgBurgSeedSection").style.display = "none";
+      } else {
+        document.getElementById("mfcgBurgSeedSection").style.display = "inline-block";
         document.getElementById("mfcgBurgSeed").value = getBurgSeed(b);
+      }
     } else {
       document.getElementById("mfcgPreviewSection").style.display = "none";
     }
@@ -428,6 +435,17 @@ function editBurg(id) {
     document.getElementById("mfcgBurgSeed").value = burgSeed;
   }
 
+  function addCustomMfcgLink() {
+    const id = +elSelected.attr("data-id");
+    const burg = pack.burgs[id];
+    const message = "Enter custom link to the burg map. It can be a link to Medieval Fantasy City Generator or other tool. Keep empty to use MFCG seed";
+    prompt(message, {default: burg.link || "", required: false}, link => {
+      if (link) burg.link = link;
+      else delete burg.link;
+      updateMFCGFrame(burg);
+    });
+  }
+
   function openEmblemEdit() {
     const id = +elSelected.attr("data-id"),
       burg = pack.burgs[id];

modules/ui/editors.js

@@ -265,6 +265,8 @@ function getBurgSeed(burg) {
 }
 
 function getMFCGlink(burg) {
+  if (burg.link) return burg.link;
+
   const {cells} = pack;
   const {name, population, cell} = burg;
   const burgSeed = getBurgSeed(burg);

utils/commonUtils.js

@@ -154,18 +154,23 @@ void (function () {
   const prompt = document.getElementById("prompt");
   const form = prompt.querySelector("#promptForm");
 
-  window.prompt = function (promptText = "Please provide an input", options = {default: 1, step: 0.01, min: 0, max: 100}, callback) {
-    if (options.default === undefined) {
-      ERROR && console.error("Prompt: options object does not have default value defined");
-      return;
-    }
+  const defaultText = "Please provide an input";
+  const defaultOptions = {default: 1, step: 0.01, min: 0, max: 100, required: true};
+
+  window.prompt = function (promptText = defaultText, options = defaultOptions, callback) {
+    if (options.default === undefined) return ERROR && console.error("Prompt: options object does not have default value defined");
+
     const input = prompt.querySelector("#promptInput");
     prompt.querySelector("#promptText").innerHTML = promptText;
+
     const type = typeof options.default === "number" ? "number" : "text";
     input.type = type;
+
     if (options.step !== undefined) input.step = options.step;
     if (options.min !== undefined) input.min = options.min;
     if (options.max !== undefined) input.max = options.max;
+
+    input.required = options.required === false ? false : true;
     input.placeholder = "type a " + type;
     input.value = options.default;
     prompt.style.display = "block";
@@ -173,9 +178,9 @@ void (function () {
     form.addEventListener(
       "submit",
       event => {
+        event.preventDefault();
         prompt.style.display = "none";
         const v = type === "number" ? +input.value : input.value;
-        event.preventDefault();
         if (callback) callback(v);
       },
       {once: true}
@@ -183,7 +188,9 @@ void (function () {
   };
 
   const cancel = prompt.querySelector("#promptCancel");
-  cancel.addEventListener("click", () => (prompt.style.display = "none"));
+  cancel.addEventListener("click", () => {
+    prompt.style.display = "none";
+  });
 })();
 
 // indexedDB; ldb object