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

v1.0.44

Browse source
This commit is contained in:
Azgaar 2019-09-21 00:13:29 +03:00
parent aa7acbc61b
commit 6517e231e8
20 changed files with 260 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

22
index.css
View file

@ -252,7 +252,7 @@ i.icon-lock {
#brushCircle { #brushCircle {
stroke: #373737; stroke: #373737;
stroke-width: 1.5px; stroke-width: 1.5px;
stroke-dasharray: 6; stroke-dasharray: 7;
stroke-linecap: butt; stroke-linecap: butt;
fill: none; fill: none;
} }
@ -474,13 +474,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-weight: bold; font-weight: bold;
} }
#styleContent button.styleButton { #layersContent button.presetButton {
font-size: 70%;
border-radius: 15%;
margin: 0;
}
#styleContent button.presetButton {
position: absolute; position: absolute;
height: 2em; height: 2em;
border-radius: 15%; border-radius: 15%;
@ -488,6 +482,13 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-size: .7em; font-size: .7em;
} }
#styleContent button.styleButton {
font-size: 70%;
border-radius: 15%;
margin: 0;
}
#layersContent button.active,
#styleContent button:active { #styleContent button:active {
transform: translate(0px, 1px); transform: translate(0px, 1px);
} }
@ -531,9 +532,10 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
.tab > button.options { .tab > button.options {
width: 23.25%; /* width: 23.25%; */
width: 18.6%;
height: 100%; height: 100%;
padding: 7px 10px; padding: 7px 0px;
} }
button.options { button.options {

92
index.html
View file

@ -890,13 +890,14 @@
<div class="tab"> <div class="tab">
<button id="optionsHide" data-tip="Click to hide options pane. Shortcut: Tab to close this or Esc to close all dialogs" class="options" onclick="hideOptions(event)">◄</button> <button id="optionsHide" data-tip="Click to hide options pane. Shortcut: Tab to close this or Esc to close all dialogs" class="options" onclick="hideOptions(event)">◄</button>
<button id="styleTab" data-tip="Click to open style menu" class="options active">Style</button> <button id="layersTab" data-tip="Click to change map layers" class="options active">Layers</button>
<button id="styleTab" data-tip="Click to open style editor" class="options">Style</button>
<button id="optionsTab" data-tip="Click to change generation and UI options" class="options">Options</button> <button id="optionsTab" data-tip="Click to change generation and UI options" class="options">Options</button>
<button id="toolsTab" data-tip="Click to open tools menu" class="options">Tools</button> <button id="toolsTab" data-tip="Click to open tools menu" class="options">Tools</button>
<button id="aboutTab" data-tip="Click to see Generator info" class="options">About</button> <button id="aboutTab" data-tip="Click to see Generator info" class="options">About</button>
</div> </div>
<div id="styleContent" class="tabcontent" style="display: block"> <div id="layersContent" class="tabcontent" style="display: block">
<p data-tip="Select a map layers preset" style="display: inline-block;">Layers preset:</p> <p data-tip="Select a map layers preset" style="display: inline-block;">Layers preset:</p>
<select data-tip="Select a map layers preset" id="layersPreset" onchange="changePreset(this.value)" style="width:45%"> <select data-tip="Select a map layers preset" id="layersPreset" onchange="changePreset(this.value)" style="width:45%">
<option value="political" selected>Political map</option> <option value="political" selected>Political map</option>
@ -912,34 +913,36 @@
<button id="savePresetButton" data-tip="Click to save displayed layers as a new preset" class="icon-plus presetButton" style="display:none" onclick="savePreset()"></button> <button id="savePresetButton" data-tip="Click to save displayed layers as a new preset" class="icon-plus presetButton" style="display:none" onclick="savePreset()"></button>
<button id="removePresetButton" data-tip="Click to remove current custom preset" class="icon-minus presetButton" style="display:none" onclick="removePreset()"></button> <button id="removePresetButton" data-tip="Click to remove current custom preset" class="icon-minus presetButton" style="display:none" onclick="removePreset()"></button>
<p data-tip="Click to toggle a layer, drag to raise or lower a layer">Displayed layers:</p> <p data-tip="Click to toggle a layer, drag to raise or lower a layer. Ctrl + click to edit layer style">Displayed layers and layers order:</p>
<ul data-tip="Click to toggle a layer, drag to raise or lower a layer" id="mapLayers"> <ul data-tip="Click to toggle a layer, drag to raise or lower a layer. Ctrl + click to edit layer style" id="mapLayers">
<li id="toggleTexture" data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Shortcut: X" class="buttonoff" onclick="toggleTexture()">Te<u>x</u>ture</li> <li id="toggleTexture" data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: X" class="buttonoff" onclick="toggleTexture(event)">Te<u>x</u>ture</li>
<li id="toggleHeight" data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Shortcut: H" class="buttonoff" onclick="toggleHeight()"><u>H</u>eightmap</li> <li id="toggleHeight" data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: H" class="buttonoff" onclick="toggleHeight(event)"><u>H</u>eightmap</li>
<li id="toggleBiomes" data-tip="Biomes: click to toggle, drag to raise or lower the layer. Shortcut: B" class="buttonoff" onclick="toggleBiomes()"><u>B</u>iomes</li> <li id="toggleBiomes" data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: B" class="buttonoff" onclick="toggleBiomes(event)"><u>B</u>iomes</li>
<li id="toggleCells" data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Shortcut: E" class="buttonoff" onclick="toggleCells()">C<u>e</u>lls</li> <li id="toggleCells" data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: E" class="buttonoff" onclick="toggleCells(event)">C<u>e</u>lls</li>
<li id="toggleGrid" data-tip="Grid: click to toggle, drag to raise or lower. Select type in styles dropdown below. Shortcut: G" class="buttonoff" onclick="toggleGrid()"><u>G</u>rid</li> <li id="toggleGrid" data-tip="Grid: click to toggle, drag to raise or lower. Select type in styles dropdown below. Ctrl + click to edit layer style. Shortcut: G" class="buttonoff" onclick="toggleGrid(event)"><u>G</u>rid</li>
<li id="toggleCoordinates" data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Shortcut: O" class="buttonoff" onclick="toggleCoordinates()">C<u>o</u>ordinates</li> <li id="toggleCoordinates" data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: O" class="buttonoff" onclick="toggleCoordinates(event)">C<u>o</u>ordinates</li>
<li id="toggleCompass" data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Shortcut: W" class="buttonoff" onclick="toggleCompass()"><u>W</u>ind Rose</li> <li id="toggleCompass" data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: W" class="buttonoff" onclick="toggleCompass(event)"><u>W</u>ind Rose</li>
<li id="toggleRivers" data-tip="Rivers: click to toggle, drag to raise or lower the layer. Shortcut: V" onclick="toggleRivers()">Ri<u>v</u>ers</li> <li id="toggleRivers" data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: V" onclick="toggleRivers(event)">Ri<u>v</u>ers</li>
<li id="toggleRelief" data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Shortcut: F" class="buttonoff" onclick="toggleRelief()">Relie<u>f</u></li> <li id="toggleRelief" data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: F" class="buttonoff" onclick="toggleRelief(event)">Relie<u>f</u></li>
<li id="toggleReligions" data-tip="Religions: click to toggle, drag to raise or lower the layer. Shortcut: R" class="buttonoff" onclick="toggleReligions()"><u>R</u>eligions</li> <li id="toggleReligions" data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: R" class="buttonoff" onclick="toggleReligions(event)"><u>R</u>eligions</li>
<li id="toggleCultures" data-tip="Cultures: click to toggle, drag to raise or lower the layer. Shortcut: C" class="buttonoff" onclick="toggleCultures()"><u>C</u>ultures</li> <li id="toggleCultures" data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: C" class="buttonoff" onclick="toggleCultures(event)"><u>C</u>ultures</li>
<li id="toggleStates" data-tip="States: click to toggle, drag to raise or lower the layer. Shortcut: S" onclick="toggleStates()"><u>S</u>tates</li> <li id="toggleStates" data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: S" onclick="toggleStates(event)"><u>S</u>tates</li>
<li id="toggleProvinces" data-tip="Provinces: click to toggle, drag to raise or lower the layer. Shortcut: N" class="buttonoff" onclick="toggleProvinces()">Provi<u>n</u>ces</li> <li id="toggleProvinces" data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N" class="buttonoff" onclick="toggleProvinces(event)">Provi<u>n</u>ces</li>
<li id="toggleZones" data-tip="Zones: click to toggle, drag to raise or lower the layer. Shortcut: Z" class="buttonoff" onclick="toggleZones()"><u>Z</u>ones</li> <li id="toggleZones" data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Z" class="buttonoff" onclick="toggleZones(event)"><u>Z</u>ones</li>
<li id="toggleBorders" data-tip="State borders: click to toggle, drag to raise or lower the layer. Shortcut: D" onclick="toggleBorders()">Bor<u>d</u>ers</li> <li id="toggleBorders" data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: D" onclick="toggleBorders(event)">Bor<u>d</u>ers</li>
<li id="toggleRoutes"data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Shortcut: U" onclick="toggleRoutes()">Ro<u>u</u>tes</li> <li id="toggleRoutes"data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: U" onclick="toggleRoutes(event)">Ro<u>u</u>tes</li>
<li id="toggleTemp" data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Shortcut: T" class="buttonoff" onclick="toggleTemp()"><u>T</u>emperature</li> <li id="toggleTemp" data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: T" class="buttonoff" onclick="toggleTemp(event)"><u>T</u>emperature</li>
<li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Shortcut: P" class="buttonoff" onclick="togglePopulation()"><u>P</u>opulation</li> <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: P" class="buttonoff" onclick="togglePopulation(event)"><u>P</u>opulation</li>
<li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Shortcut: A" class="buttonoff" onclick="togglePrec()">Precipit<u>a</u>tion</li> <li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A" class="buttonoff" onclick="togglePrec(event)">Precipit<u>a</u>tion</li>
<li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Shortcut: L" onclick="toggleLabels()"><u>L</u>abels</li> <li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L" onclick="toggleLabels(event)"><u>L</u>abels</li>
<li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Shortcut: I" onclick="toggleIcons()"><u>I</u>cons</li> <li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I" onclick="toggleIcons(event)"><u>I</u>cons</li>
<li id="toggleMarkers" data-tip="Markers: click to toggle, drag to raise or lower the layer. Shortcut: M" class="buttonoff" onclick="toggleMarkers()"><u>M</u>arkers</li> <li id="toggleMarkers" data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: M" class="buttonoff" onclick="toggleMarkers(event)"><u>M</u>arkers</li>
<li id="toggleRulers" data-tip="Rulers: click to toggle, drag to move, click on label to delete. Shortcut: = (equal)" class="buttonoff" onclick="toggleRulers()">Rulers</li> <li id="toggleRulers" data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style. Shortcut: = (equal)" class="buttonoff" onclick="toggleRulers(event)">Rulers</li>
<li id="toggleScaleBar" data-tip="Scale Bar: click to toggle, drag to move. Shortcut: - (minus)" onclick="toggleScaleBar()" class="solid">Scale Bar</li> <li id="toggleScaleBar" data-tip="Scale Bar: click to toggle, drag to move. Ctrl + click to edit style. Shortcut: - (minus)" onclick="toggleScaleBar(event)" class="solid">Scale Bar</li>
</ul> </ul>
</div>
<div id="styleContent" class="tabcontent">
<p data-tip="Select an element to edit its style" style="display: inline-block;">Select element:</p> <p data-tip="Select an element to edit its style" style="display: inline-block;">Select element:</p>
<select data-tip="Select an element to edit its style (list is ordered alphabetically)" id="styleElementSelect" style="width:42%"> <select data-tip="Select an element to edit its style (list is ordered alphabetically)" id="styleElementSelect" style="width:42%">
<option value="anchors">Anchor Icons</option> <option value="anchors">Anchor Icons</option>
@ -980,7 +983,7 @@
<tbody id="styleGroup"> <tbody id="styleGroup">
<tr data-tip="Select element group"> <tr data-tip="Select element group">
<td>Group</td> <td><b>Group</b></td>
<td> <td>
<select id="styleGroupSelect"><option value="regions">regions</option></select> <select id="styleGroupSelect"><option value="regions">regions</option></select>
</td> </td>
@ -1460,7 +1463,7 @@
</table> </table>
<div id="mapFilters" data-tip="Set a filter to be applied to the map in general"> <div id="mapFilters" data-tip="Set a filter to be applied to the map in general">
<p>Toggle filters:</p> <p>Toggle global filters:</p>
<button id="grayscale" class="radio">Grayscale</button> <button id="grayscale" class="radio">Grayscale</button>
<button id="sepia" class="radio">Sepia</button> <button id="sepia" class="radio">Sepia</button>
<button id="dingy" class="radio">Dingy</button> <button id="dingy" class="radio">Dingy</button>
@ -2019,6 +2022,8 @@
<span id="labelTextRandom" data-tip="Generate random name" class="icon-shuffle pointer"></span> <span id="labelTextRandom" data-tip="Generate random name" class="icon-shuffle pointer"></span>
</div> </div>
<button id="labelEditStyle" data-tip="Edit label group style in Style Editor" class="icon-brush"></button>
<button id="labelSizeShow" data-tip="Show the font size section" class="icon-text-height"></button> <button id="labelSizeShow" data-tip="Show the font size section" class="icon-text-height"></button>
<div id="labelSizeSection" style="display: none"> <div id="labelSizeSection" style="display: none">
<button id="labelSizeHide" data-tip="Hide the font size section" class="icon-text-height"></button> <button id="labelSizeHide" data-tip="Hide the font size section" class="icon-text-height"></button>
@ -2053,6 +2058,7 @@
<span id="riverReset" data-tip="Reset transformation to default" class="icon-cancel pointer"></span> <span id="riverReset" data-tip="Reset transformation to default" class="icon-cancel pointer"></span>
</div> </div>
<button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
<button id="riverLength" data-tip="River length in selected units">0</button> <button id="riverLength" data-tip="River length in selected units">0</button>
<button id="riverCopy" data-tip="Copy river" class="icon-clone"></button> <button id="riverCopy" data-tip="Copy river" class="icon-clone"></button>
<button id="riverNew" data-tip="Create new river clicking on map" class="icon-map-pin"></button> <button id="riverNew" data-tip="Create new river clicking on map" class="icon-map-pin"></button>
@ -2069,6 +2075,8 @@
<span id="routeGroupAdd" data-tip="Create new group for this route" class="icon-plus pointer"></span> <span id="routeGroupAdd" data-tip="Create new group for this route" class="icon-plus pointer"></span>
<span id="routeGroupRemove" data-tip="Remove all routes of this group" class="icon-trash-empty pointer"></span> <span id="routeGroupRemove" data-tip="Remove all routes of this group" class="icon-trash-empty pointer"></span>
</div> </div>
<button id="routeEditStyle" data-tip="Edit route group style in Style Editor" class="icon-brush"></button>
<button id="routeLength" data-tip="Route length in selected units">0</button> <button id="routeLength" data-tip="Route length in selected units">0</button>
<button id="routeSplit" data-tip="Click on a control point to split the route" class="icon-unlink"></button> <button id="routeSplit" data-tip="Click on a control point to split the route" class="icon-unlink"></button>
<button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button> <button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button>
@ -2201,6 +2209,7 @@
</div> </div>
<div id="reliefBottom"> <div id="reliefBottom">
<button id="reliefEditStyle" data-tip="Edit Relief Icons style in Style Editor" class="icon-brush"></button>
<button id="reliefCopy" data-tip="Copy selected relief icon" class="icon-clone"></button> <button id="reliefCopy" data-tip="Copy selected relief icon" class="icon-clone"></button>
<button id="reliefMoveFront" data-tip="Move selected relief icon to front" class="icon-level-up"></button> <button id="reliefMoveFront" data-tip="Move selected relief icon to front" class="icon-level-up"></button>
<button id="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button> <button id="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button>
@ -2226,6 +2235,14 @@
<span id="burgNameReRandom" data-tip="Generate random name for the burg" class="icon-globe pointer"></span> <span id="burgNameReRandom" data-tip="Generate random name for the burg" class="icon-globe pointer"></span>
</div> </div>
<button id="burgStyleShow" data-tip="Show style edit section" class="icon-brush"></button>
<div id="burgStyleSection" style="display: none">
<button id="burgStyleHide" data-tip="Hide style edit section" class="icon-brush"></button>
<button id="burgEditLabelStyle" data-tip="Edit label style for burg group in Style Editor" class="icon-font"></button>
<button id="burgEditIconStyle" data-tip="Edit icon style for burg group in Style Editor" class="icon-dot-circled"></button>
<button id="burgEditAnchorStyle" data-tip="Edit port icon (anchor) style for burg group in Style Editor" class="icon-anchor"></button>
</div>
<button id="burgSeeInMFCG" data-tip="Open the burg representation in the Medieval Fantasy City Generator by Watabou" class="icon-map-o"></button> <button id="burgSeeInMFCG" data-tip="Open the burg representation in the Medieval Fantasy City Generator by Watabou" class="icon-map-o"></button>
<button id="burgOpenCOA" data-tip="Open burg's COA in the Iron Arachne Heraldry Generator" class="icon-fleur"></button> <button id="burgOpenCOA" data-tip="Open burg's COA in the Iron Arachne Heraldry Generator" class="icon-fleur"></button>
<button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button> <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
@ -2322,8 +2339,8 @@
<div id="brushesSliders" style="display: none"> <div id="brushesSliders" style="display: none">
<div data-tip="Change brush size. Shortcut: + (increase), – (decrease)" style="padding-bottom: 1px"><div style="width:3.2em; display: inline-block"><i>Radius:</i></div> <div data-tip="Change brush size. Shortcut: + (increase), – (decrease)" style="padding-bottom: 1px"><div style="width:3.2em; display: inline-block"><i>Radius:</i></div>
<input id="brushRadius" oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value" type="range" min=5 max=50 value=25> <input id="brushRadius" oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value" type="range" min=1 max=50 value=25>
<input id="brushRadiusNumber" oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value" type="number" min=5 max=50 value=25 style="border: 1px solid #d4d4d4"> <input id="brushRadiusNumber" oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value" type="number" min=1 max=50 value=25 style="border: 1px solid #d4d4d4">
</div> </div>
<div data-tip="Set the brush power"><div style="width:3.2em; display: inline-block"><i>Power:</i></div> <div data-tip="Set the brush power"><div style="width:3.2em; display: inline-block"><i>Power:</i></div>
@ -2474,6 +2491,7 @@
<div id="biomesBottom"> <div id="biomesBottom">
<button id="biomesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button> <button id="biomesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
<button id="biomesEditStyle" data-tip="Edit biomes style in Style Editor" class="icon-adjust"></button>
<button id="biomesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button> <button id="biomesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
<button id="biomesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button> <button id="biomesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
<button id="biomesManually" data-tip="Manually re-assign biomes to not follow the default moisture/temperature pattern" class="icon-brush"></button> <button id="biomesManually" data-tip="Manually re-assign biomes to not follow the default moisture/temperature pattern" class="icon-brush"></button>
@ -2519,6 +2537,7 @@
<div id="statesBottom"> <div id="statesBottom">
<button id="statesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button> <button id="statesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
<button id="statesEditStyle" data-tip="Edit states style in Style Editor" class="icon-adjust"></button>
<button id="statesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button> <button id="statesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
<button id="statesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button> <button id="statesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
<button id="statesChart" data-tip="Show states bubble chart" class="icon-chart-area"></button> <button id="statesChart" data-tip="Show states bubble chart" class="icon-chart-area"></button>
@ -2578,6 +2597,7 @@
<div id="provincesBottom"> <div id="provincesBottom">
<button id="provincesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button> <button id="provincesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
<button id="provincesEditStyle" data-tip="Edit provinces style in Style Editor" class="icon-adjust"></button>
<button id="provincesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button> <button id="provincesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
<button id="provincesChart" data-tip="Show provinces chart" class="icon-chart-area"></button> <button id="provincesChart" data-tip="Show provinces chart" class="icon-chart-area"></button>
<button id="provincesToggleLabels" data-tip="Toggle province labels" class="icon-font"></button> <button id="provincesToggleLabels" data-tip="Toggle province labels" class="icon-font"></button>
@ -2611,6 +2631,7 @@
<div id="diplomacyBottom" style="margin-top: .1em"> <div id="diplomacyBottom" style="margin-top: .1em">
<button id="diplomacyEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button> <button id="diplomacyEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
<button id="diplomacyEditStyle" data-tip="Edit states (including diplomacy view) style in Style Editor" class="icon-adjust"></button>
<button id="diplomacyRegenerate" data-tip="Regenerate diplomatical relations" class="icon-retweet"></button> <button id="diplomacyRegenerate" data-tip="Regenerate diplomatical relations" class="icon-retweet"></button>
<button id="diplomacyHistory" data-tip="Show relations history" class="icon-hourglass-1"></button> <button id="diplomacyHistory" data-tip="Show relations history" class="icon-hourglass-1"></button>
<button id="diplomacyMatrix" data-tip="Show relations matrix" class="icon-list-bullet"></button> <button id="diplomacyMatrix" data-tip="Show relations matrix" class="icon-list-bullet"></button>
@ -2674,6 +2695,7 @@
<div id="culturesBottom"> <div id="culturesBottom">
<button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button> <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
<button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
<button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button> <button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
<button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button> <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
<button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button> <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
@ -2750,6 +2772,7 @@
</div> </div>
<div id="zonesBottom"> <div id="zonesBottom">
<button id="zonesEditStyle" data-tip="Edit zones style in Style Editor" class="icon-adjust"></button>
<button id="zonesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button> <button id="zonesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
<button id="zonesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button> <button id="zonesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
@ -2810,10 +2833,11 @@
<div id="religionsBottom"> <div id="religionsBottom">
<button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button> <button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
<button id="religionsEditStyle" data-tip="Edit religions style in Style Editor" class="icon-adjust"></button>
<button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button> <button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
<button id="religionsPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button> <button id="religionsPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
<button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-fork"></button> <button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-sitemap"></button>
<button id="religionsExtinct" data-tip="Show/hide extinct religions (religions without cells)" class="icon-adjust"></button> <button id="religionsExtinct" data-tip="Show/hide extinct religions (religions without cells)" class="icon-eye-off"></button>
<button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button> <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
<div id="religionsManuallyButtons" style="display: none"> <div id="religionsManuallyButtons" style="display: none">

1
modules/ui/biomes-editor.js
View file

@ -22,6 +22,7 @@ function editBiomes() {
// add listeners // add listeners
document.getElementById("biomesEditorRefresh").addEventListener("click", refreshBiomesEditor); document.getElementById("biomesEditorRefresh").addEventListener("click", refreshBiomesEditor);
document.getElementById("biomesEditStyle").addEventListener("click", () => editStyle("biomes"));
document.getElementById("biomesLegend").addEventListener("click", toggleLegend); document.getElementById("biomesLegend").addEventListener("click", toggleLegend);
document.getElementById("biomesPercentage").addEventListener("click", togglePercentageMode); document.getElementById("biomesPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("biomesManually").addEventListener("click", enterBiomesCustomizationMode); document.getElementById("biomesManually").addEventListener("click", enterBiomesCustomizationMode);

33
modules/ui/burg-editor.js
View file

@ -14,6 +14,8 @@ function editBurg() {
const my = elSelected.attr("id") == d3.event.target.id ? "center bottom" : "center top+10"; const my = elSelected.attr("id") == d3.event.target.id ? "center bottom" : "center top+10";
const at = elSelected.attr("id") == d3.event.target.id ? "top" : "bottom"; const at = elSelected.attr("id") == d3.event.target.id ? "top" : "bottom";
document.getElementById("burgEditAnchorStyle").style.display = +pack.burgs[id].port ? "inline-block" : "none";
$("#burgEditor").dialog({ $("#burgEditor").dialog({
title: "Edit Burg: " + elSelected.text(), resizable: false, title: "Edit Burg: " + elSelected.text(), resizable: false,
position: {my, at, of: d3.event.target, collision: "fit"}, position: {my, at, of: d3.event.target, collision: "fit"},
@ -37,6 +39,12 @@ function editBurg() {
document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture); document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture);
document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom); document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom);
document.getElementById("burgStyleShow").addEventListener("click", showStyleSection);
document.getElementById("burgStyleHide").addEventListener("click", hideStyleSection);
document.getElementById("burgEditLabelStyle").addEventListener("click", editGroupLabelStyle);
document.getElementById("burgEditIconStyle").addEventListener("click", editGroupIconStyle);
document.getElementById("burgEditAnchorStyle").addEventListener("click", editGroupAnchorStyle);
document.getElementById("burgSeeInMFCG").addEventListener("click", openInMFCG); document.getElementById("burgSeeInMFCG").addEventListener("click", openInMFCG);
document.getElementById("burgOpenCOA").addEventListener("click", openInIAHG); document.getElementById("burgOpenCOA").addEventListener("click", openInIAHG);
document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg); document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg);
@ -211,6 +219,31 @@ function editBurg() {
changeName(); changeName();
} }
function showStyleSection() {
document.querySelectorAll("#burgEditor > button").forEach(el => el.style.display = "none");
document.getElementById("burgStyleSection").style.display = "inline-block";
}
function hideStyleSection() {
document.querySelectorAll("#burgEditor > button").forEach(el => el.style.display = "inline-block");
document.getElementById("burgStyleSection").style.display = "none";
}
function editGroupLabelStyle() {
const g = elSelected.node().parentNode.id;
editStyle("labels", g);
}
function editGroupIconStyle() {
const g = elSelected.node().parentNode.id;
editStyle("burgIcons", g);
}
function editGroupAnchorStyle() {
const g = elSelected.node().parentNode.id;
editStyle("anchors", g);
}
function openInMFCG() { function openInMFCG() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
const name = elSelected.text(); const name = elSelected.text();

1
modules/ui/cultures-editor.js
View file

@ -22,6 +22,7 @@ function editCultures() {
// add listeners // add listeners
document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor); document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
document.getElementById("culturesLegend").addEventListener("click", toggleLegend); document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode); document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true)); document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));

1
modules/ui/diplomacy-editor.js
View file

@ -34,6 +34,7 @@ function editDiplomacy() {
// add listeners // add listeners
document.getElementById("diplomacyEditorRefresh").addEventListener("click", refreshDiplomacyEditor); document.getElementById("diplomacyEditorRefresh").addEventListener("click", refreshDiplomacyEditor);
document.getElementById("diplomacyEditStyle").addEventListener("click", () => editStyle("regions"));
document.getElementById("diplomacyRegenerate").addEventListener("click", regenerateRelations); document.getElementById("diplomacyRegenerate").addEventListener("click", regenerateRelations);
document.getElementById("diplomacyMatrix").addEventListener("click", showRelationsMatrix); document.getElementById("diplomacyMatrix").addEventListener("click", showRelationsMatrix);
document.getElementById("diplomacyHistory").addEventListener("click", showRelationsHistory); document.getElementById("diplomacyHistory").addEventListener("click", showRelationsHistory);

7
modules/ui/labels-editor.js
View file

@ -36,6 +36,8 @@ function editLabel() {
document.getElementById("labelText").addEventListener("input", changeText); document.getElementById("labelText").addEventListener("input", changeText);
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName); document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
document.getElementById("labelSizeShow").addEventListener("click", showSizeSection); document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection); document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset); document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
@ -281,6 +283,11 @@ function editLabel() {
changeText(); changeText();
} }
function editGroupStyle() {
const g = elSelected.node().parentNode.id;
editStyle("labels", g);
}
function showSizeSection() { function showSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none");
document.getElementById("labelSizeSection").style.display = "inline-block"; document.getElementById("labelSizeSection").style.display = "inline-block";

102
modules/ui/layers.js
View file

@ -113,11 +113,13 @@ function getCurrentPreset() {
savePresetButton.style.display = "inline-block"; savePresetButton.style.display = "inline-block";
} }
function toggleHeight() { function toggleHeight(event) {
if (!terrs.selectAll("*").size()) { if (!terrs.selectAll("*").size()) {
turnButtonOn("toggleHeight"); turnButtonOn("toggleHeight");
drawHeightmap(); drawHeightmap();
if (event && event.ctrlKey) editStyle("terrs");
} else { } else {
if (event && event.ctrlKey) {editStyle("terrs"); return;}
if (customization === 1) {tip("You cannot turn off the layer when heightmap is in edit mode", false, "error"); return;} if (customization === 1) {tip("You cannot turn off the layer when heightmap is in edit mode", false, "error"); return;}
turnButtonOff("toggleHeight"); turnButtonOff("toggleHeight");
terrs.selectAll("*").remove(); terrs.selectAll("*").remove();
@ -208,11 +210,13 @@ function getColor(value, scheme = getColorScheme()) {
return scheme(1 - (value < 20 ? value - 5 : value) / 100); return scheme(1 - (value < 20 ? value - 5 : value) / 100);
} }
function toggleTemp() { function toggleTemp(event) {
if (!temperature.selectAll("*").size()) { if (!temperature.selectAll("*").size()) {
turnButtonOn("toggleTemp"); turnButtonOn("toggleTemp");
drawTemp(); drawTemp();
if (event && event.ctrlKey) editStyle("temperature");
} else { } else {
if (event && event.ctrlKey) {editStyle("temperature"); return;}
turnButtonOff("toggleTemp"); turnButtonOff("toggleTemp");
temperature.selectAll("*").remove(); temperature.selectAll("*").remove();
} }
@ -310,11 +314,13 @@ function drawTemp() {
console.timeEnd("drawTemp"); console.timeEnd("drawTemp");
} }
function toggleBiomes() { function toggleBiomes(event) {
if (!biomes.selectAll("path").size()) { if (!biomes.selectAll("path").size()) {
turnButtonOn("toggleBiomes"); turnButtonOn("toggleBiomes");
drawBiomes(); drawBiomes();
if (event && event.ctrlKey) editStyle("biomes");
} else { } else {
if (event && event.ctrlKey) {editStyle("biomes"); return;}
biomes.selectAll("path").remove(); biomes.selectAll("path").remove();
turnButtonOff("toggleBiomes"); turnButtonOff("toggleBiomes");
} }
@ -365,11 +371,13 @@ function drawBiomes() {
} }
} }
function togglePrec() { function togglePrec(event) {
if (!prec.selectAll("circle").size()) { if (!prec.selectAll("circle").size()) {
turnButtonOn("togglePrec"); turnButtonOn("togglePrec");
drawPrec(); drawPrec();
if (event && event.ctrlKey) editStyle("prec");
} else { } else {
if (event && event.ctrlKey) {editStyle("prec"); return;}
turnButtonOff("togglePrec"); turnButtonOff("togglePrec");
const hide = d3.transition().duration(1000).ease(d3.easeSinIn); const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
prec.selectAll("text").attr("opacity", 1).transition(hide).attr("opacity", 0); prec.selectAll("text").attr("opacity", 1).transition(hide).attr("opacity", 0);
@ -391,11 +399,13 @@ function drawPrec() {
.transition(show).attr("r", d => rn(Math.max(Math.sqrt(cells.prec[d] * .5), .8),2)); .transition(show).attr("r", d => rn(Math.max(Math.sqrt(cells.prec[d] * .5), .8),2));
} }
function togglePopulation() { function togglePopulation(event) {
if (!population.selectAll("line").size()) { if (!population.selectAll("line").size()) {
turnButtonOn("togglePopulation"); turnButtonOn("togglePopulation");
drawPopulation(); drawPopulation();
if (event && event.ctrlKey) editStyle("population");
} else { } else {
if (event && event.ctrlKey) {editStyle("population"); return;}
turnButtonOff("togglePopulation"); turnButtonOff("togglePopulation");
const hide = d3.transition().duration(1000).ease(d3.easeSinIn); const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
population.select("#rural").selectAll("line").transition(hide).attr("y2", d => d[1]).remove(); population.select("#rural").selectAll("line").transition(hide).attr("y2", d => d[1]).remove();
@ -403,7 +413,7 @@ function togglePopulation() {
} }
} }
function drawPopulation() { function drawPopulation(event) {
population.selectAll("line").remove(); population.selectAll("line").remove();
const cells = pack.cells, p = cells.p, burgs = pack.burgs; const cells = pack.cells, p = cells.p, burgs = pack.burgs;
const show = d3.transition().duration(2000).ease(d3.easeSinIn); const show = d3.transition().duration(2000).ease(d3.easeSinIn);
@ -421,11 +431,13 @@ function drawPopulation() {
.transition(show).delay(500).attr("y2", d => d[2]); .transition(show).delay(500).attr("y2", d => d[2]);
} }
function toggleCells() { function toggleCells(event) {
if (!cells.selectAll("path").size()) { if (!cells.selectAll("path").size()) {
turnButtonOn("toggleCells"); turnButtonOn("toggleCells");
drawCells(); drawCells();
if (event && event.ctrlKey) editStyle("cells");
} else { } else {
if (event && event.ctrlKey) {editStyle("cells"); return;}
cells.selectAll("path").remove(); cells.selectAll("path").remove();
turnButtonOff("toggleCells"); turnButtonOff("toggleCells");
} }
@ -440,17 +452,19 @@ function drawCells() {
cells.append("path").attr("d", path); cells.append("path").attr("d", path);
} }
function toggleCultures() { function toggleCultures(event) {
if (!cults.selectAll("path").size()) { if (!cults.selectAll("path").size()) {
turnButtonOn("toggleCultures"); turnButtonOn("toggleCultures");
drawCultures(); drawCultures();
if (event && event.ctrlKey) editStyle("cults");
} else { } else {
if (event && event.ctrlKey) {editStyle("cults"); return;}
cults.selectAll("path").remove(); cults.selectAll("path").remove();
turnButtonOff("toggleCultures"); turnButtonOff("toggleCultures");
} }
} }
function drawCultures() { function drawCultures(event) {
console.time("drawCultures"); console.time("drawCultures");
cults.selectAll("path").remove(); cults.selectAll("path").remove();
@ -497,17 +511,19 @@ function drawCultures() {
console.timeEnd("drawCultures"); console.timeEnd("drawCultures");
} }
function toggleReligions() { function toggleReligions(event) {
if (!relig.selectAll("path").size()) { if (!relig.selectAll("path").size()) {
turnButtonOn("toggleReligions"); turnButtonOn("toggleReligions");
drawReligions(); drawReligions();
if (event && event.ctrlKey) editStyle("relig");
} else { } else {
if (event && event.ctrlKey) {editStyle("relig"); return;}
relig.selectAll("path").remove(); relig.selectAll("path").remove();
turnButtonOff("toggleReligions"); turnButtonOff("toggleReligions");
} }
} }
function drawReligions() { function drawReligions(event) {
console.time("drawReligions"); console.time("drawReligions");
relig.selectAll("path").remove(); relig.selectAll("path").remove();
@ -554,12 +570,14 @@ function drawReligions() {
console.timeEnd("drawReligions"); console.timeEnd("drawReligions");
} }
function toggleStates() { function toggleStates(event) {
if (!layerIsOn("toggleStates")) { if (!layerIsOn("toggleStates")) {
turnButtonOn("toggleStates"); turnButtonOn("toggleStates");
regions.attr("display", null); regions.attr("display", null);
drawStates(); drawStates();
if (event && event.ctrlKey) editStyle("regions");
} else { } else {
if (event && event.ctrlKey) {editStyle("regions"); return;}
regions.attr("display", "none").selectAll("path").remove(); regions.attr("display", "none").selectAll("path").remove();
turnButtonOff("toggleStates"); turnButtonOff("toggleStates");
} }
@ -735,21 +753,25 @@ function drawBorders() {
console.timeEnd("drawBorders"); console.timeEnd("drawBorders");
} }
function toggleBorders() { function toggleBorders(event) {
if (!layerIsOn("toggleBorders")) { if (!layerIsOn("toggleBorders")) {
turnButtonOn("toggleBorders"); turnButtonOn("toggleBorders");
$('#borders').fadeIn(); $('#borders').fadeIn();
if (event && event.ctrlKey) editStyle("borders");
} else { } else {
if (event && event.ctrlKey) {editStyle("borders"); return;}
turnButtonOff("toggleBorders"); turnButtonOff("toggleBorders");
$('#borders').fadeOut(); $('#borders').fadeOut();
} }
} }
function toggleProvinces() { function toggleProvinces(event) {
if (!layerIsOn("toggleProvinces")) { if (!layerIsOn("toggleProvinces")) {
turnButtonOn("toggleProvinces"); turnButtonOn("toggleProvinces");
drawProvinces(); drawProvinces();
if (event && event.ctrlKey) editStyle("provs");
} else { } else {
if (event && event.ctrlKey) {editStyle("provs"); return;}
provs.selectAll("*").remove(); provs.selectAll("*").remove();
turnButtonOff("toggleProvinces"); turnButtonOff("toggleProvinces");
} }
@ -828,12 +850,14 @@ function drawProvinces() {
console.timeEnd("drawProvinces"); console.timeEnd("drawProvinces");
} }
function toggleGrid() { function toggleGrid(event) {
if (!gridOverlay.selectAll("*").size()) { if (!gridOverlay.selectAll("*").size()) {
turnButtonOn("toggleGrid"); turnButtonOn("toggleGrid");
drawGrid(); drawGrid();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
if (event && event.ctrlKey) editStyle("gridOverlay");
} else { } else {
if (event && event.ctrlKey) {editStyle("gridOverlay"); return;}
turnButtonOff("toggleGrid"); turnButtonOff("toggleGrid");
gridOverlay.selectAll("*").remove(); gridOverlay.selectAll("*").remove();
} }
@ -887,11 +911,13 @@ function drawGrid() {
console.timeEnd("drawGrid"); console.timeEnd("drawGrid");
} }
function toggleCoordinates() { function toggleCoordinates(event) {
if (!coordinates.selectAll("*").size()) { if (!coordinates.selectAll("*").size()) {
turnButtonOn("toggleCoordinates"); turnButtonOn("toggleCoordinates");
drawCoordinates(); drawCoordinates();
if (event && event.ctrlKey) editStyle("coordinates");
} else { } else {
if (event && event.ctrlKey) {editStyle("coordinates"); return;}
turnButtonOff("toggleCoordinates"); turnButtonOff("toggleCoordinates");
coordinates.selectAll("*").remove(); coordinates.selectAll("*").remove();
} }
@ -937,7 +963,7 @@ function getViewPoint(x, y) {
return pt.matrixTransform(view.getScreenCTM().inverse()); return pt.matrixTransform(view.getScreenCTM().inverse());
} }
function toggleCompass() { function toggleCompass(event) {
if (!layerIsOn("toggleCompass")) { if (!layerIsOn("toggleCompass")) {
turnButtonOn("toggleCompass"); turnButtonOn("toggleCompass");
$('#compass').fadeIn(); $('#compass').fadeIn();
@ -949,24 +975,28 @@ function toggleCompass() {
svg.select("g#rose > g#sL > line#sL1").attr("y1", -19000).attr("y2", 19000); svg.select("g#rose > g#sL > line#sL1").attr("y1", -19000).attr("y2", 19000);
svg.select("g#rose > g#sL > line#sL2").attr("x1", -19000).attr("x2", 19000); svg.select("g#rose > g#sL > line#sL2").attr("x1", -19000).attr("x2", 19000);
} }
if (event && event.ctrlKey) editStyle("compass");
} else { } else {
if (event && event.ctrlKey) {editStyle("compass"); return;}
$('#compass').fadeOut(); $('#compass').fadeOut();
turnButtonOff("toggleCompass"); turnButtonOff("toggleCompass");
} }
} }
function toggleRelief() { function toggleRelief(event) {
if (!layerIsOn("toggleRelief")) { if (!layerIsOn("toggleRelief")) {
turnButtonOn("toggleRelief"); turnButtonOn("toggleRelief");
if (!terrain.selectAll("*").size()) ReliefIcons(); if (!terrain.selectAll("*").size()) ReliefIcons();
$('#terrain').fadeIn(); $('#terrain').fadeIn();
if (event && event.ctrlKey) editStyle("terrain");
} else { } else {
if (event && event.ctrlKey) {editStyle("terrain"); return;}
$('#terrain').fadeOut(); $('#terrain').fadeOut();
turnButtonOff("toggleRelief"); turnButtonOff("toggleRelief");
} }
} }
function toggleTexture() { function toggleTexture(event) {
if (!layerIsOn("toggleTexture")) { if (!layerIsOn("toggleTexture")) {
turnButtonOn("toggleTexture"); turnButtonOn("toggleTexture");
// append default texture image selected by default. Don't append on load to not harm performance // append default texture image selected by default. Don't append on load to not harm performance
@ -976,88 +1006,106 @@ function toggleTexture() {
} }
$('#texture').fadeIn(); $('#texture').fadeIn();
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
if (event && event.ctrlKey) editStyle("texture");
} else { } else {
if (event && event.ctrlKey) {editStyle("texture"); return;}
$('#texture').fadeOut(); $('#texture').fadeOut();
turnButtonOff("toggleTexture"); turnButtonOff("toggleTexture");
} }
} }
function toggleRivers() { function toggleRivers(event) {
if (!layerIsOn("toggleRivers")) { if (!layerIsOn("toggleRivers")) {
turnButtonOn("toggleRivers"); turnButtonOn("toggleRivers");
$('#rivers').fadeIn(); $('#rivers').fadeIn();
if (event && event.ctrlKey) editStyle("rivers");
} else { } else {
if (event && event.ctrlKey) {editStyle("rivers"); return;}
$('#rivers').fadeOut(); $('#rivers').fadeOut();
turnButtonOff("toggleRivers"); turnButtonOff("toggleRivers");
} }
} }
function toggleRoutes() { function toggleRoutes(event) {
if (!layerIsOn("toggleRoutes")) { if (!layerIsOn("toggleRoutes")) {
turnButtonOn("toggleRoutes"); turnButtonOn("toggleRoutes");
$('#routes').fadeIn(); $('#routes').fadeIn();
if (event && event.ctrlKey) editStyle("routes");
} else { } else {
if (event && event.ctrlKey) {editStyle("routes"); return;}
$('#routes').fadeOut(); $('#routes').fadeOut();
turnButtonOff("toggleRoutes"); turnButtonOff("toggleRoutes");
} }
} }
function toggleMarkers() { function toggleMarkers(event) {
if (!layerIsOn("toggleMarkers")) { if (!layerIsOn("toggleMarkers")) {
turnButtonOn("toggleMarkers"); turnButtonOn("toggleMarkers");
$('#markers').fadeIn(); $('#markers').fadeIn();
if (event && event.ctrlKey) editStyle("markers");
} else { } else {
if (event && event.ctrlKey) {editStyle("markers"); return;}
$('#markers').fadeOut(); $('#markers').fadeOut();
turnButtonOff("toggleMarkers"); turnButtonOff("toggleMarkers");
} }
} }
function toggleLabels() { function toggleLabels(event) {
if (!layerIsOn("toggleLabels")) { if (!layerIsOn("toggleLabels")) {
turnButtonOn("toggleLabels"); turnButtonOn("toggleLabels");
labels.style("display", null) labels.style("display", null)
invokeActiveZooming(); invokeActiveZooming();
if (event && event.ctrlKey) editStyle("labels");
} else { } else {
if (event && event.ctrlKey) {editStyle("labels"); return;}
turnButtonOff("toggleLabels"); turnButtonOff("toggleLabels");
labels.style("display", "none"); labels.style("display", "none");
} }
} }
function toggleIcons() { function toggleIcons(event) {
if (!layerIsOn("toggleIcons")) { if (!layerIsOn("toggleIcons")) {
turnButtonOn("toggleIcons"); turnButtonOn("toggleIcons");
$('#icons').fadeIn(); $('#icons').fadeIn();
if (event && event.ctrlKey) editStyle("burgIcons");
} else { } else {
if (event && event.ctrlKey) {editStyle("burgIcons"); return;}
turnButtonOff("toggleIcons"); turnButtonOff("toggleIcons");
$('#icons').fadeOut(); $('#icons').fadeOut();
} }
} }
function toggleRulers() { function toggleRulers(event) {
if (!layerIsOn("toggleRulers")) { if (!layerIsOn("toggleRulers")) {
turnButtonOn("toggleRulers"); turnButtonOn("toggleRulers");
$('#ruler').fadeIn(); $('#ruler').fadeIn();
if (event && event.ctrlKey) editStyle("ruler");
} else { } else {
if (event && event.ctrlKey) {editStyle("ruler"); return;}
$('#ruler').fadeOut(); $('#ruler').fadeOut();
turnButtonOff("toggleRulers"); turnButtonOff("toggleRulers");
} }
} }
function toggleScaleBar() { function toggleScaleBar(event) {
if (!layerIsOn("toggleScaleBar")) { if (!layerIsOn("toggleScaleBar")) {
turnButtonOn("toggleScaleBar"); turnButtonOn("toggleScaleBar");
$('#scaleBar').fadeIn(); $('#scaleBar').fadeIn();
if (event && event.ctrlKey) editUnits();
} else { } else {
if (event && event.ctrlKey) {editUnits(); return;}
$('#scaleBar').fadeOut(); $('#scaleBar').fadeOut();
turnButtonOff("toggleScaleBar"); turnButtonOff("toggleScaleBar");
} }
} }
function toggleZones() { function toggleZones(event) {
if (!layerIsOn("toggleZones")) { if (!layerIsOn("toggleZones")) {
turnButtonOn("toggleZones"); turnButtonOn("toggleZones");
$('#zones').fadeIn(); $('#zones').fadeIn();
if (event && event.ctrlKey) editStyle("zones");
} else { } else {
if (event && event.ctrlKey) {editStyle("zones"); return;}
turnButtonOff("toggleZones"); turnButtonOff("toggleZones");
$('#zones').fadeOut(); $('#zones').fadeOut();
} }

18
modules/ui/options.js
View file

@ -59,6 +59,7 @@ options.querySelector("div.tab").addEventListener("click", function(event) {
document.getElementById(id).classList.add("active"); document.getElementById(id).classList.add("active");
options.querySelectorAll(".tabcontent").forEach(e => e.style.display = "none"); options.querySelectorAll(".tabcontent").forEach(e => e.style.display = "none");
if (id === "layersTab") layersContent.style.display = "block"; else
if (id === "styleTab") styleContent.style.display = "block"; else if (id === "styleTab") styleContent.style.display = "block"; else
if (id === "optionsTab") optionsContent.style.display = "block"; else if (id === "optionsTab") optionsContent.style.display = "block"; else
if (id === "toolsTab") customization === 1 if (id === "toolsTab") customization === 1
@ -81,6 +82,22 @@ function collapse(e) {
} }
} }
// select element to be edited
function editStyle(element, group) {
showOptions();
styleTab.click();
styleElementSelect.value = element;
if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
selectStyleElement();
styleElementSelect.classList.add("glow");
if (group) styleGroupSelect.classList.add("glow");
setTimeout(() => {
styleElementSelect.classList.remove("glow");
if (group) styleGroupSelect.classList.remove("glow");
}, 1500);
}
// Toggle style sections on element select // Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement); styleElementSelect.addEventListener("change", selectStyleElement);
function selectStyleElement() { function selectStyleElement() {
@ -804,6 +821,7 @@ function changeCultureSet() {
function changeStatesNumber(value) { function changeStatesNumber(value) {
regionsInput.value = regionsOutput.value = value; regionsInput.value = regionsOutput.value = value;
regionsOutput.style.color = +value ? null : "#b12117";
burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3)); burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3));
labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4)); labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4));
} }

5
modules/ui/provinces-editor.js
View file

@ -20,6 +20,7 @@ function editProvinces() {
// add listeners // add listeners
document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor); document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines); document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode); document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("provincesChart").addEventListener("click", showChart); document.getElementById("provincesChart").addEventListener("click", showChart);
@ -552,7 +553,7 @@ function editProvinces() {
const oldProvince = cells.province[center]; const oldProvince = cells.province[center];
if (oldProvince && provinces[oldProvince].center === center) {tip("The cell is already a center of a different province. Select other cell", false, "error"); return;} if (oldProvince && provinces[oldProvince].center === center) {tip("The cell is already a center of a different province. Select other cell", false, "error"); return;}
const state = cells.state[center]; const state = cells.state[center];
if (!state) {tip("You cannot create a province in neutral lands> Please assign this land to a state first", false, "error"); return;} if (!state) {tip("You cannot create a province in neutral lands. Please assign this land to a state first", false, "error"); return;}
if (d3.event.shiftKey === false) exitAddProvinceMode(); if (d3.event.shiftKey === false) exitAddProvinceMode();
@ -640,7 +641,7 @@ function editProvinces() {
function closeProvincesEditor() { function closeProvincesEditor() {
if (customization === 11) exitProvincesManualAssignment("close"); if (customization === 11) exitProvincesManualAssignment("close");
if (customization === 12) exitAddStateMode(); if (customization === 12) exitAddProvinceMode();
} }
} }

1
modules/ui/relief-editor.js
View file

@ -30,6 +30,7 @@ function editReliefIcon() {
document.getElementById("reliefEditorSet").addEventListener("change", changeIconsSet); document.getElementById("reliefEditorSet").addEventListener("change", changeIconsSet);
reliefIconsDiv.querySelectorAll("svg").forEach(el => el.addEventListener("click", changeIcon)); reliefIconsDiv.querySelectorAll("svg").forEach(el => el.addEventListener("click", changeIcon));
document.getElementById("reliefEditStyle").addEventListener("click", () => editStyle("terrain"));
document.getElementById("reliefCopy").addEventListener("click", copyIcon); document.getElementById("reliefCopy").addEventListener("click", copyIcon);
document.getElementById("reliefMoveFront").addEventListener("click", () => elSelected.raise()); document.getElementById("reliefMoveFront").addEventListener("click", () => elSelected.raise());
document.getElementById("reliefMoveBack").addEventListener("click", () => elSelected.lower()); document.getElementById("reliefMoveBack").addEventListener("click", () => elSelected.lower());

1
modules/ui/religions-editor.js
View file

@ -23,6 +23,7 @@ function editReligions() {
// add listeners // add listeners
document.getElementById("religionsEditorRefresh").addEventListener("click", refreshReligionsEditor); document.getElementById("religionsEditorRefresh").addEventListener("click", refreshReligionsEditor);
document.getElementById("religionsEditStyle").addEventListener("click", () => editStyle("relig"));
document.getElementById("religionsLegend").addEventListener("click", toggleLegend); document.getElementById("religionsLegend").addEventListener("click", toggleLegend);
document.getElementById("religionsPercentage").addEventListener("click", togglePercentageMode); document.getElementById("religionsPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("religionsHeirarchy").addEventListener("click", showHierarchy); document.getElementById("religionsHeirarchy").addEventListener("click", showHierarchy);

1
modules/ui/rivers-editor.js
View file

@ -34,6 +34,7 @@ function editRiver() {
document.getElementById("riverScale").addEventListener("input", changeScale); document.getElementById("riverScale").addEventListener("input", changeScale);
document.getElementById("riverReset").addEventListener("click", resetTransformation); document.getElementById("riverReset").addEventListener("click", resetTransformation);
document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
document.getElementById("riverCopy").addEventListener("click", copyRiver); document.getElementById("riverCopy").addEventListener("click", copyRiver);
document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode); document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode);
document.getElementById("riverLegend").addEventListener("click", editRiverLegend); document.getElementById("riverLegend").addEventListener("click", editRiverLegend);

7
modules/ui/routes-editor.js
View file

@ -30,6 +30,8 @@ function editRoute(onClick) {
document.getElementById("routeGroupName").addEventListener("change", createNewGroup); document.getElementById("routeGroupName").addEventListener("change", createNewGroup);
document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup); document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup);
document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection); document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection);
document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle);
document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode); document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode);
document.getElementById("routeLegend").addEventListener("click", editRouteLegend); document.getElementById("routeLegend").addEventListener("click", editRouteLegend);
document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode); document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode);
@ -192,6 +194,11 @@ function editRoute(onClick) {
}); });
} }
function editGroupStyle() {
const g = elSelected.node().parentNode.id;
editStyle("routes", g);
}
function toggleRouteSplitMode() { function toggleRouteSplitMode() {
document.getElementById("routeNew").classList.remove("pressed"); document.getElementById("routeNew").classList.remove("pressed");
this.classList.toggle("pressed"); this.classList.toggle("pressed");

1
modules/ui/states-editor.js
View file

@ -22,6 +22,7 @@ function editStates() {
// add listeners // add listeners
document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor); document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor);
document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions"));
document.getElementById("statesLegend").addEventListener("click", toggleLegend); document.getElementById("statesLegend").addEventListener("click", toggleLegend);
document.getElementById("statesPercentage").addEventListener("click", togglePercentageMode); document.getElementById("statesPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("statesChart").addEventListener("click", showStatesChart); document.getElementById("statesChart").addEventListener("click", showStatesChart);

54
modules/ui/tools.js
View file

@ -135,11 +135,18 @@ function regenerateBurgs() {
function regenerateStates() { function regenerateStates() {
Math.seedrandom(Math.floor(Math.random() * 1e9)); // new random seed Math.seedrandom(Math.floor(Math.random() * 1e9)); // new random seed
const burgs = pack.burgs.filter(b => b.i && !b.removed), states = pack.states.filter(s => s.i && !s.removed); const burgs = pack.burgs.filter(b => b.i && !b.removed);
// burgs sorted by a bit randomized population: if (!burgs.length) {
tip("No burgs to generate states. Please create burgs first", false, "error");
return;
}
if (burgs.length < +regionsInput.value) {
tip(`Not enought burgs to generate ${regionsInput.value} states. Will generate only ${burgs.length} states`, false, "warn");
}
// burg ids sorted by a bit randomized population:
const sorted = burgs.map(b => [b.i, b.population * Math.random()]).sort((a, b) => b[1] - a[1]).map(b => b[0]); const sorted = burgs.map(b => [b.i, b.population * Math.random()]).sort((a, b) => b[1] - a[1]).map(b => b[0]);
const capitalsTree = d3.quadtree(); const capitalsTree = d3.quadtree();
let spacing = (graphWidth + graphHeight) / 2 / states.length; // min distance between capitals
// turn all old capitals into towns // turn all old capitals into towns
burgs.filter(b => b.capital).forEach(b => { burgs.filter(b => b.capital).forEach(b => {
@ -147,30 +154,31 @@ function regenerateStates() {
b.capital = false; b.capital = false;
}); });
states.forEach(s => { const neutral = pack.states[0].name;
let newCapital = 0, x = 0, y = 0; const count = Math.min(+regionsInput.value, burgs.length);
let spacing = (graphWidth + graphHeight) / 2 / count; // min distance between capitals
pack.states = d3.range(count).map(i => {
if (!i) return {i, name: neutral};
for (let i=0; i < sorted.length && !newCapital; i++) { let capital = null, x = 0, y = 0;
newCapital = burgs[sorted[i]]; for (let i=0; i < sorted.length; i++) {
x = newCapital.x, y = newCapital.y; capital = burgs[sorted[i]];
if (capitalsTree.find(x, y, spacing) !== undefined) { x = capital.x, y = capital.y;
spacing -= 1; if (capitalsTree.find(x, y, spacing) === undefined) break;
if (spacing < 1) spacing = 1; spacing = Math.max(spacing - 1, 1);
newCapital = 0;
}
} }
capitalsTree.add([x, y]); capitalsTree.add([x, y]);
newCapital.capital = true; capital.capital = true;
s.capital = newCapital.i; moveBurgToGroup(capital.i, "cities");
s.center = newCapital.cell;
s.culture = newCapital.culture; const culture = capital.culture;
s.expansionism = rn(Math.random() * powerInput.value + 1, 1); const basename = capital.name.length < 9 && capital.cell%5 === 0 ? capital.name : Names.getCulture(culture, 3, 6, "", 0);
const basename = newCapital.name.length < 9 && newCapital.cell%5 === 0 ? newCapital.name : Names.getCulture(s.culture, 3, 6, "", 0); const name = Names.getState(basename, culture);
s.name = Names.getState(basename, s.culture); const nomadic = [1, 2, 3, 4].includes(pack.cells.biome[capital.cell]);
const nomadic = [1, 2, 3, 4].includes(pack.cells.biome[newCapital.cell]); const type = nomadic ? "Nomadic" : pack.cultures[culture].type === "Nomadic" ? "Generic" : pack.cultures[culture].type;
s.type = nomadic ? "Nomadic" : pack.cultures[s.culture].type === "Nomadic" ? "Generic" : pack.cultures[s.culture].type; const expansionism = rn(Math.random() * powerInput.value + 1, 1);
moveBurgToGroup(newCapital.i, "cities"); return {i, name, type, capital:capital.i, center:capital.cell, culture, expansionism};
}); });
unfog(); unfog();

1
modules/ui/zones-editor.js
View file

@ -14,6 +14,7 @@ function editZones() {
}); });
// add listeners // add listeners
document.getElementById("zonesEditStyle").addEventListener("click", () => editStyle("zones"));
document.getElementById("zonesLegend").addEventListener("click", toggleLegend); document.getElementById("zonesLegend").addEventListener("click", toggleLegend);
document.getElementById("zonesPercentage").addEventListener("click", togglePercentageMode); document.getElementById("zonesPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("zonesManually").addEventListener("click", enterZonesManualAssignent); document.getElementById("zonesManually").addEventListener("click", enterZonesManualAssignent);

4
modules/utils.js
View file

@ -46,8 +46,9 @@ function findGridCell(x, y) {
// return array of cell indexes in radius on a regular square grid // return array of cell indexes in radius on a regular square grid
function findGridAll(x, y, radius) { function findGridAll(x, y, radius) {
const c = grid.cells.c; const c = grid.cells.c;
let found = [findGridCell(x, y)];
let r = Math.floor(radius / grid.spacing); let r = Math.floor(radius / grid.spacing);
let found = [findGridCell(x, y)];
if (!r || radius === 1) return found;
if (r > 0) found = found.concat(c[found[0]]); if (r > 0) found = found.concat(c[found[0]]);
if (r > 1) { if (r > 1) {
let frontier = c[found[0]]; let frontier = c[found[0]];
@ -68,7 +69,6 @@ function findGridAll(x, y, radius) {
} }
return found; return found;
} }
// return closest pack points quadtree datum // return closest pack points quadtree datum