diff --git a/.gitignore b/.gitignore index eb169d8d..8cd42a0d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ .bat -.vscode \ No newline at end of file +.vscode +.idea +.idea/Fantasy-Map-Generator.iml diff --git a/components/fill-box.js b/components/fill-box.js new file mode 100644 index 00000000..02912f3b --- /dev/null +++ b/components/fill-box.js @@ -0,0 +1,74 @@ +// fill-box cannot use Shadow DOM as it needs access to svg hatches +// append stylesheet +{ + const style = ` + fill-box:not([disabled]) { + cursor: pointer; + } + + fill-box > svg { + vertical-align: middle; + pointer-events: none; + } + + fill-box > svg > rect { + stroke: #666666; + stroke-width: 2; + }`; + + const styleElement = document.createElement("style"); + styleElement.setAttribute("type", "text/css"); + styleElement.innerHTML = style; + document.head.appendChild(styleElement); +} + +{ + const template = document.createElement("template"); + template.innerHTML = ` + + + + `; + + class FillBox extends HTMLElement { + constructor() { + super(); + + this.appendChild(template.content.cloneNode(true)); + this.querySelector("rect")?.setAttribute("fill", this.fill); + this.querySelector("svg")?.setAttribute("width", this.size); + this.querySelector("svg")?.setAttribute("height", this.size); + } + + static showTip() { + tip(this.tip); + } + + connectedCallback() { + this.addEventListener("mousemove", this.constructor.showTip); + } + + disconnectedCallback() { + this.removeEventListener("mousemove", this.constructor.showTip); + } + + get fill() { + return this.getAttribute("fill") || "#333"; + } + + set fill(newFill) { + this.setAttribute("fill", newFill); + this.querySelector("rect")?.setAttribute("fill", newFill); + } + + get size() { + return this.getAttribute("size") || "1em"; + } + + get tip() { + return this.dataset.tip || "Fill style. Click to change"; + } + } + + customElements.define("fill-box", FillBox); +} diff --git a/index.css b/index.css index 557eb84c..17913cb4 100644 --- a/index.css +++ b/index.css @@ -35,8 +35,7 @@ input[type="radio"] { } textarea { - padding: 2px; - text-indent: 1px; + padding: 3px; box-sizing: border-box; width: 100%; } @@ -1532,6 +1531,11 @@ div.states > .riverType { cursor: pointer; } +.changeRelations > * { + pointer-events: none; + cursor: pointer; +} + #diplomacySelect { width: 5em; margin: 0.1em 0 0 -0.3em; @@ -1669,11 +1673,6 @@ div.states > div.biomeArea { width: 5em; } -rect.fillRect { - stroke: #666666; - stroke-width: 2; -} - #militaryHeader > div, #regimentsHeader > div { width: 5.2em; @@ -2012,7 +2011,7 @@ div.textual fieldset { div.textual span, .textual legend { - font-size: 0.8em; + font-size: 0.9em; font-weight: bold; } @@ -2277,10 +2276,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; } @@ -2311,7 +2310,7 @@ svg.button { .epgrid line { stroke: lightgrey; - stroke-opacity: 0.7; + stroke-opacity: 0.5; shape-rendering: crispEdges; } diff --git a/index.html b/index.html index c0f73e2f..a7d19f8a 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ body {margin: 0; font-size: 10px; overflow: hidden;} #map {position: absolute;} #initial {fill: none; stroke: black; pointer-events: none;} - #init-rose {animation: 20s infinite spin; opacity: .7; transform-origin: center;} + #init-rose {opacity: .7; transform-origin: center; opacity: .7; animation: 20s infinite spin;} @keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);}} #loading {opacity:1; font-size: 11px; color:#fff5da; text-align:center; text-shadow:0px 1px 4px #4c3a35; width:80%; max-width:600px; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); pointer-events:none;} #loading-text {font-size: 1.8em; margin: 0.2em 0 0 1em;} @@ -260,17 +260,9 @@

Style preset:

- + - +

Select element:

- + @@ -1397,9 +1389,21 @@
-

Fantasy Map Generator is a free open source tool which procedurally generates fantasy maps. You may use auto-generated maps as they are, edit them or even create a new map from scratch. Check out the quick start tutorial, Q&A and hotkeys for guidance.

-

Join our Discord server and Reddit community to ask questions, get help and share maps.

-

The project is under active development. Creator and main maintainer: Azgaar. To track the development progress see the devboard. For older versions see the changelog. Please report bugs here. You can also contact me directly via email.

+

+ Fantasy Map Generator is a free open source tool which procedurally generates fantasy maps. + You may use auto-generated maps as they are, edit them or even create a new map from scratch. + Check out the Quick start, Q&A, Video tutorial, and hotkeys for guidance. +

+ +

+ Join our Discord server and Reddit community to ask questions, get help and share maps. +

+ +

+ The project is under active development. Creator and main maintainer: Azgaar. To track the development progress see the devboard. + For older versions see the changelog. Please report bugs here. You can also contact me directly via email. +

+
@@ -1412,7 +1416,10 @@
-

Special thanks to all supporters on Patreon!

+ +

+ Special thanks to all supporters on Patreon! +

+
+
Name:
+ + 🔊 + +
-
-
Type:
- -
+
+
Type:
+ +
-
-
Culture:
- - -
+
+
Culture:
+ + +
-
-
Population:
- -
+
+
Population:
+ +
-
-
Features:
- - - - - - - -
+
+
Features:
+ + + + + + + +
-
-
Temperature:
- , like in - -
+
+
Temperature:
+ , like in + + +
-
-
Elevation:
- above sea level -
+
+
Elevation:
+ above sea level +
- See in City Generator by Watabou. - Seed: - + See in City Generator by Watabou. +
+ Seed: + +
+
@@ -2823,21 +2834,22 @@
Select base: + Names data:
-
- Names data:
- -
+
+ +
Name: Length: - Double: + Doubled:
+
Generated examples:
@@ -2846,12 +2858,12 @@
- - + +
@@ -3538,7 +3550,19 @@

GeoJSON format is used in GIS tools such as QGIS. Check out wiki-page for guidance.

Generator uses pop-up window to download files. Please ensure your browser does not block popups.

-

It's also possible to export map to Foundry VTT, see the module.

+ +
Export To JSON
+
+ + + + +
+

Export in JSON format can be used as an API replacement.

+ +
+

It's also possible to export map to Foundry VTT, see the module.

+