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

v. 0.55993b

Browse source
This commit is contained in:
Azgaar 2018-04-21 13:29:37 +03:00
parent da110421bc
commit 05db880f20
3 changed files with 526 additions and 418 deletions
Download patch file Download diff file Expand all files Collapse all files

86
index.css
View file

@ -63,7 +63,7 @@ button, select, a {
} }
#coastline { #coastline {
fill: none; fill: none;
stroke-linejoin: round; stroke-linejoin: round;
} }
@ -89,7 +89,7 @@ button, select, a {
#terrain { #terrain {
mask: url(#shape); mask: url(#shape);
mask-mode: alpha; mask-mode: alpha;
} }
#hills { #hills {
@ -116,7 +116,7 @@ button, select, a {
#roads, #trails { #roads, #trails {
mask: url(#shape); mask: url(#shape);
mask-mode: alpha; mask-mode: alpha;
} }
#swamps { #swamps {
@ -178,21 +178,21 @@ button, select, a {
} }
#editFontInput { #editFontInput {
width: 125px; width: 125px;
} }
#editColor { #editColor {
height: 20px; height: 20px;
width: 50px; width: 50px;
padding: 0; padding: 0;
} }
#riverScale { #riverScale {
width: 50px; width: 50px;
} }
#riverAngle, #riverWidthInput, #riverIncrement { #riverAngle, #riverWidthInput, #riverIncrement {
width: 79px; width: 79px;
} }
.editButtonS { .editButtonS {
@ -320,10 +320,11 @@ button.options {
top: -2px; top: -2px;
position: relative; position: relative;
appearance: none; appearance: none;
-webkit-appearance: none;
} }
#options input[type="range"]::slider-thumb { #options input[type="range"]::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
border-radius: 15%; border-radius: 15%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -391,14 +392,14 @@ button.active {
} }
#layoutTab { #layoutTab {
margin-left: 19px; margin-left: 19px;
} }
.tabcontent { .tabcontent {
display: none; display: none;
padding: 0 6px 2px 12px; padding: 0 6px 2px 12px;
opacity: 0.8; opacity: 0.8;
max-width: 290px; max-width: 290px;
} }
.tabcontent button { .tabcontent button {
@ -418,7 +419,7 @@ button.active {
#mapLayers { #mapLayers {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.tabcontent li { .tabcontent li {
@ -428,7 +429,7 @@ button.active {
padding: 5px 8px; padding: 5px 8px;
margin: 4px; margin: 4px;
transition: 0.1s; transition: 0.1s;
float: left; float: left;
} }
.tabcontent li:hover { .tabcontent li:hover {
@ -478,7 +479,7 @@ p {
.overflow-div { .overflow-div {
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
user-select: text; user-select: text;
} }
.overflow-table { .overflow-table {
@ -487,12 +488,16 @@ p {
text-align: center; text-align: center;
} }
#sizeOutput {
color: green;
}
#icons { #icons {
stroke: #0d0d0d; stroke: #0d0d0d;
fill: grey; fill: grey;
} }
#fileToLoad { #fileInputs {
display: none; display: none;
} }
@ -510,7 +515,7 @@ body button.noicon {
margin: 1px; margin: 1px;
padding: 1px 6px; padding: 1px 6px;
float: left; float: left;
font-family: Copperplate, monospace; font-family: Copperplate, monospace;
} }
#brushesPanel > div, #templateEditor > div { #brushesPanel > div, #templateEditor > div {
@ -519,7 +524,7 @@ body button.noicon {
#templateEditor #templateTools { #templateEditor #templateTools {
display: inline-block; display: inline-block;
margin-bottom: -3px; margin-bottom: -3px;
} }
#templateSelect { #templateSelect {
@ -566,14 +571,14 @@ body button.noicon {
width: 45px; width: 45px;
font-family: monospace; font-family: monospace;
height: 4px; height: 4px;
font-family: monospace; font-family: monospace;
} }
#templateBody select { #templateBody select {
border: 0; border: 0;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
width: 58px; width: 58px;
cursor: pointer; cursor: pointer;
} }
.riverPoints { .riverPoints {
@ -620,7 +625,7 @@ body button.noicon {
#restoreStyle { #restoreStyle {
cursor: pointer; cursor: pointer;
font-size: xx-small; font-size: xx-small;
} }
.pureInput { .pureInput {
@ -704,11 +709,11 @@ body .ui-dialog-titlebar {
top: -4px; top: -4px;
position: relative; position: relative;
appearance: none; appearance: none;
appearance: none; -webkit-appearance: none;
} }
.ui-dialog input[type="range"]::slider-thumb { .ui-dialog input[type="range"]::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
border-radius: 15%; border-radius: 15%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -776,11 +781,6 @@ div.slider .ui-slider-handle {
color: white; color: white;
} }
#layoutCheckboxes {
font-style: italic;
font-weight: bold;
}
#brushPower, #brushRadius { #brushPower, #brushRadius {
width: 88px; width: 88px;
} }
@ -844,14 +844,14 @@ div.states sup {
div.states > input { div.states > input {
width: 60px; width: 60px;
background: none; background: none;
border: 0; border: 0;
} }
div.states > input.stateColor { div.states > input.stateColor {
width: 13px; width: 13px;
height: 17px; height: 17px;
padding: 0px; padding: 0px;
margin-right: -1px; margin-right: -1px;
border: 0; border: 0;
background: none; background: none;
cursor: pointer; cursor: pointer;
@ -906,7 +906,7 @@ div.states > .small {
} }
#burgsBody { #burgsBody {
min-width: 260px; min-width: 260px;
} }
div.states .burgName, div.states .burgCulture { div.states .burgName, div.states .burgCulture {
@ -922,7 +922,7 @@ div.states .burgPopulation {
width: 50px; width: 50px;
color: #666666; color: #666666;
font-style: italic; font-style: italic;
line-height: 14px; line-height: 14px;
} }
div.states .enlange { div.states .enlange {
@ -942,7 +942,7 @@ span.ui-dialog-title > input.stateColor {
height: 18px; height: 18px;
border: 0; border: 0;
background: none; background: none;
cursor: pointer; cursor: pointer;
} }
div.states.selected { div.states.selected {
@ -956,10 +956,10 @@ div.states button.selectCapital {
} }
#scaleBody { #scaleBody {
margin-left: 14px; margin-left: 14px;
} }
#scaleBody > div > * { #scaleBody > div > * {
display: inline-block; display: inline-block;
font-size: 11px; font-size: 11px;
} }
@ -999,7 +999,7 @@ div.states button.selectCapital {
#ruler circle { #ruler circle {
stroke: #4e5a69; stroke: #4e5a69;
fill: yellow; fill: yellow;
} }
#ruler .white { #ruler .white {
@ -1007,7 +1007,7 @@ div.states button.selectCapital {
} }
#ruler .gray { #ruler .gray {
stroke: #3d3d3d; stroke: #3d3d3d;
} }
#ruler text { #ruler text {
@ -1026,7 +1026,7 @@ div.states button.selectCapital {
#ruler .planimeter { #ruler .planimeter {
fill: lightblue; fill: lightblue;
fill-rule: evenodd; fill-rule: evenodd;
fill-opacity: 0.5; fill-opacity: 0.5;
stroke: #737373; stroke: #737373;
} }
@ -1059,7 +1059,7 @@ div.states button.selectCapital {
font-weight: bold; font-weight: bold;
width: 88px; width: 88px;
position: absolute; position: absolute;
left: 45%; left: 45%;
} }
.spin { .spin {
@ -1120,7 +1120,7 @@ input[type="checkbox"] {
.checkbox + .checkbox-label:before { .checkbox + .checkbox-label:before {
content: ''; content: '';
background: #ece6eb; background: #ece6eb;
border-radius: 50%; border-radius: 3px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 8px; width: 8px;
@ -1130,7 +1130,7 @@ input[type="checkbox"] {
} }
.checkbox:checked + .checkbox-label:before { .checkbox:checked + .checkbox-label:before {
background: #826473; background: #8e6d7e;
border-radius: 50%; transition: .1s;
box-shadow: inset 0px 0px 0px 2px #ece6ea; box-shadow: inset 0px 0px 0px 2px #ece6ea;
} }

77
index.html
View file

@ -20,7 +20,7 @@
<meta property="og:description" content="Demo version. Based on D3 Voronoi diagram rendered to svg"> <meta property="og:description" content="Demo version. Based on D3 Voronoi diagram rendered to svg">
<meta property="og:image" content="images/preview.png"> <meta property="og:image" content="images/preview.png">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32"/> <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16"/> <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16"/>
<link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/"> <link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/">
<script src="libs/jquery-3.1.1.min.js"></script> <script src="libs/jquery-3.1.1.min.js"></script>
<script src="libs/d3.v4.min.js"></script> <script src="libs/d3.v4.min.js"></script>
@ -31,8 +31,8 @@
<script src="libs/polylabel.min.js"></script> <script src="libs/polylabel.min.js"></script>
<script src="libs/quantize.min.js" defer></script> <script src="libs/quantize.min.js" defer></script>
<script src="libs/d3-hexbin.v0.2.min.js" defer></script> <script src="libs/d3-hexbin.v0.2.min.js" defer></script>
<link rel="stylesheet" type="text/css" href="index.css?version=0.55992b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.55993b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.55992b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.55993b"/>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
</head> </head>
<body class="fullscreen"> <body class="fullscreen">
@ -64,9 +64,9 @@
</filter> </filter>
<filter id="filter-tint"> <filter id="filter-tint">
<feColorMatrix type="matrix" values="0 0.9 0.2 0 0 0 0.8 0.1 0 0.1 0 0.4 1.4 0 -0.1 0 0 0 1 1"/> <feColorMatrix type="matrix" values="0 0.9 0.2 0 0 0 0.8 0.1 0 0.1 0 0.4 1.4 0 -0.1 0 0 0 1 1"/>
</filter> </filter>
<g id="deftemp"> <g id="deftemp">
<mask id="shape" x="0" y="0" width="100%" height="100%" fill="black"></mask> <mask id="shape" x="0" y="0" width="100%" height="100%" fill="black"></mask>
</g> </g>
<g id="defs-icons"> <g id="defs-icons">
<symbol id="icon-anchor" viewBox="0 0 28 32"> <symbol id="icon-anchor" viewBox="0 0 28 32">
@ -124,7 +124,7 @@
<use xlink:href="#s2" transform="rotate(90)"/> <use xlink:href="#s2" transform="rotate(90)"/>
</g> </g>
<use xlink:href="#s3" transform="scale(-1)"/> <use xlink:href="#s3" transform="scale(-1)"/>
</g> </g>
</defs> </defs>
</svg> </svg>
<canvas id="canvas" style="opacity: 0"></canvas> <canvas id="canvas" style="opacity: 0"></canvas>
@ -150,7 +150,7 @@
<!-- <option value="layoutEconomical">Economical map</option> --> <!-- <option value="layoutEconomical">Economical map</option> -->
<option value="layoutHeightmap">Heightmap</option> <option value="layoutHeightmap">Heightmap</option>
<option value="layoutLandmass">Pure landmass</option> <option value="layoutLandmass">Pure landmass</option>
</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 title="Toggle Ocean, not movable" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li> <li title="Toggle Ocean, not movable" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
@ -161,7 +161,7 @@
<li title="Toggle Cultures map" id="toggleCultures" class="buttonoff">Cultures</li> <li title="Toggle Cultures map" id="toggleCultures" class="buttonoff">Cultures</li>
<li title="Toggle Routes" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li> <li title="Toggle Routes" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li>
<li title="Toggle Rivers" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li> <li title="Toggle Rivers" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li>
<li title="Toggle Countries" id="toggleCountries">Countries</li> <li title="Toggle Countries" id="toggleCountries">Countries</li>
<li title="Toggle Borders" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li> <li title="Toggle Borders" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li>
<li title="Toggle Relief icons" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li> <li title="Toggle Relief icons" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
<li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li> <li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
@ -240,11 +240,11 @@
<div id="styleSize"> <div id="styleSize">
<br>Radius: <button title="Multiply Radius by 1.1" id="styleFillPlus">+</button><button title="Multiply Radius by 0.9" id="styleFillMinus">-</button> <br>Radius: <button title="Multiply Radius by 1.1" id="styleFillPlus">+</button><button title="Multiply Radius by 0.9" id="styleFillMinus">-</button>
<span> Stroke: </span><button title="Multiply Stroke-width by 1.1" id="styleStrokePlus">+</button><button title="Multiply Stroke-width by 0.9" id="styleStrokeMinus">-</button> <span> Stroke: </span><button title="Multiply Stroke-width by 1.1" id="styleStrokePlus">+</button><button title="Multiply Stroke-width by 0.9" id="styleStrokeMinus">-</button>
</div> </div>
<div id="styleOpacity"> <div id="styleOpacity">
<br>Opacity: <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value="1"> <br>Opacity: <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value="1">
<output id="styleOpacityOutput">1</output> <output id="styleOpacityOutput">1</output>
</div> </div>
<div id="styleFilter"> <div id="styleFilter">
<br>Filter: <select id="styleFilterInput" class="pureInput"> <br>Filter: <select id="styleFilterInput" class="pureInput">
<option value="" selected>None</option> <option value="" selected>None</option>
@ -273,7 +273,7 @@
<p>Generate new map to apply the options!</p> <p>Generate new map to apply the options!</p>
<table> <table>
<tr> <tr>
<td title="Map size. Will be remembered on change">Map size</td> <td title="Map size. Will be remembered on change. Highly affects performance!">Map size</td>
<td style="width: 130px;"> <td style="width: 130px;">
<span title="width">w:</span> <span title="width">w:</span>
<input class="pairedNumber" id="mapWidthInput" type="number" min="240" value="960"> <input class="pairedNumber" id="mapWidthInput" type="number" min="240" value="960">
@ -300,9 +300,9 @@
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td title="Set the graph size. Map on size 3 and 4 requires up to 1 minute to be generated!">Graph size</td> <td title="Set the graph size. Performance on sizes 2 and 3 can be low!">Graph size</td>
<td> <td>
<input id="sizeInput" type="range" min="1" max="4" value="1"> <input id="sizeInput" type="range" min="1" max="3" value="1">
</td> </td>
<td> <td>
<output id="sizeOutput">1</output> <output id="sizeOutput">1</output>
@ -391,7 +391,7 @@
<option value="-9,-8,-7,-6,-5,-4,-3,-2,-1">-9,-8,-7,-6,-5,-4,-3,-2,-1</option> <option value="-9,-8,-7,-6,-5,-4,-3,-2,-1">-9,-8,-7,-6,-5,-4,-3,-2,-1</option>
<option value="-6,-4,-2">-6,-4,-2</option> <option value="-6,-4,-2">-6,-4,-2</option>
<option value="-8,-6,-4,-2">-8,-6,-4,-2</option> <option value="-8,-6,-4,-2">-8,-6,-4,-2</option>
</select> </select>
</td> </td>
<td></td> <td></td>
</tr> </tr>
@ -420,7 +420,7 @@
<div id="customizeHeightmap" style="display: none;"> <div id="customizeHeightmap" style="display: none;">
<p title="Click 'Start' to initiate customization, 'Complete' to finalize the Heightmap">Heightmap customization:</p> <p title="Click 'Start' to initiate customization, 'Complete' to finalize the Heightmap">Heightmap customization:</p>
<div> <div>
<button title="Roll back to Heightmap customization" id="fromHeightmap">Roll back</button> <button title="Edit Heightmap" id="fromHeightmap">Edit</button>
<button title="Start from scratch" id="fromScratch">Clear all</button> <button title="Start from scratch" id="fromScratch">Clear all</button>
<button class="buttonoff" title="Finalize the Heightmap. Not allowed if landmass area is insufficient" id="getMap" disabled="disabled">Complete</button> <button class="buttonoff" title="Finalize the Heightmap. Not allowed if landmass area is insufficient" id="getMap" disabled="disabled">Complete</button>
</div> </div>
@ -463,12 +463,11 @@
<div id="savePNG" title="Download the visible part of the map as 4K .png image (may be pretty slow)">.png</div> <div id="savePNG" title="Download the visible part of the map as 4K .png image (may be pretty slow)">.png</div>
</div> </div>
<button id="loadMap" title="Load fully functional map in a .map format" class="options">Load</button> <button id="loadMap" title="Load fully functional map in a .map format" class="options">Load</button>
<input type="file" accept=".map" id="fileToLoad">
<button id="zoomReset" title="Reset map zoom to default" class="options">Reset Zoom</button> <button id="zoomReset" title="Reset map zoom to default" class="options">Reset Zoom</button>
</div> </div>
</div> </div>
</div> </div>
<div id="labelEditor" class="dialog" style="display: none"> <div id="labelEditor" class="dialog" style="display: none">
<button id="editGroupButton" title="Edit label Group" class="editButton icon-list-bullet"></button> <button id="editGroupButton" title="Edit label Group" class="editButton icon-list-bullet"></button>
<select id="editGroupSelect" title="Select Group for this label" class="editTrigger"></select> <select id="editGroupSelect" title="Select Group for this label" class="editTrigger"></select>
@ -489,14 +488,14 @@
<i id="editOpacityIcon" class="icon-adjust"></i> <i id="editOpacityIcon" class="icon-adjust"></i>
<input id="editOpacity" title="Change Opacity for the entire Group" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02"> <input id="editOpacity" title="Change Opacity for the entire Group" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02">
<i id="editShadowIcon" class="icon-clone"></i> <i id="editShadowIcon" class="icon-clone"></i>
<input id="editShadow" title="Change Shadow for the entire Group" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02" disabled> <input id="editShadow" title="Change Shadow for the entire Group" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02" disabled>
<button id="editAngleButton" title="Rotate the label" class="editButton icon-ccw"></button> <button id="editAngleButton" title="Rotate the label" class="editButton icon-ccw"></button>
<input id="editAngle" class="editTrigger" value="0" type="range" min="-180" max="180" step="0.2" oninput="editAngleValue.innerHTML = Math.abs(this.value)+'°'"> <input id="editAngle" class="editTrigger" value="0" type="range" min="-180" max="180" step="0.2" oninput="editAngleValue.innerHTML = Math.abs(this.value)+'°'">
<span id="editAngleValue" class="editValue">0°</span> <span id="editAngleValue" class="editValue">0°</span>
<button id="editCopy" title="Copy the label" class="editButton icon-clone"></button> <button id="editCopy" title="Copy the label" class="editButton icon-clone"></button>
<button id="editRemoveSingle" title="Remove the label" class="editButton icon-trash"></button> <button id="editRemoveSingle" title="Remove the label" class="editButton icon-trash"></button>
</div> </div>
<div id="riverEditor" class="dialog" style="display: none"> <div id="riverEditor" class="dialog" style="display: none">
<button id="riverWidth" title="Change river width and widening" class="editButton icon-sort-alt-up"></button> <button id="riverWidth" title="Change river width and widening" class="editButton icon-sort-alt-up"></button>
<i id="riverWidthIcon" title="Change river width" class="dialog-icon icon-w"></i> <i id="riverWidthIcon" title="Change river width" class="dialog-icon icon-w"></i>
@ -512,12 +511,12 @@
<input id="riverScale" title="Change river scale" class="editTrigger" value="1" type="number" min="0.1" max="3" step="0.01"> <input id="riverScale" title="Change river scale" class="editTrigger" value="1" type="number" min="0.1" max="3" step="0.01">
<span id="riverReset" title="Reset transformation to default" class="editButtonS icon-ccw"></span> <span id="riverReset" title="Reset transformation to default" class="editButtonS icon-ccw"></span>
<button id="riverAddPoint" title="Click to add a river point" class="editButton icon-plus-squared-alt"></button> <button id="riverAddPoint" title="Click to add a river point" class="editButton icon-plus-squared-alt"></button>
<button id="riverRemovePoint" title="Click on red circle to remove river point" class="editButton icon-minus-squared-alt"></button> <button id="riverRemovePoint" title="Click on red circle to remove river point" class="editButton icon-minus-squared-alt"></button>
<button id="riverCopy" title="Copy river" class="editButton icon-clone"></button> <button id="riverCopy" title="Copy river" class="editButton icon-clone"></button>
<button id="riverNew" title="Create new river clicking on map" class="editButton icon-pin"></button> <button id="riverNew" title="Create new river clicking on map" class="editButton icon-pin"></button>
<button id="riverRemove" title="Remove river" class="editButton icon-trash"></button> <button id="riverRemove" title="Remove river" class="editButton icon-trash"></button>
</div> </div>
<div id="templateEditor" class="dialog" style="display: none"> <div id="templateEditor" class="dialog" style="display: none">
<div id="templateTop"> <div id="templateTop">
Base template: <select id="templateSelect" data-prev="templateCustom" title="Select base template"> Base template: <select id="templateSelect" data-prev="templateCustom" title="Select base template">
@ -551,18 +550,16 @@
<button id="templateClear" title="Clear the map" class="icon-eraser"></button> <button id="templateClear" title="Clear the map" class="icon-eraser"></button>
<button id="templateComplete" title="Finalize the Heightmap. Not allowed if insufficient land area available" class="icon-check"></button> <button id="templateComplete" title="Finalize the Heightmap. Not allowed if insufficient land area available" class="icon-check"></button>
<button id="templateLoad" title="Open previously saved template" class="icon-upload"></button> <button id="templateLoad" title="Open previously saved template" class="icon-upload"></button>
<input type="file" accept=".txt" id="templateToLoad" style="display: none;">
<button id="templateSave" title="Save template" class="icon-download"></button> <button id="templateSave" title="Save template" class="icon-download"></button>
</div> </div>
</div> </div>
<div id="imageConverter" class="dialog" style="display: none"> <div id="imageConverter" class="dialog" style="display: none">
<div id="convertImageButtons"> <div id="convertImageButtons">
<input type="file" accept="image/*" id="imageToLoad" style="display: none;">
<button id="convertImageLoad" title="Load image to convert" class="icon-upload"></button> <button id="convertImageLoad" title="Load image to convert" class="icon-upload"></button>
<button id="convertAutoLum" title="Auto-assign colors based on liminosity" class="icon-adjust"></button> <button id="convertAutoLum" title="Auto-assign colors based on liminosity" class="icon-adjust"></button>
<button id="convertAutoHue" title="Auto-assign colors based on hue" class="icon-brush"></button> <button id="convertAutoHue" title="Auto-assign colors based on hue" class="icon-brush"></button>
<button id="convertColorsMinus" title="Reduce the number of colors. Minimal number is 3" class="icon-minus-squared"></button> <button id="convertColorsMinus" title="Reduce the number of colors. Minimal number is 3" class="icon-minus-squared"></button>
<button id="convertColorsPlus" title="Increase the number of colors. Minimal number is 256" class="icon-plus-squared"></button> <button id="convertColorsPlus" title="Increase the number of colors. Minimal number is 256" class="icon-plus-squared"></button>
<input id="convertColors" value="12" style="display: none;"/> <input id="convertColors" value="12" style="display: none;"/>
<button id="convertImageGrid" title="Toggle grid" class="icon-eye"></button> <button id="convertImageGrid" title="Toggle grid" class="icon-eye"></button>
@ -582,13 +579,13 @@
<label>Unassigned colors: </label><br> <label>Unassigned colors: </label><br>
</div> </div>
</div> </div>
<div id="brushesPanel" class="dialog" style="display: none"> <div id="brushesPanel" class="dialog" style="display: none">
<div id="brushesButtons"> <div id="brushesButtons">
<button id="brushHill" title="Click on the map to place a Hill" class="feature noicon radio pressed">H</button> <button id="brushHill" title="Click on the map to place a Hill" class="feature noicon radio pressed">H</button>
<button id="brushPit" title="Click on the map to place a Pit" class="feature noicon radio">P</button> <button id="brushPit" title="Click on the map to place a Pit" class="feature noicon radio">P</button>
<button id="brushRange" title="Select two points to place a Range" class="feature noicon radio">R</button> <button id="brushRange" title="Select two points to place a Range" class="feature noicon radio">R</button>
<button id="brushTrough" title="Select two points to place a Trought" class="feature noicon radio">T</button> <button id="brushTrough" title="Select two points to place a Trought" class="feature noicon radio">T</button>
<button id="brushElevate" title="Click and drag the map to increase cells elevation" class="noicon radio">↥</button> <button id="brushElevate" title="Click and drag the map to increase cells elevation" class="noicon radio">↥</button>
<button id="brushDepress" title="Click and drag the map to decrease cells elevation" class="noicon radio">↧</button> <button id="brushDepress" title="Click and drag the map to decrease cells elevation" class="noicon radio">↧</button>
<button id="brushAlign" title="Click and drag the map to align cells elevation" class="noicon radio">=</button> <button id="brushAlign" title="Click and drag the map to align cells elevation" class="noicon radio">=</button>
@ -625,7 +622,7 @@
<button id="brushClear" title="Clear all height" class="icon-eraser"></button> <button id="brushClear" title="Clear all height" class="icon-eraser"></button>
</div> </div>
</div> </div>
<div id="perspectivePanel" class="dialog" style="display: none"> <div id="perspectivePanel" class="dialog" style="display: none">
<div id="lineSlider" class="slider"> <div id="lineSlider" class="slider">
<div id="lineHandle0" class="ui-slider-handle" data-value=240></div> <div id="lineHandle0" class="ui-slider-handle" data-value=240></div>
@ -665,7 +662,6 @@
<button id="countriesPercentage" title="Toggle percentage / absolut values views" class="icon-percent"></button> <button id="countriesPercentage" title="Toggle percentage / absolut values views" class="icon-percent"></button>
<button id="countriesRegenerate" title='Regenerate countries based on amended "Expansion" values' class="icon-cw"></button> <button id="countriesRegenerate" title='Regenerate countries based on amended "Expansion" values' class="icon-cw"></button>
<button id="countriesManually" title="Manually re-assign countries (select a country and drag the map)" class="icon-brush"></button> <button id="countriesManually" title="Manually re-assign countries (select a country and drag the map)" class="icon-brush"></button>
<input type="file" accept=".txt,.csv" id="burgsListToLoad" style="display: none;">
<div id="countriesManuallyButtons" style="display: none"> <div id="countriesManuallyButtons" style="display: none">
<button id="countriesManuallyComplete" title="Apply assignment" class="icon-check"></button> <button id="countriesManuallyComplete" title="Apply assignment" class="icon-check"></button>
<button id="countriesAddM" title="Add country" class="icon-plus"></button> <button id="countriesAddM" title="Add country" class="icon-plus"></button>
@ -678,7 +674,7 @@
<button id="countriesRandomize" title='Randomize countries "Expansion" value' class="icon-shuffle"></button> <button id="countriesRandomize" title='Randomize countries "Expansion" value' class="icon-shuffle"></button>
<button id="countriesAddR" title="Add country" class="icon-plus"></button> <button id="countriesAddR" title="Add country" class="icon-plus"></button>
<label title="Distance to a consider a land as neutral" class="italic">Neutral distance:</label> <label title="Distance to a consider a land as neutral" class="italic">Neutral distance:</label>
<input id="countriesNeutral" onchange="this.title = this.value" type="range" min="1" max="500" value="200"> <input id="countriesNeutral" onchange="this.title = this.value" type="range" min="1" max="500" value="200">
</div> </div>
<button id="countriesAddG" title="Add country" class="icon-plus"></button> <button id="countriesAddG" title="Add country" class="icon-plus"></button>
<button id="countriesExport" title="Save country-related data as a text file (.csv)" class="icon-download"></button> <button id="countriesExport" title="Save country-related data as a text file (.csv)" class="icon-download"></button>
@ -725,7 +721,7 @@
<option value="km" selected>Kilometer</option> <option value="km" selected>Kilometer</option>
<option value="mi">Mile</option> <option value="mi">Mile</option>
<option value="lg">League</option> <option value="lg">League</option>
<option value="vr">Versta</option> <option value="vr">Versta</option>
<option value="custom_name">Custom name</option> <option value="custom_name">Custom name</option>
</select> </select>
</div> </div>
@ -759,15 +755,15 @@
</div> </div>
</div> </div>
<div id="scaleBottom"> <div id="scaleBottom">
<button id="toggleScaleBar" title="Click to toggle scale bar" class="icon-align-center"></button> <button id="toggleScaleBar" title="Click to toggle scale bar" class="icon-align-center"></button>
<button title="Click to toggle ruler" class="icon-eye-off" onclick='$("#ruler").fadeToggle()'></button> <button title="Click to toggle ruler" class="icon-eye-off" onclick='$("#ruler").fadeToggle()'></button>
<button id="addOpisometer" title="Drag the map to measure curve length with opisometer" class="icon-brush"></button> <button id="addOpisometer" title="Drag the map to measure curve length with opisometer" class="icon-brush"></button>
<button id="addRuler" title="Click to place additional ruler on map" class="icon-resize-horizontal"></button> <button id="addRuler" title="Click to place additional ruler on map" class="icon-resize-horizontal"></button>
<button id="addPlanimeter" title="Drag the map to determine a polygon area with planimeter" class="icon-edit"></button> <button id="addPlanimeter" title="Drag the map to determine a polygon area with planimeter" class="icon-edit"></button>
<button id="removeAllRulers" title="Remove all rulers from the map. Click on ruler label to remove ruler separately" class="icon-trash"></button> <button id="removeAllRulers" title="Remove all rulers from the map. Click on ruler label to remove ruler separately" class="icon-trash"></button>
</div> </div>
</div> </div>
<div id="alert" title="Warning!" style="display: none"> <div id="alert" title="Warning!" style="display: none">
<p id="alertMessage">Warning!</p> <p id="alertMessage">Warning!</p>
</div> </div>
@ -779,5 +775,12 @@
Type: <span id="feature">no</span> Type: <span id="feature">no</span>
</div> </div>
<script src="script.js?version=0.55992b"></script> <div id="fileInputs">
</body> <input type="file" accept=".map" id="mapToLoad">
<input type="file" accept=".txt,.csv" id="burgsListToLoad">
<input type="file" accept="image/*" id="imageToLoad">
<input type="file" accept=".txt" id="templateToLoad">
</div>
<script src="script.js?version=0.55993b"></script>
</body>

781
script.js
View file

File diff suppressed because it is too large Load diff