mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-21 19:41:23 +01:00
fixed menu and moved variables so they are setup first and then all the others will have access to them
This commit is contained in:
headwinds
parent
c82e0a69f7
commit
3a4779e102
5 changed files with 129 additions and 174 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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") {
|
||||
|
|
|
|||
124
vue/public/refactor-variables.js
Normal file
124
vue/public/refactor-variables.js
Normal file
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue