v1.0.07

modules/ui/burg-editor.js

@@ -94,7 +94,7 @@ function editBurg() {
   }
 
   function createNewGroup() {
-    if (!this.value) {tip("Please provide a valid group name"); return;}
+    if (!this.value) {tip("Please provide a valid group name", false, "error"); return;}
     let group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
     if (Number.isFinite(+group.charAt(0))) group = "g" + group;
 

modules/ui/burgs-editor.js

@@ -186,7 +186,7 @@ function editBurgs() {
     if (!pack.burgs[burg].port) {
       const haven = pack.cells.haven[pack.burgs[burg].cell];
       const port = haven ? pack.cells.f[haven] : -1;
-      if (!haven) tip("Port haven is not found, system won't be able to make a searoute", false, "warning");
+      if (!haven) tip("Port haven is not found, system won't be able to make a searoute", false, "warn");
       pack.burgs[burg].port = port;
 
       const g = pack.burgs[burg].capital ? "cities" : "towns";

modules/ui/general.js

@@ -18,16 +18,18 @@ const tooltip = document.getElementById("tooltip");
 document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
 document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
 
-function tip(tip = "Tip is undefined", main = false, error = false) {
-  const reg = "linear-gradient(0.1turn, #ffffff00, #5e5c5c66, #ffffff00)";
-  const red = "linear-gradient(0.1turn, #ffffff00, #e3141499, #ffffff00)";
+function tip(tip = "Tip is undefined", main, error, time) {
   tooltip.innerHTML = tip;
-  tooltip.style.background = error ? red : reg;
-  if (main) tooltip.dataset.main = tip;
+  tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)";
+  if (error === "error") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)"; else
+  if (error === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)"; else
+  if (error === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
+
+  if (main) tooltip.dataset.main = tip; // set main tip
+  if (time) setTimeout(tooltip.dataset.main = "", time); // clear main in some time
 }
 
 function showMainTip() {
-  tooltip.style.background = "linear-gradient(0.1turn, #aaffff00, #3a26264d, #ffffff00)";
   tooltip.innerHTML = tooltip.dataset.main;
 }
 
@@ -236,7 +238,8 @@ document.addEventListener("keydown", function(event) {
   else if (ctrl && key === 80) saveAsImage("png"); // Ctrl + "P" to save as PNG
   else if (ctrl && key === 83) saveAsImage("svg"); // Ctrl + "S" to save as SVG
   else if (ctrl && key === 77) saveMap(); // Ctrl + "M" to save MAP file
-  else if (ctrl && key === 76) mapToLoad.click(); // Ctrl + "L" to load MAP
+  else if (ctrl && key === 85) mapToLoad.click(); // Ctrl + "U" to load MAP from URL
+  else if (ctrl && key === 76) mapToLoad.click(); // Ctrl + "L" to load MAP from local file
   else if (key === 46) removeElementOnKey(); // "Delete" to remove the selected element
 
   else if (shift && key === 192) console.log(pack.cells); // Shift + "`" to log cells data

modules/ui/options.js

@@ -677,6 +677,7 @@ optionsContent.addEventListener("input", function(event) {
   else if (id === "provincesInput") provincesOutput.value = value;
   else if (id === "provincesOutput") provincesOutput.value = value;
   else if (id === "provincesOutput") powerOutput.value = value;
+  else if (id === "powerInput") powerOutput.value = value;
   else if (id === "powerOutput") powerInput.value = value;
   else if (id === "neutralInput") neutralOutput.value = value;
   else if (id === "neutralOutput") neutralInput.value = value;
@@ -991,12 +992,14 @@ document.getElementById("sticked").addEventListener("click", function(event) {
   const id = event.target.id;
   if (id === "newMapButton") regeneratePrompt();
   else if (id === "saveButton") toggleSavePane();
-  else if (id === "loadMap") mapToLoad.click();
+  else if (id === "loadButton") toggleLoadPane();
   else if (id === "zoomReset") resetZoom(1000);
   else if (id === "saveMap") saveMap();
   else if (id === "saveSVG") saveAsImage("svg");
   else if (id === "savePNG") saveAsImage("png");
   if (id === "saveMap" || id === "saveSVG" || id === "savePNG") toggleSavePane();
+  if (id === "loadURL") {loadURL(); toggleLoadPane()}
+  if (id === "loadMap") {mapToLoad.click(); toggleLoadPane()}
 });
 
 function regeneratePrompt() {
@@ -1033,12 +1036,32 @@ function toggleSavePane() {
       }
     });
   }
+}
 
+function toggleLoadPane() {
+  if (loadDropdown.style.display === "block") {loadDropdown.style.display = "none"; return;}
+  loadDropdown.style.display = "block";
+}
+
+function loadURL() {
+  const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+  const inner = `Provide URL to a .map file: <input id="mapURL" type="url" style="width: 254px" placeholder="http://www.e-cloud.com/fantasy_map.map"">`;
+  alertMessage.innerHTML = inner;
+  $("#alert").dialog({resizable: false, title: "Load map from URL", width: 280,
+    buttons: {
+      Load: function() {
+        const value = mapURL.value;
+        if (!pattern.test(value)) {tip("Please provide a valid URL", false, "error"); return;}
+        loadMapFromURL(value);
+        $(this).dialog("close");
+      },
+      Cancel: function() {$(this).dialog("close");}
+    }
+  });
 }
 
 // load map
 document.getElementById("mapToLoad").addEventListener("change", function() {
-  closeDialogs();
   const fileToLoad = this.files[0];
   this.value = "";
   uploadFile(fileToLoad);