mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-21 19:41:23 +01:00
instead of breaking up the files lets start with 1 vue
This commit is contained in:
headwinds
parent
8359f9ff59
commit
43d6a54ee7
11 changed files with 11691 additions and 11304 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
<script src="four"></script>
|
||||
<script src="main"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,265 +0,0 @@
|
|||
|
||||
function editIcon() {
|
||||
if (customization) return;
|
||||
if (elSelected) if (this.isSameNode(elSelected.node())) return;
|
||||
|
||||
unselect();
|
||||
closeDialogs("#iconEditor, .stable");
|
||||
elSelected = d3.select(this).call(d3.drag().on("start", elementDrag)).classed("draggable", true);
|
||||
|
||||
// update group parameters
|
||||
const group = d3.select(this.parentNode);
|
||||
iconUpdateGroups();
|
||||
iconGroup.value = group.attr("id");
|
||||
iconFillColor.value = group.attr("fill");
|
||||
iconStrokeColor.value = group.attr("stroke");
|
||||
iconSize.value = group.attr("size");
|
||||
iconStrokeWidth.value = group.attr("stroke-width");
|
||||
|
||||
$("#iconEditor").dialog({
|
||||
title: "Edit icon: " + group.attr("id"),
|
||||
minHeight: 30, width: "auto", resizable: false,
|
||||
position: {my: "center top+20", at: "top", of: d3.event},
|
||||
close: unselect
|
||||
});
|
||||
|
||||
if (modules.editIcon) {return;}
|
||||
modules.editIcon = true;
|
||||
|
||||
$("#iconGroups").click(function() {
|
||||
$("#iconEditor > button").not(this).toggle();
|
||||
$("#iconGroupsSelection").toggle();
|
||||
});
|
||||
|
||||
function iconUpdateGroups() {
|
||||
iconGroup.innerHTML = "";
|
||||
const anchor = group.attr("id").includes("anchor");
|
||||
icons.selectAll("g").each(function(d) {
|
||||
const id = d3.select(this).attr("id");
|
||||
if (id === "burgs") return;
|
||||
if (!anchor && id.includes("anchor")) return;
|
||||
if (anchor && !id.includes("anchor")) return;
|
||||
const opt = document.createElement("option");
|
||||
opt.value = opt.innerHTML = id;
|
||||
iconGroup.add(opt);
|
||||
});
|
||||
}
|
||||
|
||||
$("#iconGroup").change(function() {
|
||||
const newGroup = this.value;
|
||||
const to = $("#icons > #"+newGroup);
|
||||
$(elSelected.node()).detach().appendTo(to);
|
||||
});
|
||||
|
||||
$("#iconCopy").click(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
const copy = elSelected.node().cloneNode();
|
||||
copy.removeAttribute("data-id"); // remove assignment to burg if any
|
||||
const tr = parseTransform(copy.getAttribute("transform"));
|
||||
const shift = 10 / Math.sqrt(scale);
|
||||
let transform = "translate(" + rn(tr[0] - shift, 1) + "," + rn(tr[1] - shift, 1) + ")";
|
||||
for (let i=2; group.selectAll("[transform='" + transform + "']").size() > 0; i++) {
|
||||
transform = "translate(" + rn(tr[0] - shift * i, 1) + "," + rn(tr[1] - shift * i, 1) + ")";
|
||||
}
|
||||
copy.setAttribute("transform", transform);
|
||||
group.node().insertBefore(copy, null);
|
||||
copy.addEventListener("click", editIcon);
|
||||
});
|
||||
|
||||
$("#iconRemoveGroup").click(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
const count = group.selectAll("*").size();
|
||||
if (count < 2) {
|
||||
group.remove();
|
||||
$("#labelEditor").dialog("close");
|
||||
return;
|
||||
}
|
||||
const message = "Are you sure you want to remove all '" + iconGroup.value + "' icons (" + count + ")?";
|
||||
alertMessage.innerHTML = message;
|
||||
$("#alert").dialog({resizable: false, title: "Remove icon group",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
group.remove();
|
||||
$("#iconEditor").dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#iconColors").click(function() {
|
||||
$("#iconEditor > button").not(this).toggle();
|
||||
$("#iconColorsSection").toggle();
|
||||
});
|
||||
|
||||
$("#iconFillColor").change(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
group.attr("fill", this.value);
|
||||
});
|
||||
|
||||
$("#iconStrokeColor").change(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
group.attr("stroke", this.value);
|
||||
});
|
||||
|
||||
$("#iconSetSize").click(function() {
|
||||
$("#iconEditor > button").not(this).toggle();
|
||||
$("#iconSizeSection").toggle();
|
||||
});
|
||||
|
||||
$("#iconSize").change(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
const size = +this.value;
|
||||
group.attr("size", size);
|
||||
group.selectAll("*").each(function() {d3.select(this).attr("width", size).attr("height", size)});
|
||||
});
|
||||
|
||||
$("#iconStrokeWidth").change(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
group.attr("stroke-width", this.value);
|
||||
});
|
||||
|
||||
$("#iconRemove").click(function() {
|
||||
alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
|
||||
$("#alert").dialog({resizable: false, title: "Remove icon",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
elSelected.remove();
|
||||
$("#iconEditor").dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function editReliefIcon() {
|
||||
if (customization) return;
|
||||
if (elSelected) if (this.isSameNode(elSelected.node())) return;
|
||||
|
||||
unselect();
|
||||
closeDialogs("#reliefEditor, .stable");
|
||||
elSelected = d3.select(this).raise().call(d3.drag().on("start", elementDrag)).classed("draggable", true);
|
||||
const group = elSelected.node().parentNode.id;
|
||||
reliefGroup.value = group;
|
||||
|
||||
let bulkRemoveSection = document.getElementById("reliefBulkRemoveSection");
|
||||
if (bulkRemoveSection.style.display != "none") reliefBulkRemove.click();
|
||||
|
||||
$("#reliefEditor").dialog({
|
||||
title: "Edit relief icon",
|
||||
minHeight: 30, width: "auto", resizable: false,
|
||||
position: {my: "center top+40", at: "top", of: d3.event},
|
||||
close: unselect
|
||||
});
|
||||
|
||||
if (modules.editReliefIcon) {return;}
|
||||
modules.editReliefIcon = true;
|
||||
|
||||
$("#reliefGroups").click(function() {
|
||||
$("#reliefEditor > button").not(this).toggle();
|
||||
$("#reliefGroupsSelection").toggle();
|
||||
});
|
||||
|
||||
$("#reliefGroup").change(function() {
|
||||
const type = this.value;
|
||||
const bbox = elSelected.node().getBBox();
|
||||
const cx = bbox.x;
|
||||
const cy = bbox.y + bbox.height / 2;
|
||||
const cell = diagram.find(cx, cy).index;
|
||||
const height = cell !== undefined ? cells[cell].height : 50;
|
||||
elSelected.remove();
|
||||
elSelected = addReliefIcon(height / 100, type, cx, cy, cell);
|
||||
elSelected.call(d3.drag().on("start", elementDrag));
|
||||
});
|
||||
|
||||
$("#reliefCopy").click(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
const copy = elSelected.node().cloneNode(true);
|
||||
const tr = parseTransform(copy.getAttribute("transform"));
|
||||
const shift = 10 / Math.sqrt(scale);
|
||||
let transform = "translate(" + rn(tr[0] - shift, 1) + "," + rn(tr[1] - shift, 1) + ")";
|
||||
for (let i=2; group.selectAll("[transform='" + transform + "']").size() > 0; i++) {
|
||||
transform = "translate(" + rn(tr[0] - shift * i, 1) + "," + rn(tr[1] - shift * i, 1) + ")";
|
||||
}
|
||||
copy.setAttribute("transform", transform);
|
||||
group.node().insertBefore(copy, null);
|
||||
copy.addEventListener("click", editReliefIcon);
|
||||
});
|
||||
|
||||
$("#reliefAddfromEditor").click(function() {
|
||||
clickToAdd(); // to load on click event function
|
||||
$("#addRelief").click();
|
||||
});
|
||||
|
||||
$("#reliefRemoveGroup").click(function() {
|
||||
const group = d3.select(elSelected.node().parentNode);
|
||||
const count = group.selectAll("*").size();
|
||||
if (count < 2) {
|
||||
group.selectAll("*").remove();
|
||||
$("#labelEditor").dialog("close");
|
||||
return;
|
||||
}
|
||||
const message = "Are you sure you want to remove all '" + reliefGroup.value + "' icons (" + count + ")?";
|
||||
alertMessage.innerHTML = message;
|
||||
$("#alert").dialog({resizable: false, title: "Remove all icons within group",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
group.selectAll("*").remove();
|
||||
$("#reliefEditor").dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#reliefBulkRemove").click(function() {
|
||||
$("#reliefEditor > button").not(this).toggle();
|
||||
let section = document.getElementById("reliefBulkRemoveSection");
|
||||
if (section.style.display === "none") {
|
||||
section.style.display = "inline-block";
|
||||
tip("Drag to remove relief icons in radius", true);
|
||||
viewbox.style("cursor", "crosshair").call(d3.drag().on("drag", dragToRemoveReliefIcons));
|
||||
customization = 5;
|
||||
} else {
|
||||
section.style.display = "none";
|
||||
restoreDefaultEvents();
|
||||
customization = 0;
|
||||
}
|
||||
});
|
||||
|
||||
function dragToRemoveReliefIcons() {
|
||||
let point = d3.mouse(this);
|
||||
let cell = diagram.find(point[0], point[1]).index;
|
||||
let radius = +reliefBulkRemoveRadius.value;
|
||||
let r = rn(6 / graphSize * radius, 1);
|
||||
moveCircle(point[0], point[1], r);
|
||||
let selection = defineBrushSelection(cell, radius);
|
||||
if (selection) removeReliefIcons(selection);
|
||||
}
|
||||
|
||||
function removeReliefIcons(selection) {
|
||||
if (selection.length === 0) return;
|
||||
selection.map(function(index) {
|
||||
const selected = terrain.selectAll("g").selectAll("g[data-cell='"+index+"']");
|
||||
selected.remove();
|
||||
});
|
||||
}
|
||||
|
||||
$("#reliefRemove").click(function() {
|
||||
alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
|
||||
$("#alert").dialog({resizable: false, title: "Remove relief icon",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
elSelected.remove();
|
||||
$("#reliefEditor").dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
// 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;
|
||||
|
|
@ -1,28 +1,20 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<FantasyMapGenerator msg=""/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import FantasyMapGenerator from './components/FantasyMapGenerator.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HelloWorld
|
||||
FantasyMapGenerator
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
11686
vue/src/components/FantasyMapGenerator.vue
Normal file
11686
vue/src/components/FantasyMapGenerator.vue
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue