mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
feat: add style preset, add heighmap color schemes
This commit is contained in:
Azgaar
parent
bed7486218
commit
e654dbb8a5
8 changed files with 417 additions and 15 deletions
10
index.html
10
index.html
|
|
@ -1281,7 +1281,9 @@
|
|||
<select id="styleHeightmapScheme">
|
||||
<option value="bright" selected>Bright</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="natural">Natural</option>
|
||||
<option value="green">Green</option>
|
||||
<option value="livid">Livid</option>
|
||||
<option value="monochrome">Monochrome</option>
|
||||
</select>
|
||||
</td>
|
||||
|
|
@ -3813,8 +3815,8 @@
|
|||
<button id="battleNameShow" data-tip="Set battle name" class="icon-font"></button>
|
||||
<div id="battleNameSection" style="display: none">
|
||||
<button id="battleNameHide" data-tip="Hide the battle name section" class="icon-font"></button>
|
||||
<input id="battleNamePlace" data-tip="Type place name" style="width: 30%"> <input id="battleNameFull"
|
||||
data-tip="Type full battle name" style="width: 46%">
|
||||
<input id="battleNamePlace" data-tip="Type place name" style="width: 30%" />
|
||||
<input id="battleNameFull" data-tip="Type full battle name" style="width: 46%" />
|
||||
<button
|
||||
id="battleNameCulture"
|
||||
data-tip="Generate culture-specific name for place and battle"
|
||||
|
|
@ -7991,9 +7993,9 @@
|
|||
<script src="libs/lineclip.min.js"></script>
|
||||
<script src="libs/alea.min.js"></script>
|
||||
<script src="modules/fonts.js?v=1.89.18"></script>
|
||||
<script src="modules/ui/layers.js"></script>
|
||||
<script src="modules/ui/layers.js?v=1.93.06"></script>
|
||||
<script src="modules/ui/measurers.js?v=1.87.02"></script>
|
||||
<script src="modules/ui/stylePresets.js?v=1.89.11"></script>
|
||||
<script src="modules/ui/stylePresets.js?v=1.93.06"></script>
|
||||
|
||||
<script src="modules/ui/general.js?v=1.93.04"></script>
|
||||
<script src="modules/ui/options.js?v=1.93.03"></script>
|
||||
|
|
|
|||
|
|
@ -177,7 +177,9 @@ function insertHtml() {
|
|||
<select id="heightmapSelectionColorScheme">
|
||||
<option value="bright" selected>Bright</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="natural">Natural</option>
|
||||
<option value="green">Green</option>
|
||||
<option value="livid">Livid</option>
|
||||
<option value="monochrome">Monochrome</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -297,12 +297,18 @@ function drawHeightmap() {
|
|||
TIME && console.timeEnd("drawHeightmap");
|
||||
}
|
||||
|
||||
const colorSchemes = {
|
||||
bright: d3.scaleSequential(d3.interpolateSpectral),
|
||||
light: d3.scaleSequential(d3.interpolateRdYlGn),
|
||||
natural: d3.scaleSequential(d3.interpolateRgbBasis(["white", "#EEEECC", "tan", "green", "teal"])),
|
||||
green: d3.scaleSequential(d3.interpolateGreens),
|
||||
livid: d3.scaleSequential(d3.interpolateRgbBasis(["#BBBBDD", "#2A3440", "#17343B", "#0A1E24"])),
|
||||
monochrome: d3.scaleSequential(d3.interpolateGreys)
|
||||
};
|
||||
|
||||
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);
|
||||
if (scheme === "monochrome") return d3.scaleSequential(d3.interpolateGreys);
|
||||
return d3.scaleSequential(d3.interpolateSpectral);
|
||||
if (scheme in colorSchemes) return colorSchemes[scheme];
|
||||
throw new Error(`Unsupported color scheme: ${scheme}`);
|
||||
}
|
||||
|
||||
function getColor(value, scheme = getColorScheme()) {
|
||||
|
|
|
|||
|
|
@ -702,7 +702,7 @@ function changeEra() {
|
|||
}
|
||||
|
||||
async function openTemplateSelectionDialog() {
|
||||
const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.87.00");
|
||||
const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.93.06");
|
||||
HeightmapSelectionDialog.open();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const systemPresets = [
|
|||
"clean",
|
||||
"atlas",
|
||||
"cyberpunk",
|
||||
"night",
|
||||
"monochrome"
|
||||
];
|
||||
const customPresetPrefix = "fmgStyle_";
|
||||
|
|
|
|||
|
|
@ -293,10 +293,10 @@
|
|||
"#terrs": {
|
||||
"opacity": 1,
|
||||
"scheme": "bright",
|
||||
"terracing": 0,
|
||||
"skip": 0,
|
||||
"relax": 1,
|
||||
"curve": 1,
|
||||
"terracing": 2,
|
||||
"skip": 1,
|
||||
"relax": 2,
|
||||
"curve": 0,
|
||||
"filter": "url(#filter-grayscale)",
|
||||
"mask": "url(#land)"
|
||||
},
|
||||
|
|
|
|||
390
styles/night.json
Normal file
390
styles/night.json
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
{
|
||||
"#map": {
|
||||
"background-color": "#000000",
|
||||
"filter": null,
|
||||
"data-filter": null
|
||||
},
|
||||
"#armies": {
|
||||
"font-size": 6,
|
||||
"box-size": 3,
|
||||
"stroke": "#000",
|
||||
"stroke-width": 0,
|
||||
"fill-opacity": 0.4,
|
||||
"filter": ""
|
||||
},
|
||||
"#biomes": {
|
||||
"opacity": 1,
|
||||
"filter": null,
|
||||
"mask": "url(#land)"
|
||||
},
|
||||
"#stateBorders": {
|
||||
"opacity": 0.4,
|
||||
"stroke": "#ffffff",
|
||||
"stroke-width": 0.67,
|
||||
"stroke-dasharray": "",
|
||||
"stroke-linecap": "square",
|
||||
"filter": "url(#outline)"
|
||||
},
|
||||
"#provinceBorders": {
|
||||
"opacity": 0.4,
|
||||
"stroke": "#f0f2e3",
|
||||
"stroke-width": 0.2,
|
||||
"stroke-dasharray": 0.5,
|
||||
"stroke-linecap": "square",
|
||||
"filter": ""
|
||||
},
|
||||
"#cells": {
|
||||
"opacity": null,
|
||||
"stroke": "#808080",
|
||||
"stroke-width": 0.1,
|
||||
"filter": null,
|
||||
"mask": null
|
||||
},
|
||||
"#gridOverlay": {
|
||||
"opacity": 0.8,
|
||||
"scale": 2,
|
||||
"dx": 0,
|
||||
"dy": 0,
|
||||
"type": "pointyHex",
|
||||
"stroke": "#808080",
|
||||
"stroke-width": 0.5,
|
||||
"stroke-dasharray": null,
|
||||
"stroke-linecap": null,
|
||||
"transform": null,
|
||||
"filter": null,
|
||||
"mask": null
|
||||
},
|
||||
"#coordinates": {
|
||||
"opacity": 1,
|
||||
"data-size": 14,
|
||||
"font-size": 14,
|
||||
"stroke": "#465053",
|
||||
"stroke-width": 1,
|
||||
"stroke-dasharray": 5,
|
||||
"stroke-linecap": "butt",
|
||||
"filter": "",
|
||||
"mask": null
|
||||
},
|
||||
"#compass": {
|
||||
"opacity": 1,
|
||||
"transform": null,
|
||||
"filter": null,
|
||||
"mask": "url(#water)",
|
||||
"shape-rendering": "optimizespeed"
|
||||
},
|
||||
"#rose": {
|
||||
"transform": "translate(80 80) scale(0.25)"
|
||||
},
|
||||
"#relig": {
|
||||
"opacity": 0.4,
|
||||
"stroke": "#404040",
|
||||
"stroke-width": 0.7,
|
||||
"filter": null
|
||||
},
|
||||
"#cults": {
|
||||
"opacity": 0.4,
|
||||
"stroke": "#777777",
|
||||
"stroke-width": 1.5,
|
||||
"stroke-dasharray": null,
|
||||
"stroke-linecap": null,
|
||||
"filter": "url(#dropShadow)"
|
||||
},
|
||||
"#landmass": {
|
||||
"opacity": 1,
|
||||
"fill": "#04121a",
|
||||
"filter": null
|
||||
},
|
||||
"#markers": {
|
||||
"opacity": 1,
|
||||
"rescale": null,
|
||||
"filter": "url(#dropShadow01)"
|
||||
},
|
||||
"#prec": {
|
||||
"opacity": null,
|
||||
"stroke": "#ffffff",
|
||||
"stroke-width": 0,
|
||||
"fill": "#5069b9",
|
||||
"filter": null
|
||||
},
|
||||
"#population": {
|
||||
"opacity": null,
|
||||
"stroke-width": 1.6,
|
||||
"stroke-dasharray": null,
|
||||
"stroke-linecap": "butt",
|
||||
"filter": null
|
||||
},
|
||||
"#rural": {
|
||||
"stroke": "#0000ff"
|
||||
},
|
||||
"#urban": {
|
||||
"stroke": "#ff0000"
|
||||
},
|
||||
"#freshwater": {
|
||||
"opacity": 0.62,
|
||||
"fill": "#00050a",
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 0.43,
|
||||
"filter": "url(#dropShadow)"
|
||||
},
|
||||
"#salt": {
|
||||
"opacity": 0.62,
|
||||
"fill": "#000a0a",
|
||||
"stroke": "#173634",
|
||||
"stroke-width": 1.72,
|
||||
"filter": "url(#dropShadow)"
|
||||
},
|
||||
"#sinkhole": {
|
||||
"opacity": 1,
|
||||
"fill": "#5bc9fd",
|
||||
"stroke": "#53a3b0",
|
||||
"stroke-width": 0.7,
|
||||
"filter": null
|
||||
},
|
||||
"#frozen": {
|
||||
"opacity": 0.95,
|
||||
"fill": "#cdd4e7",
|
||||
"stroke": "#cfe0eb",
|
||||
"stroke-width": 0,
|
||||
"filter": null
|
||||
},
|
||||
"#lava": {
|
||||
"opacity": 0.7,
|
||||
"fill": "#90270d",
|
||||
"stroke": "#f93e0c",
|
||||
"stroke-width": 2,
|
||||
"filter": "url(#crumpled)"
|
||||
},
|
||||
"#dry": {
|
||||
"opacity": 0.62,
|
||||
"fill": "#c9bfa7",
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 1.72,
|
||||
"filter": "url(#dropShadow)"
|
||||
},
|
||||
"#sea_island": {
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 0.29,
|
||||
"filter": "",
|
||||
"auto-filter": null
|
||||
},
|
||||
"#lake_island": {
|
||||
"opacity": 1,
|
||||
"stroke": "#7c8eaf",
|
||||
"stroke-width": 0.35,
|
||||
"filter": null
|
||||
},
|
||||
"#terrain": {
|
||||
"opacity": 0.54,
|
||||
"set": "simple",
|
||||
"size": 1,
|
||||
"density": 0.3,
|
||||
"filter": null,
|
||||
"mask": null
|
||||
},
|
||||
"#rivers": {
|
||||
"opacity": null,
|
||||
"filter": "",
|
||||
"fill": "#00050a"
|
||||
},
|
||||
"#ruler": {
|
||||
"opacity": 1,
|
||||
"filter": null
|
||||
},
|
||||
"#roads": {
|
||||
"opacity": 0.72,
|
||||
"stroke": "#7f96f0",
|
||||
"stroke-width": 0.75,
|
||||
"stroke-dasharray": 0,
|
||||
"stroke-linecap": "butt",
|
||||
"filter": "",
|
||||
"mask": "url(#land)"
|
||||
},
|
||||
"#trails": {
|
||||
"opacity": 0.62,
|
||||
"stroke": "#7f96f0",
|
||||
"stroke-width": 0.35,
|
||||
"stroke-dasharray": 0,
|
||||
"stroke-linecap": "butt",
|
||||
"filter": "",
|
||||
"mask": null
|
||||
},
|
||||
"#searoutes": {
|
||||
"opacity": 1,
|
||||
"stroke": "#7f96f0",
|
||||
"stroke-width": 0.5,
|
||||
"stroke-dasharray": "2 1",
|
||||
"stroke-linecap": "butt",
|
||||
"filter": "",
|
||||
"mask": ""
|
||||
},
|
||||
"#statesBody": {
|
||||
"opacity": 0.07,
|
||||
"filter": ""
|
||||
},
|
||||
"#statesHalo": {
|
||||
"opacity": 0,
|
||||
"data-width": 0,
|
||||
"stroke-width": 0,
|
||||
"filter": null
|
||||
},
|
||||
"#provs": {
|
||||
"opacity": 0.4,
|
||||
"fill": null,
|
||||
"font-size": null,
|
||||
"font-family": null,
|
||||
"filter": ""
|
||||
},
|
||||
"#temperature": {
|
||||
"opacity": 1,
|
||||
"font-size": "12px",
|
||||
"fill": "#000000",
|
||||
"fill-opacity": 1,
|
||||
"stroke": null,
|
||||
"stroke-width": 1.5,
|
||||
"stroke-dasharray": null,
|
||||
"stroke-linecap": null,
|
||||
"filter": ""
|
||||
},
|
||||
"#ice": {
|
||||
"opacity": 0.15,
|
||||
"fill": "#e8f0f6",
|
||||
"stroke": "#e8f0f6",
|
||||
"stroke-width": 0,
|
||||
"filter": ""
|
||||
},
|
||||
"#emblems": {
|
||||
"opacity": null,
|
||||
"stroke-width": null,
|
||||
"filter": null
|
||||
},
|
||||
"#texture": {
|
||||
"opacity": 0.1,
|
||||
"filter": null,
|
||||
"mask": "url(#water)"
|
||||
},
|
||||
"#textureImage": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg"
|
||||
},
|
||||
"#zones": {
|
||||
"opacity": 0.6,
|
||||
"stroke": "#333333",
|
||||
"stroke-width": 0,
|
||||
"stroke-dasharray": null,
|
||||
"stroke-linecap": "butt",
|
||||
"filter": null,
|
||||
"mask": null
|
||||
},
|
||||
"#oceanLayers": {
|
||||
"filter": "",
|
||||
"layers": "none"
|
||||
},
|
||||
"#oceanBase": {
|
||||
"fill": "#000000"
|
||||
},
|
||||
"#oceanicPattern": {
|
||||
"href": "",
|
||||
"opacity": 0.3
|
||||
},
|
||||
"#terrs": {
|
||||
"opacity": 1,
|
||||
"scheme": "livid",
|
||||
"terracing": 0,
|
||||
"skip": 10,
|
||||
"relax": 0,
|
||||
"curve": 0,
|
||||
"filter": "url(#blurFilter)",
|
||||
"mask": "url(#land)"
|
||||
},
|
||||
"#legend": {
|
||||
"data-size": 11.7,
|
||||
"font-size": 11.7,
|
||||
"font-family": "MedievalSharp",
|
||||
"stroke": "#812929",
|
||||
"stroke-width": 2.67,
|
||||
"stroke-dasharray": "0 4 10 4",
|
||||
"stroke-linecap": "square",
|
||||
"data-x": 14.26,
|
||||
"data-y": 99.37,
|
||||
"data-columns": null
|
||||
},
|
||||
"#burgLabels > #cities": {
|
||||
"opacity": 1,
|
||||
"fill": "#dbdbe1",
|
||||
"text-shadow": "black 0px 0px 4px",
|
||||
"data-size": 8,
|
||||
"font-size": 8,
|
||||
"font-family": "Courier New"
|
||||
},
|
||||
"#burgIcons > #cities": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"fill-opacity": 0.7,
|
||||
"size": 2.1,
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 0.2,
|
||||
"stroke-dasharray": "",
|
||||
"stroke-linecap": "butt"
|
||||
},
|
||||
"#anchors > #cities": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"size": 4.2,
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 1.46
|
||||
},
|
||||
"#burgLabels > #towns": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"text-shadow": "black 0px 0px 4px",
|
||||
"data-size": 4.28,
|
||||
"font-size": 4.28,
|
||||
"font-family": "Courier New"
|
||||
},
|
||||
"#burgIcons > #towns": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"fill-opacity": 0.7,
|
||||
"size": 0.8,
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 0.1,
|
||||
"stroke-dasharray": "",
|
||||
"stroke-linecap": "butt"
|
||||
},
|
||||
"#anchors > #towns": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"size": 1.6,
|
||||
"stroke": "#000000",
|
||||
"stroke-width": 1.53
|
||||
},
|
||||
"#labels > #states": {
|
||||
"opacity": 1,
|
||||
"fill": "#5d77a2",
|
||||
"stroke": "#7a83ae",
|
||||
"stroke-width": 0.3,
|
||||
"text-shadow": "black 0px 0px 0.1px",
|
||||
"data-size": 14,
|
||||
"font-size": 14,
|
||||
"font-family": "Courier New",
|
||||
"filter": ""
|
||||
},
|
||||
"#labels > #addedLabels": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
"stroke": "#3a3a3a",
|
||||
"stroke-width": 0,
|
||||
"text-shadow": "white 0px 0px 4px",
|
||||
"data-size": 18,
|
||||
"font-size": 18,
|
||||
"font-family": "Almendra SC",
|
||||
"filter": null
|
||||
},
|
||||
"#fogging": {
|
||||
"opacity": 0.8,
|
||||
"fill": "#000000",
|
||||
"filter": null
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
"use strict";
|
||||
|
||||
// version and caching control
|
||||
const version = "1.93.05"; // generator version, update each time
|
||||
const version = "1.93.06"; // generator version, update each time
|
||||
|
||||
{
|
||||
document.title += " v" + version;
|
||||
|
|
@ -28,6 +28,7 @@ const version = "1.93.05"; // generator version, update each time
|
|||
|
||||
<ul>
|
||||
<strong>Latest changes:</strong>
|
||||
<li>New style preset Night and new heightmap color schemes</li>
|
||||
<li>Random encounter markers (integration with <a href="https://deorum.vercel.app/" target="_blank">Deorum</a>)</li>
|
||||
<li>Auto-load of the last saved map is now optional (see <i>Onload behavior</i> in Options)</li>
|
||||
<li>New label placement algorithm for states</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue