backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 03:51:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'ui-load-from-url'

Browse source
This commit is contained in:
hasparus 2019-04-27 14:41:21 +02:00
commit 41a0d06357
No known key found for this signature in database
GPG key ID: 199946486FC7B0AC
3 changed files with 512 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

15
index.css
View file

@ -845,22 +845,29 @@ div.slider .ui-slider-handle {
line-height: 1.6em; line-height: 1.6em;
} }
#saveDropdown { .dropdown {
display: block;
float: left;
position: relative;
}
.dropdown__options {
display: none; display: none;
position: absolute; position: absolute;
left: 29%; left: 50%;
top: 100%; top: 100%;
transform: translateX(-50%);
border: 1px solid #5e4fa2; border: 1px solid #5e4fa2;
background-color: #a4879b; background-color: #a4879b;
width: 44px; width: 44px;
} }
#saveDropdown>div { .dropdown__options > div {
padding: 2px 4px; padding: 2px 4px;
cursor: pointer; cursor: pointer;
} }
#saveDropdown>div:hover { .dropdown__options > div:hover {
color: white; color: white;
} }

445
index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -35,6 +36,7 @@
<link rel="stylesheet" type="text/css" href="icons.css?version=0.60.14b" /> <link rel="stylesheet" type="text/css" href="icons.css?version=0.60.14b" />
<link rel="stylesheet" type="text/css" href="libs/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="libs/jquery-ui.css" />
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs> <defs>
@ -169,9 +171,12 @@
<g id="s3"> <g id="s3">
<g id="s2"> <g id="s2">
<g id="s1" stroke="#1b1b1b"> <g id="s1" stroke="#1b1b1b">
<path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z" fill="#47a3d1"/> <path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z"
<path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z" fill="black" transform="scale(-1,1)"/> fill="#47a3d1" />
<path d="M -31.995,160.849 A 164,164 0 0,0 31.995,160.849 C 18.9,170.1 8.4,176.3 0,207 C -8.4,176.3 -18.9,170.1 -31.995,160.849 z" fill="#c2390f" transform="rotate(22.5)"/> <path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z"
fill="black" transform="scale(-1,1)" />
<path d="M -31.995,160.849 A 164,164 0 0,0 31.995,160.849 C 18.9,170.1 8.4,176.3 0,207 C -8.4,176.3 -18.9,170.1 -31.995,160.849 z"
fill="#c2390f" transform="rotate(22.5)" />
</g> </g>
<use xlink:href="#s1" transform="rotate(45)" /> <use xlink:href="#s1" transform="rotate(45)" />
</g> </g>
@ -217,26 +222,34 @@
</select> </select>
<p>Displayed layers. Drag to move, click to toggle</p> <p>Displayed layers. Drag to move, click to toggle</p>
<ul id="mapLayers"> <ul id="mapLayers">
<li onmouseover="tip('Toggle Ocean pattern (see Style tab for styling)')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li> <li onmouseover="tip('Toggle Ocean pattern (see Style tab for styling)')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()"
<li onmouseover="tip('Toggle Heightmap (see Style tab for styling and Customize for editting)')" id="toggleHeight" class="buttonoff">Heightmap</li> class="solid">Ocean</li>
<li onmouseover="tip('Toggle Heightmap (see Style tab for styling and Customize for editting)')" id="toggleHeight"
class="buttonoff">Heightmap</li>
<li onmouseover="tip('Toggle Grid')" id="toggleGrid" class="buttonoff" onclick="$('#grid').fadeToggle()">Grid</li> <li onmouseover="tip('Toggle Grid')" id="toggleGrid" class="buttonoff" onclick="$('#grid').fadeToggle()">Grid</li>
<li onmouseover="tip('Toggle Overlay (overlay type can be set in Style tab)')" id="toggleOverlay" class="buttonoff">Overlay</li> <li onmouseover="tip('Toggle Overlay (overlay type can be set in Style tab)')" id="toggleOverlay" class="buttonoff">Overlay</li>
<li onmouseover="tip('Toggle Cultural map (does not work good when counties layer is on)')" id="toggleCultures" class="buttonoff">Cultures</li> <li onmouseover="tip('Toggle Cultural map (does not work good when counties layer is on)')" id="toggleCultures"
class="buttonoff">Cultures</li>
<li onmouseover="tip('Toggle Routes')" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li> <li onmouseover="tip('Toggle Routes')" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li>
<li onmouseover="tip('Toggle Rivers')" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li> <li onmouseover="tip('Toggle Rivers')" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li>
<li onmouseover="tip('Toggle Countries (open Customize tab for editting)')" id="toggleCountries">Countries</li> <li onmouseover="tip('Toggle Countries (open Customize tab for editting)')" id="toggleCountries">Countries</li>
<li onmouseover="tip('Toggle Borders')" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li> <li onmouseover="tip('Toggle Borders')" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li>
<li onmouseover="tip('Toggle Relief icons (draft version)')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li> <li onmouseover="tip('Toggle Relief icons (draft version)')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
<li onmouseover="tip('Toggle Labels (label groups can be toggled separately in Style tab)')" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li> <li onmouseover="tip('Toggle Labels (label groups can be toggled separately in Style tab)')" id="toggleLabels"
onclick="$('#labels').fadeToggle()">Labels</li>
<li onmouseover="tip('Toggle Burg icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li> <li onmouseover="tip('Toggle Burg icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li>
<li onmouseover="tip('Toggle Markers')" id="toggleMarkers" onclick="$('#markers').fadeToggle()">Markers</li> <li onmouseover="tip('Toggle Markers')" id="toggleMarkers" onclick="$('#markers').fadeToggle()">Markers</li>
</ul> </ul>
<div id="layoutCheckboxes"> <div id="layoutCheckboxes">
<input id="toggleTooltips" class="checkbox" type="checkbox" checked onclick="$('#tooltip').fadeToggle()"> <input id="toggleTooltips" class="checkbox" type="checkbox" checked onclick="$('#tooltip').fadeToggle()">
<label for="toggleTooltips" onmouseover="tip('Toogle tooltip line and legend box')" class="checkbox-label">Show tooltips</label> <label for="toggleTooltips" onmouseover="tip('Toogle tooltip line and legend box')" class="checkbox-label">Show
<label id="optionSeedLabel" onmouseover="tip('Map seed. Please do NOT consider as a save function, seed produces different maps in case of code and options change')" style="margin-left:10px">Map seed: tooltips</label>
<input id="optionsSeed" onmouseover="tip('Map seed. Please do NOT consider as a save function, seed produces different maps in case of code and options change')" class="pureInput" style="width:50px" value=""> <label id="optionSeedLabel" onmouseover="tip('Map seed. Please do NOT consider as a save function, seed produces different maps in case of code and options change')"
<i onmouseover="tip('Click to generate a map for this seed')" id="optionsSeedGenerate" style="margin-left:-3px; color: #5d4651" class="icon-play"></i> style="margin-left:10px">Map seed:
<input id="optionsSeed" onmouseover="tip('Map seed. Please do NOT consider as a save function, seed produces different maps in case of code and options change')"
class="pureInput" style="width:50px" value="">
<i onmouseover="tip('Click to generate a map for this seed')" id="optionsSeedGenerate" style="margin-left:-3px; color: #5d4651"
class="icon-play"></i>
</label> </label>
</div> </div>
</div> </div>
@ -277,7 +290,8 @@
</select><br> </select><br>
<br>Size: <input id="styleOverlaySize" type="range" min="2" max="50" step="0.1" value="10"> <br>Size: <input id="styleOverlaySize" type="range" min="2" max="50" step="0.1" value="10">
<output id="styleOverlaySizeOutput" onmouseover="tip('Overlay size')">10</output> <output id="styleOverlaySizeOutput" onmouseover="tip('Overlay size')">10</output>
<output id="styleOverlaySizeFriendly" onmouseover="tip('Size between two adjacent cells in map scale')">(52 mi)</output> <output id="styleOverlaySizeFriendly" onmouseover="tip('Size between two adjacent cells in map scale')">(52
mi)</output>
</div> </div>
<div id="styleOcean"> <div id="styleOcean">
<br>Elements: <br>Elements:
@ -312,11 +326,14 @@
</select> </select>
</div> </div>
<div id="styleFontSize"> <div id="styleFontSize">
<br>Font size: <button class="whiteButton" onmouseover="tip('Multiply all Fonts size by 1.1')" id="styleFontPlus">+</button><button class="whiteButton" onmouseover="tip('Multiply all Fonts size by 0.9')" id="styleFontMinus">-</button> <br>Font size: <button class="whiteButton" onmouseover="tip('Multiply all Fonts size by 1.1')" id="styleFontPlus">+</button><button
class="whiteButton" onmouseover="tip('Multiply all Fonts size by 0.9')" id="styleFontMinus">-</button>
</div> </div>
<div id="styleSize"> <div id="styleSize">
<br>Radius: <button class="whiteButton" onmouseover="tip('Multiply Radius by 1.1')" id="styleFillPlus">+</button><button class="whiteButton" onmouseover="tip('Multiply Radius by 0.9')" id="styleFillMinus">-</button> <br>Radius: <button class="whiteButton" onmouseover="tip('Multiply Radius by 1.1')" id="styleFillPlus">+</button><button
<span> Stroke: </span><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 1.1')" id="styleStrokePlus">+</button><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 0.9')" id="styleStrokeMinus">-</button> class="whiteButton" onmouseover="tip('Multiply Radius by 0.9')" id="styleFillMinus">-</button>
<span> Stroke: </span><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 1.1')" id="styleStrokePlus">+</button><button
class="whiteButton" onmouseover="tip('Multiply Stroke-width by 0.9')" id="styleStrokeMinus">-</button>
</div> </div>
<div id="styleOpacity"> <div id="styleOpacity">
@ -352,7 +369,8 @@
<fieldset> <fieldset>
<legend>Label groups:</legend> <legend>Label groups:</legend>
<input id="hideLabels" class="checkbox" type="checkbox" checked> <input id="hideLabels" class="checkbox" type="checkbox" checked>
<label for="hideLabels" onmouseover="tip('Allow system to hide labels if their size in too small on that scale)')" class="checkbox-label">Toggle visibility automatically</label> <label for="hideLabels" onmouseover="tip('Allow system to hide labels if their size in too small on that scale)')"
class="checkbox-label">Toggle visibility automatically</label>
<div id="styleLabelGroupItems"></div> <div id="styleLabelGroupItems"></div>
</fieldset> </fieldset>
</div> </div>
@ -366,7 +384,8 @@
</div> </div>
</div> </div>
<div id="optionsContent" class="tabcontent"> <div id="optionsContent" class="tabcontent">
<p onmouseover="tip('Map generation setting. Generate a new map to apply the settings')">Generation options (new map to apply):</p> <p onmouseover="tip('Map generation setting. Generate a new map to apply the settings')">Generation options
(new map to apply):</p>
<table> <table>
<tr> <tr>
<td></td> <td></td>
@ -383,7 +402,8 @@
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td onmouseover="tip('Cells density controls underlying graph size and hightly affects performance')">Map cells density</td> <td onmouseover="tip('Cells density controls underlying graph size and hightly affects performance')">Map
cells density</td>
<td> <td>
<input id="sizeInput" type="range" min="1" max="3" value="1"> <input id="sizeInput" type="range" min="1" max="3" value="1">
</td> </td>
@ -393,7 +413,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockTemplateInput" class="icon-lock-open"></i> <i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockTemplateInput"
class="icon-lock-open"></i>
</td> </td>
<td onmouseover="tip('Select template to be used for a Heightmap generation')">Heightmap template</td> <td onmouseover="tip('Select template to be used for a Heightmap generation')">Heightmap template</td>
<td> <td>
@ -412,7 +433,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockManorsInput" class="icon-lock-open"></i> <i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockManorsInput"
class="icon-lock-open"></i>
</td> </td>
<td onmouseover="tip('Define how many Settlements should be placed')">Burgs count</td> <td onmouseover="tip('Define how many Settlements should be placed')">Burgs count</td>
<td> <td>
@ -424,7 +446,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockRegionsInput" class="icon-lock-open"></i> <i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockRegionsInput"
class="icon-lock-open"></i>
</td> </td>
<td onmouseover="tip('Define how many Countries should be created')">States count</td> <td onmouseover="tip('Define how many Countries should be created')">States count</td>
<td> <td>
@ -436,9 +459,11 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockPowerInput" class="icon-lock-open"></i> <i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockPowerInput"
class="icon-lock-open"></i>
</td> </td>
<td onmouseover="tip('Define Countries size variety. Set to 0 to have all countries sized the same')">States disbalance</td> <td onmouseover="tip('Define Countries size variety. Set to 0 to have all countries sized the same')">States
disbalance</td>
<td> <td>
<input id="powerInput" type="range" min="0" max="10" step="0.2" value="5"> <input id="powerInput" type="range" min="0" max="10" step="0.2" value="5">
</td> </td>
@ -448,7 +473,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockNeutralInput" class="icon-lock"></i> <i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockNeutralInput"
class="icon-lock"></i>
</td> </td>
<td onmouseover="tip('Minimal distance to closest burg to consider land neutral')">Neutral distance</td> <td onmouseover="tip('Minimal distance to closest burg to consider land neutral')">Neutral distance</td>
<td> <td>
@ -460,9 +486,11 @@
</tr> </tr>
<tr style="display:none"> <tr style="display:none">
<td> <td>
<i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockNamesInput" class="icon-lock"></i> <i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockNamesInput"
class="icon-lock"></i>
</td> </td>
<td onmouseover="tip('Define name generation style for burgs. Only the first one works offline')">Burg names style</td> <td onmouseover="tip('Define name generation style for burgs. Only the first one works offline')">Burg
names style</td>
<td> <td>
<select id="namesInput"> <select id="namesInput">
<option value=0>Pseudo-real (Culture based simulation; internal generation)</option> <option value=0>Pseudo-real (Culture based simulation; internal generation)</option>
@ -473,7 +501,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockCulturesInput" class="icon-lock-open"></i> <i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockCulturesInput"
class="icon-lock-open"></i>
</td> </td>
<td onmouseover="tip('Define how many Cultures should be generated')">Cultures count</td> <td onmouseover="tip('Define how many Cultures should be generated')">Cultures count</td>
<td> <td>
@ -485,7 +514,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockPrecInput" class="icon-lock-open"></i> <i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockPrecInput"
class="icon-lock-open"></i>
</td> </td>
<td onmouseover="tip('Set precipitation level. Controls river quantity and power')">Precipitation</td> <td onmouseover="tip('Set precipitation level. Controls river quantity and power')">Precipitation</td>
<td> <td>
@ -497,7 +527,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockSwampinessInput" class="icon-lock"></i> <i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockSwampinessInput"
class="icon-lock"></i>
</td> </td>
<td onmouseover="tip('Define the land swampiness. Increase to see more marshes on Relief map')">Swampiness</td> <td onmouseover="tip('Define the land swampiness. Increase to see more marshes on Relief map')">Swampiness</td>
<td> <td>
@ -538,7 +569,8 @@
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td onmouseover="tip('Define relative size of a saved png images. Consider saving big images is slow')">PNG resolution</td> <td onmouseover="tip('Define relative size of a saved png images. Consider saving big images is slow')">PNG
resolution</td>
<td> <td>
<input id="pngResolutionInput" type="range" min="1" max="10" value="5" oninput="pngResolutionOutput.value = this.value + 'x'"> <input id="pngResolutionInput" type="range" min="1" max="10" value="5" oninput="pngResolutionOutput.value = this.value + 'x'">
</td> </td>
@ -575,7 +607,8 @@
<div> <div>
<button onmouseover="tip('Edit the current Heightmap')" id="fromHeightmap">Edit</button> <button onmouseover="tip('Edit the current Heightmap')" id="fromHeightmap">Edit</button>
<button onmouseover="tip('Remove all data and start from scratch')" id="fromScratch">Clear all</button> <button onmouseover="tip('Remove all data and start from scratch')" id="fromScratch">Clear all</button>
<button class="buttonoff" onmouseover="tip('Finalize the Heightmap. Not allowed if landmass area is insufficient')" id="getMap">Complete</button> <button class="buttonoff" onmouseover="tip('Finalize the Heightmap. Not allowed if landmass area is insufficient')"
id="getMap">Complete</button>
</div> </div>
<div id="customizationMenu" class="hidden"> <div id="customizationMenu" class="hidden">
<div id="customizeTools"> <div id="customizeTools">
@ -587,13 +620,16 @@
</div> </div>
<div id="customizeOptions"> <div id="customizeOptions">
<input id="renderOcean" class="checkbox" type="checkbox"> <input id="renderOcean" class="checkbox" type="checkbox">
<label for="renderOcean" onmouseover="tip('Render cells below sea level')" class="checkbox-label">Render ocean cells</label> <label for="renderOcean" onmouseover="tip('Render cells below sea level')" class="checkbox-label">Render
ocean cells</label>
<input id="changeHeights" class="checkbox" type="checkbox"> <input id="changeHeights" class="checkbox" type="checkbox">
<label for="changeHeights" onmouseover="tip('Allow system to change custom heights if reasonable')" class="checkbox-label">Change heights</label> <label for="changeHeights" onmouseover="tip('Allow system to change custom heights if reasonable')" class="checkbox-label">Change
heights</label>
</div> </div>
<label onmouseover="tip('Number of Land cells and landmass/ocean ratio')">Landmass: <label onmouseover="tip('Number of Land cells and landmass/ocean ratio')">Landmass:
<span id="landmassCounter">0</span> (<span id="landmassRatio">0</span>%); Average Elevation: <span id="landmassAverage">0</span> <span id="landmassCounter">0</span> (<span id="landmassRatio">0</span>%); Average Elevation: <span id="landmassAverage">0</span>
</label><hr> </label>
<hr>
</div> </div>
</div> </div>
<div id="addFeature"> <div id="addFeature">
@ -624,26 +660,55 @@
</div> </div>
</div> </div>
<div id="aboutContent" class="tabcontent"> <div id="aboutContent" class="tabcontent">
<p><a href="https://github.com/Azgaar/Fantasy-Map-Generator" target="_blank">Fantasy Map Generator</a> is an <a href="https://github.com/Azgaar/Fantasy-Map-Generator/blob/master/LICENSE" target="_blank">open source</a> 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 <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Quick-Start-Tutorial" target="_blank">quick start tutorial</a> and <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki" target="_blank">project wiki</a> for guidance. Join our <a href="https://www.reddit.com/r/FantasyMapGenerator/" target="_blank">Reddit Community</a> if you have questions, need any help, have a suggestion or just want to share a created map.</p> <p><a href="https://github.com/Azgaar/Fantasy-Map-Generator" target="_blank">Fantasy Map Generator</a> is an <a
<p>The project is under active development. For older versions see the <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog" target="_blank">changelog</a>. Some details are covered in my <a href="https://azgaar.wordpress.com/" target="_blank">blog</a>. To track the current progress see the <a href="https://trello.com/b/7x832DG4/fantasy-map-generator" target="_blank">devboard</a>.</p> href="https://github.com/Azgaar/Fantasy-Map-Generator/blob/master/LICENSE" target="_blank">open source</a>
<p>Please report bugs <a href="https://github.com/Azgaar/Fantasy-Map-Generator/issues" target="_blank">here</a>. You may also <a href="mailto:maxganiev@yandex.ru" target="_blank">send me</a> an email.</p> 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 <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Quick-Start-Tutorial"
target="_blank">quick start tutorial</a> and <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki"
target="_blank">project wiki</a> for guidance. Join our <a href="https://www.reddit.com/r/FantasyMapGenerator/"
target="_blank">Reddit Community</a> if you have questions, need any help, have a suggestion or just want
to share a created map.</p>
<p>The project is under active development. For older versions see the <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog"
target="_blank">changelog</a>. Some details are covered in my <a href="https://azgaar.wordpress.com/"
target="_blank">blog</a>. To track the current progress see the <a href="https://trello.com/b/7x832DG4/fantasy-map-generator"
target="_blank">devboard</a>.</p>
<p>Please report bugs <a href="https://github.com/Azgaar/Fantasy-Map-Generator/issues" target="_blank">here</a>.
You may also <a href="mailto:maxganiev@yandex.ru" target="_blank">send me</a> an email.</p>
<ul class="share-buttons"> <ul class="share-buttons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator%2F&quote=" onmouseover="tip('Share on Facebook')" target="_blank"><img alt="Share on Facebook" src="images/Facebook.png" /></a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator%2F&quote="
<li><a href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator&text=%23FantasyMapGenerator%0A%0Ahttps%3A//azgaar.github.io/Fantasy-Map-Generator" target="_blank" onmouseover="tip('Tweet')"><img alt="Tweet" src="images/Twitter.png" /></a></li> onmouseover="tip('Share on Facebook')" target="_blank"><img alt="Share on Facebook" src="images/Facebook.png" /></a></li>
<li><a href="http://www.tumblr.com/share?v=3&u=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank" onmouseover="tip('Post to Tumblr')"><img alt="Post to Tumblr" src="images/Tumblr.png" /></a></li> <li><a href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator&text=%23FantasyMapGenerator%0A%0Ahttps%3A//azgaar.github.io/Fantasy-Map-Generator"
<li><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank" onmouseover="tip('Pin it')"><img alt="Pin it" src="images/Pinterest.png" /></a></li> target="_blank" onmouseover="tip('Tweet')"><img alt="Tweet" src="images/Twitter.png" /></a></li>
<li><a href="http://www.reddit.com/submit?url=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank" onmouseover="tip('Submit to Reddit')"><img alt="Submit to Reddit" src="images/Reddit.png" /></a></li> <li><a href="http://www.tumblr.com/share?v=3&u=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank"
onmouseover="tip('Post to Tumblr')"><img alt="Post to Tumblr" src="images/Tumblr.png" /></a></li>
<li><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator"
target="_blank" onmouseover="tip('Pin it')"><img alt="Pin it" src="images/Pinterest.png" /></a></li>
<li><a href="http://www.reddit.com/submit?url=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank"
onmouseover="tip('Submit to Reddit')"><img alt="Submit to Reddit" src="images/Reddit.png" /></a></li>
</ul> </ul>
</div> </div>
<div id="sticked"> <div id="sticked">
<button id="randomMap" onmouseover="tip('Generate a new map based on options. May take about 1 minute. Hotkey: F6')" class="options">New Map</button> <button id="randomMap" onmouseover="tip('Generate a new map based on options. May take about 1 minute. Hotkey: F6')"
<button id="saveButton" onmouseover="tip('Select file format to save map')" class="options">Save as</button> class="options">New Map</button>
<div id="saveDropdown"> <article class="dropdown">
<button id="saveButton" onmouseover="tip('Select file format to save map')" class="options">
Save as
</button>
<div id="saveDropdown" class="dropdown__options">
<div id="saveMap" onmouseover="tip('Save as fully functional map in .map format. Hotkey: M')">.map</div> <div id="saveMap" onmouseover="tip('Save as fully functional map in .map format. Hotkey: M')">.map</div>
<div id="saveSVG" onmouseover="tip('Download the map as .svg image (open in browser or in Inkscape. Hotkey: S)')">.svg</div> <div id="saveSVG" onmouseover="tip('Download the map as .svg image (open in browser or in Inkscape. Hotkey: S)')">.svg</div>
<div id="savePNG" onmouseover="tip('Download the visible part of the map as 4K .png image. Please ensure popups are not blocked! Hotkey: P')">.png</div> <div id="savePNG" onmouseover="tip('Download the visible part of the map as 4K .png image. Please ensure popups are not blocked! Hotkey: P')">.png</div>
</div> </div>
<button id="loadMap" onmouseover="tip('Load fully functional map in a .map format. Hotkey: L')" class="options">Load</button> </article>
<article class="dropdown">
<button id="loadButton" onmouseover="tip('Load fully functional map in a .map format. Hotkey: L')" class="options">
Load
</button>
<div id="loadDropdown" class="dropdown__options">
<div role="button" id="loadMap" onmouseover="tip('Load map from file')">File</div>
<div role="button" id="loadMapFromURL" onmouseover="tip('Load map from URL')" class="options">URL</div>
</div>
</article>
<button id="zoomReset" onmouseover="tip('Reset map zoom. Hotkey: 0')" class="options">Reset Zoom</button> <button id="zoomReset" onmouseover="tip('Reset map zoom. Hotkey: 0')" class="options">Reset Zoom</button>
</div> </div>
</div> </div>
@ -668,20 +733,25 @@
<button id="labelFontButton" onmouseover="tip('Select Font for the entire Group')" class="icon-font"></button> <button id="labelFontButton" onmouseover="tip('Select Font for the entire Group')" class="icon-font"></button>
<div id="labelFontButtons" style="display: none"> <div id="labelFontButtons" style="display: none">
<span id="labelExternalFont" onmouseover="tip('Fetch fonts by linking @font-face declaration, just populate with font name if using Google font (fonts.google.com)')" class="icon-plus"></span> <span id="labelExternalFont" onmouseover="tip('Fetch fonts by linking @font-face declaration, just populate with font name if using Google font (fonts.google.com)')"
class="icon-plus"></span>
<select id="labelFontSelect" onmouseover="tip('Select one of the default Fonts')"></select> <select id="labelFontSelect" onmouseover="tip('Select one of the default Fonts')"></select>
<input id="labelFontInput" placeholder="link to @font-face" onmouseover="tip('Fetch fonts by linking @font-face declaration')"/ class="hidden"> <input id="labelFontInput" placeholder="link to @font-face" onmouseover="tip('Fetch fonts by linking @font-face declaration')"/
class="hidden">
<i id="labelSizeIcon" class="icon-text-height"></i> <i id="labelSizeIcon" class="icon-text-height"></i>
<input id="labelSize" onmouseover="tip('Change Font size for the label Group')" value="14" type="number" min="1" max="100" step=".5" class="editNumber"/> <input id="labelSize" onmouseover="tip('Change Font size for the label Group')" value="14" type="number" min="1"
max="100" step=".5" class="editNumber" />
</div> </div>
<button id="labelStyleButton" onmouseover="tip('Select text color and opacity for the label Group')" class="icon-brush"></button> <button id="labelStyleButton" onmouseover="tip('Select text color and opacity for the label Group')" class="icon-brush"></button>
<div id="labelStyleButtons" style="display: none"> <div id="labelStyleButtons" style="display: none">
<input id="labelColor" type="color" class="editColor" value="#3e3e4b"> <input id="labelColor" type="color" class="editColor" value="#3e3e4b">
<i id="labelOpacityIcon" class="icon-adjust hidden"></i> <i id="labelOpacityIcon" class="icon-adjust hidden"></i>
<input id="labelOpacity" onmouseover="tip('Change Opacity for the entire Group')" value="1" type="number" min="0" max="1" step="0.02" class="editNumber"> <input id="labelOpacity" onmouseover="tip('Change Opacity for the entire Group')" value="1" type="number" min="0"
max="1" step="0.02" class="editNumber">
<i id="labelShadowIcon" class="icon-clone hidden"></i> <i id="labelShadowIcon" class="icon-clone hidden"></i>
<input id="labelShadow" onmouseover="tip('Change Shadow for the entire Group')" value="1" type="number" min="0" max="1" step="0.02" disabled> <input id="labelShadow" onmouseover="tip('Change Shadow for the entire Group')" value="1" type="number" min="0"
max="1" step="0.02" disabled>
</div> </div>
<button id="labelAngleButton" onmouseover="tip('Rotate the label')" class="icon-ccw"></button> <button id="labelAngleButton" onmouseover="tip('Rotate the label')" class="icon-ccw"></button>
@ -701,15 +771,18 @@
<button id="riverWidth" onmouseover="tip('Change river width and widening')" class="icon-sort-alt-up" onclick='$("#riverEditor > *").not(this).not("#riverResizeButtons").toggle();'></button> <button id="riverWidth" onmouseover="tip('Change river width and widening')" class="icon-sort-alt-up" onclick='$("#riverEditor > *").not(this).not("#riverResizeButtons").toggle();'></button>
<div id="riverWidthButtons" style="display: none"> <div id="riverWidthButtons" style="display: none">
<i id="riverWidthIcon" onmouseover="tip('Change river width')" class="icon-w"></i> <i id="riverWidthIcon" onmouseover="tip('Change river width')" class="icon-w"></i>
<input id="riverWidthInput" onmouseover="tip('Change river width')" value="1" type="range" min="0.2" max="5" step="0.1"> <input id="riverWidthInput" onmouseover="tip('Change river width')" value="1" type="range" min="0.2" max="5"
step="0.1">
<i id="riverIncrementIcon" onmouseover="tip('Change river bed increment (widening speed)')" class="icon-i"></i> <i id="riverIncrementIcon" onmouseover="tip('Change river bed increment (widening speed)')" class="icon-i"></i>
<input id="riverIncrement" onmouseover="tip('Change river bed increment (widening speed)')" value="1" type="range" min="0.02" max="2" step="0.02"> <input id="riverIncrement" onmouseover="tip('Change river bed increment (widening speed)')" value="1" type="range"
min="0.02" max="2" step="0.02">
</div> </div>
<button id="riverRegenerate" onmouseover="tip('Regenerate river')" class="icon-shuffle"></button> <button id="riverRegenerate" onmouseover="tip('Regenerate river')" class="icon-shuffle"></button>
<button id="riverResize" onmouseover="tip('Visually transform (rotate, rescale) river')" class="icon-ccw" onclick='$("#riverEditor > *").not(this).not("#riverWidthButtons").toggle();'></button> <button id="riverResize" onmouseover="tip('Visually transform (rotate, rescale) river')" class="icon-ccw" onclick='$("#riverEditor > *").not(this).not("#riverWidthButtons").toggle();'></button>
<div id="riverResizeButtons" style="display: none"> <div id="riverResizeButtons" style="display: none">
<i id="riverAngleIcon" onmouseover="tip('Rotate river (set angle)')" class="icon-a"></i> <i id="riverAngleIcon" onmouseover="tip('Rotate river (set angle)')" class="icon-a"></i>
<input id="riverAngle" onmouseover="tip('Rotate river (set angle)')" value="0" type="range" min="-90" max="90" step="0.2"> <input id="riverAngle" onmouseover="tip('Rotate river (set angle)')" value="0" type="range" min="-90" max="90"
step="0.2">
<span id="riverAngleValue">0°</span> <span id="riverAngleValue">0°</span>
<i id="riverScaleIcon" onmouseover="tip('Change river scale')" class="icon-s"></i> <i id="riverScaleIcon" onmouseover="tip('Change river scale')" class="icon-s"></i>
<input id="riverScale" onmouseover="tip('Change river scale')" value="1" type="number" min="0.1" max="3" step="0.01"> <input id="riverScale" onmouseover="tip('Change river scale')" value="1" type="number" min="0.1" max="3" step="0.01">
@ -729,7 +802,8 @@
</select> </select>
</div> </div>
<button id="routeLength">0</button> <button id="routeLength">0</button>
<button id="routeSplit" onmouseover="tip('Click on a control point to split the route')" class="icon-unlink" onclick="$(this).toggleClass('pressed')"></button> <button id="routeSplit" onmouseover="tip('Click on a control point to split the route')" class="icon-unlink"
onclick="$(this).toggleClass('pressed')"></button>
<button id="routeLegend" onmouseover="tip('Edit free text notes (legend) for the route')" class="icon-edit"></button> <button id="routeLegend" onmouseover="tip('Edit free text notes (legend) for the route')" class="icon-edit"></button>
<button id="routeNew" onmouseover="tip('Create new route clicking on map')" class="icon-map-pin"></button> <button id="routeNew" onmouseover="tip('Create new route clicking on map')" class="icon-map-pin"></button>
<button id="routeRemove" onmouseover="tip('Remove route')" class="icon-trash"></button> <button id="routeRemove" onmouseover="tip('Remove route')" class="icon-trash"></button>
@ -751,9 +825,11 @@
<button id="iconSetSize" onmouseover="tip('Change group size')" class="icon-resize-full"></button> <button id="iconSetSize" onmouseover="tip('Change group size')" class="icon-resize-full"></button>
<div id="iconSizeSection" style="display: none"> <div id="iconSizeSection" style="display: none">
<i onmouseover="tip('Change size for group icon')" class="icon-s"></i> <i onmouseover="tip('Change size for group icon')" class="icon-s"></i>
<input id="iconSize" onmouseover="tip('Change size for group icon')" type="range" class="editRange" value="1" min=".5" max="10" step=".05"></select> <input id="iconSize" onmouseover="tip('Change size for group icon')" type="range" class="editRange" value="1"
min=".5" max="10" step=".05"></select>
<i onmouseover="tip('Change group stroke-width')" class="icon-w"></i> <i onmouseover="tip('Change group stroke-width')" class="icon-w"></i>
<input id="iconStrokeWidth" onmouseover="tip('Change group stroke-width')" type="number" class="editNumber" value="1" min="0" max="5" step=".02"></select> <input id="iconStrokeWidth" onmouseover="tip('Change group stroke-width')" type="number" class="editNumber"
value="1" min="0" max="5" step=".02"></select>
</div> </div>
<button id="iconCopy" onmouseover="tip('Copy the icon')" class="icon-clone"></button> <button id="iconCopy" onmouseover="tip('Copy the icon')" class="icon-clone"></button>
<button id="iconRemove" onmouseover="tip('Remove icon')" class="icon-trash"></button> <button id="iconRemove" onmouseover="tip('Remove icon')" class="icon-trash"></button>
@ -777,8 +853,10 @@
<button id="reliefBulkRemove" onmouseover="tip('Erase all relief icons in radius')" class="icon-eraser"></button> <button id="reliefBulkRemove" onmouseover="tip('Erase all relief icons in radius')" class="icon-eraser"></button>
<div id="reliefBulkRemoveSection" style="display: none"> <div id="reliefBulkRemoveSection" style="display: none">
<input id="reliefBulkRemoveRadius" oninput="tip('Eraser brush size: '+this.value); reliefBulkRemoveRadiusNumber.value = this.value" type="range" min="1" max="7" value="3"> <input id="reliefBulkRemoveRadius" oninput="tip('Eraser brush size: '+this.value); reliefBulkRemoveRadiusNumber.value = this.value"
<input id="reliefBulkRemoveRadiusNumber" oninput="tip('Eraser brush size: '+this.value); reliefBulkRemoveRadius.value = this.value" type="number" min="1" max="7" value="3"> type="range" min="1" max="7" value="3">
<input id="reliefBulkRemoveRadiusNumber" oninput="tip('Eraser brush size: '+this.value); reliefBulkRemoveRadius.value = this.value"
type="number" min="1" max="7" value="3">
</div> </div>
<button id="reliefRemove" onmouseover="tip('Remove this relief icon')" class="icon-trash"></button> <button id="reliefRemove" onmouseover="tip('Remove this relief icon')" class="icon-trash"></button>
@ -788,7 +866,8 @@
<button id="burgGroup" onmouseover="tip('Change Burg Group')" class="icon-tags"></button> <button id="burgGroup" onmouseover="tip('Change Burg Group')" class="icon-tags"></button>
<div id="burgGroupSection" style="display: none"> <div id="burgGroupSection" style="display: none">
<select id="burgSelectGroup" onmouseover="tip('Select a Group for this Burg')" style="width: 117px;"></select> <select id="burgSelectGroup" onmouseover="tip('Select a Group for this Burg')" style="width: 117px;"></select>
<input id="burgInputGroup" placeholder="type new Group name" onmouseover="tip('Create new Group for the Burg')" style="display: none; width: 113px;"/> <input id="burgInputGroup" placeholder="type new Group name" onmouseover="tip('Create new Group for the Burg')"
style="display: none; width: 113px;" />
<i id="burgAddGroup" onmouseover="tip('Create new Group for the Burg')" class="icon-plus pointer"></i> <i id="burgAddGroup" onmouseover="tip('Create new Group for the Burg')" class="icon-plus pointer"></i>
<i id="burgRemoveGroup" onmouseover="tip('Remove selected Burg Group')" class="icon-trash pointer"></i> <i id="burgRemoveGroup" onmouseover="tip('Remove selected Burg Group')" class="icon-trash pointer"></i>
</div> </div>
@ -804,21 +883,26 @@
</div> </div>
<button id="burgSelectFont" onmouseover="tip('Select font for the Burg Group label')" class="icon-font"></button> <button id="burgSelectFont" onmouseover="tip('Select font for the Burg Group label')" class="icon-font"></button>
<div id="burgSelectFontSection" style="display: none"> <div id="burgSelectFontSection" style="display: none">
<i id="burgToggleExternalFont" onmouseover="tip('Fetch fonts by linking @font-face declaration, just populate with font name if using Google font (fonts.google.com)')" class="icon-link pointer"></i> <i id="burgToggleExternalFont" onmouseover="tip('Fetch fonts by linking @font-face declaration, just populate with font name if using Google font (fonts.google.com)')"
<input id="burgInputExternalFont" placeholder="link to @font-face" onmouseover="tip('Fetch fonts by linking @font-face declaration')" style="display: none; width: 113px;"/> class="icon-link pointer"></i>
<input id="burgInputExternalFont" placeholder="link to @font-face" onmouseover="tip('Fetch fonts by linking @font-face declaration')"
style="display: none; width: 113px;" />
<select id="burgSelectDefaultFont" onmouseover="tip('Select a font for the Group')" style="width: 117px;"></select> <select id="burgSelectDefaultFont" onmouseover="tip('Select a font for the Group')" style="width: 117px;"></select>
</div> </div>
<button id="burgSetFontSize" onmouseover="tip('Set font size for the Burg Group label')" class="icon-text-height"></button> <button id="burgSetFontSize" onmouseover="tip('Set font size for the Burg Group label')" class="icon-text-height"></button>
<div id="burgFontSizeSection" style="display: none"> <div id="burgFontSizeSection" style="display: none">
<input id="burgSetLabelSize" onmouseover="tip('Set font size for the Burg Group label')" value="14" type="number" min="1" max="100" step=".5" style="width: 117px"/> <input id="burgSetLabelSize" onmouseover="tip('Set font size for the Burg Group label')" value="14" type="number"
min="1" max="100" step=".5" style="width: 117px" />
</div> </div>
<button id="burgLabelColor" onmouseover="tip('Set label color for the Burg Group')" class="icon-brush"></button> <button id="burgLabelColor" onmouseover="tip('Set label color for the Burg Group')" class="icon-brush"></button>
<div id="burgLabelColorSection" style="display: none"> <div id="burgLabelColorSection" style="display: none">
<input onmouseover="tip('Set label color for the Burg Group')" id="burgLabelColorInput" type="color" class="editColor" value="#3e3e4b"> <input onmouseover="tip('Set label color for the Burg Group')" id="burgLabelColorInput" type="color" class="editColor"
value="#3e3e4b">
<i onmouseover="tip('Set label opacity for the Burg Group')" class="icon-adjust"></i> <i onmouseover="tip('Set label opacity for the Burg Group')" class="icon-adjust"></i>
<input onmouseover="tip('Set label opacity for the Burg Group')" id="burgLabelOpacity" value="1" type="number" min="0" max="1" step="0.02"> <input onmouseover="tip('Set label opacity for the Burg Group')" id="burgLabelOpacity" value="1" type="number"
min="0" max="1" step="0.02">
</div> </div>
<button id="burgLabelRotation" onmouseover="tip('Rotate the label')" class="icon-ccw"></button> <button id="burgLabelRotation" onmouseover="tip('Rotate the label')" class="icon-ccw"></button>
@ -834,32 +918,41 @@
<button id="burgIconFill" onmouseover="tip('Change icon fill')" class="icon-dot-circled"></button> <button id="burgIconFill" onmouseover="tip('Change icon fill')" class="icon-dot-circled"></button>
<div id="burgIconFillSection" style="display: none;"> <div id="burgIconFillSection" style="display: none;">
<i onmouseover="tip('Change icon size')" class="icon-resize-full"></i> <i onmouseover="tip('Change icon size')" class="icon-resize-full"></i>
<input id="burgIconSize" onmouseover="tip('Change icon size')" type="range" class="editRange" value="1" min=".1" max="5" step=".05" style="width: 60px;"></select> <input id="burgIconSize" onmouseover="tip('Change icon size')" type="range" class="editRange" value="1" min=".1"
max="5" step=".05" style="width: 60px;"></select>
<i onmouseover="tip('Set icon fill opacity')" class="icon-adjust"></i> <i onmouseover="tip('Set icon fill opacity')" class="icon-adjust"></i>
<input id="burgIconFillOpacity" onmouseover="tip('Set icon fill opacity')" value="1" type="number" min="0" max="1" step="0.02" style="width: 40px;"> <input id="burgIconFillOpacity" onmouseover="tip('Set icon fill opacity')" value="1" type="number" min="0"
<input id="burgIconFillColor" onmouseover="tip('Change icon fill color')" type="color" class="editColor" value="#000000"> max="1" step="0.02" style="width: 40px;">
<input id="burgIconFillColor" onmouseover="tip('Change icon fill color')" type="color" class="editColor"
value="#000000">
</div> </div>
<button id="burgIconStroke" onmouseover="tip('Change icon stroke')" class="icon-circle-empty"></button> <button id="burgIconStroke" onmouseover="tip('Change icon stroke')" class="icon-circle-empty"></button>
<div id="burgIconStrokeSection" style="display: none;"> <div id="burgIconStrokeSection" style="display: none;">
<i onmouseover="tip('Change icon stroke width')" class="icon-resize-horizontal"></i> <i onmouseover="tip('Change icon stroke width')" class="icon-resize-horizontal"></i>
<input id="burgIconStrokeWidth" onmouseover="tip('Change icon stroke width')" type="number" value="1" min="0" max="2" step=".02" style="width: 40px;"></select> <input id="burgIconStrokeWidth" onmouseover="tip('Change icon stroke width')" type="number" value="1" min="0"
max="2" step=".02" style="width: 40px;"></select>
<i onmouseover="tip('Set icon stroke opacity')" class="icon-adjust"></i> <i onmouseover="tip('Set icon stroke opacity')" class="icon-adjust"></i>
<input id="burgIconStrokeOpacity" onmouseover="tip('Set icon stroke opacity')" value="1" type="number" min="0" max="1" step="0.02" style="width: 40px;"> <input id="burgIconStrokeOpacity" onmouseover="tip('Set icon stroke opacity')" value="1" type="number" min="0"
<input id="burgIconStrokeColor" onmouseover="tip('Change icon stroke color')" type="color" class="editColor" value="#000000"> max="1" step="0.02" style="width: 40px;">
<input id="burgIconStrokeColor" onmouseover="tip('Change icon stroke color')" type="color" class="editColor"
value="#000000">
</div> </div>
</div> </div>
<button id="burgFeatures" onmouseover="tip('Change Burg features')" class="icon-cog-alt"></button> <button id="burgFeatures" onmouseover="tip('Change Burg features')" class="icon-cog-alt"></button>
<div id="burgFeaturesSection" style="display: none"> <div id="burgFeaturesSection" style="display: none">
<button id="burgToggleCapital" onmouseover="tip('Mark the Burg as country capital. Neutral burg cannot be a capital')" class="icon-star"></button> <button id="burgToggleCapital" onmouseover="tip('Mark the Burg as country capital. Neutral burg cannot be a capital')"
class="icon-star"></button>
<button id="burgTogglePort" onmouseover="tip('Mark the Burg as port (toggle anchor icon)')" class="icon-anchor"></button> <button id="burgTogglePort" onmouseover="tip('Mark the Burg as port (toggle anchor icon)')" class="icon-anchor"></button>
<i onmouseover="tip('Set Burg population')" class="icon-users"></i> <i onmouseover="tip('Set Burg population')" class="icon-users"></i>
<input id="burgPopulation" onmouseover="tip('Set Burg population (in population points)')" type="number" value="1" min="0" step="1" style="width: 40px;"></select> <input id="burgPopulation" onmouseover="tip('Set Burg population (in population points)')" type="number" value="1"
min="0" step="1" style="width: 40px;"></select>
<output id="burgPopulationFriendly" onmouseover="tip('Burg population (in people)')">1000</output> <output id="burgPopulationFriendly" onmouseover="tip('Burg population (in people)')">1000</output>
</div> </div>
<button id="burgSeeInMFCG" onmouseover="tip('See the burg representation in Medieval Fantasy City Generator by watabou')" class="icon-map"></button> <button id="burgSeeInMFCG" onmouseover="tip('See the burg representation in Medieval Fantasy City Generator by watabou')"
class="icon-map"></button>
<button id="burgRelocate" onmouseover="tip('Move burg to a different cell')" class="icon-target"></button> <button id="burgRelocate" onmouseover="tip('Move burg to a different cell')" class="icon-target"></button>
<button id="burglLegend" onmouseover="tip('Edit free text notes (legend) for this burg')" class="icon-edit"></button> <button id="burglLegend" onmouseover="tip('Edit free text notes (legend) for this burg')" class="icon-edit"></button>
<button id="burgAddfromEditor" onmouseover="tip('Add new Burg')" class="icon-plus"></button> <button id="burgAddfromEditor" onmouseover="tip('Add new Burg')" class="icon-plus"></button>
@ -871,7 +964,8 @@
<button id="markerGroup" onmouseover="tip('Change marker type')" class="icon-tags"></button> <button id="markerGroup" onmouseover="tip('Change marker type')" class="icon-tags"></button>
<div id="markerGroupSection" style="display: none"> <div id="markerGroupSection" style="display: none">
<select id="markerSelectGroup" onmouseover="tip('Select type for the selected marker')" style="width: 117px;"></select> <select id="markerSelectGroup" onmouseover="tip('Select type for the selected marker')" style="width: 117px;"></select>
<input id="markerInputGroup" placeholder="type new type name" onmouseover="tip('Create new type for selected marker')" style="display: none; width: 113px;"/> <input id="markerInputGroup" placeholder="type new type name" onmouseover="tip('Create new type for selected marker')"
style="display: none; width: 113px;" />
<i id="markerAddGroup" onmouseover="tip('Pick out selected marker into a new type')" class="icon-plus pointer"></i> <i id="markerAddGroup" onmouseover="tip('Pick out selected marker into a new type')" class="icon-plus pointer"></i>
<i id="markerRemoveGroup" onmouseover="tip('Remove all markers of that type')" class="icon-trash pointer"></i> <i id="markerRemoveGroup" onmouseover="tip('Remove all markers of that type')" class="icon-trash pointer"></i>
</div> </div>
@ -879,11 +973,14 @@
<button id="markerIconButton" onmouseover="tip('Change marker icon and edit positioning')" class="icon-star"></button> <button id="markerIconButton" onmouseover="tip('Change marker icon and edit positioning')" class="icon-star"></button>
<div id="markerIconButtons" style="display: none"> <div id="markerIconButtons" style="display: none">
<i onmouseover="tip('Change marker icon size')" class="icon-resize-full"></i> <i onmouseover="tip('Change marker icon size')" class="icon-resize-full"></i>
<input id="markerIconSize" onmouseover="tip('Change marker icon size')" value="22" type="range" min="10" max="30" step="0.5" class="editRange"> <input id="markerIconSize" onmouseover="tip('Change marker icon size')" value="22" type="range" min="10" max="30"
step="0.5" class="editRange">
<i onmouseover="tip('Change marker horizontal shift')" class="icon-resize-horizontal"></i> <i onmouseover="tip('Change marker horizontal shift')" class="icon-resize-horizontal"></i>
<input id="markerIconShiftX" onmouseover="tip('Change marker horizontal shift')" value="50" type="number" min="0" max="100" style="width: 38px;"> <input id="markerIconShiftX" onmouseover="tip('Change marker horizontal shift')" value="50" type="number" min="0"
max="100" style="width: 38px;">
<i onmouseover="tip('Change marker vertical shift')" class="icon-resize-vertical"></i> <i onmouseover="tip('Change marker vertical shift')" class="icon-resize-vertical"></i>
<input id="markerIconShiftY" onmouseover="tip('Change marker vertical shift')" value="50" type="number" min="0" max="100" style="width: 38px;"> <input id="markerIconShiftY" onmouseover="tip('Change marker vertical shift')" value="50" type="number" min="0"
max="100" style="width: 38px;">
<i onmouseover="tip('Paste custom unicode symbol to use as icon')" class="icon-pencil"></i> <i onmouseover="tip('Paste custom unicode symbol to use as icon')" class="icon-pencil"></i>
<input id="markerIconCustom" onmouseover="tip('Paste custom unicode symbol to use as icon')" style="width: 38px;"> <input id="markerIconCustom" onmouseover="tip('Paste custom unicode symbol to use as icon')" style="width: 38px;">
<table id="markerIconTable"></table> <table id="markerIconTable"></table>
@ -893,13 +990,17 @@
<button id="markerStyleButton" onmouseover="tip('Change marker size and colors')" class="icon-brush"></button> <button id="markerStyleButton" onmouseover="tip('Change marker size and colors')" class="icon-brush"></button>
<div id="markerStyleButtons" style="display: none"> <div id="markerStyleButtons" style="display: none">
<i onmouseover="tip('Change marker base style')" class="icon-map-pin"></i>: <i onmouseover="tip('Change marker base style')" class="icon-map-pin"></i>:
<input id="markerSize" onmouseover="tip('Change marker size')" value="1" type="range" min="0.1" max="10" step="0.2" class="editRange"> <input id="markerSize" onmouseover="tip('Change marker size')" value="1" type="range" min="0.1" max="10" step="0.2"
class="editRange">
<input id="markerBase" onmouseover="tip('Change marker base color')" type="color" class="editColor" value="#ffffff"> <input id="markerBase" onmouseover="tip('Change marker base color')" type="color" class="editColor" value="#ffffff">
<input id="markerFill" onmouseover="tip('Change marker fill color')" type="color" class="editColor" value="#000000"> <input id="markerFill" onmouseover="tip('Change marker fill color')" type="color" class="editColor" value="#000000">
<br><i onmouseover="tip('Change marker icon style')" class="icon-star"></i>: <br><i onmouseover="tip('Change marker icon style')" class="icon-star"></i>:
<input id="markerIconFill" onmouseover="tip('Change marker icon fill color')" type="color" class="editColor" value="#000000"> <input id="markerIconFill" onmouseover="tip('Change marker icon fill color')" type="color" class="editColor"
<input id="markerIconStrokeWidth" onmouseover="tip('Change marker icon stroke width')" value="0" type="number" min="0" max="2" step="0.1" style="width: 40px;"> value="#000000">
<input id="markerIconStroke" onmouseover="tip('Change marker icon stroke color')" type="color" class="editColor" value="#000000"> <input id="markerIconStrokeWidth" onmouseover="tip('Change marker icon stroke width')" value="0" type="number"
min="0" max="2" step="0.1" style="width: 40px;">
<input id="markerIconStroke" onmouseover="tip('Change marker icon stroke color')" type="color" class="editColor"
value="#000000">
</div> </div>
<button id="markerToggleBubble" onmouseover="tip('Toggle marker bubble display')" class="icon-info-circled"></button> <button id="markerToggleBubble" onmouseover="tip('Toggle marker bubble display')" class="icon-info-circled"></button>
@ -923,7 +1024,8 @@
</select> </select>
</div> </div>
<div id="templateTools"> <div id="templateTools">
<button id="templateMountain" onmouseover="tip('Mountain: high big blob. Can be placed only once and only as a first step')" class="noicon">M</button> <button id="templateMountain" onmouseover="tip('Mountain: high big blob. Can be placed only once and only as a first step')"
class="noicon">M</button>
<button id="templateHill" onmouseover="tip('Hill: small blob')" class="noicon">H</button> <button id="templateHill" onmouseover="tip('Hill: small blob')" class="noicon">H</button>
<button id="templatePit" onmouseover="tip('Pit: round depression')" class="noicon">P</button> <button id="templatePit" onmouseover="tip('Pit: round depression')" class="noicon">P</button>
<button id="templateRange" onmouseover="tip('Range: elongated elevation')" class="noicon">R</button> <button id="templateRange" onmouseover="tip('Range: elongated elevation')" class="noicon">R</button>
@ -931,7 +1033,8 @@
<button id="templateStrait" onmouseover="tip('Strait: centered vertical depression')" class="noicon">S</button> <button id="templateStrait" onmouseover="tip('Strait: centered vertical depression')" class="noicon">S</button>
<button id="templateAdd" onmouseover="tip('Add or subtract value from all heights')" class="noicon">+</button> <button id="templateAdd" onmouseover="tip('Add or subtract value from all heights')" class="noicon">+</button>
<button id="templateMultiply" onmouseover="tip('Multiply all heights by factor')" class="noicon">*</button> <button id="templateMultiply" onmouseover="tip('Multiply all heights by factor')" class="noicon">*</button>
<button id="templateSmooth" onmouseover="tip('Smooth the map replacing cell heights by an average values of its neighbors')" class="noicon">~</button> <button id="templateSmooth" onmouseover="tip('Smooth the map replacing cell heights by an average values of its neighbors')"
class="noicon">~</button>
</div> </div>
<div id="templateBody" data-changed=0> <div id="templateBody" data-changed=0>
<div data-type="Mountain">Mountain <div data-type="Mountain">Mountain
@ -942,10 +1045,12 @@
<button id="templateRun" onmouseover="tip('Apply current template')" class="icon-play-circled2"></button> <button id="templateRun" onmouseover="tip('Apply current template')" class="icon-play-circled2"></button>
<button id="templateUndo" onmouseover="tip('Undo the latest action')" class="icon-ccw" disabled></button> <button id="templateUndo" onmouseover="tip('Undo the latest action')" class="icon-ccw" disabled></button>
<button id="templateRedo" onmouseover="tip('Redo the action')" class="icon-cw" disabled></button> <button id="templateRedo" onmouseover="tip('Redo the action')" class="icon-cw" disabled></button>
<button id="templateComplete" onmouseover="tip('Finalize the Heightmap. Not allowed if insufficient land area available')" class="icon-check"></button> <button id="templateComplete" onmouseover="tip('Finalize the Heightmap. Not allowed if insufficient land area available')"
class="icon-check"></button>
<button id="templateSave" onmouseover="tip('Save template')" class="icon-download"></button> <button id="templateSave" onmouseover="tip('Save template')" class="icon-download"></button>
<button id="templateLoad" onmouseover="tip('Open previously saved template')" class="icon-upload"></button> <button id="templateLoad" onmouseover="tip('Open previously saved template')" class="icon-upload"></button>
<button id="templateMail" onclick="window.open('mailto:maxganiev@yandex.com?Subject=Template%20suggestion', '_blank')" onmouseover="tip('Send a template suggestion to me')" class="icon-mail-alt"></button> <button id="templateMail" onclick="window.open('mailto:maxganiev@yandex.com?Subject=Template%20suggestion', '_blank')"
onmouseover="tip('Send a template suggestion to me')" class="icon-mail-alt"></button>
</div> </div>
</div> </div>
@ -959,9 +1064,11 @@
<input id="convertColors" value="12" style="display: none;" /> <input id="convertColors" value="12" style="display: none;" />
<button id="convertImageGrid" onmouseover="tip('Toggle grid')" class="icon-eye"></button> <button id="convertImageGrid" onmouseover="tip('Toggle grid')" class="icon-eye"></button>
<button id="convertOverlayButton" onmouseover="tip('Change overlay opacity')" class="icon-clone"></button> <button id="convertOverlayButton" onmouseover="tip('Change overlay opacity')" class="icon-clone"></button>
<input id="convertOverlay" onmouseover="tip('Change overlay opacity')" type="range" min="0" max="1" step="0.01" value="0" style="display: none;"> <input id="convertOverlay" onmouseover="tip('Change overlay opacity')" type="range" min="0" max="1" step="0.01"
value="0" style="display: none;">
<span id="convertOverlayValue" onmouseover="tip('Overlay opacity')" style="display: none;">0</span> <span id="convertOverlayValue" onmouseover="tip('Overlay opacity')" style="display: none;">0</span>
<button id="convertComplete" onmouseover="tip('Complete conversion. All unassigned colors will be considered as ocean')" class="icon-check"></button> <button id="convertComplete" onmouseover="tip('Complete conversion. All unassigned colors will be considered as ocean')"
class="icon-check"></button>
</div> </div>
<div id="colorsSelect"> <div id="colorsSelect">
<div id="colorScheme"></div> <div id="colorScheme"></div>
@ -987,8 +1094,10 @@
<button id="brushTrough" onmouseover="tip('Select two points to place a Trought')" class="feature noicon">T</button> <button id="brushTrough" onmouseover="tip('Select two points to place a Trought')" class="feature noicon">T</button>
</div> </div>
<div style="display: table;"> <div style="display: table;">
<label id="brushRadiusLabel" onmouseover="tip('Set the brush effective radius. Works only with 4 brushes above')" class="disabled italic">R:</label> <label id="brushRadiusLabel" onmouseover="tip('Set the brush effective radius. Works only with 4 brushes above')"
<input id="brushRadius" oninput="tip('Brush radius: '+this.value)" type="range" min="1" max="10" value="3" class="disabled" disabled> class="disabled italic">R:</label>
<input id="brushRadius" oninput="tip('Brush radius: '+this.value)" type="range" min="1" max="10" value="3"
class="disabled" disabled>
<label onmouseover="tip('Set the brush power in points of height')" class="italic">H:</label> <label onmouseover="tip('Set the brush power in points of height')" class="italic">H:</label>
<input id="brushPower" oninput="tip('Brush power: '+this.value)" type="range" min="1" max="30" value="5"> <input id="brushPower" oninput="tip('Brush power: '+this.value)" type="range" min="1" max="30" value="5">
</div> </div>
@ -996,12 +1105,15 @@
<button id="undo" onmouseover="tip('Undo the latest action (Ctrl + Z)')" class="icon-ccw" disabled></button> <button id="undo" onmouseover="tip('Undo the latest action (Ctrl + Z)')" class="icon-ccw" disabled></button>
<button id="redo" onmouseover="tip('Redo the action (Ctrl + Y)')" class="icon-cw" disabled></button> <button id="redo" onmouseover="tip('Redo the action (Ctrl + Y)')" class="icon-cw" disabled></button>
<button id="rescaleButton" onmouseover="tip('Show rescaler slider')" class="icon-exchange"></button> <button id="rescaleButton" onmouseover="tip('Show rescaler slider')" class="icon-exchange"></button>
<input id="rescaler" onmouseover="tip('Slide to change map height')" type="range" min="1" max="10" step="0.1" value="5" class="hidden"> <input id="rescaler" onmouseover="tip('Slide to change map height')" type="range" min="1" max="10" step="0.1"
value="5" class="hidden">
<button id="rescaleCondButton" onmouseover="tip('Conditional rescaler')" class="icon-if"></button> <button id="rescaleCondButton" onmouseover="tip('Conditional rescaler')" class="icon-if"></button>
<label class="condition hidden">h ≥</label> <label class="condition hidden">h ≥</label>
<input id="rescaleLower" class="condition hidden" onmouseover="tip('Set lower threshold')" value="20" type="number" min="0" max="100"> <input id="rescaleLower" class="condition hidden" onmouseover="tip('Set lower threshold')" value="20" type="number"
min="0" max="100">
<label class="condition hidden">≤</label> <label class="condition hidden">≤</label>
<input id="rescaleHigher" class="condition hidden" onmouseover="tip('Set higher threshold')" value="100" type="number" min="1" max="100"> <input id="rescaleHigher" class="condition hidden" onmouseover="tip('Set higher threshold')" value="100" type="number"
min="1" max="100">
<label class="condition hidden">⇒</label> <label class="condition hidden">⇒</label>
<select class="condition hidden" id="conditionSign"> <select class="condition hidden" id="conditionSign">
<option value="×" selected>×</option> <option value="×" selected>×</option>
@ -1010,7 +1122,8 @@
<option value="-">-</option> <option value="-">-</option>
<option value="^">^</option> <option value="^">^</option>
</select> </select>
<input id="rescaleModifier" onmouseover="tip('Set modifier value')" type="number" value="0.9" min="0" max="1.5" step="0.01" class="condition hidden"> <input id="rescaleModifier" onmouseover="tip('Set modifier value')" type="number" value="0.9" min="0" max="1.5"
step="0.01" class="condition hidden">
<button id="rescaleExecute" onmouseover="tip('Run condition')" class="icon-play-circled2 condition hidden"></button> <button id="rescaleExecute" onmouseover="tip('Run condition')" class="icon-play-circled2 condition hidden"></button>
<button id="smoothHeights" onmouseover="tip('Smooth all heights')" class="icon-smooth"></button> <button id="smoothHeights" onmouseover="tip('Smooth all heights')" class="icon-smooth"></button>
<button id="disruptHeights" onmouseover="tip('Disrupt (randomize) heights')" class="icon-disrupt"></button> <button id="disruptHeights" onmouseover="tip('Disrupt (randomize) heights')" class="icon-disrupt"></button>
@ -1024,13 +1137,19 @@
<div id="countriesEditor" class="dialog stable" style="display: none" data-type="absolute"> <div id="countriesEditor" class="dialog stable" style="display: none" data-type="absolute">
<div id="countriesHeader"> <div id="countriesHeader">
<div style="margin-left: 14px" onmouseover="tip('Click to sort alphabetically by country name')" class="sortable alphabetically" data-sortby="country">Country&nbsp;</div> <div style="margin-left: 14px" onmouseover="tip('Click to sort alphabetically by country name')" class="sortable alphabetically"
<div style="margin-left: 30px" onmouseover="tip('Click to sort alphabetically by capital name')" class="sortable alphabetically" data-sortby="capital">Capital&nbsp;</div> data-sortby="country">Country&nbsp;</div>
<div style="margin-left: 24px" onmouseover="tip('Click to sort by country expansion value')" class="sortable hidden" data-sortby="expansion">Expan.&nbsp;</div> <div style="margin-left: 30px" onmouseover="tip('Click to sort alphabetically by capital name')" class="sortable alphabetically"
<div style="margin-left: 30px" onmouseover="tip('Click to sort by country cells count')" class="sortable" data-sortby="cells">Cells&nbsp;</div> data-sortby="capital">Capital&nbsp;</div>
<div style="margin-left: 6px" onmouseover="tip('Click to sort by country burgs count')" class="sortable" data-sortby="burgs">Burgs&nbsp;</div> <div style="margin-left: 24px" onmouseover="tip('Click to sort by country expansion value')" class="sortable hidden"
data-sortby="expansion">Expan.&nbsp;</div>
<div style="margin-left: 30px" onmouseover="tip('Click to sort by country cells count')" class="sortable"
data-sortby="cells">Cells&nbsp;</div>
<div style="margin-left: 6px" onmouseover="tip('Click to sort by country burgs count')" class="sortable"
data-sortby="burgs">Burgs&nbsp;</div>
<div style="margin-left: 20px" onmouseover="tip('Click to sort by country area')" class="sortable" data-sortby="area">Area&nbsp;</div> <div style="margin-left: 20px" onmouseover="tip('Click to sort by country area')" class="sortable" data-sortby="area">Area&nbsp;</div>
<div style="margin-left: 22px" onmouseover="tip('Click to sort by country population')" class="sortable" data-sortby="population">Population&nbsp;</div> <div style="margin-left: 22px" onmouseover="tip('Click to sort by country population')" class="sortable"
data-sortby="population">Population&nbsp;</div>
</div> </div>
<div id="countriesBody"></div> <div id="countriesBody"></div>
<div id="countriesFooter" class="totalLine"> <div id="countriesFooter" class="totalLine">
@ -1042,47 +1161,59 @@
<div id="countriesBottom"> <div id="countriesBottom">
<button id="editScaleCountries" onmouseover="tip('Change demographical and geographical measurements')" class="icon-map-signs"></button> <button id="editScaleCountries" onmouseover="tip('Change demographical and geographical measurements')" class="icon-map-signs"></button>
<button id="countriesPercentage" onmouseover="tip('Toggle percentage / absolut values views')" class="icon-percent"></button> <button id="countriesPercentage" onmouseover="tip('Toggle percentage / absolut values views')" class="icon-percent"></button>
<button id="countriesRegenerate" onmouseover="tip('Regenerate countries based on amended Expansion values')" class="icon-cog-alt"></button> <button id="countriesRegenerate" onmouseover="tip('Regenerate countries based on amended Expansion values')"
class="icon-cog-alt"></button>
<button id="countriesManually" onmouseover="tip('Manually re-assign countries')" class="icon-brush"></button> <button id="countriesManually" onmouseover="tip('Manually re-assign countries')" class="icon-brush"></button>
<div id="countriesManuallyButtons" style="display: none"> <div id="countriesManuallyButtons" style="display: none">
<button id="countriesManuallyComplete" onmouseover="tip('Apply assignment')" class="icon-check"></button> <button id="countriesManuallyComplete" onmouseover="tip('Apply assignment')" class="icon-check"></button>
<button id="countriesAddM" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button> <button id="countriesAddM" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button>
<button id="countriesManuallyCancel" onmouseover="tip('Cancel assignment')" class="icon-cancel"></button> <button id="countriesManuallyCancel" onmouseover="tip('Cancel assignment')" class="icon-cancel"></button>
<label onmouseover="tip('Set the brush size')" class="italic">Brush size:</label> <label onmouseover="tip('Set the brush size')" class="italic">Brush size:</label>
<input id="countriesManuallyBrush" oninput="tip('Brush size: '+this.value); countriesManuallyBrushNumber.value = this.value" type="range" min="1" max="7" value="3"> <input id="countriesManuallyBrush" oninput="tip('Brush size: '+this.value); countriesManuallyBrushNumber.value = this.value"
<input id="countriesManuallyBrushNumber" oninput="tip('Brush size: '+this.value); countriesManuallyBrush.value = this.value" type="number" min="1" max="7" value="3"> type="range" min="1" max="7" value="3">
<input id="countriesManuallyBrushNumber" oninput="tip('Brush size: '+this.value); countriesManuallyBrush.value = this.value"
type="number" min="1" max="7" value="3">
</div> </div>
<div id="countriesRegenerateButtons" style="display: none"> <div id="countriesRegenerateButtons" style="display: none">
<button id="countriesApply" onmouseover="tip('Apply assignment')" class="icon-check"></button> <button id="countriesApply" onmouseover="tip('Apply assignment')" class="icon-check"></button>
<button id="countriesRandomize" onmouseover="tip('Randomize countries Expansion value')" class="icon-shuffle"></button> <button id="countriesRandomize" onmouseover="tip('Randomize countries Expansion value')" class="icon-shuffle"></button>
<button id="countriesAddR" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button> <button id="countriesAddR" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button>
<label onmouseover="tip('Distance to a consider a land as neutral')" class="italic">Neutral distance:</label> <label onmouseover="tip('Distance to a consider a land as neutral')" class="italic">Neutral distance:</label>
<input id="countriesNeutral" oninput="tip('Neutral distance: '+this.value); countriesNeutralNumber.value = this.value" type="range" min="1" max="500" value="200"> <input id="countriesNeutral" oninput="tip('Neutral distance: '+this.value); countriesNeutralNumber.value = this.value"
<input id="countriesNeutralNumber" oninput="tip('Neutral distance: '+this.value); countriesNeutral.value = this.value" type="number" min="1" max="500" value="200" style="width:42px"> type="range" min="1" max="500" value="200">
<input id="countriesNeutralNumber" oninput="tip('Neutral distance: '+this.value); countriesNeutral.value = this.value"
type="number" min="1" max="500" value="200" style="width:42px">
</div> </div>
<button id="countriesAddG" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button> <button id="countriesAddG" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button>
<button id="countriesRegenerateNames" onmouseover="tip('Regenerate countries names')" class="icon-arrows-cw"></button> <button id="countriesRegenerateNames" onmouseover="tip('Regenerate countries names')" class="icon-arrows-cw"></button>
<button id="countriesExport" onmouseover="tip('Save country-related data as a text file (.csv)')" class="icon-download"></button> <button id="countriesExport" onmouseover="tip('Save country-related data as a text file (.csv)')" class="icon-download"></button>
<button id="burgNamesImport" onmouseover="tip('Load burg names from a text file. Each name should be on a new line!')" class="icon-upload"></button> <button id="burgNamesImport" onmouseover="tip('Load burg names from a text file. Each name should be on a new line!')"
class="icon-upload"></button>
<button id="removeCountries" onmouseover="tip('Remove all countries')" class="icon-trash"></button> <button id="removeCountries" onmouseover="tip('Remove all countries')" class="icon-trash"></button>
</div> </div>
</div> </div>
<div id="burgsEditor" class="dialog stable" style="display: none"> <div id="burgsEditor" class="dialog stable" style="display: none">
<div id="burgsHeader"> <div id="burgsHeader">
<div style="margin-left: 19px" onmouseover="tip('Click to sort alphabetically by burg name')" class="sortable alphabetically" data-sortby="burg">Burg&nbsp;</div> <div style="margin-left: 19px" onmouseover="tip('Click to sort alphabetically by burg name')" class="sortable alphabetically"
<div style="margin-left: 29px" onmouseover="tip('Click to sort alphabetically by culture name')" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div> data-sortby="burg">Burg&nbsp;</div>
<div style="margin-left: 14px" onmouseover="tip('Click to sort by country population')" class="sortable" data-sortby="population">Population&nbsp;</div> <div style="margin-left: 29px" onmouseover="tip('Click to sort alphabetically by culture name')" class="sortable alphabetically"
<div style="margin-left: 6px" onmouseover="tip('Click to sort by country burg type')" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div> data-sortby="culture">Culture&nbsp;</div>
<div style="margin-left: 14px" onmouseover="tip('Click to sort by country population')" class="sortable"
data-sortby="population">Population&nbsp;</div>
<div style="margin-left: 6px" onmouseover="tip('Click to sort by country burg type')" class="sortable alphabetically"
data-sortby="type">Type&nbsp;</div>
</div> </div>
<div id="burgsBody"></div> <div id="burgsBody"></div>
<div id="burgsFooter" class="totalLine"> <div id="burgsFooter" class="totalLine">
<div onmouseover="tip('Burgs number')" style="margin-left: 4px">Burgs:&nbsp;<span onmouseover="tip('Burgs number')" id="burgsFooterBurgs">0</span></div> <div onmouseover="tip('Burgs number')" style="margin-left: 4px">Burgs:&nbsp;<span onmouseover="tip('Burgs number')"
id="burgsFooterBurgs">0</span></div>
<div style="margin-left: 10px">Average burg: &nbsp; <div style="margin-left: 10px">Average burg: &nbsp;
<span onmouseover="tip('Dominant culture')" class="icon-book"></span> <span onmouseover="tip('Dominant culture')" class="icon-book"></span>
<span onmouseover="tip('Dominant culture')" id="burgsFooterCulture">no</span>&nbsp; <span onmouseover="tip('Dominant culture')" id="burgsFooterCulture">no</span>&nbsp;
<span onmouseover="tip('Average burg population')" class="icon-male"></span> <span onmouseover="tip('Average burg population')" class="icon-male"></span>
<input onmouseover="tip('Average burg population. Change to recalculate population for all burgs within country')" id="burgsFooterPopulation" type="number" min="1" max="1000000" step="100" value="0"> <input onmouseover="tip('Average burg population. Change to recalculate population for all burgs within country')"
id="burgsFooterPopulation" type="number" min="1" max="1000000" step="100" value="0">
</div> </div>
</div> </div>
<div id="burgsBottom"> <div id="burgsBottom">
@ -1096,16 +1227,21 @@
<div id="culturesEditor" class="dialog stable" style="display: none" data-type="absolute"> <div id="culturesEditor" class="dialog stable" style="display: none" data-type="absolute">
<div id="culturesHeader"> <div id="culturesHeader">
<div style="margin-left: 14px" onmouseover="tip('Click to sort by culture name')" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div> <div style="margin-left: 14px" onmouseover="tip('Click to sort by culture name')" class="sortable alphabetically"
<div style="margin-left: 16px" onmouseover="tip('Click to sort by culture cells count')" class="sortable" data-sortby="cells">Cells&nbsp;</div> data-sortby="culture">Culture&nbsp;</div>
<div style="margin-left: 16px" onmouseover="tip('Click to sort by culture cells count')" class="sortable"
data-sortby="cells">Cells&nbsp;</div>
<div style="margin-left: 18px" onmouseover="tip('Click to sort by culture area')" class="sortable" data-sortby="area">Area&nbsp;</div> <div style="margin-left: 18px" onmouseover="tip('Click to sort by culture area')" class="sortable" data-sortby="area">Area&nbsp;</div>
<div style="margin-left: 30px" onmouseover="tip('Click to sort by culture population')" class="sortable" data-sortby="population">Population&nbsp;</div> <div style="margin-left: 30px" onmouseover="tip('Click to sort by culture population')" class="sortable"
<div style="margin-left: 3px" onmouseover="tip('Click to sort by culture namesbase')" class="sortable alphabetically" data-sortby="base">Namesbase&nbsp;</div> data-sortby="population">Population&nbsp;</div>
<div style="margin-left: 3px" onmouseover="tip('Click to sort by culture namesbase')" class="sortable alphabetically"
data-sortby="base">Namesbase&nbsp;</div>
</div> </div>
<div id="culturesBody"></div> <div id="culturesBody"></div>
<div id="culturesFooter" class="totalLine"> <div id="culturesFooter" class="totalLine">
<div onmouseover="tip('Cultures number (active / total)')" style="margin-left: 7px">Cultures:&nbsp;<span id="culturesFooterCultures">0 / 7</span></div> <div onmouseover="tip('Cultures number (active / total)')" style="margin-left: 7px">Cultures:&nbsp;<span id="culturesFooterCultures">0
/ 7</span></div>
<div onmouseover="tip('Total Land cells number')" style="margin-left: 7px">Cells:&nbsp;<span id="culturesFooterCells">0</span></div> <div onmouseover="tip('Total Land cells number')" style="margin-left: 7px">Cells:&nbsp;<span id="culturesFooterCells">0</span></div>
<div onmouseover="tip('Total Land Area')" style="margin-left: 7px">Area:&nbsp;<span id="culturesFooterArea">0</span></div> <div onmouseover="tip('Total Land Area')" style="margin-left: 7px">Area:&nbsp;<span id="culturesFooterArea">0</span></div>
<div onmouseover="tip('Total Population')" style="margin-left: 7px">Population:&nbsp;<span id="culturesFooterPopulation">0</span></div> <div onmouseover="tip('Total Population')" style="margin-left: 7px">Population:&nbsp;<span id="culturesFooterPopulation">0</span></div>
@ -1118,11 +1254,14 @@
<button id="culturesManuallyComplete" onmouseover="tip('Apply assignment')" class="icon-check"></button> <button id="culturesManuallyComplete" onmouseover="tip('Apply assignment')" class="icon-check"></button>
<button id="culturesManuallyCancel" onmouseover="tip('Cancel assignment')" class="icon-cancel"></button> <button id="culturesManuallyCancel" onmouseover="tip('Cancel assignment')" class="icon-cancel"></button>
<label onmouseover="tip('Set the brush size')" class="italic">Brush size:</label> <label onmouseover="tip('Set the brush size')" class="italic">Brush size:</label>
<input id="culturesManuallyBrush" oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value" type="range" min="1" max="7" value="3"> <input id="culturesManuallyBrush" oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
<input id="culturesManuallyBrushNumber" oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value" type="number" min="1" max="7" value="3"> type="range" min="1" max="7" value="3">
<input id="culturesManuallyBrushNumber" oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
type="number" min="1" max="7" value="3">
</div> </div>
<button id="culturesRandomize" onmouseover="tip('Randomly re-distribute cultures')" class="icon-shuffle"></button> <button id="culturesRandomize" onmouseover="tip('Randomly re-distribute cultures')" class="icon-shuffle"></button>
<button id="culturesRegenerateNames" onmouseover="tip('Re-generate all Burg names based on assigned culture')" class="icon-arrows-cw"></button> <button id="culturesRegenerateNames" onmouseover="tip('Re-generate all Burg names based on assigned culture')"
class="icon-arrows-cw"></button>
<button id="culturesEditNamesBase" onmouseover="tip('Edit a database used for names generation')" class="icon-list-bullet"></button> <button id="culturesEditNamesBase" onmouseover="tip('Edit a database used for names generation')" class="icon-list-bullet"></button>
<button id="culturesAdd" onmouseover="tip('Add a new culture')" class="icon-plus"></button> <button id="culturesAdd" onmouseover="tip('Add a new culture')" class="icon-plus"></button>
<button id="culturesExport" onmouseover="tip('Save cultures-related data as a text file (.csv)')" class="icon-download"></button> <button id="culturesExport" onmouseover="tip('Save cultures-related data as a text file (.csv)')" class="icon-download"></button>
@ -1134,11 +1273,13 @@
<span>Select base: </span> <span>Select base: </span>
<select id="namesbaseSelect" onmouseover="tip('Select base to edit')" value="0"></select> <select id="namesbaseSelect" onmouseover="tip('Select base to edit')" value="0"></select>
<span>Base name: </span> <span>Base name: </span>
<input id="namesbaseName" onmouseover="tip('Type to change a base name')" placeholder="Base name" autocorrect="off" spellcheck="false"/> <input id="namesbaseName" onmouseover="tip('Type to change a base name')" placeholder="Base name" autocorrect="off"
spellcheck="false" />
</div> </div>
<div id="namesbaseBody"> <div id="namesbaseBody">
<span>Names data:</span><br> <span>Names data:</span><br>
<textarea id="namesbaseTextarea" data-base="0" cols="70" rows="10" onmouseover="tip('Names data: a comma separated list of source names used for names generation')" placeholder="Provide a names data: a comma separated list of source names" autocorrect="off" spellcheck="false"></textarea> <textarea id="namesbaseTextarea" data-base="0" cols="70" rows="10" onmouseover="tip('Names data: a comma separated list of source names used for names generation')"
placeholder="Provide a names data: a comma separated list of source names" autocorrect="off" spellcheck="false"></textarea>
<br> <br>
<div> <div>
<span>Method: </span><select onmouseover="tip('Select generation method')" id="namesbaseMethod"> <span>Method: </span><select onmouseover="tip('Select generation method')" id="namesbaseMethod">
@ -1147,10 +1288,12 @@
<option value="syl-to-syl">Markov syl-to-syl</option> <option value="syl-to-syl">Markov syl-to-syl</option>
<option value="selection">Random selection</option> <option value="selection">Random selection</option>
</select><span> Length: </span> </select><span> Length: </span>
<input id="namesbaseMin" onmouseover="tip('Minimal name length recommendation')" type="number" min="2" max="100" value="4"> <input id="namesbaseMin" onmouseover="tip('Minimal name length recommendation')" type="number" min="2" max="100"
value="4">
<input id="namesbaseMax" onmouseover="tip('Maximal name length recommendation')" type="number" min="2" value="10"> <input id="namesbaseMax" onmouseover="tip('Maximal name length recommendation')" type="number" min="2" value="10">
<span>Dublication: </span> <span>Dublication: </span>
<input id="namesbaseDouble" onmouseover="tip('Populate with letters that can used twice in a row')" autocorrect="off" spellcheck="false" value="abc"> <input id="namesbaseDouble" onmouseover="tip('Populate with letters that can used twice in a row')"
autocorrect="off" spellcheck="false" value="abc">
</div> </div>
<fieldset> <fieldset>
<legend>Generated examples: </legend> <legend>Generated examples: </legend>
@ -1160,10 +1303,12 @@
<div id="namesbaseBottom"> <div id="namesbaseBottom">
<button id="namesbaseDefault" onmouseover="tip('Restore default namesbase')" class="icon-cancel"></button> <button id="namesbaseDefault" onmouseover="tip('Restore default namesbase')" class="icon-cancel"></button>
<button id="namesbaseAdd" onmouseover="tip('Add a new base')" class="icon-plus"></button> <button id="namesbaseAdd" onmouseover="tip('Add a new base')" class="icon-plus"></button>
<button id="namesbaseUpdateExamples" onmouseover="tip('Re-generate examples based on provided data and generation method')" class="icon-cw"></button> <button id="namesbaseUpdateExamples" onmouseover="tip('Re-generate examples based on provided data and generation method')"
class="icon-cw"></button>
<button id="namesbaseDownload" onmouseover="tip('Download namesbase to PC')" class="icon-download"></button> <button id="namesbaseDownload" onmouseover="tip('Download namesbase to PC')" class="icon-download"></button>
<button id="namesbaseUpload" onmouseover="tip('Upload a namesbase from PC')" class="icon-upload"></button> <button id="namesbaseUpload" onmouseover="tip('Upload a namesbase from PC')" class="icon-upload"></button>
<button id="namesbaseMail" onclick="window.open('mailto:maxganiev@yandex.com?Subject=Namesbase%20suggestion', '_blank')" onmouseover="tip('Send a namesbase suggestion to me')" class="icon-mail-alt"></button> <button id="namesbaseMail" onclick="window.open('mailto:maxganiev@yandex.com?Subject=Namesbase%20suggestion', '_blank')"
onmouseover="tip('Send a namesbase suggestion to me')" class="icon-mail-alt"></button>
</div> </div>
</div> </div>
@ -1172,11 +1317,13 @@
<span>Select object: </span> <span>Select object: </span>
<select id="legendSelect" onmouseover="tip('Select object')" style="width: 120px;"></select> <select id="legendSelect" onmouseover="tip('Select object')" style="width: 120px;"></select>
<span>Object name: </span> <span>Object name: </span>
<input id="legendName" onmouseover="tip('Type to change object name')" autocorrect="off" spellcheck="false" style="width: 120px;"> <input id="legendName" onmouseover="tip('Type to change object name')" autocorrect="off" spellcheck="false"
style="width: 120px;">
</div> </div>
<div> <div>
<span>Legend:</span><br> <span>Legend:</span><br>
<textarea id="legendText" cols="70" rows="7" onmouseover="tip('Legend is a free text note, enter any object description you like')" placeholder="Legend is a free text note, enter any object description you like"></textarea> <textarea id="legendText" cols="70" rows="7" onmouseover="tip('Legend is a free text note, enter any object description you like')"
placeholder="Legend is a free text note, enter any object description you like"></textarea>
</div> </div>
<div> <div>
<button id="legendFocus" onmouseover="tip('Focus map on selected object')" class="icon-target"></button> <button id="legendFocus" onmouseover="tip('Focus map on selected object')" class="icon-target"></button>
@ -1204,12 +1351,16 @@
</div> </div>
<div> <div>
<div onmouseover="tip('Select how many distance unit are in one pixel')">1 map pixel =</div> <div onmouseover="tip('Select how many distance unit are in one pixel')">1 map pixel =</div>
<input id="distanceScale" onmouseover="tip('Select how many distance unit are in one pixel')" type="range" min="0.1" max="10" value="3" step="0.1"> <input id="distanceScale" onmouseover="tip('Select how many distance unit are in one pixel')" type="range"
<input id="scaleOutput" onmouseover="tip('Enter how many distance unit are in one pixel')" type="text" class="output" value="3 mi"> min="0.1" max="10" value="3" step="0.1">
<input id="scaleOutput" onmouseover="tip('Enter how many distance unit are in one pixel')" type="text" class="output"
value="3 mi">
</div> </div>
<div> <div>
<div onmouseover="tip('Type area unit name, leave `square` just to add ² to the distance unit selected above')">Area unit: </div> <div onmouseover="tip('Type area unit name, leave `square` just to add ² to the distance unit selected above')">Area
<input id="areaUnit" onmouseover="tip('Type area unit name, leave `square` just to add ² to the distance unit selected above')" type="text" value="square"> unit: </div>
<input id="areaUnit" onmouseover="tip('Type area unit name, leave `square` just to add ² to the distance unit selected above')"
type="text" value="square">
</div> </div>
<div class="scaleHeader"> <div class="scaleHeader">
@ -1225,9 +1376,12 @@
</select> </select>
</div> </div>
<div> <div>
<div onmouseover="tip('Select height exponent, i.e. a value showing altitude change sharpness')">Exponent: </div> <div onmouseover="tip('Select height exponent, i.e. a value showing altitude change sharpness')">Exponent:
<input id="heightExponent" onmouseover="tip('Select height exponent, i.e. a value showing altitude change sharpness')" onchange="heightOutput.value = this.value" type="range" min="1.5" max="2" value="1.73" step="0.01"> </div>
<input id="heightOutput" onmouseover="tip('Select height exponent, i.e. a value showing altitude change sharpness')" type="text" class="output" value="1.73"> <input id="heightExponent" onmouseover="tip('Select height exponent, i.e. a value showing altitude change sharpness')"
onchange="heightOutput.value = this.value" type="range" min="1.5" max="2" value="1.73" step="0.01">
<input id="heightOutput" onmouseover="tip('Select height exponent, i.e. a value showing altitude change sharpness')"
type="text" class="output" value="1.73">
</div> </div>
<div class="scaleHeader"> <div class="scaleHeader">
@ -1241,11 +1395,13 @@
</div> </div>
<div> <div>
<div onmouseover="tip('Change scale bar label, leave blank to hide label')">Scale bar label: </div> <div onmouseover="tip('Change scale bar label, leave blank to hide label')">Scale bar label: </div>
<input id="barLabel" onmouseover="tip('Set scale bar label, leave blank to hide label')" type="text" placeholder="hidden" value=""> <input id="barLabel" onmouseover="tip('Set scale bar label, leave blank to hide label')" type="text"
placeholder="hidden" value="">
</div> </div>
<div> <div>
<div onmouseover="tip('Set background for Scale bar')">Background opacity: </div> <div onmouseover="tip('Set background for Scale bar')">Background opacity: </div>
<input id="barBackOpacity" onmouseover="tip('Set Scale bar background opacity')" type="range" min="0" max="1" value="0.2" step="0.01"> <input id="barBackOpacity" onmouseover="tip('Set Scale bar background opacity')" type="range" min="0" max="1"
value="0.2" step="0.01">
<input id="barBackColor" onmouseover="tip('Set Scale bar background color')" type="color" value="#ffffff"> <input id="barBackColor" onmouseover="tip('Set Scale bar background color')" type="color" value="#ffffff">
</div> </div>
<div class="scaleHeader"> <div class="scaleHeader">
@ -1254,13 +1410,17 @@
</div> </div>
<div> <div>
<div onmouseover="tip('Set how many people are in one population point')">1 population point =</div> <div onmouseover="tip('Set how many people are in one population point')">1 population point =</div>
<input id="populationRate" onmouseover="tip('Set how many people are in one population point, in Kilos')" type="range" min="0.1" max="10" value="1" step="0.1"> <input id="populationRate" onmouseover="tip('Set how many people are in one population point, in Kilos')"
<input id="populationRateOutput" onmouseover="tip('Enter the population rate, in Kilos')" type="text" class="output" value="1K"> type="range" min="0.1" max="10" value="1" step="0.1">
<input id="populationRateOutput" onmouseover="tip('Enter the population rate, in Kilos')" type="text" class="output"
value="1K">
</div> </div>
<div> <div>
<div>Urbanization rate: </div> <div>Urbanization rate: </div>
<input id="urbanization" onmouseover="tip('Set the ubranization (burgs population relative to all population) rate')" type="range" min="0.01" max="5" value="1" step="0.01"> <input id="urbanization" onmouseover="tip('Set the ubranization (burgs population relative to all population) rate')"
<input id="urbanizationOutput" onmouseover="tip('Enter the ubranization (burgs population relative to all population) rate')" type="text" class="output" value="1"> type="range" min="0.01" max="5" value="1" step="0.01">
<input id="urbanizationOutput" onmouseover="tip('Enter the ubranization (burgs population relative to all population) rate')"
type="text" class="output" value="1">
</div> </div>
</div> </div>
<div id="scaleBottom"> <div id="scaleBottom">
@ -1269,7 +1429,8 @@
<button id="addOpisometer" onmouseover="tip('Drag to measure curve length with opisometer')" class="icon-brush"></button> <button id="addOpisometer" onmouseover="tip('Drag to measure curve length with opisometer')" class="icon-brush"></button>
<button id="addRuler" onmouseover="tip('Click to place additional linear ruler')" class="icon-resize-horizontal"></button> <button id="addRuler" onmouseover="tip('Click to place additional linear ruler')" class="icon-resize-horizontal"></button>
<button id="addPlanimeter" onmouseover="tip('Drag to measure a polygon area with planimeter')" class="icon-check-empty"></button> <button id="addPlanimeter" onmouseover="tip('Drag to measure a polygon area with planimeter')" class="icon-check-empty"></button>
<button id="removeAllRulers" onmouseover="tip('Remove all rulers from the map. Click on ruler label to remove ruler separately')" class="icon-trash"></button> <button id="removeAllRulers" onmouseover="tip('Remove all rulers from the map. Click on ruler label to remove ruler separately')"
class="icon-trash"></button>
</div> </div>
</div> </div>

99
script.js
View file

@ -275,7 +275,7 @@ function fantasyMap() {
placePoints(); placePoints();
calculateVoronoi(points); calculateVoronoi(points);
makeFileFromUrl(decodeURIComponent(mapLink)).then(blob => { makeBlobFromUrl(decodeURIComponent(mapLink)).then(blob => {
uploadFile(blob); uploadFile(blob);
manorsAndRegions(); // namesBase global state manorsAndRegions(); // namesBase global state
cleanData(); cleanData();
@ -6824,7 +6824,7 @@ function fantasyMap() {
uploadFile(fileToLoad); uploadFile(fileToLoad);
}); });
function makeFileFromUrl(mapLink) { function makeBlobFromUrl(mapLink) {
return fetch(mapLink, { return fetch(mapLink, {
method: 'GET', method: 'GET',
mode: 'cors', mode: 'cors',
@ -7727,7 +7727,8 @@ function fantasyMap() {
zoom.scaleExtent([1, 20]).scaleTo(svg, 1); zoom.scaleExtent([1, 20]).scaleTo(svg, 1);
} }
if (id === "saveButton") {$("#saveDropdown").slideToggle();} if (id === "saveButton") {$("#saveDropdown").slideToggle();}
if (id === "loadMap") {mapToLoad.click();} if (id === "loadButton") {$("#loadDropdown").slideToggle();}
if (id === "zoomReset") {resetZoom(1000);} if (id === "zoomReset") {resetZoom(1000);}
if (id === "zoomPlus") { if (id === "zoomPlus") {
scale += 1; scale += 1;
@ -7825,6 +7826,98 @@ function fantasyMap() {
$("#saveDropdown").slideUp("fast"); $("#saveDropdown").slideUp("fast");
}); });
$('#loadDropdown > div[role="button"]').click(event => {
const id = event.target.id;
console.log(event, id);
if (id === "loadMap") {
mapToLoad.click();
}
if (id === "loadMapFromURL") {
const modal = document.createElement("form");
Object.assign(modal.style, {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate3d(-50%, -50%, 0)",
border: "1px solid #5e4fa2",
boxShadow: "2px 2px 5px -3px #3a2804",
padding: "auto",
background: "white"
});
modal.className = "ui-dialog ui-widget ui-widget-content ui-front ui-dialog-buttons";
// <div
// style="height: auto; width: 320px; top: 365.9px; left: 648px;"
// tabindex="-1"
// role="dialog"
// class="ui-dialog ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable"
// aria-describedby="alert"
// aria-labelledby="ui-id-1">
// <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">Map size conflict</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="✖"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>✖</button></div><div id="alert" style="width: auto; min-height: 48.8px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content">
// <p id="alertMessage">
// The loaded map has size 1920 x 1005 pixels, while the current canvas size is 1408 x 1005 pixels.
// Click "Rescale" to fit the map to the current canvas size. Click "OK" to browse the map without rescaling
// </p>
// </div>
// <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
// <div class="ui-dialog-buttonset">
// <button type="button" class="ui-button ui-corner-all ui-widget">
// Rescale
// </button>
// <button type="button" class="ui-button ui-corner-all ui-widget">
// OK
// </button>
// </div>
// </div>
// </div>
const linkInputName = "link";
modal.innerHTML = `
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle">
<span id="ui-id-1" class="ui-dialog-title">
Load Map
</span>
<button
class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close"
title="✖"
>
<span class="ui-button-icon ui-icon ui-icon-closethick"></span>
<span class="ui-button-icon-space"></span>
✖
</button>
</div>
<div id="alert" style="width: auto; min-height: 48.8px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content">
<label style="display: block;">
<div>Enter link to your map</div>
<input
style="width: 24em; margin-top: 0.5em"
type="url"
name="${linkInputName}"
pattern=".*\\.map"
placeholder="https://example.com/faerun.map"
required
/>
</label>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button type="submit" class="ui-button">Load</button>
</div>
</div>
`;
modal.onsubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
console.log("ok", formData.get(linkInputName), event)
document.body.removeChild(modal);
}
document.body.appendChild(modal);
}
$("#loadDropdown").slideUp("fast");
});
// lock / unlock option randomization // lock / unlock option randomization
$("#options i[class^='icon-lock']").click(function() { $("#options i[class^='icon-lock']").click(function() {
$(this).toggleClass("icon-lock icon-lock-open"); $(this).toggleClass("icon-lock icon-lock-open");