diff --git a/README.md b/README.md index f662ac3c..685bd197 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,12 @@ # Fantasy Map Generator -Azgaar's _Fantasy Map Generator_. Based on [D3](https://d3js.org) Voronoi diagram rendered in svg. +Azgaar's _Fantasy Map Generator_. Online tool generating interactive svg maps based on [D3](https://d3js.org) voronoi diagram. -Project goal is a procedurally generated map for my *Medieval Dynasty* simulator. Map should be interactive, scalable, fast and plausible. Initial intend was to place at least 500 burgs within 7 cultural areas and imagined land area about 1 million km2. As of now all these parameters are customizable. +Project is under active development, check out the work in progress version [here](https://azgaar.github.io/Fantasy-Map-Generator). Refer to the [project wiki](https://github.com/Azgaar/Fantasy-Map-Generator/wiki) for a guidance. Some details are covered in my blog [_Fantasy Maps for fun and glory_](https://azgaar.wordpress.com), you may also keep an eye on my [Trello devboard](https://trello.com/b/7x832DG4/fantasy-map-generator). [![alt tag](https://i0.wp.com/azgaar.files.wordpress.com/2017/03/80k-part.png)](https://azgaar.wordpress.com) -Project is under development, check out the demo [here](https://azgaar.github.io/Fantasy-Map-Generator). Refer to [the project wiki](https://github.com/Azgaar/Fantasy-Map-Generator/wiki) for a quick guidance. The the previous versions see the [changelog](https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog). If you find the Demo performance low, open the page in a smaller window and use the graph size = 1. - -Some details are covered in my blog [_Fantasy Maps for fun and glory_](https://azgaar.wordpress.com), you may also keep an eye on my [devboard](https://trello.com/b/7x832DG4/fantasy-map-generator). Comments and ideas are *highly* welcomed, kindly contact me via [email](mailto:maxganiev@yandex.ru). I would also like to see your completed or work in progress maps. For bug reports and change requests please use the project [issues page](https://github.com/Azgaar/Fantasy-Map-Generator/issues). + Join our [Reddit community](https://www.reddit.com/r/FantasyMapGenerator) to share the created maps, discuss the Generator, suggest ideas and get a most recent updates. You may also contact me directly via [email](mailto:maxganiev@yandex.com). For bug reports please use the project [issues page](https://github.com/Azgaar/Fantasy-Map-Generator/issues). If you face performance issues, please try to open the page in a small window and use the default graph size only. In Firefox fast map zooming may cause browser crush. _Inspiration:_ diff --git a/icons.css b/icons.css index 88ab7e4c..61b3d935 100644 --- a/icons.css +++ b/icons.css @@ -10,7 +10,6 @@ font-style: normal; font-weight: normal; speak: none; - display: inline-block; text-decoration: inherit; width: 1em; diff --git a/index.css b/index.css index 7ee38d92..e52267a2 100644 --- a/index.css +++ b/index.css @@ -47,8 +47,7 @@ button, select, a { } #cults { - stroke-width: 0.7; - stroke-linejoin: round; + stroke-width: 2; mask: url(#shape); mask-mode: alpha; pointer-events: none; @@ -60,8 +59,8 @@ button, select, a { } #landmass { - fill-rule: evenodd; - stroke: none; + mask: url(#shape); + mask-clip: no-clip; } #lakes, @@ -259,17 +258,21 @@ input[type="number"].editNumber { } .line { - stroke: #666666; + stroke: #373737; stroke-width: 1px; + stroke-dasharray: 6; + stroke-linecap: butt; } .circle { stroke-width: 1px; fill: none; + stroke-dasharray: 6; + stroke-linecap: butt; } circle.drag { - stroke: white; + stroke: #9f3237; } text.drag { @@ -290,7 +293,6 @@ text.drag { font-size: smaller; font-family: monospace; position: absolute; - background-color: rgba(168, 130, 147, 0.85); border: solid 1px #5e4fa2; } @@ -449,7 +451,7 @@ button.active { } .tabcontent button { - background-color: #997c89; + background-color: #916e7f; font-family: monospace; border: none; padding: 5px 8px; @@ -468,9 +470,13 @@ button.active { margin: 0; } +fieldset { + border: 1px solid #5d4651; +} + .tabcontent li { list-style-type: none; - background-color: #997c89; + background-color: #916e7f; cursor: pointer; padding: 5px 8px; margin: 4px; @@ -512,6 +518,10 @@ p { width: 35%; } +#customizeOptions { + margin: 2px 0; +} + #tooltip { position: fixed; display: none; @@ -519,7 +529,7 @@ p { top: calc(98vh - (10px + 0.5vw)); width: 100%; cursor: default; - text-shadow: 1px 0px 1px #1d0e0f; + text-shadow: 1px 1px 2px #1d0e0f; color: #ffffff; font-size: calc(10px + 0.5vw); pointer-events: none; @@ -530,8 +540,6 @@ p { } #optionsContent table td:nth-of-type(2) { - text-decoration: underline dotted gray; - cursor: help; width: 126px; } @@ -594,8 +602,9 @@ body button.noicon { background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%); margin: 1px 1px; width: 226px; - padding: 1px 2px; - font-size: 9px; + padding: 0px 2px; + height: 12px; + font-size: 10px; } #templateBody>div:hover { @@ -624,11 +633,10 @@ body button.noicon { } #templateBody input { - height: 4px; - width: 45px; - font-family: monospace; - height: 4px; - font-family: monospace; + width: 40px; + height: 10px; + border: none; + font-family: monospace; } #templateBody select { @@ -661,18 +669,18 @@ body button.noicon { border-right-color: #5e4fa2; } -#styleInputs div { +#styleInputs > div { display: none; - line-height: 6px; + line-height: 8px; } +#styleInputs #styleOcean, #styleInputs #styleOpacity, -#styleInputs #styleFill, #styleInputs #styleFilter { display: block; } -#styleInputs button { +#styleInputs .whiteButton { padding: 0 6px; margin: 0 2px; border: 1px #827c7f solid; @@ -684,11 +692,21 @@ body button.noicon { font-size: xx-small; } +#styleLabelGroups { + margin-top: 6px; + display: block; +} + +#styleLabelGroups button { + display: inline-block; + margin: 5px 3px 0 3px; + padding: 2px 6px; +} + .pureInput { display: inline-block; width: 50px; height: 10px; - font-size: small; font-size: smaller; font-family: monospace; } @@ -741,15 +759,6 @@ body button.noicon { stroke: #da3126; } -body .ui-dialog { - padding: 1px; - font-size: 12px; -} - -body .ui-dialog-titlebar { - font-size: 14px; -} - .ui-dialog input { height: 14px; } @@ -763,7 +772,7 @@ body .ui-dialog-titlebar { .ui-dialog input[type="range"] { outline: none; height: 2px; - background: #e9e9e9; + background: #d4d4d4; top: -4px; position: relative; appearance: none; @@ -790,6 +799,12 @@ body .ui-dialog-titlebar { cursor: pointer; } +.ui-dialog input[type="number"] { + width: 28px; + height: 12px; + cursor: pointer; +} + .ui-dialog .disabled { opacity: 0.2; } @@ -883,7 +898,7 @@ div.slider .ui-slider-handle { div.states { border: 1px solid #d4d4d4; - background-image: linear-gradient(to right, #fcfcfc 0%, #f2f2f2 51%, #dedede 100%); + background-image: linear-gradient(to right, #fafafa80 0%, #f0f0f080 50%, #c8c8c880 100%); margin: 1px 0; padding: 0 2px; font-size: 10px; @@ -891,7 +906,7 @@ div.states { div.states:hover { border: 1px solid #c4c4c4; - background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 51%, #fcfcfc 0%); + background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%); } div.states * { @@ -950,6 +965,13 @@ div.states>[class^="icon-"] { padding: 0 1px 0 7px; } +div.states>[class="icon-arrows-cw"] { + color: #67575c; + padding: 0 2px 0 0; + font-size: 9px; + cursor: pointer; +} + div.states>.before { color: #6e5e66; padding: 0 1px 0 0; @@ -959,6 +981,24 @@ div.states>.small { font-size: 9px; } +div.states>.cultureName { + width: 50px; +} + +div.states>.culturePopulation { + width: 40px; +} + +div.states>.cultureBase { + width: 46px; + cursor: pointer; + border: 0; + background-color: transparent; + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; +} + #burgsBody, #countriesBody { overflow: auto; @@ -1270,6 +1310,48 @@ input[type="checkbox"] { height: 100%; } -#capital-anchors, #town-anchors { - transform: translate(-0.47em, -0.47em); +#cultureCenters circle:hover { + stroke: #000000b3; + cursor: pointer; +} + +#namesbaseEditor select, +#namesbaseEditor textarea { + font-size: 10px; + font-family: Copperplate, monospace; + outline: none; +} + +#namesbaseEditor input { + font-size: 10px; + font-family: Copperplate, monospace; + outline: none; + height: 12px; +} + +#namesbaseEditor fieldset { + margin: 3px 3px 5px 0; + border-style: dashed; +} + +#namesbaseEditor span, #namesbaseEditor legend { + font-size: 9px; + font-weight: bold; +} + +#namesbaseExamples { + font-family: Copperplate, monospace; + cursor: pointer; +} + +#namesbaseName { + width: 80px; +} + +#namesbaseMin, #namesbaseMax { + width: 33px; +} + +#namesbaseDouble { + width: 40px; } diff --git a/index.html b/index.html index 25cd3920..a82db6a4 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + - Azgaar's Fantasy Map Generator Demo + Azgaar's Fantasy Map Generator - + - + @@ -26,57 +27,75 @@ - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - Anchor + Port @@ -140,14 +159,14 @@
Azgaar's
Fantasy Map Generator
-
v. 0.57b
+
v. 0.59b

LOADING...

-

Generation options (new map to apply):

+

Generation options (new map to apply):

@@ -326,6 +367,8 @@ + + @@ -370,7 +413,7 @@ - + @@ -378,6 +421,31 @@ 200 + + + + + + + + + + + + @@ -421,11 +489,21 @@
Neutral distanceNeutral distance
+ + Burg names style + +
+ + Cultures count + + + 7 +
@@ -406,14 +474,14 @@ Ocean layers - + + + + + + +

Generator settings:

+ + + + + + - +
Transparency + + + 0 +
PNG resolution - + 5x @@ -433,7 +511,7 @@
Zoom extentZoom extent o: @@ -445,12 +523,14 @@
+

Customize:

+
@@ -484,6 +572,7 @@
Coord: 0/0
Cell: 0
+ Area: 0
Height: 0
Flux: 0
@@ -491,477 +580,552 @@ Type: n/a
Country: n/a
Culture: n/a
+ Population: 0
Burg: n/a
-

Fantasy Map Generator is an open source tool which procedurally generates fantasy maps. You may either use an auto-generated maps or create your own map manually or with a help of templates or image converter. Check out the quick start tutorial and project wiki for guidance.

-

This is a Demo version, the Generator is still under development. For older versions see the changelog. Some details are covered in my blog. To track the current progress see the devboard.

-

Please report bugs and suggest new features here. You may also send me an email.

+

Fantasy Map Generator is an open source tool which procedurally generates fantasy maps. You may use auto-generated maps as they are, edit them or even create a map from scratch. Check out the quick start tutorial and project wiki for guidance. Join our Reddit Community if you have questions, need any help, have a suggestion or just want to share a created map.

+

The project is under active development. For older versions see the changelog. Some details are covered in my blog. To track the current progress see the devboard.

+

Please report bugs here. You may also send me an email.

- +
-
.map
-
.svg
-
.png
+
.map
+
.svg
+
.png
- - + +
- - - - - - - - - - -