diff --git a/vue/public/index.html b/vue/public/index.html
index b626a05b..b2850f81 100644
--- a/vue/public/index.html
+++ b/vue/public/index.html
@@ -1298,6 +1298,7 @@
     <input type="file" accept=".txt" id="namesbaseToLoad">
   </div>
 
+  <script src="refactor-variables.js"></script>
   <script src="refactor-one.js"></script>
   <script src="refactor-two.js"></script>
   <script src="refactor-three.js"></script>
diff --git a/vue/public/refactor-four.js b/vue/public/refactor-four.js
index 856ab383..6c86e8e9 100644
--- a/vue/public/refactor-four.js
+++ b/vue/public/refactor-four.js
@@ -6273,57 +6273,6 @@ function templateVolcano(mod) {
     });
   }
 
-  // Toggle Options pane
-  $("#optionsTrigger").on("click", function() {
-    if (tooltip.getAttribute("data-main") === "Сlick the arrow button to open options") {
-      tooltip.setAttribute("data-main", "");
-      tooltip.innerHTML = "";
-      localStorage.setItem("disable_click_arrow_tooltip", true);
-    }
-    if ($("#options").css("display") === "none") {
-      $("#regenerate").hide();
-      $("#options").fadeIn();
-      $("#layoutTab").click();
-      $("#optionsTrigger").removeClass("icon-right-open glow").addClass("icon-left-open");
-    } else {
-      $("#options").fadeOut();
-      $("#optionsTrigger").removeClass("icon-left-open").addClass("icon-right-open");
-    }
-  });
-  $("#collapsible").hover(function() {
-    if ($("#optionsTrigger").hasClass("glow")) return;
-    if ($("#options").css("display") === "none") {
-      $("#regenerate").show();
-      $("#optionsTrigger").removeClass("glow");
-    }}, function() {
-    $("#regenerate").hide();
-  });
-
-  // move layers on mapLayers dragging (jquery sortable)
-  function moveLayer(event, ui) {
-    const el = getLayer(ui.item.attr("id"));
-    if (el) {
-      const prev = getLayer(ui.item.prev().attr("id"));
-      const next = getLayer(ui.item.next().attr("id"));
-      if (prev) {el.insertAfter(prev);} else if (next) {el.insertBefore(next);}
-    }
-  }
-
-  // define connection between option layer buttons and actual svg groups
-  function getLayer(id) {
-    if (id === "toggleGrid") {return $("#grid");}
-    if (id === "toggleOverlay") {return $("#overlay");}
-    if (id === "toggleHeight") {return $("#terrs");}
-    if (id === "toggleCultures") {return $("#cults");}
-    if (id === "toggleRoutes") {return $("#routes");}
-    if (id === "toggleRivers") {return $("#rivers");}
-    if (id === "toggleCountries") {return $("#regions");}
-    if (id === "toggleBorders") {return $("#borders");}
-    if (id === "toggleRelief") {return $("#terrain");}
-    if (id === "toggleLabels") {return $("#labels");}
-    if (id === "toggleIcons") {return $("#icons");}
-  }
-
   // UI Button handlers
   $("button, a, li, i").on("click", function() {
     const id = this.id;
diff --git a/vue/public/refactor-main.js b/vue/public/refactor-main.js
index 7380b2b9..957e5b32 100644
--- a/vue/public/refactor-main.js
+++ b/vue/public/refactor-main.js
@@ -1,127 +1,4 @@
-// Fantasy Map Generator main script
-// Azgaar (maxganiev@yandex.com). Minsk, 2017-2018
-// https://github.com/Azgaar/Fantasy-Map-Generator
-// GNU General Public License v3.0
 
-// To programmers:
-  // I don't mind of any help with programming
-  // I know the code is badly structurized and it's hard to read it as a single page
-  // Meanwhile a core part takes only 300-500 lines
-
-// What should be done generally:
-  // Refactor the code
-  // Modernize the code (ES6)
-  // Optimize the code
-  // Modulize the code
-
-// And particularry:
-  // Migrate from d3-voronoi to mapbox-delunator or d3-delaunay
-  // Use typed arrays instead of array of objects
-  // Get rid of jQuery as d3.js can almost all the same and more
-  // Re-build UI on reactive approach, vue.js
-
-"use strict";
-//fantasyMap();
-//function fantasyMap() {
-  // Version control
-  const version = "0.60b";
-  document.title += " v. " + version;
-
-  // Declare variables
-  let svg = d3.select("svg");
-  let defs = svg.select("#deftemp");
-  let viewbox = svg.append("g").attr("id", "viewbox");
-  let ocean = viewbox.append("g").attr("id", "ocean");
-  let oceanLayers = ocean.append("g").attr("id", "oceanLayers");
-  let oceanPattern = ocean.append("g").attr("id", "oceanPattern");
-  let landmass = viewbox.append("g").attr("id", "landmass");
-  let terrs = viewbox.append("g").attr("id", "terrs");
-  let grid = viewbox.append("g").attr("id", "grid");
-  let overlay = viewbox.append("g").attr("id", "overlay");
-  let rivers = viewbox.append("g").attr("id", "rivers");
-  let terrain = viewbox.append("g").attr("id", "terrain");
-  let cults = viewbox.append("g").attr("id", "cults");
-  let regions = viewbox.append("g").attr("id", "regions");
-  let borders = viewbox.append("g").attr("id", "borders");
-  let stateBorders = borders.append("g").attr("id", "stateBorders");
-  let neutralBorders = borders.append("g").attr("id", "neutralBorders");
-  let lakes = viewbox.append("g").attr("id", "lakes");
-  let routes = viewbox.append("g").attr("id", "routes");
-  let roads = routes.append("g").attr("id", "roads").attr("data-type", "land");
-  let trails = routes.append("g").attr("id", "trails").attr("data-type", "land");
-  let searoutes = routes.append("g").attr("id", "searoutes").attr("data-type", "sea");
-  let coastline = viewbox.append("g").attr("id", "coastline");
-  let labels = viewbox.append("g").attr("id", "labels");
-  let burgLabels = labels.append("g").attr("id", "burgLabels");
-  let icons = viewbox.append("g").attr("id", "icons");
-  let burgIcons = icons.append("g").attr("id", "burgIcons");
-  let markers = viewbox.append("g").attr("id", "markers");
-  let ruler = viewbox.append("g").attr("id", "ruler");
-  let debug = viewbox.append("g").attr("id", "debug");
-
-  labels.append("g").attr("id", "countries");
-  burgIcons.append("g").attr("id", "capitals");
-  burgLabels.append("g").attr("id", "capitals");
-  burgIcons.append("g").attr("id", "towns");
-  burgLabels.append("g").attr("id", "towns");
-  icons.append("g").attr("id", "capital-anchors");
-  icons.append("g").attr("id", "town-anchors");
-  terrain.append("g").attr("id", "hills");
-  terrain.append("g").attr("id", "mounts");
-  terrain.append("g").attr("id", "swamps");
-  terrain.append("g").attr("id", "forests");
-
-  // append ocean pattern
-  oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("stroke", "none");
-  oceanLayers.append("rect").attr("id", "oceanBase");
-
-  // main data variables
-  let seed;
-  let params;
-  let voronoi;
-  let diagram;
-  let polygons;
-  let spacing;
-  let points = [];
-  let heights;
-  // Common variables
-  const modules = {};
-  let customization = 0;
-  let history = [];
-  let historyStage = 0;
-  let elSelected;
-  let autoResize = true;
-  let graphSize;
-  let cells = [];
-  let land = [];
-  let riversData = [];
-  let manors = [];
-  let states = [];
-  let features = [];
-  let notes = [];
-  let queue = [];
-  const fonts = ["Almendra+SC", "Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New"];
-
-  // Cultures-related data
-  let defaultCultures = [];
-  let cultures = [];
-  const chain = {};
-  let nameBases = [];
-  let nameBase = [];
-  let cultureTree;
-  const vowels = "aeiouy";
-
-  // canvas element for raster images
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext("2d");
-
-  // Color schemes
-  let color = d3.scaleSequential(d3.interpolateSpectral);
-  const colors8 = d3.scaleOrdinal(d3.schemeSet2);
-  const colors20 = d3.scaleOrdinal(d3.schemeCategory20);
-
-  // D3 drag and zoom behavior
-  let scale = 1, viewX = 0, viewY = 0;
   const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed);
   svg.call(zoom);
 
diff --git a/vue/public/refactor-three.js b/vue/public/refactor-three.js
index 43af2dd0..8691c489 100644
--- a/vue/public/refactor-three.js
+++ b/vue/public/refactor-three.js
@@ -3297,6 +3297,8 @@ function editBurg() {
 
   // Toggle Options pane
   $("#optionsTrigger").on("click", function() {
+    console.log("open menu")
+
     if (tooltip.getAttribute("data-main") === "Сlick the arrow button to open options") {
       tooltip.setAttribute("data-main", "");
       tooltip.innerHTML = "";
@@ -3311,7 +3313,9 @@ function editBurg() {
       $("#options").fadeOut();
       $("#optionsTrigger").removeClass("icon-left-open").addClass("icon-right-open");
     }
+
   });
+
   $("#collapsible").hover(function() {
     if ($("#optionsTrigger").hasClass("glow")) return;
     if ($("#options").css("display") === "none") {
diff --git a/vue/public/refactor-variables.js b/vue/public/refactor-variables.js
new file mode 100644
index 00000000..39d44ba2
--- /dev/null
+++ b/vue/public/refactor-variables.js
@@ -0,0 +1,124 @@
+// Fantasy Map Generator main script
+// Azgaar (maxganiev@yandex.com). Minsk, 2017-2018
+// https://github.com/Azgaar/Fantasy-Map-Generator
+// GNU General Public License v3.0
+
+// To programmers:
+  // I don't mind of any help with programming
+  // I know the code is badly structurized and it's hard to read it as a single page
+  // Meanwhile a core part takes only 300-500 lines
+
+// What should be done generally:
+  // Refactor the code
+  // Modernize the code (ES6)
+  // Optimize the code
+  // Modulize the code
+
+// And particularry:
+  // Migrate from d3-voronoi to mapbox-delunator or d3-delaunay
+  // Use typed arrays instead of array of objects
+  // Get rid of jQuery as d3.js can almost all the same and more
+  // Re-build UI on reactive approach, vue.js
+
+"use strict";
+//fantasyMap();
+//function fantasyMap() {
+  // Version control
+  const version = "0.60b";
+  document.title += " v. " + version;
+
+  // Declare variables
+  let svg = d3.select("svg");
+  let defs = svg.select("#deftemp");
+  let viewbox = svg.append("g").attr("id", "viewbox");
+  let ocean = viewbox.append("g").attr("id", "ocean");
+  let oceanLayers = ocean.append("g").attr("id", "oceanLayers");
+  let oceanPattern = ocean.append("g").attr("id", "oceanPattern");
+  let landmass = viewbox.append("g").attr("id", "landmass");
+  let terrs = viewbox.append("g").attr("id", "terrs");
+  let grid = viewbox.append("g").attr("id", "grid");
+  let overlay = viewbox.append("g").attr("id", "overlay");
+  let rivers = viewbox.append("g").attr("id", "rivers");
+  let terrain = viewbox.append("g").attr("id", "terrain");
+  let cults = viewbox.append("g").attr("id", "cults");
+  let regions = viewbox.append("g").attr("id", "regions");
+  let borders = viewbox.append("g").attr("id", "borders");
+  let stateBorders = borders.append("g").attr("id", "stateBorders");
+  let neutralBorders = borders.append("g").attr("id", "neutralBorders");
+  let lakes = viewbox.append("g").attr("id", "lakes");
+  let routes = viewbox.append("g").attr("id", "routes");
+  let roads = routes.append("g").attr("id", "roads").attr("data-type", "land");
+  let trails = routes.append("g").attr("id", "trails").attr("data-type", "land");
+  let searoutes = routes.append("g").attr("id", "searoutes").attr("data-type", "sea");
+  let coastline = viewbox.append("g").attr("id", "coastline");
+  let labels = viewbox.append("g").attr("id", "labels");
+  let burgLabels = labels.append("g").attr("id", "burgLabels");
+  let icons = viewbox.append("g").attr("id", "icons");
+  let burgIcons = icons.append("g").attr("id", "burgIcons");
+  let markers = viewbox.append("g").attr("id", "markers");
+  let ruler = viewbox.append("g").attr("id", "ruler");
+  let debug = viewbox.append("g").attr("id", "debug");
+
+  labels.append("g").attr("id", "countries");
+  burgIcons.append("g").attr("id", "capitals");
+  burgLabels.append("g").attr("id", "capitals");
+  burgIcons.append("g").attr("id", "towns");
+  burgLabels.append("g").attr("id", "towns");
+  icons.append("g").attr("id", "capital-anchors");
+  icons.append("g").attr("id", "town-anchors");
+  terrain.append("g").attr("id", "hills");
+  terrain.append("g").attr("id", "mounts");
+  terrain.append("g").attr("id", "swamps");
+  terrain.append("g").attr("id", "forests");
+
+  // append ocean pattern
+  oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("stroke", "none");
+  oceanLayers.append("rect").attr("id", "oceanBase");
+
+  // main data variables
+  let seed;
+  let params;
+  let voronoi;
+  let diagram;
+  let polygons;
+  let spacing;
+  let points = [];
+  let heights;
+  // Common variables
+  const modules = {};
+  let customization = 0;
+  let history = [];
+  let historyStage = 0;
+  let elSelected;
+  let autoResize = true;
+  let graphSize;
+  let cells = [];
+  let land = [];
+  let riversData = [];
+  let manors = [];
+  let states = [];
+  let features = [];
+  let notes = [];
+  let queue = [];
+  const fonts = ["Almendra+SC", "Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New"];
+
+  // Cultures-related data
+  let defaultCultures = [];
+  let cultures = [];
+  const chain = {};
+  let nameBases = [];
+  let nameBase = [];
+  let cultureTree;
+  const vowels = "aeiouy";
+
+  // canvas element for raster images
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+
+  // Color schemes
+  let color = d3.scaleSequential(d3.interpolateSpectral);
+  const colors8 = d3.scaleOrdinal(d3.schemeSet2);
+  const colors20 = d3.scaleOrdinal(d3.schemeCategory20);
+
+  // D3 drag and zoom behavior
+  let scale = 1, viewX = 0, viewY = 0;