mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
refactor dialogs to be mobile-friendly
This commit is contained in:
Azgaar
parent
8b1778cb93
commit
8a9a29a9d3
16 changed files with 402 additions and 373 deletions
63
index.css
63
index.css
|
|
@ -929,7 +929,7 @@ fieldset {
|
|||
padding: 0.1em 0.5em;
|
||||
float: left;
|
||||
font-size: 1.2em;
|
||||
font-family: Copperplate, monospace;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#brushesButtons > button {
|
||||
|
|
@ -1318,12 +1318,13 @@ div.slider .ui-slider-handle {
|
|||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.dialog::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: transparent;
|
||||
@media screen and (max-width: 600px) {
|
||||
.table {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog::-webkit-scrollbar,
|
||||
#alertMessage::-webkit-scrollbar,
|
||||
.table::-webkit-scrollbar,
|
||||
.matrix-table::-webkit-scrollbar {
|
||||
|
|
@ -1347,24 +1348,23 @@ div.slider .ui-slider-handle {
|
|||
background: #666;
|
||||
}
|
||||
|
||||
.overflow {
|
||||
.dialog {
|
||||
max-width: 93vw;
|
||||
overflow: auto;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.overflow > div {
|
||||
.dialog > div {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
div.header > div {
|
||||
div.header {
|
||||
display: grid;
|
||||
width: 0;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
display: inline-block;
|
||||
position: sticky;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
div.header > div:first-child {
|
||||
margin-left: 1.8em;
|
||||
}
|
||||
|
||||
.sortable {
|
||||
|
|
@ -1663,11 +1663,6 @@ div.states > div.biomeArea {
|
|||
width: 5em;
|
||||
}
|
||||
|
||||
#militaryHeader > div,
|
||||
#regimentsHeader > div {
|
||||
width: 5.2em;
|
||||
}
|
||||
|
||||
#militaryBody div.states > input {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
|
@ -1986,12 +1981,9 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
div.textual select,
|
||||
div.textual textarea {
|
||||
font-family: Copperplate, monospace;
|
||||
}
|
||||
|
||||
div.textual textarea,
|
||||
div.textual input {
|
||||
font-family: Copperplate, monospace;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
div.textual fieldset {
|
||||
|
|
@ -2006,7 +1998,7 @@ div.textual span,
|
|||
}
|
||||
|
||||
#namesbaseExamples {
|
||||
font-family: Copperplate, monospace;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -2071,7 +2063,7 @@ div.textual span,
|
|||
outline: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.6em;
|
||||
font-family: Copperplate, monospace;
|
||||
font-family: monospace;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dedede;
|
||||
color: #000;
|
||||
|
|
@ -2100,6 +2092,7 @@ svg.button {
|
|||
#reliefIconsDiv {
|
||||
margin-top: 2px;
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#reliefIconsDiv svg {
|
||||
|
|
@ -2345,17 +2338,6 @@ svg.button {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
#collapsible,
|
||||
#options {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#options {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -2368,8 +2350,3 @@ svg.button {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img {}
|
||||
|
||||
div {}
|
||||
428
index.html
428
index.html
|
|
@ -1896,115 +1896,117 @@
|
|||
|
||||
<div id="dialogs">
|
||||
<div id="worldConfigurator" class="dialog stable" style="display: none">
|
||||
<div id="worldControls">
|
||||
<div>
|
||||
<i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
|
||||
<label data-tip="Set temperature at equator">
|
||||
<i>Equator:</i>
|
||||
<input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50" />°C =
|
||||
<span id="temperatureEquatorF"></span>°F
|
||||
<input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-50" max="50" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
|
||||
<label data-tip="Set temperature near poles">
|
||||
<i>Poles:</i>
|
||||
<input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C = <span id="temperaturePoleF"></span>°F
|
||||
<input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<i data-locked="0" id="lock_mapSize" class="icon-lock-open"></i>
|
||||
<label data-tip="Set map size relative to the world size">
|
||||
<i>Map size:</i>
|
||||
<input id="mapSizeInput" data-stored="mapSize" type="number" min="1" max="100" />%
|
||||
<input id="mapSizeOutput" data-stored="mapSize" type="range" min="1" max="100" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<i data-locked="0" id="lock_latitude" class="icon-lock-open"></i>
|
||||
<label data-tip="Set a North-South map shift">
|
||||
<i>Latitudes:</i>
|
||||
<input id="latitudeInput" data-stored="latitude" type="number" min="0" max="100" step="1" />
|
||||
<br /><i>N</i><input id="latitudeOutput" data-stored="latitude" type="range" min="0" max="100" step="1" style="width: 10.3em" /><i>S</i>
|
||||
</label>
|
||||
<div>
|
||||
<div id="worldControls">
|
||||
<div>
|
||||
<i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
|
||||
<label data-tip="Set temperature at equator">
|
||||
<i>Equator:</i>
|
||||
<input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50" />°C =
|
||||
<span id="temperatureEquatorF"></span>°F
|
||||
<input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-50" max="50" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
|
||||
<label data-tip="Set temperature near poles">
|
||||
<i>Poles:</i>
|
||||
<input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C = <span id="temperaturePoleF"></span>°F
|
||||
<input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<i data-locked="0" id="lock_mapSize" class="icon-lock-open"></i>
|
||||
<label data-tip="Set map size relative to the world size">
|
||||
<i>Map size:</i>
|
||||
<input id="mapSizeInput" data-stored="mapSize" type="number" min="1" max="100" />%
|
||||
<input id="mapSizeOutput" data-stored="mapSize" type="range" min="1" max="100" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<i data-locked="0" id="lock_latitude" class="icon-lock-open"></i>
|
||||
<label data-tip="Set a North-South map shift">
|
||||
<i>Latitudes:</i>
|
||||
<input id="latitudeInput" data-stored="latitude" type="number" min="0" max="100" step="1" />
|
||||
<br /><i>N</i><input id="latitudeOutput" data-stored="latitude" type="range" min="0" max="100" step="1" style="width: 10.3em" /><i>S</i>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
|
||||
<i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
|
||||
<i>Precipitation:</i>
|
||||
<input id="precInput" data-stored="prec" type="number" />%
|
||||
<input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50" />
|
||||
</label>
|
||||
</div>
|
||||
<div data-tip="Canvas size. Can be changed in general options on new map generation">
|
||||
<i>Canvas size:</i><br />
|
||||
<span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
|
||||
</div>
|
||||
<div>
|
||||
<i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br />
|
||||
<span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
|
||||
<span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
|
||||
<span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
|
||||
</div>
|
||||
<div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
|
||||
<i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
|
||||
<i>Precipitation:</i>
|
||||
<input id="precInput" data-stored="prec" type="number" />%
|
||||
<input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50" />
|
||||
</label>
|
||||
</div>
|
||||
<div data-tip="Canvas size. Can be changed in general options on new map generation">
|
||||
<i>Canvas size:</i><br />
|
||||
<span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
|
||||
</div>
|
||||
<div>
|
||||
<i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br />
|
||||
<span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
|
||||
<span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
|
||||
<span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
|
||||
</div>
|
||||
<div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
|
||||
<svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
|
||||
<defs>
|
||||
<linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop class="tempGradient90" offset="0%" stop-color="blue" />
|
||||
<stop class="tempGradient60" offset="16.6%" stop-color="green" />
|
||||
<stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
|
||||
<stop class="tempGradient0" offset="50%" stop-color="red" />
|
||||
<stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
|
||||
<stop class="tempGradient60" offset="83.3%" stop-color="green" />
|
||||
<stop class="tempGradient90" offset="100%" stop-color="blue" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="globeNoteLines">
|
||||
<line x1="5" x2="220" y1="0" y2="0" />
|
||||
<line x1="5" x2="220" y1="13" y2="13" />
|
||||
<line x1="5" x2="220" y1="49.5" y2="49.5" />
|
||||
<line x1="-5" x2="220" y1="100" y2="100" />
|
||||
<line x1="5" x2="220" y1="150.5" y2="150.5" />
|
||||
<line x1="5" x2="220" y1="187" y2="187" />
|
||||
<line x1="5" x2="220" y1="200" y2="200" />
|
||||
</g>
|
||||
<g id="globeWindArrows" data-tip="Click to change wind direction" stroke-linejoin="round">
|
||||
<circle cx="210" cy="6" r="12" />
|
||||
<path data-tier="0" d="M210,11 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 6)" />
|
||||
<circle cx="210" cy="30" r="12" />
|
||||
<path data-tier="1" d="M210,35 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(45 210 30)" />
|
||||
<circle cx="210" cy="75" r="12" />
|
||||
<path data-tier="2" d="M210,80 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 75)" />
|
||||
<circle cx="210" cy="130" r="12" />
|
||||
<path data-tier="3" d="M210,135 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 130)" />
|
||||
<circle cx="210" cy="173" r="12" />
|
||||
<path data-tier="4" d="M210,178 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(135 210 173)" />
|
||||
<circle cx="210" cy="194" r="12" />
|
||||
<path data-tier="5" d="M210,199 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 194)" />
|
||||
</g>
|
||||
<g id="globaAxisLabels">
|
||||
<text x="82%" y="-4%">wind</text>
|
||||
<text x="-8%" y="-4%">latitude</text>
|
||||
</g>
|
||||
<g id="globeLatLabels">
|
||||
<text x="-15" y="5">90°</text>
|
||||
<text x="-15" y="18">60°</text>
|
||||
<text x="-15" y="53">30°</text>
|
||||
<text x="-15" y="103">0°</text>
|
||||
<text x="-15" y="153">30°</text>
|
||||
<text x="-15" y="190">60°</text>
|
||||
<text x="-15" y="204">90°</text>
|
||||
</g>
|
||||
<circle id="globeOutline" cx="100" cy="100" r="100" />
|
||||
<line id="globeEquator" x1="1" x2="199" y1="100" y2="100" />
|
||||
<path id="globeGraticule" />
|
||||
<path id="globeArea" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
|
||||
<defs>
|
||||
<linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop class="tempGradient90" offset="0%" stop-color="blue" />
|
||||
<stop class="tempGradient60" offset="16.6%" stop-color="green" />
|
||||
<stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
|
||||
<stop class="tempGradient0" offset="50%" stop-color="red" />
|
||||
<stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
|
||||
<stop class="tempGradient60" offset="83.3%" stop-color="green" />
|
||||
<stop class="tempGradient90" offset="100%" stop-color="blue" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="globeNoteLines">
|
||||
<line x1="5" x2="220" y1="0" y2="0" />
|
||||
<line x1="5" x2="220" y1="13" y2="13" />
|
||||
<line x1="5" x2="220" y1="49.5" y2="49.5" />
|
||||
<line x1="-5" x2="220" y1="100" y2="100" />
|
||||
<line x1="5" x2="220" y1="150.5" y2="150.5" />
|
||||
<line x1="5" x2="220" y1="187" y2="187" />
|
||||
<line x1="5" x2="220" y1="200" y2="200" />
|
||||
</g>
|
||||
<g id="globeWindArrows" data-tip="Click to change wind direction" stroke-linejoin="round">
|
||||
<circle cx="210" cy="6" r="12" />
|
||||
<path data-tier="0" d="M210,11 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 6)" />
|
||||
<circle cx="210" cy="30" r="12" />
|
||||
<path data-tier="1" d="M210,35 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(45 210 30)" />
|
||||
<circle cx="210" cy="75" r="12" />
|
||||
<path data-tier="2" d="M210,80 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 75)" />
|
||||
<circle cx="210" cy="130" r="12" />
|
||||
<path data-tier="3" d="M210,135 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 130)" />
|
||||
<circle cx="210" cy="173" r="12" />
|
||||
<path data-tier="4" d="M210,178 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(135 210 173)" />
|
||||
<circle cx="210" cy="194" r="12" />
|
||||
<path data-tier="5" d="M210,199 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 194)" />
|
||||
</g>
|
||||
<g id="globaAxisLabels">
|
||||
<text x="82%" y="-4%">wind</text>
|
||||
<text x="-8%" y="-4%">latitude</text>
|
||||
</g>
|
||||
<g id="globeLatLabels">
|
||||
<text x="-15" y="5">90°</text>
|
||||
<text x="-15" y="18">60°</text>
|
||||
<text x="-15" y="53">30°</text>
|
||||
<text x="-15" y="103">0°</text>
|
||||
<text x="-15" y="153">30°</text>
|
||||
<text x="-15" y="190">60°</text>
|
||||
<text x="-15" y="204">90°</text>
|
||||
</g>
|
||||
<circle id="globeOutline" cx="100" cy="100" r="100" />
|
||||
<line id="globeEquator" x1="1" x2="199" y1="100" y2="100" />
|
||||
<path id="globeGraticule" />
|
||||
<path id="globeArea" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="labelEditor" class="dialog" style="display: none">
|
||||
|
|
@ -2651,7 +2653,7 @@
|
|||
</div>
|
||||
|
||||
<div id="battleScreen" class="dialog stable" style="display: none">
|
||||
<div id="battleBody" class="overflow">
|
||||
<div id="battleBody">
|
||||
<template id="battlePhases_field">
|
||||
<button data-tip="Skirmish phase. Ranged units excel" data-phase="skirmish" class="icon-button-skirmish"></button>
|
||||
<button data-tip="Melee phase. Melee units excel" data-phase="melee" class="icon-button-melee"></button>
|
||||
|
|
@ -2806,15 +2808,13 @@
|
|||
</div>
|
||||
|
||||
<div id="regimentSelectorScreen" class="dialog" style="display: none">
|
||||
<div id="regimentSelectorHeader" class="header">
|
||||
<div style="left: 1.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div style="left: 9.2em" data-tip="Click to sort by regiment name" class="sortable alphabetically" data-sortby="regiment">Regiment </div>
|
||||
<div style="left: 22.4em" data-tip="Click to sort by total military forces" class="sortable" data-sortby="total">Total </div>
|
||||
<div style="left: 28em" data-tip="Click to sort by distance to the battlefield" class="sortable icon-sort-number-up" data-sortby="distance">
|
||||
Distance
|
||||
</div>
|
||||
<div id="regimentSelectorHeader" class="header" style="grid-template-columns: 9em 13em 4em 6em">
|
||||
<div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div data-tip="Click to sort by regiment name" class="sortable alphabetically" data-sortby="regiment">Regiment </div>
|
||||
<div data-tip="Click to sort by total military forces" class="sortable" data-sortby="total">Total </div>
|
||||
<div data-tip="Click to sort by distance to the battlefield" class="sortable icon-sort-number-up" data-sortby="distance">Distance </div>
|
||||
</div>
|
||||
<div id="regimentSelectorBody"></div>
|
||||
<div id="regimentSelectorBody" class="table"></div>
|
||||
</div>
|
||||
|
||||
<div id="brushesPanel" class="dialog stable" style="display: none">
|
||||
|
|
@ -3034,14 +3034,12 @@
|
|||
</div>
|
||||
|
||||
<div id="biomesEditor" class="dialog stable" style="display: none">
|
||||
<div id="biomesHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome </div>
|
||||
<div style="left: 12em" data-tip="Click to sort by biome habitability" class="sortable hide" data-sortby="habitability">Habitability </div>
|
||||
<div style="left: 19em" data-tip="Click to sort by biome cells number" class="sortable hide icon-sort-number-down" data-sortby="cells">
|
||||
Cells
|
||||
</div>
|
||||
<div style="left: 25em" data-tip="Click to sort by biome area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div style="left: 30em" data-tip="Click to sort by biome population" class="sortable hide" data-sortby="population">Population </div>
|
||||
<div id="biomesHeader" class="header" style="grid-template-columns: 13em 7em 5em 5em 7em">
|
||||
<div data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome </div>
|
||||
<div data-tip="Click to sort by biome habitability" class="sortable hide" data-sortby="habitability">Habitability </div>
|
||||
<div data-tip="Click to sort by biome cells number" class="sortable hide icon-sort-number-down" data-sortby="cells">Cells </div>
|
||||
<div data-tip="Click to sort by biome area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div data-tip="Click to sort by biome population" class="sortable hide" data-sortby="population">Population </div>
|
||||
</div>
|
||||
|
||||
<div id="biomesBody" class="table" data-type="absolute"></div>
|
||||
|
|
@ -3200,13 +3198,13 @@
|
|||
</div>
|
||||
|
||||
<div id="provincesEditor" class="dialog stable" style="display: none">
|
||||
<div id="provincesHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province </div>
|
||||
<div style="left: 10.8em" data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form </div>
|
||||
<div style="left: 18.8em" data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital </div>
|
||||
<div style="left: 25.3em" data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div style="left: 33.9em" data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div style="left: 39.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population </div>
|
||||
<div id="provincesHeader" class="header" style="grid-template-columns: 11em 8em 8em 8em 5em 8em">
|
||||
<div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province </div>
|
||||
<div data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form </div>
|
||||
<div data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital </div>
|
||||
<div data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population </div>
|
||||
</div>
|
||||
|
||||
<div id="provincesBodySection" class="table" data-type="absolute"></div>
|
||||
|
|
@ -3262,11 +3260,9 @@
|
|||
</div>
|
||||
|
||||
<div id="diplomacyEditor" class="dialog stable" style="display: none">
|
||||
<div id="diplomacyHeader" class="header">
|
||||
<div style="left: 0.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State </div>
|
||||
<div style="left: 14.4em" data-tip="Click to sort by diplomatical relations" class="sortable alphabetically" data-sortby="relations">
|
||||
Relations
|
||||
</div>
|
||||
<div id="diplomacyHeader" class="header" style="grid-template-columns: 15em 6em">
|
||||
<div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State </div>
|
||||
<div data-tip="Click to sort by diplomatical relations" class="sortable alphabetically" data-sortby="relations">Relations </div>
|
||||
</div>
|
||||
|
||||
<div id="diplomacyBodySection" class="table"></div>
|
||||
|
|
@ -3408,12 +3404,12 @@
|
|||
</div>
|
||||
|
||||
<div id="zonesEditor" class="dialog stable" style="display: none">
|
||||
<div id="customHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Zone description">Description </div>
|
||||
<div style="left: 13em" data-tip="Zone type">Type </div>
|
||||
<div style="left: 20em" data-tip="Zone cells count" class="hide">Cells </div>
|
||||
<div style="left: 26.1em" data-tip="Zone area" class="hide">Area </div>
|
||||
<div style="left: 31.6em" data-tip="Zone population" class="hide">Population </div>
|
||||
<div id="customHeader" class="header" style="grid-template-columns: 13em 7em 6em 5em 9em">
|
||||
<div data-tip="Zone description">Description </div>
|
||||
<div data-tip="Zone type">Type </div>
|
||||
<div data-tip="Zone cells count" class="hide">Cells </div>
|
||||
<div data-tip="Zone area" class="hide">Area </div>
|
||||
<div data-tip="Zone population" class="hide">Population </div>
|
||||
</div>
|
||||
|
||||
<div id="zonesBodySection" class="table" data-type="absolute"></div>
|
||||
|
|
@ -3487,17 +3483,13 @@
|
|||
</div>
|
||||
|
||||
<div id="religionsEditor" class="dialog stable" style="display: none">
|
||||
<div id="religionsHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion </div>
|
||||
<div style="left: 12.8em" data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">
|
||||
Type
|
||||
</div>
|
||||
<div style="left: 18.4em" data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form </div>
|
||||
<div style="left: 25.6em" data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity </div>
|
||||
<div style="left: 42.2em" data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div style="left: 47.5em" data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">
|
||||
Believers
|
||||
</div>
|
||||
<div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 16em 5em 6em">
|
||||
<div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion </div>
|
||||
<div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type </div>
|
||||
<div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form </div>
|
||||
<div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity </div>
|
||||
<div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers </div>
|
||||
</div>
|
||||
<div id="religionsBody" class="table" data-type="absolute"></div>
|
||||
|
||||
|
|
@ -3817,14 +3809,14 @@
|
|||
</div>
|
||||
|
||||
<div id="burgsOverview" class="dialog stable" style="display: none">
|
||||
<div id="burgsHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg </div>
|
||||
<div style="left: 8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province </div>
|
||||
<div style="left: 14.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div style="left: 20.2em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture </div>
|
||||
<div style="left: 27em" data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population </div>
|
||||
<div style="left: 33.7em" data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div id="burgsInvertLock" style="left: 38em; color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></div>
|
||||
<div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 7em 7em 4em 2em">
|
||||
<div data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg </div>
|
||||
<div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province </div>
|
||||
<div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture </div>
|
||||
<div data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population </div>
|
||||
<div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div id="burgsInvertLock" style="color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></div>
|
||||
</div>
|
||||
|
||||
<div id="burgsBody" class="table"></div>
|
||||
|
|
@ -3858,15 +3850,13 @@
|
|||
</div>
|
||||
|
||||
<div id="riversOverview" class="dialog stable" style="display: none">
|
||||
<div id="riversHeader" class="header">
|
||||
<div style="left: 1.3em" data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River </div>
|
||||
<div style="left: 8.6em" data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div style="left: 13em" data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">
|
||||
Discharge
|
||||
</div>
|
||||
<div style="left: 19.3em" data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length </div>
|
||||
<div style="left: 24.4em" data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width </div>
|
||||
<div style="left: 30em" data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin </div>
|
||||
<div id="riversHeader" class="header" style="grid-template-columns: 9em 4em 6em 6em 5em 9em">
|
||||
<div data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River </div>
|
||||
<div data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">Discharge </div>
|
||||
<div data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length </div>
|
||||
<div data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width </div>
|
||||
<div data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin </div>
|
||||
</div>
|
||||
|
||||
<div id="riversBody" class="table"></div>
|
||||
|
|
@ -3889,38 +3879,27 @@
|
|||
</div>
|
||||
|
||||
<div id="militaryOverview" class="dialog stable" style="display: none">
|
||||
<div class="overflow">
|
||||
<div id="militaryHeader" class="header">
|
||||
<div data-tip="State name. Click to sort" style="margin-left: 1.8em; width: 5.6em" class="sortable alphabetically" data-sortby="state">
|
||||
State
|
||||
</div>
|
||||
<div
|
||||
data-tip="Total military personnel (considering crew). Click to sort"
|
||||
id="militaryTotal"
|
||||
class="sortable icon-sort-number-down"
|
||||
data-sortby="total"
|
||||
>
|
||||
Total
|
||||
</div>
|
||||
<div data-tip="State population. Click to sort" style="width: 6.5em; margin-left: -1em" class="sortable" data-sortby="population">
|
||||
Population
|
||||
</div>
|
||||
<div
|
||||
data-tip="Military personnel rate (% of state population). Depends on war alert. Click to sort"
|
||||
style="width: 3.7em"
|
||||
class="sortable"
|
||||
data-sortby="rate"
|
||||
>
|
||||
Rate
|
||||
</div>
|
||||
<div data-tip="War Alert. Modifier to military forces number, depends of political situation. Click to sort" class="sortable" data-sortby="alert">
|
||||
War Alert
|
||||
</div>
|
||||
<div id="militaryHeader" class="header">
|
||||
<div data-tip="State name. Click to sort" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div
|
||||
data-tip="Total military personnel (considering crew). Click to sort"
|
||||
id="militaryTotal"
|
||||
class="sortable icon-sort-number-down"
|
||||
data-sortby="total"
|
||||
>
|
||||
Total
|
||||
</div>
|
||||
<div data-tip="State population. Click to sort" class="sortable" data-sortby="population">Population </div>
|
||||
<div data-tip="Military personnel rate (% of state population). Depends on war alert. Click to sort" class="sortable" data-sortby="rate">
|
||||
Rate
|
||||
</div>
|
||||
<div data-tip="War Alert. Modifier to military forces number, depends of political situation. Click to sort" class="sortable" data-sortby="alert">
|
||||
War Alert
|
||||
</div>
|
||||
|
||||
<div id="militaryBody" data-type="absolute"></div>
|
||||
</div>
|
||||
|
||||
<div id="militaryBody" class="table" data-type="absolute"></div>
|
||||
|
||||
<div id="militaryFooter" class="totalLine">
|
||||
<div data-tip="States number" style="margin-left: 4px">States: <span id="militaryFooterStates">0</span></div>
|
||||
<div data-tip="Total military forces" style="margin-left: 14px">Total forces: <span id="militaryFooterForcesTotal">0</span></div>
|
||||
|
|
@ -3941,26 +3920,21 @@
|
|||
</div>
|
||||
|
||||
<div id="regimentsOverview" class="dialog stable" style="display: none">
|
||||
<div class="overflow">
|
||||
<div id="regimentsHeader" class="header">
|
||||
<div data-tip="State name. Click to sort" style="left: 1.8em; width: 9em" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div data-tip="Regiment emblem and name. Click to sort by name" style="width: 12em" class="sortable alphabetically" data-sortby="name">
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
data-tip="Total military personnel (not considering crew). Click to sort"
|
||||
style="margin-left: 0.8em"
|
||||
id="regimentsTotal"
|
||||
class="sortable icon-sort-number-down"
|
||||
data-sortby="total"
|
||||
>
|
||||
Total
|
||||
</div>
|
||||
<div id="regimentsHeader" class="header">
|
||||
<div data-tip="State name. Click to sort" class="sortable alphabetically" data-sortby="state">State </div>
|
||||
<div data-tip="Regiment emblem and name. Click to sort by name" class="sortable alphabetically" data-sortby="name">Name </div>
|
||||
<div
|
||||
data-tip="Total military personnel (not considering crew). Click to sort"
|
||||
id="regimentsTotal"
|
||||
class="sortable icon-sort-number-down"
|
||||
data-sortby="total"
|
||||
>
|
||||
Total
|
||||
</div>
|
||||
|
||||
<div id="regimentsBody" data-type="absolute"></div>
|
||||
</div>
|
||||
|
||||
<div id="regimentsBody" class="table" data-type="absolute"></div>
|
||||
|
||||
<div id="regimentsBottom">
|
||||
<button id="regimentsOverviewRefresh" data-tip="Refresh the overview screen" class="icon-cw"></button>
|
||||
<button id="regimentsPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
|
||||
|
|
@ -3998,10 +3972,10 @@
|
|||
</div>
|
||||
|
||||
<div id="markersOverview" class="dialog stable" style="display: none">
|
||||
<div id="markersHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div id="markersInverPin" style="left: 14.9em; color: #6e5e66" data-tip="Click to invert pin state for all markers" class="icon-pin pointer"></div>
|
||||
<div id="markersInverLock" style="left: 16.1em; color: #6e5e66" data-tip="Click to invert lock state for all markers" class="icon-lock pointer"></div>
|
||||
<div id="markersHeader" class="header" style="grid-template-columns: 15em 1em 3em">
|
||||
<div data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div id="markersInverPin" style="color: #6e5e66" data-tip="Click to invert pin state for all markers" class="icon-pin pointer"></div>
|
||||
<div id="markersInverLock" style="color: #6e5e66" data-tip="Click to invert lock state for all markers" class="icon-lock pointer"></div>
|
||||
</div>
|
||||
|
||||
<div id="markersBody" class="table"></div>
|
||||
|
|
@ -4026,7 +4000,7 @@
|
|||
<span id="styleSaverTip" data-tip="Shows whether there is already a preset with this name" class="italic"></span>
|
||||
</div>
|
||||
|
||||
<div id="styleSaverBody" style="padding: 2px 0">
|
||||
<div id="styleSaverBody" style="padding: 2px 0; width: 100%">
|
||||
<span>Style JSON:</span>
|
||||
<textarea
|
||||
id="styleSaverJSON"
|
||||
|
|
@ -4076,7 +4050,9 @@
|
|||
<option value="fontURL">Font URL</option>
|
||||
</select>
|
||||
<input id="addFontNameInput" placeholder="font family" style="width: 15em" />
|
||||
<input id="addFontURLInput" placeholder="font file URL" style="width: 22.6em; margin-top: 0.1em; display: none" />
|
||||
<div>
|
||||
<input id="addFontURLInput" placeholder="font file URL" style="width: 22.6em; margin-top: 0.1em; display: none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -4301,11 +4277,12 @@
|
|||
</div>
|
||||
|
||||
<div id="resampleDialog" style="display: none" class="dialog">
|
||||
<p style="font-weight: bold">
|
||||
<div style="width: 34em; max-width: 80vw; font-weight: bold; padding: 6px">
|
||||
This operation is destructive and irreversible. It will create a completely new map based on the current one. Don't forget to save the current project
|
||||
as a .map file first!
|
||||
</p>
|
||||
<div style="display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: repeat(4, 1fr); align-items: center; padding-left: 0.5em">
|
||||
</div>
|
||||
|
||||
<div style="width: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); align-items: center; padding: 0.5em">
|
||||
<div>Points number</div>
|
||||
<div>
|
||||
<input id="submapPointsInput" type="range" min="1" max="13" value="4" />
|
||||
|
|
@ -4339,7 +4316,8 @@
|
|||
<label for="submapMirrorV" class="checkbox-label">vertically</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="submapPreview" style="border: 1px solid black; margin: 1em auto; overflow: hidden"></div>
|
||||
|
||||
<div id="submapPreview" style="border: 1px solid #666; margin: 1em auto; overflow: hidden; position: relative"></div>
|
||||
</div>
|
||||
|
||||
<div id="submapOptionsDialog" style="display: none" class="dialog">
|
||||
|
|
|
|||
2
libs/jquery-ui.css
vendored
2
libs/jquery-ui.css
vendored
|
|
@ -359,7 +359,7 @@ body .ui-dialog {
|
|||
padding: 0.5em 1em;
|
||||
background: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
text-align: left;
|
||||
|
|
|
|||
6
main.js
6
main.js
|
|
@ -209,9 +209,9 @@ document.addEventListener("DOMContentLoaded", async () => {
|
|||
});
|
||||
|
||||
function hideLoading() {
|
||||
d3.select("#loading").transition().duration(4000).style("opacity", 0);
|
||||
d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
|
||||
d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
|
||||
d3.select("#loading").transition().duration(3000).style("opacity", 0);
|
||||
d3.select("#optionsContainer").transition().duration(2000).style("opacity", 1);
|
||||
d3.select("#tooltip").transition().duration(3000).style("opacity", 1);
|
||||
}
|
||||
|
||||
function showLoading() {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ export function open() {
|
|||
$("#culturesEditor").dialog({
|
||||
title: "Cultures Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: closeCulturesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
});
|
||||
|
|
@ -25,15 +24,15 @@ export function open() {
|
|||
|
||||
function insertEditorHtml() {
|
||||
const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable">
|
||||
<div id="culturesHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture </div>
|
||||
<div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div style="left: 16.2em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase </div>
|
||||
<div style="left: 24.5em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells </div>
|
||||
<div style="left: 29.8em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion </div>
|
||||
<div style="left: 37.2em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div style="left: 42.8em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population </div>
|
||||
<div style="left: 50.8em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems </div>
|
||||
<div id="culturesHeader" class="header" style="grid-template-columns: 10em 7em 8em 4em 8em 5em 8em 8em">
|
||||
<div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture </div>
|
||||
<div data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase </div>
|
||||
<div data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells </div>
|
||||
<div data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion </div>
|
||||
<div data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population </div>
|
||||
<div data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems </div>
|
||||
</div>
|
||||
<div id="culturesBody" class="table" data-type="absolute"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export function open() {
|
|||
$("#statesEditor").dialog({
|
||||
title: "States Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: closeStatesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
|
@ -22,17 +21,17 @@ export function open() {
|
|||
|
||||
function insertEditorHtml() {
|
||||
const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable">
|
||||
<div id="statesHeader" class="header">
|
||||
<div style="left: 1.8em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State </div>
|
||||
<div style="left: 10.8em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form </div>
|
||||
<div style="left: 19.1em" data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital </div>
|
||||
<div style="left: 26.1em" data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture </div>
|
||||
<div style="left: 33.4em" data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs </div>
|
||||
<div style="left: 39.6em" data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area </div>
|
||||
<div style="left: 45.9em" data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population </div>
|
||||
<div style="left: 52.2em" data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type </div>
|
||||
<div style="left: 59em" data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">Expansion </div>
|
||||
<div style="left: 65.5em" data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells </div>
|
||||
<div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
|
||||
<div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State </div>
|
||||
<div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form </div>
|
||||
<div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital </div>
|
||||
<div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture </div>
|
||||
<div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs </div>
|
||||
<div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area </div>
|
||||
<div data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population </div>
|
||||
<div data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type </div>
|
||||
<div data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">Expansion </div>
|
||||
<div data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells </div>
|
||||
</div>
|
||||
|
||||
<div id="statesBodySection" class="table" data-type="absolute"></div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ const heightmaps = [
|
|||
{id: "world-from-pacific", name: "World from Pacific"}
|
||||
];
|
||||
|
||||
const initialSeed = generateSeed();
|
||||
appendStyleSheet();
|
||||
insertEditorHtml();
|
||||
addListeners();
|
||||
|
|
@ -107,6 +108,14 @@ function appendStyleSheet() {
|
|||
}
|
||||
}
|
||||
|
||||
.heightmap-selection_options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(50%, 200px));
|
||||
grid-row-gap: 6px;
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heightmap-selection article {
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -154,15 +163,49 @@ function appendStyleSheet() {
|
|||
}
|
||||
|
||||
function insertEditorHtml() {
|
||||
const seed = generateSeed();
|
||||
const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
|
||||
<div class="heightmap-selection">
|
||||
<section>
|
||||
<header><h1>Heightmap templates</h1></header>
|
||||
<div class="heightmap-selection_container"></div>
|
||||
</section>
|
||||
<section>
|
||||
<header><h1>Pre-created heightmaps</h1></header>
|
||||
<div class="heightmap-selection_container"></div>
|
||||
</section>
|
||||
<section>
|
||||
<header><h1>Options</h1></header>
|
||||
<div class="heightmap-selection_options">
|
||||
<div>
|
||||
<input id="heightmapSelectionRenderOcean" class="checkbox" type="checkbox" />
|
||||
<label for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
|
||||
</div>
|
||||
<div>
|
||||
Color scheme
|
||||
<select id="heightmapSelectionColorScheme">
|
||||
<option value="bright" selected>Bright</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="green">Green</option>
|
||||
<option value="monochrome">Monochrome</option>
|
||||
</select>
|
||||
</div>
|
||||
<button data-tip="Open Template Editor" id="heightmapSelectionEditTemplates">Edit Templates</button>
|
||||
<button data-tip="Open Image Converter" id="heightmapSelectionImportHeightmap">Import Heightmap</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const templatesHtml = templates
|
||||
byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
|
||||
const sections = document.getElementsByClassName("heightmap-selection_container");
|
||||
|
||||
sections[0].innerHTML = templates
|
||||
.map(({id, name}) => {
|
||||
Math.random = aleaPRNG(seed);
|
||||
Math.random = aleaPRNG(initialSeed);
|
||||
const heights = generateHeightmap(id);
|
||||
const dataUrl = drawHeights(heights);
|
||||
|
||||
return /* html */ `<article data-id="${id}" data-seed="${seed}">
|
||||
return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
|
||||
<img src="${dataUrl}" alt="${name}" />
|
||||
<div>
|
||||
${name}
|
||||
|
|
@ -172,35 +215,16 @@ function insertEditorHtml() {
|
|||
})
|
||||
.join("");
|
||||
|
||||
const heightmapsHtml = heightmaps
|
||||
sections[1].innerHTML = heightmaps
|
||||
.map(({id, name}) => {
|
||||
drawPrecreatedHeightmap(id);
|
||||
|
||||
return /* html */ `<article data-id="${id}" data-seed="${seed}">
|
||||
return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
|
||||
<img alt="${name}" />
|
||||
<div>${name}</div>
|
||||
</article>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
|
||||
<div class="heightmap-selection">
|
||||
<section>
|
||||
<header><h1>Heightmap templates</h1></header>
|
||||
<div class="heightmap-selection_container">
|
||||
${templatesHtml}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<header><h1>Pre-created heightmaps</h1></header>
|
||||
<div class="heightmap-selection_container">
|
||||
${heightmapsHtml}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
|
||||
}
|
||||
|
||||
function addListeners() {
|
||||
|
|
@ -209,9 +233,16 @@ function addListeners() {
|
|||
if (!article) return;
|
||||
|
||||
const id = article.dataset.id;
|
||||
if (event.target.matches("span.icon-cw")) regeneratePreview(article, id);
|
||||
else setSelected(id);
|
||||
if (event.target.matches("span.icon-cw")) {
|
||||
const seed = generateSeed();
|
||||
article.dataset.seed = seed;
|
||||
Math.random = aleaPRNG(seed);
|
||||
drawTemplatePreview(id);
|
||||
} else setSelected(id);
|
||||
});
|
||||
|
||||
byId("heightmapSelectionRenderOcean").on("change", redrawAll);
|
||||
byId("heightmapSelectionColorScheme").on("change", redrawAll);
|
||||
}
|
||||
|
||||
function getSelected() {
|
||||
|
|
@ -234,11 +265,14 @@ function drawHeights(heights) {
|
|||
canvas.height = grid.cellsY;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
|
||||
const scheme = getColorScheme();
|
||||
const waterColor = scheme(1);
|
||||
|
||||
const schemeId = byId("heightmapSelectionColorScheme").value;
|
||||
const scheme = getColorScheme(schemeId);
|
||||
const renderOcean = byId("heightmapSelectionRenderOcean").checked;
|
||||
const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);
|
||||
|
||||
for (let i = 0; i < heights.length; i++) {
|
||||
const color = heights[i] < 20 ? waterColor : scheme(1 - heights[i] / 100);
|
||||
const color = scheme(1 - getHeight(heights[i]) / 100);
|
||||
const {r, g, b} = d3.color(color);
|
||||
|
||||
const n = i * 4;
|
||||
|
|
@ -259,6 +293,13 @@ function generateHeightmap(id) {
|
|||
return heights;
|
||||
}
|
||||
|
||||
function drawTemplatePreview(id) {
|
||||
const heights = generateHeightmap(id);
|
||||
const dataUrl = drawHeights(heights);
|
||||
const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
|
||||
article.querySelector("img").src = dataUrl;
|
||||
}
|
||||
|
||||
async function drawPrecreatedHeightmap(id) {
|
||||
const heights = await HeightmapGenerator.fromPrecreated(id);
|
||||
const dataUrl = drawHeights(heights);
|
||||
|
|
@ -266,12 +307,14 @@ async function drawPrecreatedHeightmap(id) {
|
|||
article.querySelector("img").src = dataUrl;
|
||||
}
|
||||
|
||||
function regeneratePreview(article, id) {
|
||||
const seed = generateSeed();
|
||||
article.dataset.seed = seed;
|
||||
Math.random = aleaPRNG(seed);
|
||||
function redrawAll() {
|
||||
const articles = byId("heightmapSelection").querySelectorAll(`article`);
|
||||
for (const article of articles) {
|
||||
const {id, seed} = article.dataset;
|
||||
Math.random = aleaPRNG(seed);
|
||||
|
||||
const heights = generateHeightmap(id);
|
||||
const dataUrl = drawHeights(heights);
|
||||
article.querySelector("img").src = dataUrl;
|
||||
const isTemplate = id in HeightmapTemplates;
|
||||
if (isTemplate) drawTemplatePreview(id);
|
||||
else drawPrecreatedHeightmap(id);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -339,7 +339,7 @@ function removeUnusedElements(clone) {
|
|||
|
||||
function updateMeshCells(clone) {
|
||||
const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
|
||||
const scheme = getColorScheme();
|
||||
const scheme = getColorScheme(terrs.attr("scheme"));
|
||||
clone.select("#heights").attr("filter", "url(#blur1)");
|
||||
clone
|
||||
.select("#heights")
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
draw();
|
||||
|
||||
function downloadCSV() {
|
||||
let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
|
||||
let data =
|
||||
"Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
|
||||
|
||||
for (let k = 0; k < chartData.points.length; k++) {
|
||||
let cell = chartData.cell[k];
|
||||
|
|
@ -179,9 +180,20 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
.attr("id", "elevationSVG")
|
||||
.attr("class", "epbackground");
|
||||
// arrow-head definition
|
||||
chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
|
||||
chart
|
||||
.append("defs")
|
||||
.append("marker")
|
||||
.attr("id", "arrowhead")
|
||||
.attr("orient", "auto")
|
||||
.attr("markerWidth", "2")
|
||||
.attr("markerHeight", "4")
|
||||
.attr("refX", "0.1")
|
||||
.attr("refY", "2")
|
||||
.append("path")
|
||||
.attr("d", "M0,0 V4 L2,2 Z")
|
||||
.attr("fill", "darkgray");
|
||||
|
||||
let colors = getColorScheme();
|
||||
let colors = getColorScheme(terrs.attr("scheme"));
|
||||
const landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
|
||||
|
||||
if (chartData.mah == chartData.mih) {
|
||||
|
|
@ -258,7 +270,24 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
const populationDesc = rn(pop * populationRate);
|
||||
|
||||
const provinceDesc = province ? ", " + pack.provinces[province].name : "";
|
||||
const dataTip = biomesData.name[chartData.biome[k]] + provinceDesc + ", " + pack.states[state].name + ", " + pack.religions[religion].name + ", " + pack.cultures[culture].name + " (height: " + chartData.height[k] + " " + hu + ", population " + populationDesc + ", cell " + chartData.cell[k] + ")";
|
||||
const dataTip =
|
||||
biomesData.name[chartData.biome[k]] +
|
||||
provinceDesc +
|
||||
", " +
|
||||
pack.states[state].name +
|
||||
", " +
|
||||
pack.religions[religion].name +
|
||||
", " +
|
||||
pack.cultures[culture].name +
|
||||
" (height: " +
|
||||
chartData.height[k] +
|
||||
" " +
|
||||
hu +
|
||||
", population " +
|
||||
populationDesc +
|
||||
", cell " +
|
||||
chartData.cell[k] +
|
||||
")";
|
||||
|
||||
g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ function drawHeightmap() {
|
|||
const used = new Uint8Array(cells.i.length);
|
||||
const paths = new Array(101).fill("");
|
||||
|
||||
const scheme = getColorScheme();
|
||||
const scheme = getColorScheme(terrs.attr("scheme"));
|
||||
const terracing = terrs.attr("terracing") / 10; // add additional shifted darker layer for pseudo-3d effect
|
||||
const skip = +terrs.attr("skip") + 1;
|
||||
const simplification = +terrs.attr("relax");
|
||||
|
|
@ -234,8 +234,7 @@ function drawHeightmap() {
|
|||
TIME && console.timeEnd("drawHeightmap");
|
||||
}
|
||||
|
||||
function getColorScheme() {
|
||||
const scheme = terrs.attr("scheme");
|
||||
function getColorScheme(scheme) {
|
||||
if (scheme === "bright") return d3.scaleSequential(d3.interpolateSpectral);
|
||||
if (scheme === "light") return d3.scaleSequential(d3.interpolateRdYlGn);
|
||||
if (scheme === "green") return d3.scaleSequential(d3.interpolateGreens);
|
||||
|
|
|
|||
|
|
@ -47,6 +47,9 @@ function overviewMilitary() {
|
|||
// update military types in header and tooltips
|
||||
function updateHeaders() {
|
||||
const header = document.getElementById("militaryHeader");
|
||||
const units = options.military.length;
|
||||
header.style.gridTemplateColumns = `8em repeat(${units}, 5.2em) 4em 7em 5em 6em`;
|
||||
|
||||
header.querySelectorAll(".removable").forEach(el => el.remove());
|
||||
const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html);
|
||||
for (const u of options.military) {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function editNotes(id, name) {
|
|||
|
||||
$("#notesEditor").dialog({
|
||||
title: "Notes Editor",
|
||||
width: "70vw",
|
||||
width: "minmax(80vw, 540px)",
|
||||
height: window.innerHeight * 0.75,
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
close: removeEditor
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@ function overviewRegiments(state) {
|
|||
// update military types in header and tooltips
|
||||
function updateHeaders() {
|
||||
const header = document.getElementById("regimentsHeader");
|
||||
const units = options.military.length;
|
||||
header.style.gridTemplateColumns = `9em 13em repeat(${units}, 5.2em) 7em`;
|
||||
|
||||
header.querySelectorAll(".removable").forEach(el => el.remove());
|
||||
const insert = html => document.getElementById("regimentsTotal").insertAdjacentHTML("beforebegin", html);
|
||||
for (const u of options.military) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// UI elements for submap generation
|
||||
|
||||
window.UISubmap = (function () {
|
||||
const byId = document.getElementById.bind(document);
|
||||
byId("submapPointsInput").addEventListener("input", function () {
|
||||
const output = byId("submapPointsOutputFormatted");
|
||||
const cells = cellsDensityMap[+this.value] || 1000;
|
||||
|
|
@ -13,7 +12,7 @@ window.UISubmap = (function () {
|
|||
|
||||
byId("submapScaleInput").addEventListener("input", function (event) {
|
||||
const exp = Math.pow(1.1, +event.target.value);
|
||||
byId("submapScaleOutput").value = rn(exp,2);
|
||||
byId("submapScaleOutput").value = rn(exp, 2);
|
||||
});
|
||||
|
||||
byId("submapAngleInput").addEventListener("input", function (event) {
|
||||
|
|
@ -28,7 +27,6 @@ window.UISubmap = (function () {
|
|||
function openSubmapMenu() {
|
||||
$("#submapOptionsDialog").dialog({
|
||||
title: "Create a submap",
|
||||
width: "30em",
|
||||
resizable: false,
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
|
|
@ -49,8 +47,8 @@ window.UISubmap = (function () {
|
|||
shiftY: +byId("submapShiftY").value,
|
||||
ratio: +byId("submapScaleInput").value,
|
||||
mirrorH: byId("submapMirrorH").checked,
|
||||
mirrorV: byId("submapMirrorV").checked,
|
||||
})
|
||||
mirrorV: byId("submapMirrorV").checked
|
||||
});
|
||||
|
||||
async function openResampleMenu() {
|
||||
resetZoom(0);
|
||||
|
|
@ -64,14 +62,14 @@ window.UISubmap = (function () {
|
|||
$shiftX.value = 0;
|
||||
$shiftY.value = 0;
|
||||
|
||||
const previewScale = 400 / graphWidth;
|
||||
const [w, h] = [400, graphHeight * previewScale];
|
||||
$previewBox.style.width = w + 'px';
|
||||
$previewBox.style.height = h + 'px';
|
||||
$previewBox.style.position = 'relative';
|
||||
const w = Math.min(400, window.innerWidth * 0.5);
|
||||
const previewScale = w / graphWidth;
|
||||
const h = graphHeight * previewScale;
|
||||
$previewBox.style.width = w + "px";
|
||||
$previewBox.style.height = h + "px";
|
||||
|
||||
// handle mouse input
|
||||
const dispatchInput = e => e.dispatchEvent(new Event('input', {bubbles:true}));
|
||||
const dispatchInput = e => e.dispatchEvent(new Event("input", {bubbles: true}));
|
||||
|
||||
// mouse wheel
|
||||
$previewBox.onwheel = e => {
|
||||
|
|
@ -80,14 +78,16 @@ window.UISubmap = (function () {
|
|||
};
|
||||
|
||||
// mouse drag
|
||||
let mouseIsDown = false, mouseX = 0, mouseY = 0;
|
||||
let mouseIsDown = false,
|
||||
mouseX = 0,
|
||||
mouseY = 0;
|
||||
$previewBox.onmousedown = e => {
|
||||
mouseIsDown = true;
|
||||
mouseX = $shiftX.value - e.clientX / previewScale;
|
||||
mouseY = $shiftY.value - e.clientY / previewScale;
|
||||
}
|
||||
$previewBox.onmouseup = _ => mouseIsDown = false;
|
||||
$previewBox.onmouseleave = _ => mouseIsDown = false;
|
||||
};
|
||||
$previewBox.onmouseup = _ => (mouseIsDown = false);
|
||||
$previewBox.onmouseleave = _ => (mouseIsDown = false);
|
||||
$previewBox.onmousemove = e => {
|
||||
if (!mouseIsDown) return;
|
||||
e.preventDefault();
|
||||
|
|
@ -99,7 +99,6 @@ window.UISubmap = (function () {
|
|||
|
||||
$("#resampleDialog").dialog({
|
||||
title: "Transform map",
|
||||
width: "430px",
|
||||
resizable: false,
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
|
|
@ -114,7 +113,7 @@ window.UISubmap = (function () {
|
|||
});
|
||||
|
||||
// use double resolution for PNG to get sharper image
|
||||
const $preview = await loadPreview($previewBox, w*2, h*2);
|
||||
const $preview = await loadPreview($previewBox, w * 2, h * 2);
|
||||
// could be done with SVG. Faster to load, slower to use.
|
||||
// const $preview = await loadPreviewSVG($previewBox, w, h);
|
||||
$preview.style.position = "absolute";
|
||||
|
|
@ -122,22 +121,22 @@ window.UISubmap = (function () {
|
|||
$preview.style.height = h + "px";
|
||||
|
||||
byId("resampleDialog").oninput = event => {
|
||||
const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput();
|
||||
const scale = Math.pow(1.1,ratio);
|
||||
const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
|
||||
const scale = Math.pow(1.1, ratio);
|
||||
const transformStyle = `
|
||||
translate(${shiftX*previewScale}px, ${shiftY*previewScale}px)
|
||||
scale(${mirrorH?-scale:scale}, ${mirrorV?-scale:scale})
|
||||
translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
|
||||
scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
|
||||
rotate(${angle}rad)
|
||||
`;
|
||||
|
||||
$preview.style.transform = transformStyle;
|
||||
$preview.style['transform-origin'] = 'center';
|
||||
$preview.style["transform-origin"] = "center";
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function loadPreview($container, w, h) {
|
||||
const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true });
|
||||
const url = await getMapURL("png", {globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true});
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
|
@ -148,16 +147,16 @@ window.UISubmap = (function () {
|
|||
img.onload = function () {
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
};
|
||||
$container.textContent = '';
|
||||
$container.textContent = "";
|
||||
$container.appendChild(canvas);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
// currently unused alternative to PNG version
|
||||
async function loadPreviewSVG($container, w, h) {
|
||||
$container.innerHTML = /*html*/`
|
||||
$container.innerHTML = /*html*/ `
|
||||
<svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
|
||||
<rect width="100%" height="100%" fill="${byId('styleOceanFill').value}" />
|
||||
<rect width="100%" height="100%" fill="${byId("styleOceanFill").value}" />
|
||||
<rect fill="url(#oceanic)" width="100%" height="100%" />
|
||||
<use href="#map"></use>
|
||||
</svg>
|
||||
|
|
@ -171,12 +170,12 @@ window.UISubmap = (function () {
|
|||
const cellNumId = +byId("submapPointsInput").value;
|
||||
if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
|
||||
|
||||
const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput()
|
||||
const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
|
||||
|
||||
const [cx, cy] = [graphWidth / 2, graphHeight / 2];
|
||||
const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
|
||||
const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
|
||||
const scale = r => (x, y) => [(x-cx) * r + cx, (y-cy) * r + cy];
|
||||
const scale = r => (x, y) => [(x - cx) * r + cx, (y - cy) * r + cy];
|
||||
const flipH = (x, y) => [-x + 2 * cx, y];
|
||||
const flipV = (x, y) => [x, -y + 2 * cy];
|
||||
const app = (f, g) => (x, y) => f(...g(x, y));
|
||||
|
|
@ -186,7 +185,7 @@ window.UISubmap = (function () {
|
|||
let inverse = id;
|
||||
|
||||
if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
|
||||
if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
|
||||
if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1, ratio)), projection), app(inverse, scale(Math.pow(1.1, -ratio)))];
|
||||
if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
|
||||
if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
|
||||
if (shiftX || shiftY) {
|
||||
|
|
@ -230,7 +229,7 @@ window.UISubmap = (function () {
|
|||
smoothHeightMap: scale > 2,
|
||||
inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
|
||||
projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
|
||||
scale: origScale,
|
||||
scale: origScale
|
||||
};
|
||||
|
||||
// converting map position on the planet
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ function editWorld() {
|
|||
$("#worldConfigurator").dialog({
|
||||
title: "Configure World",
|
||||
resizable: false,
|
||||
width: "42em",
|
||||
width: "minmax(40em, 85vw)",
|
||||
buttons: {
|
||||
"Whole World": () => applyWorldPreset(100, 50),
|
||||
Northern: () => applyWorldPreset(33, 25),
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ function drawCellsValue(data) {
|
|||
function drawPolygons(data) {
|
||||
const max = d3.max(data),
|
||||
min = d3.min(data),
|
||||
scheme = getColorScheme();
|
||||
scheme = getColorScheme(terrs.attr("scheme"));
|
||||
data = data.map(d => 1 - normalize(d, min, max));
|
||||
|
||||
debug.selectAll("polygon").remove();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue