mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
tooltip - get shortcut from its own attribute
This commit is contained in:
Azgaar
parent
f3a755976a
commit
c2640bcada
7 changed files with 155 additions and 92 deletions
14
index.css
14
index.css
|
|
@ -347,6 +347,20 @@ text.drag {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
#optionsTrigger {
|
||||
padding: 0.6em 0.45em;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#optionsTrigger {
|
||||
font-size: 2em;
|
||||
padding: 0;
|
||||
width: 1.3em;
|
||||
height: 1.6em;
|
||||
border: solid 1px #5e4fa2;
|
||||
}
|
||||
}
|
||||
|
||||
#options {
|
||||
position: absolute;
|
||||
font-family: Consolas, monospace;
|
||||
|
|
|
|||
179
index.html
179
index.html
|
|
@ -288,17 +288,18 @@
|
|||
<button
|
||||
id="optionsTrigger"
|
||||
data-t="tipOptionsTrigger"
|
||||
data-tip="Click to show the Menu. Shortcut: Tab"
|
||||
data-tip="Click to show the Menu"
|
||||
data-shortcut="Tab"
|
||||
class="options glow"
|
||||
onclick="showOptions(event)"
|
||||
style="padding: 0.6em 0.45em"
|
||||
>
|
||||
►
|
||||
</button>
|
||||
<button
|
||||
id="regenerate"
|
||||
data-t="tipRegenerate"
|
||||
data-tip="Click to generate a new map. Shortcut: F2"
|
||||
data-tip="Click to generate a new map"
|
||||
data-shortcut="F2"
|
||||
onclick="regeneratePrompt()"
|
||||
class="options"
|
||||
style="display: none"
|
||||
|
|
@ -311,7 +312,14 @@
|
|||
<div class="drag-trigger" data-t="optionsDragTrigger" data-tip="Drag to move the Menu"></div>
|
||||
|
||||
<div class="tab">
|
||||
<button id="optionsHide" data-t="optionsHide" data-tip="Click to hide the Menu. Shortcut: Tab or Esc" class="options" onclick="hideOptions(event)">
|
||||
<button
|
||||
id="optionsHide"
|
||||
data-t="optionsHide"
|
||||
data-tip="Click to hide the Menu"
|
||||
data-shortcut="Tab or Esc"
|
||||
class="options"
|
||||
onclick="hideOptions(event)"
|
||||
>
|
||||
◄
|
||||
</button>
|
||||
<button id="layersTab" data-t="layersTab" data-tip="Click to change map layers" class="options active"><t data-t="layers">Layers</t></button>
|
||||
|
|
@ -358,7 +366,8 @@
|
|||
<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. Ctrl + click to edit layer style. Shortcut: X"
|
||||
data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="X"
|
||||
class="buttonoff"
|
||||
onclick="toggleTexture(event)"
|
||||
>
|
||||
|
|
@ -366,7 +375,8 @@
|
|||
</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"
|
||||
data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="H"
|
||||
class="buttonoff"
|
||||
onclick="toggleHeight(event)"
|
||||
>
|
||||
|
|
@ -374,7 +384,8 @@
|
|||
</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"
|
||||
data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="B"
|
||||
class="buttonoff"
|
||||
onclick="toggleBiomes(event)"
|
||||
>
|
||||
|
|
@ -382,7 +393,8 @@
|
|||
</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"
|
||||
data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="E"
|
||||
class="buttonoff"
|
||||
onclick="toggleCells(event)"
|
||||
>
|
||||
|
|
@ -390,7 +402,8 @@
|
|||
</li>
|
||||
<li
|
||||
id="toggleGrid"
|
||||
data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type. Shortcut: G"
|
||||
data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
|
||||
data-shortcut="G"
|
||||
class="buttonoff"
|
||||
onclick="toggleGrid(event)"
|
||||
>
|
||||
|
|
@ -398,7 +411,8 @@
|
|||
</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"
|
||||
data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="O"
|
||||
class="buttonoff"
|
||||
onclick="toggleCoordinates(event)"
|
||||
>
|
||||
|
|
@ -406,7 +420,8 @@
|
|||
</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"
|
||||
data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="W"
|
||||
class="buttonoff"
|
||||
onclick="toggleCompass(event)"
|
||||
>
|
||||
|
|
@ -414,14 +429,16 @@
|
|||
</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"
|
||||
data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-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. Ctrl + click to edit layer style. Shortcut: F"
|
||||
data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="F"
|
||||
class="buttonoff"
|
||||
onclick="toggleRelief(event)"
|
||||
>
|
||||
|
|
@ -429,7 +446,8 @@
|
|||
</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"
|
||||
data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="R"
|
||||
class="buttonoff"
|
||||
onclick="toggleReligions(event)"
|
||||
>
|
||||
|
|
@ -437,7 +455,8 @@
|
|||
</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"
|
||||
data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="C"
|
||||
class="buttonoff"
|
||||
onclick="toggleCultures(event)"
|
||||
>
|
||||
|
|
@ -445,14 +464,16 @@
|
|||
</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"
|
||||
data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-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. Ctrl + click to edit layer style. Shortcut: P"
|
||||
data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="P"
|
||||
class="buttonoff"
|
||||
onclick="toggleProvinces(event)"
|
||||
>
|
||||
|
|
@ -460,7 +481,8 @@
|
|||
</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"
|
||||
data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="Z"
|
||||
class="buttonoff"
|
||||
onclick="toggleZones(event)"
|
||||
>
|
||||
|
|
@ -468,21 +490,24 @@
|
|||
</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"
|
||||
data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-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. Ctrl + click to edit layer style. Shortcut: U"
|
||||
data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-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. Ctrl + click to edit layer style. Shortcut: T"
|
||||
data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="T"
|
||||
class="buttonoff"
|
||||
onclick="toggleTemp(event)"
|
||||
>
|
||||
|
|
@ -490,7 +515,8 @@
|
|||
</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: N"
|
||||
data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="N"
|
||||
class="buttonoff"
|
||||
onclick="togglePopulation(event)"
|
||||
>
|
||||
|
|
@ -498,7 +524,8 @@
|
|||
</li>
|
||||
<li
|
||||
id="toggleIce"
|
||||
data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: J"
|
||||
data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="J"
|
||||
class="buttonoff"
|
||||
onclick="toggleIce(event)"
|
||||
>
|
||||
|
|
@ -506,7 +533,8 @@
|
|||
</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"
|
||||
data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="A"
|
||||
class="buttonoff"
|
||||
onclick="togglePrec(event)"
|
||||
>
|
||||
|
|
@ -514,7 +542,8 @@
|
|||
</li>
|
||||
<li
|
||||
id="toggleEmblems"
|
||||
data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Y"
|
||||
data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="Y"
|
||||
class="buttonoff"
|
||||
onclick="toggleEmblems(event)"
|
||||
>
|
||||
|
|
@ -522,21 +551,24 @@
|
|||
</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"
|
||||
data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-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. Ctrl + click to edit layer style. Shortcut: I"
|
||||
data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="I"
|
||||
onclick="toggleIcons(event)"
|
||||
>
|
||||
<u>I</u>cons
|
||||
</li>
|
||||
<li
|
||||
id="toggleMilitary"
|
||||
data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: M"
|
||||
data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="M"
|
||||
class="buttonoff"
|
||||
onclick="toggleMilitary(event)"
|
||||
>
|
||||
|
|
@ -544,7 +576,8 @@
|
|||
</li>
|
||||
<li
|
||||
id="toggleMarkers"
|
||||
data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: K"
|
||||
data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
|
||||
data-shortcut="K"
|
||||
class="buttonoff"
|
||||
onclick="toggleMarkers(event)"
|
||||
>
|
||||
|
|
@ -552,7 +585,8 @@
|
|||
</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)"
|
||||
data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
|
||||
data-shortcut="= (equal sign)"
|
||||
class="buttonoff"
|
||||
onclick="toggleRulers(event)"
|
||||
>
|
||||
|
|
@ -560,7 +594,8 @@
|
|||
</li>
|
||||
<li
|
||||
id="toggleScaleBar"
|
||||
data-tip="Scale Bar: click to toggle. Ctrl + click to edit style. Shortcut: / (slash)"
|
||||
data-tip="Scale Bar: click to toggle. Ctrl + click to edit style"
|
||||
data-shortcut="/ (slash sign)"
|
||||
onclick="toggleScaleBar(event)"
|
||||
class="solid"
|
||||
>
|
||||
|
|
@ -1676,27 +1711,27 @@
|
|||
<div id="toolsContent" class="tabcontent">
|
||||
<p>Click to configure:</p>
|
||||
<div>
|
||||
<button id="editHeightmapButton" data-tip="Click to open Heightmap customization menu. Shortcut: Shift + H">Heightmap</button>
|
||||
<button id="editBiomesButton" data-tip="Click to open Biomes Editor. Shortcut: Shift + B">Biomes</button>
|
||||
<button id="editStatesButton" data-tip="Click to open States Editor. Shortcut: Shift + S">States</button>
|
||||
<button id="editProvincesButton" data-tip="Click to open Provinces Editor. Shortcut: Shift + P">Provinces</button>
|
||||
<button id="editDiplomacyButton" data-tip="Click to open Diplomatical relationships Editor. Shortcut: Shift + D">Diplomacy</button>
|
||||
<button id="editCulturesButton" data-tip="Click to open Cultures Editor. Shortcut: Shift + C">Cultures</button>
|
||||
<button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor. Shortcut: Shift + N">Namesbase</button>
|
||||
<button id="editZonesButton" data-tip="Click to open Zones Editor. Shortcut: Shift + Z">Zones</button>
|
||||
<button id="editReligions" data-tip="Click to open Religions Editor. Shortcut: Shift + R">Religions</button>
|
||||
<button id="editEmblemButton" data-tip="Click to open Emblem Editor. Shortcut: Shift + Y">Emblems</button>
|
||||
<button id="editUnitsButton" data-tip="Click to open Units Editor. Shortcut: Shift + Q">Units</button>
|
||||
<button id="editNotesButton" data-tip="Click to open Notes Editor. Shortcut: Shift + O">Notes</button>
|
||||
<button id="editHeightmapButton" data-tip="Click to open Heightmap customization menu" data-shortcut="Shift + H">Heightmap</button>
|
||||
<button id="editBiomesButton" data-tip="Click to open Biomes Editor" data-shortcut="Shift + B">Biomes</button>
|
||||
<button id="editStatesButton" data-tip="Click to open States Editor" data-shortcut="Shift + S">States</button>
|
||||
<button id="editProvincesButton" data-tip="Click to open Provinces Editor" data-shortcut="Shift + P">Provinces</button>
|
||||
<button id="editDiplomacyButton" data-tip="Click to open Diplomatical relationships Editor" data-shortcut="Shift + D">Diplomacy</button>
|
||||
<button id="editCulturesButton" data-tip="Click to open Cultures Editor" data-shortcut="Shift + C">Cultures</button>
|
||||
<button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor" data-shortcut="Shift + N">Namesbase</button>
|
||||
<button id="editZonesButton" data-tip="Click to open Zones Editor" data-shortcut="Shift + Z">Zones</button>
|
||||
<button id="editReligions" data-tip="Click to open Religions Editor" data-shortcut="Shift + R">Religions</button>
|
||||
<button id="editEmblemButton" data-tip="Click to open Emblem Editor" data-shortcut="Shift + Y">Emblems</button>
|
||||
<button id="editUnitsButton" data-tip="Click to open Units Editor" data-shortcut="Shift + Q">Units</button>
|
||||
<button id="editNotesButton" data-tip="Click to open Notes Editor" data-shortcut="Shift + O">Notes</button>
|
||||
</div>
|
||||
|
||||
<p>Click to overview:</p>
|
||||
<div>
|
||||
<button id="overviewBurgsButton" data-tip="Click to open Burgs Overview. Shortcut: Shift + T">Burgs</button>
|
||||
<button id="overviewRiversButton" data-tip="Click to open Rivers Overview. Shortcut: Shift + V">Rivers</button>
|
||||
<button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview. Shortcut: Shift + M">Military</button>
|
||||
<button id="overviewMarkersButton" data-tip="Click to open Markers Overview. Shortcut: Shift + K">Markers</button>
|
||||
<button id="overviewCellsButton" data-tip="Click to open Cell details view. Shortcut: Shift + E">Cells</button>
|
||||
<button id="overviewBurgsButton" data-tip="Click to open Burgs Overview" data-shortcut="Shift + T">Burgs</button>
|
||||
<button id="overviewRiversButton" data-tip="Click to open Rivers Overview" data-shortcut="Shift + V">Rivers</button>
|
||||
<button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview" data-shortcut="Shift + M">Military</button>
|
||||
<button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">Markers</button>
|
||||
<button id="overviewCellsButton" data-tip="Click to open Cell details view" data-shortcut="Shift + E">Cells</button>
|
||||
</div>
|
||||
|
||||
<p>Click to regenerate:</p>
|
||||
|
|
@ -1727,11 +1762,11 @@
|
|||
|
||||
<p>Click to add:</p>
|
||||
<div id="addFeature">
|
||||
<button id="addBurgTool" data-tip="Click on map to place a burg. Hold <kbd>Shift</kbd> to add multiple. Shortcut: Shift + 1">Burg</button>
|
||||
<button id="addLabel" data-tip="Click on map to place label. Hold Shift to add multiple. Shortcut: Shift + 2">Label</button>
|
||||
<button id="addRiver" data-tip="Click on map to place a river. Hold Shift to add multiple. Shortcut: Shift + 3">River</button>
|
||||
<button id="addRoute" data-tip="Click on map to place a route. Shortcut: Shift + 4">Route</button>
|
||||
<button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple. Shortcut: Shift + 5">Marker</button>
|
||||
<button id="addBurgTool" data-tip="Click on map to place a burg. Hold Shift to add multiple" data-shortcut="Shift + 1">Burg</button>
|
||||
<button id="addLabel" data-tip="Click on map to place label. Hold Shift to add multiple" data-shortcut="Shift + 2">Label</button>
|
||||
<button id="addRiver" data-tip="Click on map to place a river. Hold Shift to add multiple" data-shortcut="Shift + 3">River</button>
|
||||
<button id="addRoute" data-tip="Click on map to place a route" data-shortcut="Shift + 4">Route</button>
|
||||
<button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple" data-shortcut="Shift + 5">Marker</button>
|
||||
</div>
|
||||
|
||||
<p>Click to create a new map:</p>
|
||||
|
|
@ -1879,11 +1914,11 @@
|
|||
</div>
|
||||
|
||||
<div id="sticked">
|
||||
<button id="newMapButton" data-tip="Generate a new map based on options. Shortcut: F2">New Map</button>
|
||||
<button id="newMapButton" data-tip="Generate a new map based on options" data-shortcut="F2">New Map</button>
|
||||
<button id="exportButton" data-tip="Select format to download image or export map data">Export</button>
|
||||
<button id="saveButton" data-tip="Save fully-functional map in .map format">Save</button>
|
||||
<button id="loadButton" data-tip="Load fully-functional map in .map format">Load</button>
|
||||
<button id="zoomReset" data-tip="Reset map zoom. Shortcut: 0">Reset Zoom</button>
|
||||
<button id="zoomReset" data-tip="Reset map zoom" data-shortcut="0 (zero)">Reset Zoom</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2039,7 +2074,7 @@
|
|||
|
||||
<button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
|
||||
<button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
|
||||
<button id="labelRemoveSingle" data-tip="Remove the label. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="labelRemoveSingle" data-tip="Remove the label" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
|
||||
<div id="riverEditor" class="dialog" style="display: none">
|
||||
|
|
@ -2098,7 +2133,7 @@
|
|||
<button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
|
||||
<button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
|
||||
<button id="riverLegend" data-tip="Edit free text notes (legend) for the river" class="icon-edit"></button>
|
||||
<button id="riverRemove" data-tip="Remove river. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="riverRemove" data-tip="Remove river" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2219,7 +2254,7 @@
|
|||
<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="routeNew" data-tip="Create new route clicking on map" class="icon-map-pin"></button>
|
||||
<button id="routeRemove" data-tip="Remove route. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="routeRemove" data-tip="Remove route" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
|
||||
<div id="iceEditor" class="dialog" style="display: none">
|
||||
|
|
@ -2227,7 +2262,7 @@
|
|||
<button id="iceRandomize" data-tip="Randomize Iceberg shape" class="icon-shuffle"></button>
|
||||
<input id="iceSize" data-tip="Change Iceberg size" type="range" min=".05" max="1" step=".01" />
|
||||
<button id="iceNew" data-tip="Add an Iceberg (click on map)" class="icon-plus"></button>
|
||||
<button id="iceRemove" data-tip="Remove the element. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="iceRemove" data-tip="Remove the element" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
|
||||
<div id="coastlineEditor" class="dialog" style="display: none">
|
||||
|
|
@ -2414,7 +2449,7 @@
|
|||
<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="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button>
|
||||
<button id="reliefRemove" data-tip="Remove selected relief icon or icon type. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="reliefRemove" data-tip="Remove selected relief icon or icon type" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2560,7 +2595,7 @@
|
|||
<button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
|
||||
<button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
|
||||
<button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
|
||||
<button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="burgRemove" data-tip="Remove non-capital burg" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2619,7 +2654,7 @@
|
|||
<button id="markerNotes" data-tip="Edit place legend (notes)" class="icon-edit"></button>
|
||||
<button id="markerLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
|
||||
<button id="markerAdd" data-tip="Add additional marker of that type" class="icon-plus"></button>
|
||||
<button id="markerRemove" data-tip="Remove the marker. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="markerRemove" data-tip="Remove the marker" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2648,7 +2683,7 @@
|
|||
<button id="regimentAttach" data-tip="Attach regiment to another one (include this regiment to another one)" class="icon-attach"></button>
|
||||
<button id="regimentRegenerateLegend" data-tip="Regenerate legend for this regiment" class="icon-retweet"></button>
|
||||
<button id="regimentLegend" data-tip="Edit free text notes (legend) for this regiment" class="icon-edit"></button>
|
||||
<button id="regimentRemove" data-tip="Remove regiment. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
<button id="regimentRemove" data-tip="Remove regiment" data-shortcut="Delete" class="icon-trash fastDelete"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2863,7 +2898,7 @@
|
|||
</div>
|
||||
|
||||
<div id="brushesSliders" style="display: none">
|
||||
<div data-tip="Change brush size. Shortcut: + (increase), – (decrease)" style="padding-bottom: 1px">
|
||||
<div data-tip="Change brush size" data-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="1" max="99" value="25" />
|
||||
<input
|
||||
|
|
@ -3058,7 +3093,7 @@
|
|||
<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>
|
||||
<div id="biomesManuallyButtons" style="display: none">
|
||||
<label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
|
||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
|
||||
>Brush radius:
|
||||
<input
|
||||
id="biomesManuallyBrush"
|
||||
|
|
@ -3226,7 +3261,7 @@
|
|||
|
||||
<button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
|
||||
<div id="provincesManuallyButtons" style="display: none">
|
||||
<label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
|
||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
|
||||
>Brush size:
|
||||
<input
|
||||
id="provincesManuallyBrush"
|
||||
|
|
@ -3429,7 +3464,7 @@
|
|||
|
||||
<button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
|
||||
<div id="zonesManuallyButtons" style="display: none">
|
||||
<label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
|
||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
|
||||
>Brush:
|
||||
<input
|
||||
id="zonesBrush"
|
||||
|
|
@ -3451,7 +3486,7 @@
|
|||
><br />
|
||||
<button id="zonesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
|
||||
<button id="zonesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
|
||||
<button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging. Shortcut: ctrl" class="icon-eraser"></button>
|
||||
<button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging" data-shortcut="Ctrl" class="icon-eraser"></button>
|
||||
</div>
|
||||
|
||||
<button id="zonesAdd" data-tip="Add new zone layer" class="icon-plus"></button>
|
||||
|
|
@ -3512,7 +3547,7 @@
|
|||
|
||||
<button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
|
||||
<div id="religionsManuallyButtons" style="display: none">
|
||||
<label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
|
||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
|
||||
>Brush size:
|
||||
<input
|
||||
id="religionsManuallyBrush"
|
||||
|
|
@ -4212,9 +4247,9 @@
|
|||
<div id="saveMapData" style="display: none" class="dialog">
|
||||
<div style="margin-top: 0.3em">
|
||||
<strong>Save map to</strong>
|
||||
<button onclick="dowloadMap()" data-tip="Download .map file to your local disk. Shortcut: Ctrl + S">machine</button>
|
||||
<button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox. Shortcut: Ctrl + C">dropbox</button>
|
||||
<button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable. Shortcut: F6">browser</button>
|
||||
<button onclick="dowloadMap()" data-tip="Download .map file to your local disk" data-shortcut="Ctrl + S">machine</button>
|
||||
<button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox" data-shortcut="Ctrl + C">dropbox</button>
|
||||
<button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable" data-shortcut="F6">browser</button>
|
||||
</div>
|
||||
<p>
|
||||
Maps are saved in <i>.map</i> format, that can be loaded back via the <i>Load</i> in menu. There is no way to restore the progress if file is lost.
|
||||
|
|
|
|||
3
main.js
3
main.js
|
|
@ -10,6 +10,9 @@ const TIME = DEBUG || !PRODUCTION;
|
|||
const WARN = true;
|
||||
const ERROR = true;
|
||||
|
||||
// detect device
|
||||
const MOBILE = window.innerWidth < 600 || navigator.userAgentData?.mobile;
|
||||
|
||||
if (PRODUCTION && "serviceWorker" in navigator) {
|
||||
window.addEventListener("load", () => {
|
||||
navigator.serviceWorker.register("./sw.js").catch(err => {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function insertEditorHtml() {
|
|||
<button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
|
||||
<button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
|
||||
<div id="culturesManuallyButtons" style="display: none">
|
||||
<label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic">Brush size:
|
||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
|
||||
<input
|
||||
id="culturesManuallyBrush"
|
||||
oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ function insertEditorHtml() {
|
|||
|
||||
<button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
|
||||
<div id="statesManuallyButtons" style="display: none">
|
||||
<label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
|
||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
|
||||
>Brush size:
|
||||
<input
|
||||
id="statesManuallyBrush"
|
||||
|
|
|
|||
|
|
@ -21,18 +21,22 @@ document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
|
|||
document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
|
||||
document.getElementById("exitCustomization").addEventListener("mousemove", showDataTip);
|
||||
|
||||
function tip(tip = "Tip is undefined", main, type, time) {
|
||||
const tipBackgroundMap = {
|
||||
info: "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)",
|
||||
success: "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)",
|
||||
warn: "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)",
|
||||
error: "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)"
|
||||
};
|
||||
|
||||
function tip(tip = "Tip is undefined", main = false, type = "info", time = 0) {
|
||||
tooltip.innerHTML = tip;
|
||||
tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)";
|
||||
if (type === "error") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)";
|
||||
else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)";
|
||||
else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
|
||||
tooltip.style.background = tipBackgroundMap[type];
|
||||
|
||||
if (main) {
|
||||
tooltip.dataset.main = tip;
|
||||
tooltip.dataset.color = tooltip.style.background;
|
||||
}
|
||||
if (time) setTimeout(() => clearMainTip(), time);
|
||||
if (time) setTimeout(clearMainTip, time);
|
||||
}
|
||||
|
||||
function showMainTip() {
|
||||
|
|
@ -47,11 +51,16 @@ function clearMainTip() {
|
|||
}
|
||||
|
||||
// show tip at the bottom of the screen, consider possible translation
|
||||
function showDataTip(e) {
|
||||
if (!e.target) return;
|
||||
let dataTip = e.target.dataset.tip;
|
||||
if (!dataTip && e.target.parentNode.dataset.tip) dataTip = e.target.parentNode.dataset.tip;
|
||||
function showDataTip(event) {
|
||||
if (!event.target) return;
|
||||
|
||||
let dataTip = event.target.dataset.tip;
|
||||
if (!dataTip && event.target.parentNode.dataset.tip) dataTip = event.target.parentNode.dataset.tip;
|
||||
if (!dataTip) return;
|
||||
|
||||
const shortcut = event.target.dataset.shortcut;
|
||||
if (shortcut && !MOBILE) dataTip += `. Shortcut: ${shortcut}`;
|
||||
|
||||
//const tooltip = lang === "en" ? dataTip : translate(e.target.dataset.t || e.target.parentNode.dataset.t, dataTip);
|
||||
tip(dataTip);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,16 +73,16 @@ function editWorld() {
|
|||
const eqD = ((graphHeight / 2) * 100) / size;
|
||||
|
||||
calculateMapCoordinates();
|
||||
const mc = mapCoordinates; // shortcut
|
||||
const scale = +distanceScaleInput.value,
|
||||
unit = distanceUnitInput.value;
|
||||
const mc = mapCoordinates;
|
||||
const scale = +distanceScaleInput.value;
|
||||
const unit = distanceUnitInput.value;
|
||||
const meridian = toKilometer(eqD * 2 * scale);
|
||||
document.getElementById("mapSize").innerHTML = /* html */ `${graphWidth}x${graphHeight}`;
|
||||
document.getElementById("mapSizeFriendly").innerHTML = /* html */ `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
|
||||
document.getElementById("mapSize").innerHTML = `${graphWidth}x${graphHeight}`;
|
||||
document.getElementById("mapSizeFriendly").innerHTML = `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
|
||||
document.getElementById("meridianLength").innerHTML = rn(eqD * 2);
|
||||
document.getElementById("meridianLengthFriendly").innerHTML = /* html */ `${rn(eqD * 2 * scale)} ${unit}`;
|
||||
document.getElementById("meridianLengthFriendly").innerHTML = `${rn(eqD * 2 * scale)} ${unit}`;
|
||||
document.getElementById("meridianLengthEarth").innerHTML = meridian ? " = " + rn(meridian / 200) + "%🌏" : "";
|
||||
document.getElementById("mapCoordinates").innerHTML = /* html */ `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
|
||||
document.getElementById("mapCoordinates").innerHTML = `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
|
||||
|
||||
function toKilometer(v) {
|
||||
if (unit === "km") return v;
|
||||
|
|
@ -92,9 +92,11 @@ function editWorld() {
|
|||
return 0; // 0 if distanceUnitInput is a custom unit
|
||||
}
|
||||
|
||||
// parse latitude value
|
||||
function lat(lat) {
|
||||
return lat > 0 ? Math.abs(rn(lat)) + "°N" : Math.abs(rn(lat)) + "°S";
|
||||
} // parse latitude value
|
||||
}
|
||||
|
||||
const area = d3.geoGraticule().extent([
|
||||
[mc.lonW, mc.latN],
|
||||
[mc.lonE, mc.latS]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue