From ede2241d622014166deb36d77ed84c197252e673 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Mon, 17 Jan 2022 21:21:05 +0300 Subject: [PATCH 01/60] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..b5f119d6 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +fmg.azgaar.xyz \ No newline at end of file From 9e5b87c6de2afbab24efbd5b96df337351aee412 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Mon, 17 Jan 2022 21:22:31 +0300 Subject: [PATCH 02/60] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index b5f119d6..00000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -fmg.azgaar.xyz \ No newline at end of file From 8184b416b9ab510e3d8029518ae3ef2d7bebb20e Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 22 Jan 2022 17:47:56 +0300 Subject: [PATCH 03/60] fill-box web component --- components/fill-box.js | 74 ++++++++++++++++++++++++++++++++ index.css | 10 ++--- index.html | 3 ++ modules/ui/battle-screen.js | 6 +-- modules/ui/biomes-editor.js | 24 +++++------ modules/ui/cultures-editor.js | 20 ++++----- modules/ui/diplomacy-editor.js | 10 ++--- modules/ui/military-overview.js | 9 ++-- modules/ui/provinces-editor.js | 19 ++++---- modules/ui/regiments-overview.js | 59 +++++++++++++++---------- modules/ui/religions-editor.js | 53 +++++++++++++++++------ modules/ui/states-editor.js | 38 +++++++--------- modules/ui/zones-editor.js | 39 ++++++----------- 13 files changed, 226 insertions(+), 138 deletions(-) create mode 100644 components/fill-box.js diff --git a/components/fill-box.js b/components/fill-box.js new file mode 100644 index 00000000..eecfda92 --- /dev/null +++ b/components/fill-box.js @@ -0,0 +1,74 @@ +// fill-box cannot use Shadow DOM as it needs access to svg hatches +// append stylesheet +{ + const style = ` + fill-box:not([disabled]) { + cursor: pointer; + } + + fill-box > svg { + aspect-ratio: 1; + vertical-align: middle; + pointer-events: none; + } + + fill-box > svg > rect { + stroke: #666666; + stroke-width: 2; + }`; + + const styleElement = document.createElement("style"); + styleElement.setAttribute("type", "text/css"); + styleElement.innerHTML = style; + document.head.appendChild(styleElement); +} + +{ + const template = document.createElement("template"); + template.innerHTML = ` + + + + `; + + class FillBox extends HTMLElement { + constructor() { + super(); + + this.appendChild(template.content.cloneNode(true)); + this.querySelector("rect")?.setAttribute("fill", this.fill); + this.querySelector("svg")?.setAttribute("width", this.size); + } + + static showTip() { + tip(this.tip); + } + + connectedCallback() { + this.addEventListener("mousemove", this.constructor.showTip); + } + + disconnectedCallback() { + this.removeEventListener("mousemove", this.constructor.showTip); + } + + get fill() { + return this.getAttribute("fill") || "#333"; + } + + set fill(newFill) { + this.setAttribute("fill", newFill); + this.querySelector("rect")?.setAttribute("fill", newFill); + } + + get size() { + return this.getAttribute("size") || "1em"; + } + + get tip() { + return this.dataset.tip || "Fill style. Click to change"; + } + } + + customElements.define("fill-box", FillBox); +} diff --git a/index.css b/index.css index c2297f96..9946d1b2 100644 --- a/index.css +++ b/index.css @@ -1531,6 +1531,11 @@ div.states > .riverType { cursor: pointer; } +.changeRelations > * { + pointer-events: none; + cursor: pointer; +} + #diplomacySelect { width: 5em; margin: 0.1em 0 0 -0.3em; @@ -1668,11 +1673,6 @@ div.states > div.biomeArea { width: 5em; } -rect.fillRect { - stroke: #666666; - stroke-width: 2; -} - #militaryHeader > div, #regimentsHeader > div { width: 5.2em; diff --git a/index.html b/index.html index 9a23d661..ebb2b775 100644 --- a/index.html +++ b/index.html @@ -4443,5 +4443,8 @@ + + + diff --git a/modules/ui/battle-screen.js b/modules/ui/battle-screen.js index 37a1bd51..2936549c 100644 --- a/modules/ui/battle-screen.js +++ b/modules/ui/battle-screen.js @@ -141,8 +141,8 @@ class Battle { const state = pack.states[regiment.state]; const distance = (Math.hypot(this.y - regiment.by, this.x - regiment.bx) * distanceScaleInput.value) | 0; // distance between regiment and its base const color = state.color[0] === "#" ? state.color : "#999"; - const icon = ` - + const icon = ` + ${regiment.icon}`; const body = ``; @@ -183,7 +183,7 @@ class Battle { dist = added ? "0 " + distanceUnitInput.value : distance(r); return `
- +
${s.name.slice(0, 11)}
${r.icon}
${r.name.slice(0, 24)}
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js index ca5bb41d..527e0b08 100644 --- a/modules/ui/biomes-editor.js +++ b/modules/ui/biomes-editor.js @@ -37,9 +37,9 @@ function editBiomes() { document.getElementById("biomesExport").addEventListener("click", downloadBiomesData); body.addEventListener("click", function (ev) { - const el = ev.target, - cl = el.classList; - if (cl.contains("fillRect")) biomeChangeColor(el); + const el = ev.target; + const cl = el.classList; + if (el.tagName === "FILL-BOX") biomeChangeColor(el); else if (cl.contains("icon-info-circled")) openWiki(el); else if (cl.contains("icon-trash-empty")) removeCustomBiome(el); if (customization === 6) selectBiomeOnLineClick(el); @@ -94,9 +94,7 @@ function editBiomes() { lines += `
- + % { + el.fill = newFill; + biomesData.color[biome] = newFill; biomes .select("#biome" + biome) - .attr("fill", fill) - .attr("stroke", fill); + .attr("fill", newFill) + .attr("stroke", newFill); }; openPicker(currentFill, callback); @@ -270,7 +268,7 @@ function editBiomes() { const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const line = `
- + % diff --git a/modules/ui/cultures-editor.js b/modules/ui/cultures-editor.js index 74c73535..50b5bc63 100644 --- a/modules/ui/cultures-editor.js +++ b/modules/ui/cultures-editor.js @@ -108,9 +108,7 @@ function editCultures() { lines += `
- - - + @@ -148,7 +146,7 @@ function editCultures() { body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseenter", ev => cultureHighlightOn(ev))); body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseleave", ev => cultureHighlightOff(ev))); body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectCultureOnLineClick)); - body.querySelectorAll("rect.fillRect").forEach(el => el.addEventListener("click", cultureChangeColor)); + body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", cultureChangeColor)); body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName)); body.querySelectorAll("div > span.icon-cw").forEach(el => el.addEventListener("click", cultureRegenerateName)); body.querySelectorAll("div > input.statePower").forEach(el => el.addEventListener("input", cultureChangeExpansionism)); @@ -248,16 +246,16 @@ function editCultures() { function cultureChangeColor() { const el = this; const currentFill = el.getAttribute("fill"); - const culture = +el.parentNode.parentNode.dataset.id; + const culture = +el.parentNode.dataset.id; - const callback = function (fill) { - el.setAttribute("fill", fill); - pack.cultures[culture].color = fill; + const callback = newFill => { + el.fill = newFill; + pack.cultures[culture].color = newFill; cults .select("#culture" + culture) - .attr("fill", fill) - .attr("stroke", fill); - debug.select("#cultureCenter" + culture).attr("fill", fill); + .attr("fill", newFill) + .attr("stroke", newFill); + debug.select("#cultureCenter" + culture).attr("fill", newFill); }; openPicker(currentFill, callback); diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js index 657f6b73..bed60a3b 100644 --- a/modules/ui/diplomacy-editor.js +++ b/modules/ui/diplomacy-editor.js @@ -101,10 +101,8 @@ function editDiplomacy() { lines += `
${name}
-
- - - +
+ ${relation}
`; @@ -195,9 +193,7 @@ function editDiplomacy() { ([relation, {color, inText, tip}]) => `
` ) diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js index 38b25a41..0d244314 100644 --- a/modules/ui/military-overview.js +++ b/modules/ui/military-overview.js @@ -75,12 +75,9 @@ function overviewMilitary() { const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" "); const lineData = options.military.map(u => `
${getForces(u)}
`).join(" "); - lines += `
- + lines += `
+ ${lineData}
${si(total)}
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js index 7983d430..045505ee 100644 --- a/modules/ui/provinces-editor.js +++ b/modules/ui/provinces-editor.js @@ -44,7 +44,8 @@ function editProvinces() { cl = el.classList, line = el.parentNode, p = +line.dataset.id; - if (cl.contains("fillRect")) changeFill(el); + + if (el.tagName === "FILL-BOX") changeFill(el); else if (cl.contains("name")) editProvinceName(p); else if (cl.contains("coaIcon")) editEmblem("province", "provinceCOA" + p, pack.provinces[p]); else if (cl.contains("icon-star-empty")) capitalZoomIn(p); @@ -133,9 +134,7 @@ function editProvinces() { lines += `
- + @@ -215,14 +214,14 @@ function editProvinces() { function changeFill(el) { const currentFill = el.getAttribute("fill"); - const p = +el.parentNode.parentNode.dataset.id; + const p = +el.parentNode.dataset.id; - const callback = function (fill) { - el.setAttribute("fill", fill); - pack.provinces[p].color = fill; + const callback = newFill => { + el.fill = newFill; + pack.provinces[p].color = newFill; const g = provs.select("#provincesBody"); - g.select("#province" + p).attr("fill", fill); - g.select("#province-gap" + p).attr("stroke", fill); + g.select("#province" + p).attr("fill", newFill); + g.select("#province-gap" + p).attr("stroke", newFill); }; openPicker(currentFill, callback); diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js index 67099d35..42a9f4e0 100644 --- a/modules/ui/regiments-overview.js +++ b/modules/ui/regiments-overview.js @@ -14,7 +14,9 @@ function overviewRegiments(state) { updateHeaders(); $("#regimentsOverview").dialog({ - title: "Regiments Overview", resizable: false, width: fitContent(), + title: "Regiments Overview", + resizable: false, + width: fitContent(), position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} }); @@ -31,11 +33,13 @@ function overviewRegiments(state) { header.querySelectorAll(".removable").forEach(el => el.remove()); const insert = html => document.getElementById("regimentsTotal").insertAdjacentHTML("beforebegin", html); for (const u of options.military) { - const label = capitalize(u.name.replace(/_/g, ' ')); + const label = capitalize(u.name.replace(/_/g, " ")); insert(`
${label} 
`); } - header.querySelectorAll(".removable").forEach(function(e) { - e.addEventListener("click", function() {sortLines(this);}); + header.querySelectorAll(".removable").forEach(function (e) { + e.addEventListener("click", function () { + sortLines(this); + }); }); } @@ -51,11 +55,13 @@ function overviewRegiments(state) { if (state !== -1 && s.i !== state) continue; // specific state is selected for (const r of s.military) { - const sortData = options.military.map(u => `data-${u.name}=${r.u[u.name]||0}`).join(" "); - const lineData = options.military.map(u => `
${r.u[u.name]||0}
`).join(" "); + const sortData = options.military.map(u => `data-${u.name}=${r.u[u.name] || 0}`).join(" "); + const lineData = options.military + .map(u => `
${r.u[u.name] || 0}
`) + .join(" "); lines += `
- + ${r.icon} @@ -70,12 +76,15 @@ function overviewRegiments(state) { lines += `
Regiments: ${regiments.length}
- ${options.military.map(u => `
${si(d3.sum(regiments.map(r => r.u[u.name]||0)))}
`).join(" ")} + ${options.military.map(u => `
${si(d3.sum(regiments.map(r => r.u[u.name] || 0)))}
`).join(" ")}
${si(d3.sum(regiments.map(r => r.a)))}
`; body.insertAdjacentHTML("beforeend", lines); - if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} + if (body.dataset.type === "percentage") { + body.dataset.type = "absolute"; + togglePercentageMode(); + } applySorting(regimentsHeader); // add listeners @@ -87,7 +96,7 @@ function overviewRegiments(state) { const filter = document.getElementById("regimentsFilter"); filter.options.length = 0; // remove all options filter.options.add(new Option(`all`, -1, false, state === -1)); - const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name) ? 1 : -1); + const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1)); statesSorted.forEach(s => filter.options.add(new Option(s.name, s.i, false, s.i == state))); } @@ -108,19 +117,20 @@ function overviewRegiments(state) { if (body.dataset.type === "absolute") { body.dataset.type = "percentage"; const lines = body.querySelectorAll(":scope > div:not(.totalLine)"); - const array = Array.from(lines), cache = []; + const array = Array.from(lines), + cache = []; - const total = function(type) { + const total = function (type) { if (cache[type]) cache[type]; cache[type] = d3.sum(array.map(el => +el.dataset[type])); return cache[type]; - } + }; - lines.forEach(function(el) { - el.querySelectorAll("div").forEach(function(div) { + lines.forEach(function (el) { + el.querySelectorAll("div").forEach(function (div) { const type = div.dataset.type; if (type === "rate") return; - div.textContent = total(type) ? rn(+el.dataset[type] / total(type) * 100) + "%" : "0%"; + div.textContent = total(type) ? rn((+el.dataset[type] / total(type)) * 100) + "%" : "0%"; }); }); } else { @@ -145,15 +155,19 @@ function overviewRegiments(state) { function addRegimentOnClick() { const state = +regimentsFilter.value; - if (state === -1) {tip("Please select state from the list", false, "error"); return;} + if (state === -1) { + tip("Please select state from the list", false, "error"); + return; + } const point = d3.mouse(this); const cell = findCell(point[0], point[1]); - const x = pack.cells.p[cell][0], y = pack.cells.p[cell][1]; + const x = pack.cells.p[cell][0], + y = pack.cells.p[cell][1]; const military = pack.states[state].military; const i = military.length ? last(military).i + 1 : 0; const n = +(pack.cells.h[cell] < 20); // naval or land - const reg = {a:0, cell, i, n, u:{}, x, y, bx:x, by:y, state, icon:"🛡️"}; + const reg = {a: 0, cell, i, n, u: {}, x, y, bx: x, by: y, state, icon: "🛡️"}; reg.name = Military.getName(reg, military); military.push(reg); Military.generateNote(reg, pack.states[state]); // add legend @@ -163,9 +177,9 @@ function overviewRegiments(state) { function downloadRegimentsData() { const units = options.military.map(u => u.name); - let data = "State,Id,Name,"+units.map(u => capitalize(u)).join(",")+",Total\n"; // headers + let data = "State,Id,Name," + units.map(u => capitalize(u)).join(",") + ",Total\n"; // headers - body.querySelectorAll(":scope > div:not(.totalLine)").forEach(function(el) { + body.querySelectorAll(":scope > div:not(.totalLine)").forEach(function (el) { data += el.dataset.state + ","; data += el.dataset.id + ","; data += el.dataset.name + ","; @@ -176,5 +190,4 @@ function overviewRegiments(state) { const name = getFileName("Regiments") + ".csv"; downloadFile(data, name); } - -} \ No newline at end of file +} diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js index f635dd40..98a4d40d 100644 --- a/modules/ui/religions-editor.js +++ b/modules/ui/religions-editor.js @@ -79,7 +79,7 @@ function editReligions() { if (r.i) { lines += `
- + @@ -93,7 +93,9 @@ function editReligions() {
`; } else { // No religion (neutral) line - lines += `
+ lines += `
@@ -124,7 +126,7 @@ function editReligions() { body.querySelectorAll("div.religions").forEach(el => el.addEventListener("mouseenter", ev => religionHighlightOn(ev))); body.querySelectorAll("div.religions").forEach(el => el.addEventListener("mouseleave", ev => religionHighlightOff(ev))); body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectReligionOnLineClick)); - body.querySelectorAll("rect.fillRect").forEach(el => el.addEventListener("click", religionChangeColor)); + body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", religionChangeColor)); body.querySelectorAll("div > input.religionName").forEach(el => el.addEventListener("input", religionChangeName)); body.querySelectorAll("div > select.religionType").forEach(el => el.addEventListener("change", religionChangeType)); body.querySelectorAll("div > input.religionForm").forEach(el => el.addEventListener("input", religionChangeForm)); @@ -215,13 +217,13 @@ function editReligions() { function religionChangeColor() { const el = this; const currentFill = el.getAttribute("fill"); - const religion = +el.parentNode.parentNode.dataset.id; + const religion = +el.parentNode.dataset.id; - const callback = function (fill) { - el.setAttribute("fill", fill); - pack.religions[religion].color = fill; - relig.select("#religion" + religion).attr("fill", fill); - debug.select("#religionsCenter" + religion).attr("fill", fill); + const callback = newFill => { + el.fill = newFill; + pack.religions[religion].color = newFill; + relig.select("#religion" + religion).attr("fill", newFill); + debug.select("#religionsCenter" + religion).attr("fill", newFill); }; openPicker(currentFill, callback); @@ -459,7 +461,13 @@ function editReligions() { // prepare svg alertMessage.innerHTML = "
‍
"; - const svg = d3.select("#alertMessage").insert("svg", "#religionInfo").attr("id", "hierarchy").attr("width", width).attr("height", height).style("text-anchor", "middle"); + const svg = d3 + .select("#alertMessage") + .insert("svg", "#religionInfo") + .attr("id", "hierarchy") + .attr("width", width) + .attr("height", height) + .style("text-anchor", "middle"); const graph = svg.append("g").attr("transform", `translate(10, -45)`); const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa"); const nodes = graph.append("g"); @@ -473,7 +481,24 @@ function editReligions() { .enter() .append("path") .attr("d", d => { - return "M" + d.source.x + "," + d.source.y + "C" + d.source.x + "," + (d.source.y * 3 + d.target.y) / 4 + " " + d.target.x + "," + (d.source.y * 2 + d.target.y) / 3 + " " + d.target.x + "," + d.target.y; + return ( + "M" + + d.source.x + + "," + + d.source.y + + "C" + + d.source.x + + "," + + (d.source.y * 3 + d.target.y) / 4 + + " " + + d.target.x + + "," + + (d.source.y * 2 + d.target.y) / 3 + + " " + + d.target.x + + "," + + d.target.y + ); }); const node = nodes @@ -578,7 +603,11 @@ function editReligions() { $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); tip("Click on religion to select, drag the circle to change religion", true); - viewbox.style("cursor", "crosshair").on("click", selectReligionOnMapClick).call(d3.drag().on("start", dragReligionBrush)).on("touchmove mousemove", moveReligionBrush); + viewbox + .style("cursor", "crosshair") + .on("click", selectReligionOnMapClick) + .call(d3.drag().on("start", dragReligionBrush)) + .on("touchmove mousemove", moveReligionBrush); body.querySelector("div").classList.add("selected"); } diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js index c1d8e978..d7909614 100644 --- a/modules/ui/states-editor.js +++ b/modules/ui/states-editor.js @@ -45,7 +45,7 @@ function editStates() { cl = el.classList, line = el.parentNode, state = +line.dataset.id; - if (cl.contains("fillRect")) stateChangeFill(el); + if (el.tagName === "FILL-BOX") stateChangeFill(el); else if (cl.contains("name")) editStateName(state); else if (cl.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]); else if (cl.contains("icon-star-empty")) stateCapitalZoomIn(state); @@ -102,7 +102,7 @@ function editStates() { // Neutral line lines += `
- + @@ -126,15 +126,10 @@ function editStates() { const capital = pack.burgs[s.capital].name; COArenderer.trigger("stateCOA" + s.i, s.coa); - lines += `
- + lines += `
+ @@ -149,9 +144,8 @@ function editStates() {
${si(population)}
- +
${s.cells}
@@ -237,18 +231,18 @@ function editStates() { function stateChangeFill(el) { const currentFill = el.getAttribute("fill"); - const state = +el.parentNode.parentNode.dataset.id; + const state = +el.parentNode.dataset.id; - const callback = function (fill) { - el.setAttribute("fill", fill); - pack.states[state].color = fill; - statesBody.select("#state" + state).attr("fill", fill); - statesBody.select("#state-gap" + state).attr("stroke", fill); - const halo = d3.color(fill) ? d3.color(fill).darker().hex() : "#666666"; + const callback = function (newFill) { + el.fill = newFill; + pack.states[state].color = newFill; + statesBody.select("#state" + state).attr("fill", newFill); + statesBody.select("#state-gap" + state).attr("stroke", newFill); + const halo = d3.color(newFill) ? d3.color(newFill).darker().hex() : "#666666"; statesHalo.select("#state-border" + state).attr("stroke", halo); // recolor regiments - const solidColor = fill[0] === "#" ? fill : "#999"; + const solidColor = newFill[0] === "#" ? newFill : "#999"; const darkerColor = d3.color(solidColor).darker().hex(); armies.select("#army" + state).attr("fill", solidColor); armies diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js index 00ea9196..f011f47b 100644 --- a/modules/ui/zones-editor.js +++ b/modules/ui/zones-editor.js @@ -33,26 +33,12 @@ function editZones() { const el = ev.target, cl = el.classList, zone = el.parentNode.dataset.id; - if (cl.contains("culturePopulation")) { - changePopulation(zone); - return; - } - if (cl.contains("icon-trash-empty")) { - zoneRemove(zone); - return; - } - if (cl.contains("icon-eye")) { - toggleVisibility(el); - return; - } - if (cl.contains("icon-pin")) { - toggleFog(zone, cl); - return; - } - if (cl.contains("fillRect")) { - changeFill(el); - return; - } + if (el.tagName === "FILL-BOX") changeFill(el); + else if (cl.contains("culturePopulation")) changePopulation(zone); + else if (cl.contains("icon-trash-empty")) zoneRemove(zone); + else if (cl.contains("icon-eye")) toggleVisibility(el); + else if (cl.contains("icon-pin")) toggleFog(zone, cl); + if (customization) selectZone(el); }); @@ -79,8 +65,9 @@ function editZones() { const inactive = this.style.display === "none"; const focused = defs.select("#fog #focus" + this.id).size(); - lines += `
- + lines += `
+
${c.length}
@@ -275,9 +262,9 @@ function editZones() { function changeFill(el) { const fill = el.getAttribute("fill"); - const callback = function (fill) { - el.setAttribute("fill", fill); - document.getElementById(el.parentNode.parentNode.dataset.id).setAttribute("fill", fill); + const callback = newFill => { + el.fill = newFill; + document.getElementById(el.parentNode.dataset.id).setAttribute("fill", newFill); }; openPicker(fill, callback); @@ -349,7 +336,7 @@ function editZones() { const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const line = `
- +
0
From 8d921101576e40598b118582f0e11ad27aae32a2 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 22 Jan 2022 18:39:05 +0300 Subject: [PATCH 04/60] fill-box - keep height as a parameter --- components/fill-box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/fill-box.js b/components/fill-box.js index eecfda92..02912f3b 100644 --- a/components/fill-box.js +++ b/components/fill-box.js @@ -7,7 +7,6 @@ } fill-box > svg { - aspect-ratio: 1; vertical-align: middle; pointer-events: none; } @@ -38,6 +37,7 @@ this.appendChild(template.content.cloneNode(true)); this.querySelector("rect")?.setAttribute("fill", this.fill); this.querySelector("svg")?.setAttribute("width", this.size); + this.querySelector("svg")?.setAttribute("height", this.size); } static showTip() { From 503eabd9d4d51b2abce3cbd14eb4690c334a8ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Efruz=20Y=C4=B1ld=C4=B1r=C4=B1r?= <30903352+yldrefruz@users.noreply.github.com> Date: Wed, 26 Jan 2022 17:16:54 +0300 Subject: [PATCH 05/60] Api-Like map save option (#730) * Added Save Option for Api-like json export. Will be updated and set to a scheme * Save Option for Api-like added * Moved UI of json export to export dialog. Moved json export to another file named export-json.js * Added Seperated json export selections - all JSON : exports all json data. - minimal JSON : exports json data without cells data. - cells JSON : exports json data only with pack.cells data. * More Stable Cell Export... --- .gitignore | 4 +- index.html | 9 +- modules/export-json.js | 362 +++++++++++++++++++++++++++++++++++++++++ modules/save.js | 2 + 4 files changed, 375 insertions(+), 2 deletions(-) create mode 100644 modules/export-json.js diff --git a/.gitignore b/.gitignore index eb169d8d..8cd42a0d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ .bat -.vscode \ No newline at end of file +.vscode +.idea +.idea/Fantasy-Map-Generator.iml diff --git a/index.html b/index.html index ebb2b775..871503bf 100644 --- a/index.html +++ b/index.html @@ -978,7 +978,7 @@ - + @@ -3607,6 +3607,12 @@

GeoJSON format is used in GIS tools such as QGIS. Check out wiki-page for guidance.

Generator uses pop-up window to download files. Please ensure your browser does not block popups.

It's also possible to export map to Foundry VTT, see the module.

+
Export To Json
+
+ + + +

GeoJSON format is used in GIS tools such as QGIS. Check out wiki-page for guidance.

Generator uses pop-up window to download files. Please ensure your browser does not block popups.

-

It's also possible to export map to Foundry VTT, see the module.

Export To JSON
- +

Export in JSON format can be used as an API replacement.

+ +
+

It's also possible to export map to Foundry VTT, see the module.

+
@@ -3611,7 +3612,8 @@
- + +

Export in JSON format can be used as an API replacement.

@@ -4425,6 +4427,7 @@ + diff --git a/modules/export-json.js b/modules/export-json.js index b4c62916..28d87a09 100644 --- a/modules/export-json.js +++ b/modules/export-json.js @@ -5,7 +5,8 @@ function exportToJson(type) { const typeMap = { Full: getFullDataJson, Minimal: getMinimalDataJson, - Cells: getCellsDataJson + PackCells: getPackCellsDataJson, + GridCells: getGridCellsDataJson, }; const mapData = typeMap[type](); @@ -64,7 +65,7 @@ function getSettings() { return settings; } -function getCellsData() { +function getPackCellsData() { const cellConverted = { i: Array.from(pack.cells.i), v: pack.cells.v, @@ -91,7 +92,6 @@ function getCellsData() { religion: Array.from(pack.cells.religion), province: Array.from(pack.cells.province) }; - const cellObjArr = []; { cellConverted.i.forEach(value => { @@ -140,12 +140,24 @@ function getCellsData() { return cellsData; } +//data only containing graphical appearance +function getGridCellsData(){ + const gridData = { + spacing: grid.spacing, + cellsY: grid.cellsY, + cellsX: grid.cellsX, + points: grid.points, + boundary: grid.boundary + } + return gridData +} + function getFullDataJson() { TIME && console.time("getFullDataJson"); const info = getMapInfo(); const settings = getSettings(); - const cells = getCellsData(); + const cells = getPackCellsData(); const exportData = {info, settings, coords: mapCoordinates, cells, biomes: biomesData, notes, nameBases}; TIME && console.timeEnd("getFullDataJson"); @@ -174,13 +186,24 @@ function getMinimalDataJson() { return JSON.stringify(exportData); } -function getCellsDataJson() { +function getPackCellsDataJson() { TIME && console.time("getCellsDataJson"); const info = getMapInfo(); - const cells = getCellsData(); + const cells = getPackCellsData(); const exportData = {info, cells}; TIME && console.timeEnd("getCellsDataJson"); return JSON.stringify(exportData); } + +function getGridCellsDataJson() { + TIME && console.time("getGridCellsDataJson"); + + const info = getMapInfo(); + const gridCells = getGridCellsData() + const exportData = {info,gridCells}; + + TIME && console.log("getGridCellsDataJson"); + return JSON.stringify(exportData); +} \ No newline at end of file diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js index 1a2bef17..fff6c4ee 100644 --- a/modules/ui/burg-editor.js +++ b/modules/ui/burg-editor.js @@ -52,6 +52,7 @@ function editBurg(id) { document.getElementById("burglLegend").addEventListener("click", editBurgLegend); document.getElementById("burgLock").addEventListener("click", toggleBurgLockButton); document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg); + document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraphs); function updateBurgValues() { const id = +elSelected.attr("data-id"); @@ -542,6 +543,11 @@ function editBurg(id) { const name = elSelected.text(); editNotes("burg" + id, name); } + function showTemperatureGraphs() { + const id = elSelected.attr("data-id"); + showTGForBurg(id); + } + function removeSelectedBurg() { const id = +elSelected.attr("data-id"); diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js new file mode 100644 index 00000000..f4a236fa --- /dev/null +++ b/modules/ui/temperature-graph.js @@ -0,0 +1,220 @@ +"use strict"; + +function showTGForBurg(id) { + const b = pack.burgs[id]; + const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT; + const temperature = grid.cells.temp[pack.cells.g[b.cell]]; + const prec = grid.cells.prec[pack.cells.g[b.cell]]; + + const weights = [ + [//Layer0 + //IN0 IN1 + [10.782752257744338, 2.7100404240962126], + [-2.8226802110591462, 51.62920138583541], + [-6.6250956268643835, 4.427939197315455], + [-59.64690518541339, 41.89084162654791], + [-1.3302059550553835, -3.6964487738450913], + [-2.5844898544535497, 0.09879268612455298], + [-5.58528252533573, -0.23426224364501905], + [26.94531337690372, 20.898158905988907], + [3.816397481634785, -0.19045424064580757], + [-4.835697931609101, -10.748232783636434] + ], + [//Layer1 + [-2.478952081870123, 0.6405800134306895, -7.136785640930911, -0.2186529024764509, 3.6568435212735424, 31.446026153530838, -19.91005187482281, 0.2543395274783306, -7.036924569659988, -0.7721371621651565], + [-197.10583739743538, 6.889921141533474, 0.5058941504631129, 7.7667203434606416, -53.74180550086929, -15.717331715167001, -61.32068414155791, -2.259728220978728, 35.84049189540032, 94.6157364730977], + [-5.312011591880851, -0.09923148954215096, -1.7132477487917586, -22.55559652066422, 0.4806107280554336, -26.5583974109492, 2.0558257347014863, 25.815645234787432, -18.569029876991156, -2.6792003366730035], + [20.706518520569514, 18.344297403881875, 99.52244671131733, -58.53124969563653, -60.74384321042212, -80.57540534651835, 7.884792406540866, -144.33871131678563, 80.134199744324, 20.50745285622448], + [-52.88299538575159, -15.782505343805528, 16.63316001054924, 88.09475330556671, -17.619552086641818, -19.943999528182427, -120.46286026828177, 19.354752020806302, 43.49422099308949, 28.733924806541363], + [-2.4621368711159897, -1.2074759925679757, -1.5133898639835084, 2.173715352424188, -5.988707597991683, 3.0234147182203843, 3.3284199340000797, -1.8805161326360575, 5.151910934121654, -1.2540553911612116] + ], + [//Layer2 + [-0.3357437479474717, 0.01430651794222215, -0.7927524256670906, 0.2121636229648523, 1.0587803023358318, -3.759288325505095], + [-1.1988028704442968, 1.3768997508052783, -3.8480086358278816, 0.5289387340947143, 0.5769459339961177, -1.2528318145750772], + [1.0074966649240946, 1.155301164699459, -2.974254371052421, 0.47408176553219467, 0.5939042688615264, -0.7631976947131744] + ] + ]; + //From (-∞,∞) to ~[-1,1] + const In1 = [(Math.abs(lat) - 26.950680212887473)/48.378128506956,(prec - 12.229929140832644)/29.94402033696607]; + + let lastIn = In1; + let lstOut = []; + for (let levelN = 0; levelN < weights.length ; levelN++) { + let layerN = weights[levelN]; + for (let i = 0; i < layerN.length ; i++) { + lstOut[i] = 0; + for (let j = 0; j < layerN[i].length ; j++) + lstOut[i] = lstOut[i] + lastIn[j]*layerN[i][j] ; + //Sigmoid + lstOut[i] = 1/(1+Math.exp(-lstOut[i])); + } + lastIn = lstOut.slice(0); + } + + //From [0,1] to [min,max] + //Standard deviation for average temperature for the year + const yearSig = lstOut[0]*62.9466411977018+0.28613807855649165; + //Standard deviation for the difference between the minimum and maximum temperatures for the year + const yearDelTmpSig = (lstOut[1]*13.541688670361175+0.1414213562373084) > yearSig ? yearSig : (lstOut[1]*13.541688670361175+0.1414213562373084); + //Expected value for the difference between the minimum and maximum temperatures for the year + const yearDelTmpMu = lstOut[2]*15.266666666666667+0.6416666666666663; + + //Temperature change shape + //const formTmp = -Math.cos(data*2*Math.PI) / 2; + const delT = yearDelTmpMu/2+0.5*yearDelTmpSig/2; + const minT = temperature - ((yearSig+delT) > 15 ? (yearSig+delT) : 15); + const maxT = temperature + (temperature - minT); + + const chartWidth = window.innerWidth/2, + chartHeight = 300; // height of our land/sea profile, excluding the biomes data below + const xOffset = 80, + yOffset = 10; // this is our drawing starting point from top-left (y = 0) of SVG + + const xscale = d3.scaleLinear().domain([0,360]).range([0, chartWidth]); + const xscale_inv = d3.scaleLinear().domain([0, chartWidth]).range([0,360]); + const yscale = d3.scaleLinear().domain([minT, maxT]).range([chartHeight, 0]); + const yscale_inv = d3.scaleLinear().domain([chartHeight, 0]).range([minT, maxT]); + + const dataAverTmp = []; + const dataMinTmp = []; + const dataMaxTmp = []; + for (let i = 0; i < 360 ; i++) { + let formTmp = Math.cos(i/360*2*Math.PI) / 2; + if(lat > 0) formTmp = -formTmp; + const averT = formTmp * yearSig + temperature; + const delT = yearDelTmpMu/2+formTmp*yearDelTmpSig/2; + dataAverTmp.push({x:xscale(i) + xOffset,y:yscale(averT) + yOffset}); + dataMinTmp.push({x:xscale(i) + xOffset,y:yscale(averT-delT) + yOffset}); + dataMaxTmp.push({x:xscale(i) + xOffset,y:yscale(averT+delT) + yOffset}); + } + + document.getElementById("epControls").style.visibility = "hidden"; + + $("#elevationProfile").dialog({ + title: "Seasonal temperature schedule", + resizable: false, + width: window.width, + close: closeTGForBurg, + position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"} + }); + + draw(); + + function draw() { + + document.getElementById("elevationGraph").innerHTML = ""; + const legendSize = 60; + const chart = d3 + .select("#elevationGraph") + .append("svg") + .attr("width", chartWidth + 120) + .attr("height", chartHeight + yOffset + legendSize) + .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"); + + let Gen = d3.line().curve(d3.curveBasis).x((p) => p.x).y((p) => p.y); + + //print graphs + chart.append("g").append("path").attr("d", Gen(dataAverTmp)) + .attr("fill", "none").attr("stroke", "orange").on("mousemove", printVal).style("stroke-width", "2"); + chart.append("g").append("path").attr("d", Gen(dataMinTmp)) + .attr("fill", "none").attr("stroke", "blue").on("mousemove", printVal).style("stroke-width", "2"); + chart.append("g").append("path").attr("d", Gen(dataMaxTmp)) + .attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2"); + + //print legend + chart.append("circle").attr("cx",chartWidth*1/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "red") + chart.append("text").attr("x", chartWidth*1/4+20).attr("y", chartHeight + yOffset + legendSize*0.8) + .text("Day temperature").style("font-size", "10px").attr("alignment-baseline","middle") + chart.append("circle").attr("cx",chartWidth*2/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "orange") + chart.append("text").attr("x", chartWidth*2/4+20).attr("y", chartHeight + yOffset + legendSize*0.8) + .text("Average daily temperature").style("font-size", "10px").attr("alignment-baseline","middle") + chart.append("circle").attr("cx",chartWidth*3/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "blue") + chart.append("text").attr("x", chartWidth*3/4+20).attr("y", chartHeight + yOffset + legendSize*0.8) + .text("Night temperature").style("font-size", "10px").attr("alignment-baseline","middle") + + + + //print title + let timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); + + const months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; + //Val under line + function printVal(){ + let m = d3.mouse(this); + let tmp = convertTemperature(yscale_inv(m[1]-yOffset).toFixed(1)); + let month = months[parseInt(xscale_inv(m[0]-xOffset)/360*12)]; + chart.attr("data-tip", tmp + " in " + month); + clearTimeout(timerId); + timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); + } + + const xAxis = d3 + .axisBottom(xscale) + .ticks(10) + .tickFormat(function (d) { + return months[parseInt(d/360*12)]; + }); + const yAxis = d3 + .axisLeft(yscale) + .ticks(5) + .tickFormat(function (d) { + return convertTemperature(d); + }); + + const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight).tickFormat(""); + const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth).tickFormat(""); + + chart + .append("g") + .attr("id", "epxaxis") + .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset + 20) + ")") + .call(xAxis) + .selectAll("text") + .style("text-anchor", "center") + .attr("transform", function (d) { + return "rotate(0)"; // used to rotate labels, - anti-clockwise, + clockwise + }); + + chart + .append("g") + .attr("id", "epyaxis") + .attr("transform", "translate(" + parseInt(+xOffset - 10) + "," + parseInt(+yOffset) + ")") + .call(yAxis); + + // add the X gridlines + chart + .append("g") + .attr("id", "epxgrid") + .attr("class", "epgrid") + .attr("stroke-dasharray", "4 1") + .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset) + ")") + .call(xGrid); + + if(minT < 0 && maxT > 0){ + //add zero lv + chart.append("g").append("line") + .attr("x1", xscale(0) + xOffset) + .attr("y1", yscale(0) + yOffset) + .attr("x2", xscale(360) + xOffset) + .attr("y2", yscale(0) + yOffset) + .attr("stroke", "black"); + } + + // add the Y gridlines + chart + .append("g") + .attr("id", "epygrid") + .attr("class", "epgrid") + .attr("stroke-dasharray", "4 1") + .attr("transform", "translate(" + xOffset + "," + yOffset + ")") + .call(yGrid); + } + function closeTGForBurg() { + document.getElementById("epControls").style.visibility = "visible"; + document.getElementById("elevationGraph").innerHTML = ""; + modules.elevation = false; + } +} \ No newline at end of file From 5f0be0401e336cedf924c23ecc46e19a72e9b787 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 4 Feb 2022 00:13:10 +0300 Subject: [PATCH 10/60] burg temperature graph - corrections --- index.html | 100 ++++----- modules/ui/burg-editor.js | 10 +- modules/ui/temperature-graph.js | 352 ++++++++++++++++++-------------- 3 files changed, 253 insertions(+), 209 deletions(-) diff --git a/index.html b/index.html index 14c5f5ea..6dc479f1 100644 --- a/index.html +++ b/index.html @@ -1799,7 +1799,7 @@ Curve: - 🔊 - -
+
+
Name:
+ + 🔊 + +
-
-
Type:
- -
+
+
Type:
+ +
-
-
Culture:
- - -
+
+
Culture:
+ + +
-
-
Population:
- -
+
+
Population:
+ +
-
-
Features:
- - - - - - - -
+
+
Features:
+ + + + + + + +
-
-
Temperature:
- , like in - -
+
+
Temperature:
+ , like in + + +
-
-
Elevation:
- above sea level -
+
+
Elevation:
+ above sea level +
@@ -2085,7 +2086,6 @@ -
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js index fff6c4ee..8ec8b61a 100644 --- a/modules/ui/burg-editor.js +++ b/modules/ui/burg-editor.js @@ -52,7 +52,7 @@ function editBurg(id) { document.getElementById("burglLegend").addEventListener("click", editBurgLegend); document.getElementById("burgLock").addEventListener("click", toggleBurgLockButton); document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg); - document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraphs); + document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraph); function updateBurgValues() { const id = +elSelected.attr("data-id"); @@ -543,11 +543,11 @@ function editBurg(id) { const name = elSelected.text(); editNotes("burg" + id, name); } - function showTemperatureGraphs() { - const id = elSelected.attr("data-id"); - showTGForBurg(id); - } + function showTemperatureGraph() { + const id = elSelected.attr("data-id"); + showBurgTemperatureGraph(id); + } function removeSelectedBurg() { const id = +elSelected.attr("data-id"); diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js index f4a236fa..aa107be6 100644 --- a/modules/ui/temperature-graph.js +++ b/modules/ui/temperature-graph.js @@ -1,161 +1,208 @@ "use strict"; -function showTGForBurg(id) { - const b = pack.burgs[id]; - const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT; - const temperature = grid.cells.temp[pack.cells.g[b.cell]]; - const prec = grid.cells.prec[pack.cells.g[b.cell]]; - - const weights = [ - [//Layer0 - //IN0 IN1 - [10.782752257744338, 2.7100404240962126], - [-2.8226802110591462, 51.62920138583541], - [-6.6250956268643835, 4.427939197315455], - [-59.64690518541339, 41.89084162654791], - [-1.3302059550553835, -3.6964487738450913], - [-2.5844898544535497, 0.09879268612455298], - [-5.58528252533573, -0.23426224364501905], - [26.94531337690372, 20.898158905988907], - [3.816397481634785, -0.19045424064580757], - [-4.835697931609101, -10.748232783636434] - ], - [//Layer1 - [-2.478952081870123, 0.6405800134306895, -7.136785640930911, -0.2186529024764509, 3.6568435212735424, 31.446026153530838, -19.91005187482281, 0.2543395274783306, -7.036924569659988, -0.7721371621651565], - [-197.10583739743538, 6.889921141533474, 0.5058941504631129, 7.7667203434606416, -53.74180550086929, -15.717331715167001, -61.32068414155791, -2.259728220978728, 35.84049189540032, 94.6157364730977], - [-5.312011591880851, -0.09923148954215096, -1.7132477487917586, -22.55559652066422, 0.4806107280554336, -26.5583974109492, 2.0558257347014863, 25.815645234787432, -18.569029876991156, -2.6792003366730035], - [20.706518520569514, 18.344297403881875, 99.52244671131733, -58.53124969563653, -60.74384321042212, -80.57540534651835, 7.884792406540866, -144.33871131678563, 80.134199744324, 20.50745285622448], - [-52.88299538575159, -15.782505343805528, 16.63316001054924, 88.09475330556671, -17.619552086641818, -19.943999528182427, -120.46286026828177, 19.354752020806302, 43.49422099308949, 28.733924806541363], - [-2.4621368711159897, -1.2074759925679757, -1.5133898639835084, 2.173715352424188, -5.988707597991683, 3.0234147182203843, 3.3284199340000797, -1.8805161326360575, 5.151910934121654, -1.2540553911612116] - ], - [//Layer2 - [-0.3357437479474717, 0.01430651794222215, -0.7927524256670906, 0.2121636229648523, 1.0587803023358318, -3.759288325505095], - [-1.1988028704442968, 1.3768997508052783, -3.8480086358278816, 0.5289387340947143, 0.5769459339961177, -1.2528318145750772], - [1.0074966649240946, 1.155301164699459, -2.974254371052421, 0.47408176553219467, 0.5939042688615264, -0.7631976947131744] - ] - ]; - //From (-∞,∞) to ~[-1,1] - const In1 = [(Math.abs(lat) - 26.950680212887473)/48.378128506956,(prec - 12.229929140832644)/29.94402033696607]; - - let lastIn = In1; - let lstOut = []; - for (let levelN = 0; levelN < weights.length ; levelN++) { - let layerN = weights[levelN]; - for (let i = 0; i < layerN.length ; i++) { - lstOut[i] = 0; - for (let j = 0; j < layerN[i].length ; j++) - lstOut[i] = lstOut[i] + lastIn[j]*layerN[i][j] ; - //Sigmoid - lstOut[i] = 1/(1+Math.exp(-lstOut[i])); - } - lastIn = lstOut.slice(0); - } - - //From [0,1] to [min,max] - //Standard deviation for average temperature for the year - const yearSig = lstOut[0]*62.9466411977018+0.28613807855649165; - //Standard deviation for the difference between the minimum and maximum temperatures for the year - const yearDelTmpSig = (lstOut[1]*13.541688670361175+0.1414213562373084) > yearSig ? yearSig : (lstOut[1]*13.541688670361175+0.1414213562373084); - //Expected value for the difference between the minimum and maximum temperatures for the year - const yearDelTmpMu = lstOut[2]*15.266666666666667+0.6416666666666663; - - //Temperature change shape - //const formTmp = -Math.cos(data*2*Math.PI) / 2; - const delT = yearDelTmpMu/2+0.5*yearDelTmpSig/2; - const minT = temperature - ((yearSig+delT) > 15 ? (yearSig+delT) : 15); - const maxT = temperature + (temperature - minT); +function showBurgTemperatureGraph(id) { + const b = pack.burgs[id]; + const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT; + const temperature = grid.cells.temp[pack.cells.g[b.cell]]; + const prec = grid.cells.prec[pack.cells.g[b.cell]]; - const chartWidth = window.innerWidth/2, - chartHeight = 300; // height of our land/sea profile, excluding the biomes data below - const xOffset = 80, - yOffset = 10; // this is our drawing starting point from top-left (y = 0) of SVG - - const xscale = d3.scaleLinear().domain([0,360]).range([0, chartWidth]); - const xscale_inv = d3.scaleLinear().domain([0, chartWidth]).range([0,360]); - const yscale = d3.scaleLinear().domain([minT, maxT]).range([chartHeight, 0]); - const yscale_inv = d3.scaleLinear().domain([chartHeight, 0]).range([minT, maxT]); - - const dataAverTmp = []; - const dataMinTmp = []; - const dataMaxTmp = []; - for (let i = 0; i < 360 ; i++) { - let formTmp = Math.cos(i/360*2*Math.PI) / 2; - if(lat > 0) formTmp = -formTmp; - const averT = formTmp * yearSig + temperature; - const delT = yearDelTmpMu/2+formTmp*yearDelTmpSig/2; - dataAverTmp.push({x:xscale(i) + xOffset,y:yscale(averT) + yOffset}); - dataMinTmp.push({x:xscale(i) + xOffset,y:yscale(averT-delT) + yOffset}); - dataMaxTmp.push({x:xscale(i) + xOffset,y:yscale(averT+delT) + yOffset}); - } - - document.getElementById("epControls").style.visibility = "hidden"; + // prettier-ignore + const weights = [ + [// Layer0 + [10.782752257744338, 2.7100404240962126], + [-2.8226802110591462, 51.62920138583541], + [-6.6250956268643835, 4.427939197315455], + [-59.64690518541339, 41.89084162654791], + [-1.3302059550553835, -3.6964487738450913], + [-2.5844898544535497, 0.09879268612455298], + [-5.58528252533573, -0.23426224364501905], + [26.94531337690372, 20.898158905988907], + [3.816397481634785, -0.19045424064580757], + [-4.835697931609101, -10.748232783636434] + ], + [// Layer1 + [-2.478952081870123, 0.6405800134306895, -7.136785640930911, -0.2186529024764509, 3.6568435212735424, 31.446026153530838, -19.91005187482281, 0.2543395274783306, -7.036924569659988, -0.7721371621651565], + [-197.10583739743538, 6.889921141533474, 0.5058941504631129, 7.7667203434606416, -53.74180550086929, -15.717331715167001, -61.32068414155791, -2.259728220978728, 35.84049189540032, 94.6157364730977], + [-5.312011591880851, -0.09923148954215096, -1.7132477487917586, -22.55559652066422, 0.4806107280554336, -26.5583974109492, 2.0558257347014863, 25.815645234787432, -18.569029876991156, -2.6792003366730035], + [20.706518520569514, 18.344297403881875, 99.52244671131733, -58.53124969563653, -60.74384321042212, -80.57540534651835, 7.884792406540866, -144.33871131678563, 80.134199744324, 20.50745285622448], + [-52.88299538575159, -15.782505343805528, 16.63316001054924, 88.09475330556671, -17.619552086641818, -19.943999528182427, -120.46286026828177, 19.354752020806302, 43.49422099308949, 28.733924806541363], + [-2.4621368711159897, -1.2074759925679757, -1.5133898639835084, 2.173715352424188, -5.988707597991683, 3.0234147182203843, 3.3284199340000797, -1.8805161326360575, 5.151910934121654, -1.2540553911612116] + ], + [// Layer2 + [-0.3357437479474717, 0.01430651794222215, -0.7927524256670906, 0.2121636229648523, 1.0587803023358318, -3.759288325505095], + [-1.1988028704442968, 1.3768997508052783, -3.8480086358278816, 0.5289387340947143, 0.5769459339961177, -1.2528318145750772], + [1.0074966649240946, 1.155301164699459, -2.974254371052421, 0.47408176553219467, 0.5939042688615264, -0.7631976947131744] + ] + ]; + // From (-∞,∞) to ~[-1,1] + const In1 = [(Math.abs(lat) - 26.950680212887473) / 48.378128506956, (prec - 12.229929140832644) / 29.94402033696607]; - $("#elevationProfile").dialog({ - title: "Seasonal temperature schedule", - resizable: false, - width: window.width, - close: closeTGForBurg, - position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"} - }); + let lastIn = In1; + let lstOut = []; - draw(); + for (let levelN = 0; levelN < weights.length; levelN++) { + const layerN = weights[levelN]; + for (let i = 0; i < layerN.length; i++) { + lstOut[i] = 0; + for (let j = 0; j < layerN[i].length; j++) { + lstOut[i] = lstOut[i] + lastIn[j] * layerN[i][j]; + } + // sigmoid + lstOut[i] = 1 / (1 + Math.exp(-lstOut[i])); + } + lastIn = lstOut.slice(0); + } - function draw() { + // Standard deviation for average temperature for the year from [0,1] to [min,max] + const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165; + // Standard deviation for the difference between the minimum and maximum temperatures for the year + const yearDelTmpSig = lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig ? yearSig : lstOut[1] * 13.541688670361175 + 0.1414213562373084; + // Expected value for the difference between the minimum and maximum temperatures for the year + const yearDelTmpMu = lstOut[2] * 15.266666666666667 + 0.6416666666666663; - document.getElementById("elevationGraph").innerHTML = ""; - const legendSize = 60; + // Temperature change shape + const delT = yearDelTmpMu / 2 + (0.5 * yearDelTmpSig) / 2; + const minT = temperature - (yearSig + delT > 15 ? yearSig + delT : 15); + const maxT = temperature + (temperature - minT); + + // height of land/sea profile, excluding the biomes data below + const chartWidth = window.innerWidth / 2; + const chartHeight = 300; + + // drawing starting point from top-left (y = 0) of SVG + const xOffset = 80; + const yOffset = 10; + + const xscale = d3.scaleLinear().domain([0, 360]).range([0, chartWidth]); + const xscale_inv = d3.scaleLinear().domain([0, chartWidth]).range([0, 360]); + const yscale = d3.scaleLinear().domain([minT, maxT]).range([chartHeight, 0]); + const yscale_inv = d3.scaleLinear().domain([chartHeight, 0]).range([minT, maxT]); + + const dataAverTmp = []; + const dataMinTmp = []; + const dataMaxTmp = []; + + for (let i = 0; i < 360; i++) { + let formTmp = Math.cos((i / 360) * 2 * Math.PI) / 2; + if (lat > 0) formTmp = -formTmp; + const averT = formTmp * yearSig + temperature; + const delT = yearDelTmpMu / 2 + (formTmp * yearDelTmpSig) / 2; + dataAverTmp.push({x: xscale(i) + xOffset, y: yscale(averT) + yOffset}); + dataMinTmp.push({x: xscale(i) + xOffset, y: yscale(averT - delT) + yOffset}); + dataMaxTmp.push({x: xscale(i) + xOffset, y: yscale(averT + delT) + yOffset}); + } + + drawGraph(); + $("#alert").dialog({title: "Anual temperature in " + b.name, position: {my: "center", at: "center", of: "svg"}}); + + function drawGraph() { + alertMessage.innerHTML = ""; + + const legendSize = 60; const chart = d3 - .select("#elevationGraph") + .select("#alertMessage") .append("svg") .attr("width", chartWidth + 120) .attr("height", chartHeight + yOffset + legendSize) .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"); + chart + .append("defs") + .append("marker") + .attr("id", "arrowhead") + .attr("orient", "auto") + .attr("markerWidth", "2") + .attr("markerHeight", "4") + .attr("refX", "0.1") + .attr("refY", "2"); - let Gen = d3.line().curve(d3.curveBasis).x((p) => p.x).y((p) => p.y); + let Gen = d3 + .line() + .curve(d3.curveBasis) + .x(p => p.x) + .y(p => p.y); + + //print graphs + chart + .append("g") + .append("path") + .attr("d", Gen(dataAverTmp)) + .attr("fill", "none") + .attr("stroke", "orange") + .on("mousemove", printVal) + .style("stroke-width", "2"); + chart + .append("g") + .append("path") + .attr("d", Gen(dataMinTmp)) + .attr("fill", "none") + .attr("stroke", "blue") + .on("mousemove", printVal) + .style("stroke-width", "2"); + chart.append("g").append("path").attr("d", Gen(dataMaxTmp)).attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2"); + + //print legend + chart + .append("circle") + .attr("cx", (chartWidth * 1) / 4) + .attr("cy", chartHeight + yOffset + legendSize * 0.8) + .attr("r", 4) + .style("fill", "red"); + chart + .append("text") + .attr("x", (chartWidth * 1) / 4 + 20) + .attr("y", chartHeight + yOffset + legendSize * 0.8) + .text("Day temperature") + .style("font-size", "10px") + .attr("alignment-baseline", "middle"); + chart + .append("circle") + .attr("cx", (chartWidth * 2) / 4) + .attr("cy", chartHeight + yOffset + legendSize * 0.8) + .attr("r", 4) + .style("fill", "orange"); + chart + .append("text") + .attr("x", (chartWidth * 2) / 4 + 20) + .attr("y", chartHeight + yOffset + legendSize * 0.8) + .text("Average daily temperature") + .style("font-size", "10px") + .attr("alignment-baseline", "middle"); + chart + .append("circle") + .attr("cx", (chartWidth * 3) / 4) + .attr("cy", chartHeight + yOffset + legendSize * 0.8) + .attr("r", 4) + .style("fill", "blue"); + chart + .append("text") + .attr("x", (chartWidth * 3) / 4 + 20) + .attr("y", chartHeight + yOffset + legendSize * 0.8) + .text("Night temperature") + .style("font-size", "10px") + .attr("alignment-baseline", "middle"); + + //print title + let timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); + + const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + //Val under line + function printVal() { + let m = d3.mouse(this); + let tmp = convertTemperature(yscale_inv(m[1] - yOffset).toFixed(1)); + let month = months[parseInt((xscale_inv(m[0] - xOffset) / 360) * 12)]; + chart.attr("data-tip", tmp + " in " + month); + clearTimeout(timerId); + timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); + } - //print graphs - chart.append("g").append("path").attr("d", Gen(dataAverTmp)) - .attr("fill", "none").attr("stroke", "orange").on("mousemove", printVal).style("stroke-width", "2"); - chart.append("g").append("path").attr("d", Gen(dataMinTmp)) - .attr("fill", "none").attr("stroke", "blue").on("mousemove", printVal).style("stroke-width", "2"); - chart.append("g").append("path").attr("d", Gen(dataMaxTmp)) - .attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2"); - - //print legend - chart.append("circle").attr("cx",chartWidth*1/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "red") - chart.append("text").attr("x", chartWidth*1/4+20).attr("y", chartHeight + yOffset + legendSize*0.8) - .text("Day temperature").style("font-size", "10px").attr("alignment-baseline","middle") - chart.append("circle").attr("cx",chartWidth*2/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "orange") - chart.append("text").attr("x", chartWidth*2/4+20).attr("y", chartHeight + yOffset + legendSize*0.8) - .text("Average daily temperature").style("font-size", "10px").attr("alignment-baseline","middle") - chart.append("circle").attr("cx",chartWidth*3/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "blue") - chart.append("text").attr("x", chartWidth*3/4+20).attr("y", chartHeight + yOffset + legendSize*0.8) - .text("Night temperature").style("font-size", "10px").attr("alignment-baseline","middle") - - - - //print title - let timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); - - const months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; - //Val under line - function printVal(){ - let m = d3.mouse(this); - let tmp = convertTemperature(yscale_inv(m[1]-yOffset).toFixed(1)); - let month = months[parseInt(xscale_inv(m[0]-xOffset)/360*12)]; - chart.attr("data-tip", tmp + " in " + month); - clearTimeout(timerId); - timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); - } - const xAxis = d3 .axisBottom(xscale) .ticks(10) .tickFormat(function (d) { - return months[parseInt(d/360*12)]; + return months[parseInt((d / 360) * 12)]; }); const yAxis = d3 .axisLeft(yscale) @@ -192,16 +239,18 @@ function showTGForBurg(id) { .attr("stroke-dasharray", "4 1") .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset) + ")") .call(xGrid); - - if(minT < 0 && maxT > 0){ - //add zero lv - chart.append("g").append("line") - .attr("x1", xscale(0) + xOffset) - .attr("y1", yscale(0) + yOffset) - .attr("x2", xscale(360) + xOffset) - .attr("y2", yscale(0) + yOffset) - .attr("stroke", "black"); - } + + if (minT < 0 && maxT > 0) { + //add zero lv + chart + .append("g") + .append("line") + .attr("x1", xscale(0) + xOffset) + .attr("y1", yscale(0) + yOffset) + .attr("x2", xscale(360) + xOffset) + .attr("y2", yscale(0) + yOffset) + .attr("stroke", "black"); + } // add the Y gridlines chart @@ -212,9 +261,4 @@ function showTGForBurg(id) { .attr("transform", "translate(" + xOffset + "," + yOffset + ")") .call(yGrid); } - function closeTGForBurg() { - document.getElementById("epControls").style.visibility = "visible"; - document.getElementById("elevationGraph").innerHTML = ""; - modules.elevation = false; - } -} \ No newline at end of file +} From 6beb262e91f76877246f0417c0ff1ac633897b00 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 4 Feb 2022 01:33:11 +0300 Subject: [PATCH 11/60] burg temperature graph - clean up --- modules/ui/temperature-graph.js | 182 +++++++++----------------------- utils/unitUtils.js | 4 +- 2 files changed, 49 insertions(+), 137 deletions(-) diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js index aa107be6..507ea027 100644 --- a/modules/ui/temperature-graph.js +++ b/modules/ui/temperature-graph.js @@ -98,147 +98,68 @@ function showBurgTemperatureGraph(id) { function drawGraph() { alertMessage.innerHTML = ""; + const makeCurve = d3 + .line() + .curve(d3.curveBasis) + .x(p => p.x) + .y(p => p.y); + const getCurve = data => round(makeCurve(data), 2); + const legendSize = 60; const chart = d3 .select("#alertMessage") .append("svg") .attr("width", chartWidth + 120) - .attr("height", chartHeight + yOffset + legendSize) - .attr("id", "elevationSVG") - .attr("class", "epbackground"); + .attr("height", chartHeight + yOffset + legendSize); - // 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"); + const curves = chart.append("g").attr("fill", "none").style("stroke-width", 2.5); + curves.append("path").attr("d", getCurve(dataAverTmp)).attr("stroke", "orange").on("mousemove", printVal); + curves.append("path").attr("d", getCurve(dataMinTmp)).attr("stroke", "blue").on("mousemove", printVal); + curves.append("path").attr("d", getCurve(dataMaxTmp)).attr("stroke", "red").on("mousemove", printVal); - let Gen = d3 - .line() - .curve(d3.curveBasis) - .x(p => p.x) - .y(p => p.y); - - //print graphs - chart - .append("g") - .append("path") - .attr("d", Gen(dataAverTmp)) - .attr("fill", "none") - .attr("stroke", "orange") - .on("mousemove", printVal) - .style("stroke-width", "2"); - chart - .append("g") - .append("path") - .attr("d", Gen(dataMinTmp)) - .attr("fill", "none") - .attr("stroke", "blue") - .on("mousemove", printVal) - .style("stroke-width", "2"); - chart.append("g").append("path").attr("d", Gen(dataMaxTmp)).attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2"); - - //print legend - chart - .append("circle") - .attr("cx", (chartWidth * 1) / 4) - .attr("cy", chartHeight + yOffset + legendSize * 0.8) - .attr("r", 4) - .style("fill", "red"); - chart - .append("text") - .attr("x", (chartWidth * 1) / 4 + 20) - .attr("y", chartHeight + yOffset + legendSize * 0.8) - .text("Day temperature") - .style("font-size", "10px") - .attr("alignment-baseline", "middle"); - chart - .append("circle") - .attr("cx", (chartWidth * 2) / 4) - .attr("cy", chartHeight + yOffset + legendSize * 0.8) - .attr("r", 4) - .style("fill", "orange"); - chart - .append("text") - .attr("x", (chartWidth * 2) / 4 + 20) - .attr("y", chartHeight + yOffset + legendSize * 0.8) - .text("Average daily temperature") - .style("font-size", "10px") - .attr("alignment-baseline", "middle"); - chart - .append("circle") - .attr("cx", (chartWidth * 3) / 4) - .attr("cy", chartHeight + yOffset + legendSize * 0.8) - .attr("r", 4) - .style("fill", "blue"); - chart - .append("text") - .attr("x", (chartWidth * 3) / 4 + 20) - .attr("y", chartHeight + yOffset + legendSize * 0.8) - .text("Night temperature") - .style("font-size", "10px") - .attr("alignment-baseline", "middle"); - - //print title - let timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); + const legend = chart.append("g"); + const legendY = chartHeight + yOffset + legendSize * 0.9; + const legendX = n => (chartWidth * n) / 4; + const legendTextPadding = 10; + const legendTextX = n => legendX(n) + legendTextPadding; + legend.append("circle").attr("cx", legendX(1)).attr("cy", legendY).attr("r", 4).style("fill", "red"); + legend.append("text").attr("x", legendTextX(1)).attr("y", legendY).attr("alignment-baseline", "central").text("Day temperature"); + legend.append("circle").attr("cx", legendX(2)).attr("cy", legendY).attr("r", 4).style("fill", "orange"); + legend.append("text").attr("x", legendTextX(2)).attr("y", legendY).attr("alignment-baseline", "central").text("Mean daily temperature"); + legend.append("circle").attr("cx", legendX(3)).attr("cy", legendY).attr("r", 4).style("fill", "blue"); + legend.append("text").attr("x", legendTextX(3)).attr("y", legendY).attr("alignment-baseline", "central").text("Night temperature"); const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; - //Val under line + function printVal() { - let m = d3.mouse(this); - let tmp = convertTemperature(yscale_inv(m[1] - yOffset).toFixed(1)); - let month = months[parseInt((xscale_inv(m[0] - xOffset) / 360) * 12)]; - chart.attr("data-tip", tmp + " in " + month); - clearTimeout(timerId); - timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000); + const [x, y] = d3.mouse(this); + const tmp = convertTemperature(yscale_inv(y - yOffset)); + const month = months[parseInt((xscale_inv(x - xOffset) / 360) * 12)]; + chart.attr("data-tip", `${month} temperature: ${tmp}`); } - const xAxis = d3 - .axisBottom(xscale) - .ticks(10) - .tickFormat(function (d) { - return months[parseInt((d / 360) * 12)]; - }); - const yAxis = d3 - .axisLeft(yscale) - .ticks(5) - .tickFormat(function (d) { - return convertTemperature(d); - }); + const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight); + const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth); - const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight).tickFormat(""); - const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth).tickFormat(""); - - chart + const grid = chart.append("g").attr("class", "epgrid").attr("stroke-dasharray", "4 1"); + grid .append("g") - .attr("id", "epxaxis") - .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset + 20) + ")") - .call(xAxis) - .selectAll("text") - .style("text-anchor", "center") - .attr("transform", function (d) { - return "rotate(0)"; // used to rotate labels, - anti-clockwise, + clockwise - }); - - chart - .append("g") - .attr("id", "epyaxis") - .attr("transform", "translate(" + parseInt(+xOffset - 10) + "," + parseInt(+yOffset) + ")") - .call(yAxis); - - // add the X gridlines - chart - .append("g") - .attr("id", "epxgrid") - .attr("class", "epgrid") - .attr("stroke-dasharray", "4 1") - .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset) + ")") + .attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`) .call(xGrid); + grid.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yGrid); + grid.selectAll("text").remove(); + + const formatX = d => months[parseInt((d / 360) * 12)]; + const xAxis = d3.axisBottom(xscale).ticks(10).tickFormat(formatX); + + const formatY = d => convertTemperature(d); + const yAxis = d3.axisLeft(yscale).ticks(5).tickFormat(formatY); + + chart + .append("g") + .attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`) + .call(xAxis); + chart.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yAxis); if (minT < 0 && maxT > 0) { //add zero lv @@ -251,14 +172,5 @@ function showBurgTemperatureGraph(id) { .attr("y2", yscale(0) + yOffset) .attr("stroke", "black"); } - - // add the Y gridlines - chart - .append("g") - .attr("id", "epygrid") - .attr("class", "epgrid") - .attr("stroke-dasharray", "4 1") - .attr("transform", "translate(" + xOffset + "," + yOffset + ")") - .call(yGrid); } } diff --git a/utils/unitUtils.js b/utils/unitUtils.js index 609b5eb9..141fa432 100644 --- a/utils/unitUtils.js +++ b/utils/unitUtils.js @@ -5,7 +5,7 @@ function convertTemperature(temp) { switch (temperatureScale.value) { case "°C": - return temp + "°C"; + return rn(temp) + "°C"; case "°F": return rn((temp * 9) / 5 + 32) + "°F"; case "K": @@ -21,7 +21,7 @@ function convertTemperature(temp) { case "°Rø": return rn((temp * 21) / 40 + 7.5) + "°Rø"; default: - return temp + "°C"; + return rn(temp) + "°C"; } } From d99c24e0dec76107fc08d4459908b3d68d0ca7e1 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 4 Feb 2022 01:40:41 +0300 Subject: [PATCH 12/60] burg temperature graph - clean up --- index.css | 2 +- modules/ui/temperature-graph.js | 24 ++++++++++++------------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.css b/index.css index 9946d1b2..17913cb4 100644 --- a/index.css +++ b/index.css @@ -2310,7 +2310,7 @@ svg.button { .epgrid line { stroke: lightgrey; - stroke-opacity: 0.7; + stroke-opacity: 0.5; shape-rendering: crispEdges; } diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js index 507ea027..c8d51770 100644 --- a/modules/ui/temperature-graph.js +++ b/modules/ui/temperature-graph.js @@ -149,6 +149,18 @@ function showBurgTemperatureGraph(id) { grid.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yGrid); grid.selectAll("text").remove(); + //add zero degree line + if (minT < 0 && maxT > 0) { + chart + .append("g") + .append("line") + .attr("x1", xscale(0) + xOffset) + .attr("y1", yscale(0) + yOffset) + .attr("x2", xscale(360) + xOffset) + .attr("y2", yscale(0) + yOffset) + .attr("stroke", "gray"); + } + const formatX = d => months[parseInt((d / 360) * 12)]; const xAxis = d3.axisBottom(xscale).ticks(10).tickFormat(formatX); @@ -160,17 +172,5 @@ function showBurgTemperatureGraph(id) { .attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`) .call(xAxis); chart.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yAxis); - - if (minT < 0 && maxT > 0) { - //add zero lv - chart - .append("g") - .append("line") - .attr("x1", xscale(0) + xOffset) - .attr("y1", yscale(0) + yOffset) - .attr("x2", xscale(360) + xOffset) - .attr("y2", yscale(0) + yOffset) - .attr("stroke", "black"); - } } } From 6abed0cdf44624a9c633d3c113094002f06af09f Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 16:54:59 +0300 Subject: [PATCH 13/60] burg temperature graph - UI and data corrections --- modules/ui/temperature-graph.js | 141 ++++++++++++++------------------ 1 file changed, 63 insertions(+), 78 deletions(-) diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js index c8d51770..59a8ac9c 100644 --- a/modules/ui/temperature-graph.js +++ b/modules/ui/temperature-graph.js @@ -3,24 +3,16 @@ function showBurgTemperatureGraph(id) { const b = pack.burgs[id]; const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT; - const temperature = grid.cells.temp[pack.cells.g[b.cell]]; + const burgTemp = grid.cells.temp[pack.cells.g[b.cell]]; const prec = grid.cells.prec[pack.cells.g[b.cell]]; // prettier-ignore const weights = [ - [// Layer0 - [10.782752257744338, 2.7100404240962126], - [-2.8226802110591462, 51.62920138583541], - [-6.6250956268643835, 4.427939197315455], - [-59.64690518541339, 41.89084162654791], - [-1.3302059550553835, -3.6964487738450913], - [-2.5844898544535497, 0.09879268612455298], - [-5.58528252533573, -0.23426224364501905], - [26.94531337690372, 20.898158905988907], - [3.816397481634785, -0.19045424064580757], - [-4.835697931609101, -10.748232783636434] + [ + [10.782752257744338, 2.7100404240962126], [-2.8226802110591462, 51.62920138583541], [-6.6250956268643835, 4.427939197315455], [-59.64690518541339, 41.89084162654791], [-1.3302059550553835, -3.6964487738450913], + [-2.5844898544535497, 0.09879268612455298], [-5.58528252533573, -0.23426224364501905], [26.94531337690372, 20.898158905988907], [3.816397481634785, -0.19045424064580757], [-4.835697931609101, -10.748232783636434] ], - [// Layer1 + [ [-2.478952081870123, 0.6405800134306895, -7.136785640930911, -0.2186529024764509, 3.6568435212735424, 31.446026153530838, -19.91005187482281, 0.2543395274783306, -7.036924569659988, -0.7721371621651565], [-197.10583739743538, 6.889921141533474, 0.5058941504631129, 7.7667203434606416, -53.74180550086929, -15.717331715167001, -61.32068414155791, -2.259728220978728, 35.84049189540032, 94.6157364730977], [-5.312011591880851, -0.09923148954215096, -1.7132477487917586, -22.55559652066422, 0.4806107280554336, -26.5583974109492, 2.0558257347014863, 25.815645234787432, -18.569029876991156, -2.6792003366730035], @@ -28,13 +20,13 @@ function showBurgTemperatureGraph(id) { [-52.88299538575159, -15.782505343805528, 16.63316001054924, 88.09475330556671, -17.619552086641818, -19.943999528182427, -120.46286026828177, 19.354752020806302, 43.49422099308949, 28.733924806541363], [-2.4621368711159897, -1.2074759925679757, -1.5133898639835084, 2.173715352424188, -5.988707597991683, 3.0234147182203843, 3.3284199340000797, -1.8805161326360575, 5.151910934121654, -1.2540553911612116] ], - [// Layer2 + [ [-0.3357437479474717, 0.01430651794222215, -0.7927524256670906, 0.2121636229648523, 1.0587803023358318, -3.759288325505095], [-1.1988028704442968, 1.3768997508052783, -3.8480086358278816, 0.5289387340947143, 0.5769459339961177, -1.2528318145750772], [1.0074966649240946, 1.155301164699459, -2.974254371052421, 0.47408176553219467, 0.5939042688615264, -0.7631976947131744] ] ]; - // From (-∞,∞) to ~[-1,1] + // From (-∞, ∞) to ~[-1, 1] const In1 = [(Math.abs(lat) - 26.950680212887473) / 48.378128506956, (prec - 12.229929140832644) / 29.94402033696607]; let lastIn = In1; @@ -53,7 +45,7 @@ function showBurgTemperatureGraph(id) { lastIn = lstOut.slice(0); } - // Standard deviation for average temperature for the year from [0,1] to [min,max] + // Standard deviation for average temperature for the year from [0, 1] to [min, max] const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165; // Standard deviation for the difference between the minimum and maximum temperatures for the year const yearDelTmpSig = lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig ? yearSig : lstOut[1] * 13.541688670361175 + 0.1414213562373084; @@ -62,48 +54,48 @@ function showBurgTemperatureGraph(id) { // Temperature change shape const delT = yearDelTmpMu / 2 + (0.5 * yearDelTmpSig) / 2; - const minT = temperature - (yearSig + delT > 15 ? yearSig + delT : 15); - const maxT = temperature + (temperature - minT); + const minT = burgTemp - Math.max(yearSig + delT, 15); + const maxT = burgTemp + (burgTemp - minT); - // height of land/sea profile, excluding the biomes data below - const chartWidth = window.innerWidth / 2; + const chartWidth = Math.max(window.innerWidth / 2, 580); const chartHeight = 300; // drawing starting point from top-left (y = 0) of SVG - const xOffset = 80; + const xOffset = 60; const yOffset = 10; - const xscale = d3.scaleLinear().domain([0, 360]).range([0, chartWidth]); - const xscale_inv = d3.scaleLinear().domain([0, chartWidth]).range([0, 360]); + const year = new Date().getFullYear(); // use current year + const startDate = new Date(year, 0, 1); + const endDate = new Date(year, 11, 31); + const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + + const xscale = d3.scaleTime().domain([startDate, endDate]).range([0, chartWidth]); const yscale = d3.scaleLinear().domain([minT, maxT]).range([chartHeight, 0]); - const yscale_inv = d3.scaleLinear().domain([chartHeight, 0]).range([minT, maxT]); - const dataAverTmp = []; - const dataMinTmp = []; - const dataMaxTmp = []; + const tempMean = []; + const tempMin = []; + const tempMax = []; - for (let i = 0; i < 360; i++) { - let formTmp = Math.cos((i / 360) * 2 * Math.PI) / 2; + months.forEach((month, index) => { + const rate = index / 11; + let formTmp = Math.cos(rate * 2 * Math.PI) / 2; if (lat > 0) formTmp = -formTmp; - const averT = formTmp * yearSig + temperature; - const delT = yearDelTmpMu / 2 + (formTmp * yearDelTmpSig) / 2; - dataAverTmp.push({x: xscale(i) + xOffset, y: yscale(averT) + yOffset}); - dataMinTmp.push({x: xscale(i) + xOffset, y: yscale(averT - delT) + yOffset}); - dataMaxTmp.push({x: xscale(i) + xOffset, y: yscale(averT + delT) + yOffset}); - } + + const x = rate * chartWidth + xOffset; + const tempAverage = formTmp * yearSig + burgTemp; + const tempDelta = yearDelTmpMu / 2 + (formTmp * yearDelTmpSig) / 2; + + tempMean.push([x, yscale(tempAverage) + yOffset]); + tempMin.push([x, yscale(tempAverage - tempDelta) + yOffset]); + tempMax.push([x, yscale(tempAverage + tempDelta) + yOffset]); + }); drawGraph(); - $("#alert").dialog({title: "Anual temperature in " + b.name, position: {my: "center", at: "center", of: "svg"}}); + $("#alert").dialog({title: "Annual temperature in " + b.name, position: {my: "center", at: "center", of: "svg"}}); function drawGraph() { alertMessage.innerHTML = ""; - - const makeCurve = d3 - .line() - .curve(d3.curveBasis) - .x(p => p.x) - .y(p => p.y); - const getCurve = data => round(makeCurve(data), 2); + const getCurve = data => round(d3.line().curve(d3.curveBasis)(data), 2); const legendSize = 60; const chart = d3 @@ -112,65 +104,58 @@ function showBurgTemperatureGraph(id) { .attr("width", chartWidth + 120) .attr("height", chartHeight + yOffset + legendSize); - const curves = chart.append("g").attr("fill", "none").style("stroke-width", 2.5); - curves.append("path").attr("d", getCurve(dataAverTmp)).attr("stroke", "orange").on("mousemove", printVal); - curves.append("path").attr("d", getCurve(dataMinTmp)).attr("stroke", "blue").on("mousemove", printVal); - curves.append("path").attr("d", getCurve(dataMaxTmp)).attr("stroke", "red").on("mousemove", printVal); - const legend = chart.append("g"); - const legendY = chartHeight + yOffset + legendSize * 0.9; + const legendY = chartHeight + yOffset + legendSize * 0.8; const legendX = n => (chartWidth * n) / 4; - const legendTextPadding = 10; - const legendTextX = n => legendX(n) + legendTextPadding; + const legendTextX = n => legendX(n) + 10; legend.append("circle").attr("cx", legendX(1)).attr("cy", legendY).attr("r", 4).style("fill", "red"); legend.append("text").attr("x", legendTextX(1)).attr("y", legendY).attr("alignment-baseline", "central").text("Day temperature"); legend.append("circle").attr("cx", legendX(2)).attr("cy", legendY).attr("r", 4).style("fill", "orange"); - legend.append("text").attr("x", legendTextX(2)).attr("y", legendY).attr("alignment-baseline", "central").text("Mean daily temperature"); + legend.append("text").attr("x", legendTextX(2)).attr("y", legendY).attr("alignment-baseline", "central").text("Mean temperature"); legend.append("circle").attr("cx", legendX(3)).attr("cy", legendY).attr("r", 4).style("fill", "blue"); legend.append("text").attr("x", legendTextX(3)).attr("y", legendY).attr("alignment-baseline", "central").text("Night temperature"); - const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; - - function printVal() { - const [x, y] = d3.mouse(this); - const tmp = convertTemperature(yscale_inv(y - yOffset)); - const month = months[parseInt((xscale_inv(x - xOffset) / 360) * 12)]; - chart.attr("data-tip", `${month} temperature: ${tmp}`); - } - - const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight); + const xGrid = d3.axisBottom(xscale).ticks().tickSize(-chartHeight); const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth); const grid = chart.append("g").attr("class", "epgrid").attr("stroke-dasharray", "4 1"); - grid - .append("g") - .attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`) - .call(xGrid); + grid.append("g").attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`).call(xGrid); // prettier-ignore grid.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yGrid); grid.selectAll("text").remove(); - //add zero degree line + // add zero degree line if (minT < 0 && maxT > 0) { - chart - .append("g") + grid .append("line") - .attr("x1", xscale(0) + xOffset) + .attr("x1", xOffset) .attr("y1", yscale(0) + yOffset) - .attr("x2", xscale(360) + xOffset) + .attr("x2", chartWidth + xOffset) .attr("y2", yscale(0) + yOffset) .attr("stroke", "gray"); } - const formatX = d => months[parseInt((d / 360) * 12)]; - const xAxis = d3.axisBottom(xscale).ticks(10).tickFormat(formatX); + const xAxis = d3.axisBottom(xscale).ticks().tickFormat(d3.timeFormat("%B")); + const yAxis = d3.axisLeft(yscale).ticks(5).tickFormat(convertTemperature); - const formatY = d => convertTemperature(d); - const yAxis = d3.axisLeft(yscale).ticks(5).tickFormat(formatY); - - chart + const axis = chart.append("g"); + axis .append("g") .attr("transform", `translate(${xOffset}, ${chartHeight + yOffset})`) .call(xAxis); - chart.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yAxis); + axis.append("g").attr("transform", `translate(${xOffset}, ${yOffset})`).call(yAxis); + axis.select("path.domain").attr("d", `M0.5,0.5 H${chartWidth + 0.5}`); + + const curves = chart.append("g").attr("fill", "none").style("stroke-width", 2.5); + curves.append("path").attr("d", getCurve(tempMean)).attr("data-type", "daily").attr("stroke", "orange").on("mousemove", printVal); + curves.append("path").attr("d", getCurve(tempMin)).attr("data-type", "night").attr("stroke", "blue").on("mousemove", printVal); + curves.append("path").attr("d", getCurve(tempMax)).attr("data-type", "day").attr("stroke", "red").on("mousemove", printVal); + + function printVal() { + const [x, y] = d3.mouse(this); + const type = this.getAttribute("data-type"); + const temp = convertTemperature(yscale.invert(y - yOffset)); + const month = months[rn(((x - xOffset) / chartWidth) * 12)] || months[0]; + tip(`Average ${type} temperature in ${month}: ${temp}`); + } } } From f65bc63ab3b8a3014ac223f59eb6be7751458c71 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 17:08:48 +0300 Subject: [PATCH 14/60] pump version to 1.72 --- index.html | 2 +- main.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 6dc479f1..7e0bafb3 100644 --- a/index.html +++ b/index.html @@ -226,7 +226,7 @@
Azgaar's
Fantasy Map Generator
-
v. 1.71
+
v. 1.72

LOADING...

diff --git a/main.js b/main.js index e3cd39f7..0dc57216 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,7 @@ // https://github.com/Azgaar/Fantasy-Map-Generator "use strict"; -const version = "1.71"; // generator version +const version = "1.72"; // generator version document.title += " v" + version; // Switches to disable/enable logging features @@ -411,20 +411,20 @@ function showWelcomeMessage() { alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version ${version}. This version is compatible with ${changelog}, loaded .map files will be auto-updated. -
    Main changes: -
  • Ability to limit military units by biome, state, culture and religion
    • +
      Latest changes: +
    • Burg temperature graph
      • +
    • 4 new textures
      • +
    • Province capture logic rework
      • +
    • Button to release all provinces
      • +
    • Limit military units by biome, state, culture and religion
    • New marker types
    • New markers editor
    • Markers overview screen
    • Markers regeneration menu
      • -
    • Burg editor update
      • -
    • Editable theme color
      • -
    • Add font dialog
      • -
    • Save to Dropbox

    Join our ${discord} and ${reddit} to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.

    - Thanks for all supporters on Patreon!`; + Thanks for all supporters on ${patreon}!`; $("#alert").dialog({ resizable: false, From 65409a9d977e97b5eb380bfd9a0aea2092cc753f Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 17:13:54 +0300 Subject: [PATCH 15/60] set width to auto --- modules/ui/temperature-graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js index 59a8ac9c..0b3ea567 100644 --- a/modules/ui/temperature-graph.js +++ b/modules/ui/temperature-graph.js @@ -91,7 +91,7 @@ function showBurgTemperatureGraph(id) { }); drawGraph(); - $("#alert").dialog({title: "Annual temperature in " + b.name, position: {my: "center", at: "center", of: "svg"}}); + $("#alert").dialog({title: "Annual temperature in " + b.name, width: "auto", position: {my: "center", at: "center", of: "svg"}}); function drawGraph() { alertMessage.innerHTML = ""; From b414bae705459b5fc6734b84c0e2a8d095fb9bfe Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 17:46:42 +0300 Subject: [PATCH 16/60] supporters update --- modules/ui/options.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/ui/options.js b/modules/ui/options.js index 35645d14..7fba8614 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -103,7 +103,8 @@ function showSupporters() { Mike Conley,Xavier privé,Hope You're Well,Mark Sprietsma,Robert Landry,Nick Mowry,steve hall,Markell,Josh Wren,Neutrix,BLRageQuit,Rocky, Dario Spadavecchia,Bas Kroot,John Patrick Callahan Jr,Alexandra Vesey,D,Exp1nt,james,Braxton Istace,w,Rurikid,AntiBlock,Redsauz,BigE0021, Jonathan Williams,ojacid .,Brian Wilson,A Patreon of the Ahts,Shubham Jakhotiya,www15o,Jan Bundesmann,Angelique Badger,Joshua Xiong,Moist mongol, - Frank Fewkes,jason baldrick,Game Master Pro,Andrew Kircher,Preston Mitchell,Chris Kohut`; + Frank Fewkes,jason baldrick,Game Master Pro,Andrew Kircher,Preston Mitchell,Chris Kohut,Emarandzeb,Trentin Bergeron,Damon Gallaty,Pleaseworkforonce, + Jordan,William Markus,Sidr Dim`; const array = supporters .replace(/(?:\r\n|\r|\n)/g, "") From 79c1e2abd9b2a269a91f0de53d7cda06158080cd Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 19:19:49 +0300 Subject: [PATCH 17/60] new style - styleCyberpunk --- index.html | 1 + modules/ui/style.js | 1 + 2 files changed, 2 insertions(+) diff --git a/index.html b/index.html index 7e0bafb3..6b8bb864 100644 --- a/index.html +++ b/index.html @@ -316,6 +316,7 @@ + diff --git a/modules/ui/style.js b/modules/ui/style.js index 8fc85844..f6294208 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -760,6 +760,7 @@ const defaultStyles = { styleClean: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.5,"filter":"url(#blur7)","mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.09,"filter":null,"mask":"url(#land)"},"#gridOverlay":{"opacity":0.8,"scale":1,"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":12,"font-size":12,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":3,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eeedeb","filter":null},"#markers":{"opacity":null,"rescale":null,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0,"fill":"#0080ff","filter":null},"#population":{"opacity":null,"stroke-width":2.58,"stroke-dasharray":0,"stroke-linecap":"butt","filter":"url(#blur3)"},"#rural":{"stroke":"#ff0000"},"#urban":{"stroke":"#800000"},"#freshwater":{"opacity":0.5,"fill":"#aadaff","stroke":"#5f799d","stroke-width":0,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#595959","stroke-width":0.4,"filter":null,"auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":1,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#aadaff"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#f6d068","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#ffffff","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#4f82c6","stroke-width":0.45,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":"url(#water)"},"#statesBody":{"opacity":0.3,"filter":null},"#statesHalo":{"opacity":0.5,"data-width":1,"stroke-width":1,"filter":null},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow01)"},"#emblems":{"opacity":1,"stroke-width":1,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.7,"stroke":"#ff6262","stroke-width":0,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#aadaff"},"#oceanicPattern":{"href":"", "opacity":0.2},"#terrs":{"opacity":0.5,"scheme":"bright","terracing":0,"skip":5,"relax":0,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":12.74,"font-size":12.74,"font-family":"Arial","stroke":"#909090","stroke-width":1.13,"stroke-dasharray":0,"stroke-linecap":"round","data-x":98.39,"data-y":12.67,"data-columns":null},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#414141","text-shadow":"white 0 0 4px","data-size":7,"font-size":7,"font-family":"Arial"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#303030","stroke-width":1.7},"#burgLabels > #towns":{"opacity":1,"fill":"#414141","data-size":3,"font-size":3,"font-family":"Arial"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.06},"#labels > #states":{"opacity":1,"fill":"#292929","stroke":"#303030","stroke-width":0,"text-shadow":"white 0 0 2px","data-size":10,"font-size":10,"font-family":"Arial","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#414141","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":18,"font-size":18,"font-family":"Arial","filter":null},"#fogging":{"opacity":1,"fill":"#ffffff","filter":null}}`, styleLight: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000","stroke-width":0.02,"fill-opacity":0.8,"filter":null},"#biomes":{"opacity":0.5,"filter":null,"mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#4c483e","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"square","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":0.2,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.5,"scale":1,"dx":0,"dy":0,"type":"pointyHex","stroke":"#808080","stroke-width":1,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":0.7,"data-size":15,"font-size":15,"stroke":"#734d37","stroke-width":1.5,"stroke-dasharray":5,"stroke-linecap":"square","filter":null,"mask":""},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.5,"stroke":null,"stroke-width":0,"filter":null},"#cults":{"opacity":0.5,"stroke":"#777777","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#f9f2ea","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":null},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#2554ef","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":1,"fill":"#98cdc4","stroke":"#719892","stroke-width":0.46,"filter":"url(#dropShadow05)"},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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":1,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":1,"stroke":"#5e5e5e","stroke-width":0.4,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.6,"set":"colored","size":1,"density":0.3,"filter":null,"mask":""},"#rivers":{"opacity":null,"filter":null,"fill":"#6d94ba"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#3c1d0b","stroke-width":1.37,"stroke-dasharray":2,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#95481a","stroke-width":0.88,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.2,"filter":null},"#statesHalo":{"opacity":0.3,"data-width":25,"stroke-width":25,"filter":"blur(5px)"},"#provs":{"opacity":0.4,"fill":"#000000","font-size":5,"font-family":"IM Fell English","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.5,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1.5,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.9,"stroke-width":1,"filter":null},"#texture":{"opacity":0.39,"filter":null,"mask":""},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":"url(#dropShadow05)","layers":"-6,-3,-1"},"#oceanBase":{"fill":"#8dc1c8"},"#oceanicPattern":{"href":"./images/pattern1.png","opacity":0.2},"#terrs":{"opacity":0.4,"scheme":"light","terracing":10,"skip":5,"relax":0,"curve":0,"filter":"url(#turbulence)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":54.73,"data-y":62.98,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#3a3a3a","text-shadow":"white 0px 0px 4px","data-size":8,"font-size":8,"font-family":"IM Fell English"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":3,"stroke":"#3e3e4b","stroke-width":0.4,"stroke-dasharray":"0.5 0.25","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":5.5,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0px 0px 4px","data-size":4,"font-size":4,"font-family":"IM Fell English"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1.2,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":2.2,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e3e","stroke":"#000000","stroke-width":0.3,"text-shadow":"white 0px 0px 6px","data-size":14,"font-size":14,"font-family":"IM Fell English","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#f24706","stroke":"#701b05","stroke-width":0.1,"text-shadow":"white 0px 0px 4px","data-size":6,"font-size":6,"font-family":"IM Fell English","filter":null},"#fogging":{"opacity":1,"fill":"#30426f","filter":null}}`, styleWatercolor: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000","stroke-width":0.2,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.6,"filter":null,"mask":"url(#land)"},"#stateBorders":{"opacity":0.6,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":3,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.5,"stroke":"#56566d","stroke-width":0.5,"stroke-dasharray":"0 2","stroke-linecap":"round","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":0,"type":"pointyHex","stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(80 80) scale(.25)"},"#relig":{"opacity":0.7,"stroke":"#777777","stroke-width":0,"filter":"url(#bluredSplotch)"},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":"url(#splotch)"},"#landmass":{"opacity":1,"fill":"#eef6fb","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","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.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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":1,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.5,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":1,"set":"gray","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#2e89c2"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#969696","stroke-width":0.7,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#969696","stroke-width":0.4,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.9,"stroke":"#969696","stroke-width":0.7,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.05,"filter":null},"#statesHalo":{"opacity":0.4,"data-width":8,"stroke-width":8,"filter":"blur(2px)"},"#provs":{"opacity":0.7,"fill":"#000000","font-size":4,"font-family":"Comfortaa","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.7,"fill":"#dfe8ec","stroke":"#000000","stroke-width":0,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.95,"stroke-width":1,"filter":null},"#texture":{"opacity":0.2,"filter":null,"mask":"url(#land)"},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#2d788b"},"#oceanicPattern":{"href":"./images/kiwiroo.png","opacity":0.5},"#terrs":{"opacity":0.5,"scheme":"light","terracing":0,"skip":5,"relax":1,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#043449","text-shadow":"white 0px 0px 2px","data-size":5,"font-size":5,"font-family":"Comfortaa"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0px 0px 4px","data-size":3,"font-size":3,"font-family":"Comfortaa"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#ffffff","stroke":"#000000","stroke-width":0.15,"text-shadow":"black 1px 1px 2px","data-size":20,"font-size":20,"font-family":"Gloria Hallelujah","filter":null},"#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":"Comfortaa","filter":null},"#fogging":{"opacity":0.97,"fill":"#8398ce","filter":null}}`, + styleCyberpunk: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000000","stroke-width":0.6,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.7,"filter":"","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#ffffff","stroke-width":1,"stroke-dasharray":3,"stroke-linecap":"round","filter":""},"#provinceBorders":{"opacity":0.5,"stroke":"#ffffff","stroke-width":0.3,"stroke-dasharray":1,"stroke-linecap":"round","filter":""},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"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":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.9,"transform":null,"filter":null,"mask":"","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.5,"stroke":"#404040","stroke-width":2,"filter":"url(#splotch)"},"#cults":{"opacity":0.35,"stroke":"#777777","stroke-width":2,"stroke-dasharray":null,"stroke-linecap":null,"filter":"url(#splotch)"},"#landmass":{"opacity":1,"fill":"#04011e","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"square","filter":null},"#rural":{"stroke":"#5294ff"},"#urban":{"stroke":"#5cdeff"},"#freshwater":{"opacity":0.9,"fill":"#381579","stroke":"#47228c","stroke-width":3,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#6738bc"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#c44ac0","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#df2654","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#a890c6","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0,"filter":null},"#statesHalo":{"opacity":1,"data-width":13,"stroke-width":13,"filter":"blur(8.25px)"},"#provs":{"opacity":0.2,"fill":"#933e3e","font-size":8,"font-family":"Orbitron","filter":""},"#temperature":{"opacity":0.8,"font-size":"22px","fill":"#551282","fill-opacity":0.3,"stroke":null,"stroke-width":3,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.3,"fill":"#919191","stroke":"#949494","stroke-width":0,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.75,"stroke-width":0.5,"filter":""},"#texture":{"opacity":0.14,"filter":null,"mask":"url(#water)"},"#zones":{"opacity":0.7,"stroke":"#ffffff","stroke-width":0.3,"stroke-dasharray":null,"stroke-linecap":"inherit","filter":"url(#dropShadow05)","mask":null},"#oceanLayers":{"filter":"","layers":"-6,-3,-1"},"#oceanBase":{"fill":"#05001f"},"#oceanicPattern":{"href":"","opacity":0.15},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":6,"skip":0,"relax":2,"curve":0,"filter":"","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#ffffff","text-shadow":"white 0px 0px 4px","data-size":8,"font-size":8,"font-family":"Orbitron"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#ffffff","text-shadow":"white 0px 0px 4px","data-size":3,"font-size":3,"font-family":"Orbitron"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1},"#labels > #states":{"opacity":1,"fill":"#ffffff","stroke":"#000000","stroke-width":0,"text-shadow":"white 0px 0px 4px","data-size":18,"font-size":18,"font-family":"Orbitron","filter":""},"#labels > #addedLabels":{"opacity":1,"fill":"#ffffff","stroke":"#000000","stroke-width":0,"text-shadow":"white 0px 0px 4px","data-size":18,"font-size":18,"font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#1b1423","filter":null}}`, styleMonochrome: `{"#map":{"background-color":"#000000","filter":"url(#filter-grayscale)","data-filter":"grayscale"},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.3,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.4,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"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":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#000000","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","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":1,"fill":"#000000","stroke":"#515151","stroke-width":0,"filter":null},"#salt":{"opacity":1,"fill":"#000000","stroke":"#484848","stroke-width":0,"filter":null},"#sinkhole":{"opacity":1,"fill":"#000000","stroke":"#5f5f5f","stroke-width":0.5,"filter":null},"#frozen":{"opacity":1,"fill":"#000000","stroke":"#6f6f6f","stroke-width":0,"filter":null},"#lava":{"opacity":1,"fill":"#000000","stroke":"#5d5d5d","stroke-width":0,"filter":null},"#sea_island":{"opacity":1,"stroke":"#1f3846","stroke-width":0,"filter":null,"auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":0.2,"filter":"url(#blur1)","fill":"#000000"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.7,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.25,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":0.4,"data-width":10,"stroke-width":10,"filter":"blur(5px)"},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow05)"},"#texture":{"opacity":1,"filter":null,"mask":"url(#land)"},"#emblems": {"opacity": 0.5,"stroke-width": 0.5,"filter": null},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#000000"},"#oceanicPattern":{"href":"", "opacity":0.2},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"url(#blur3)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0 0 4px","data-size":7,"font-size":7,"font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":22,"font-size":22,"font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":18,"font-size":18,"font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#30426f","filter":null}}` }; From 49a8a9f7c7c9d7560dfec89e8baa450c8addd7a8 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 21:23:10 +0300 Subject: [PATCH 18/60] style - fetch local json files --- index.html | 14 +- main.js | 4 +- modules/ui/style.js | 507 +------------------------------------ modules/ui/stylePresets.js | 295 +++++++++++++++++++++ styles/ancient.json | 389 ++++++++++++++++++++++++++++ styles/clean.json | 388 ++++++++++++++++++++++++++++ styles/cyberpunk.json | 385 ++++++++++++++++++++++++++++ styles/default.json | 385 ++++++++++++++++++++++++++++ styles/gloom.json | 391 ++++++++++++++++++++++++++++ styles/light.json | 385 ++++++++++++++++++++++++++++ styles/monochrome.json | 381 ++++++++++++++++++++++++++++ styles/watercolor.json | 385 ++++++++++++++++++++++++++++ 12 files changed, 3392 insertions(+), 517 deletions(-) create mode 100644 modules/ui/stylePresets.js create mode 100644 styles/ancient.json create mode 100644 styles/clean.json create mode 100644 styles/cyberpunk.json create mode 100644 styles/default.json create mode 100644 styles/gloom.json create mode 100644 styles/light.json create mode 100644 styles/monochrome.json create mode 100644 styles/watercolor.json diff --git a/index.html b/index.html index 6b8bb864..8f1c5498 100644 --- a/index.html +++ b/index.html @@ -309,16 +309,7 @@

    Style preset:

    - + @@ -4405,15 +4396,16 @@ + - + diff --git a/main.js b/main.js index 0dc57216..3f449c2e 100644 --- a/main.js +++ b/main.js @@ -226,8 +226,8 @@ void (function checkLoadParameters() { generateMapOnLoad(); })(); -function generateMapOnLoad() { - applyStyleOnLoad(); // apply default or previously selected style +async function generateMapOnLoad() { + await applyStyleOnLoad(); // apply previously selected default or custom style generate(); // generate map focusOn(); // based on searchParams focus on point, cell or burg from MFCG applyPreset(); // apply saved layers preset diff --git a/modules/ui/style.js b/modules/ui/style.js index f6294208..b4179fea 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -2,7 +2,7 @@ "use strict"; // add available filters to lists -void (function addFilters() { +{ const filters = Array.from(document.getElementById("filters").querySelectorAll("filter")); const emptyOption = ''; const options = filters.map(filter => { @@ -14,7 +14,7 @@ void (function addFilters() { document.getElementById("styleFilterInput").innerHTML = allOptions; document.getElementById("styleStatesBodyFilter").innerHTML = allOptions; -})(); +} // store some style inputs as options styleElements.addEventListener("change", function (ev) { @@ -754,334 +754,9 @@ function fetchTextureURL(url) { img.src = url; } -const defaultStyles = { - styleAncient: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000","stroke-width":0.2,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":null,"mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":0.2,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"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":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.5,"transform":null,"filter":"url(#filter-sepia)","mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(80 80) scale(.25)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#e3dfce","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":""},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","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.6,"fill":"#c8d6e0","stroke":"#968d6e","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#339482","stroke":"#836a34","stroke-width":0.7,"filter":null},"#sinkhole":{"opacity":1,"fill":"#c3d6df","stroke":"#b29062","stroke-width":0.7,"filter":null},"#frozen":{"opacity":0.95,"fill":"#cdd4e7","stroke":"#cfe0eb","stroke-width":0,"filter":null},"#lava":{"opacity":0.7,"fill":"#a04e18","stroke":"#835520","stroke-width":2,"filter":"url(#paper)"},"#dry":{"opacity":0.7,"fill":"#c6b795","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.5,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":1,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":"","fill":"#a69b7d"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.7,"stroke":"#8d502a","stroke-width":1,"stroke-dasharray":3,"stroke-linecap":"inherit","filter":"","mask":null},"#trails":{"opacity":0.7,"stroke":"#924217","stroke-width":0.5,"stroke-dasharray":"1 2","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#b16925","stroke-width":0.8,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.2,"filter":"url(#filter-sepia)"},"#statesHalo":{"opacity":0.4,"data-width":10,"stroke-width":10,"filter":"blur(6px)"},"#provs":{"opacity":0.7,"fill":"#000000","font-size":10,"font-family":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.35,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":3,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.8,"stroke-width":0.8,"filter":"url(#dropShadow05)"},"#texture":{"opacity":0.6,"filter":"","mask":""},"#textureImage":{"x":0,"y":0},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":"","layers":"-6,-4,-2"},"#oceanBase":{"fill":"#c99f64"},"#oceanicPattern":{"href":"./images/kiwiroo.png","opacity":0.4},"#terrs":{"opacity":null,"scheme":"bright","terracing":0,"skip":2,"relax":1,"curve":0,"filter":"url(#blur3)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0px 0px 4px","data-size":12,"font-size":12,"font-family":"Great Vibes"},"#burgIcons > #cities":{"opacity":1,"fill":"#fdfab9","fill-opacity":0.7,"size":1,"stroke":"#6f4e1f","stroke-width":0.3,"stroke-dasharray":".3 .4","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0px 0px 4px","data-size":5,"font-size":5,"font-family":"Great Vibes"},"#burgIcons > #towns":{"opacity":1,"fill":"#fef4d8","fill-opacity":0.7,"size":0.5,"stroke":"#72472c","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0px 0px 4px","data-size":22,"font-size":22,"font-family":"Great Vibes","filter":"url(#filter-sepia)"},"#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":"Times New Roman","filter":"url(#filter-sepia)"},"#fogging":{"opacity":0.98,"fill":"#30426f","filter":null}}`, - styleGloom: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.3,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.3,"stroke-dasharray":".7 1","stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"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":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(100 100) scale(0.3)"},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":1,"filter":null},"#cults":{"opacity":0.7,"stroke":"#777777","stroke-width":1.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#e0e0e0","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null},"#rural":{"stroke":"#0000aa"},"#urban":{"stroke":"#9d0000"},"#freshwater":{"opacity":0.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#779582"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#8b4418","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#844017","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#5e1865","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":0.5,"data-width":12,"stroke-width":12,"filter":"blur(10px)"},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","filter":null},"#temperature":{"opacity":1,"font-size":"11px","fill":"#62001b","fill-opacity":0.3,"stroke":null,"stroke-width":2,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow05)"},"#emblems": {"opacity":0.6,"stroke-width":0.5,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{"x":0,"y":0},"#zones":{"opacity":0.5,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":"url(#dropShadow01)","mask":null},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#4e6964"},"#oceanicPattern":{"href":"./images/pattern3.png", "opacity":0.2},"#terrs":{"opacity":1,"scheme":"bright","terracing":0,"skip":0,"relax":1,"curve":1,"filter":"url(#filter-grayscale)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0 0 4px","data-size":7,"font-size":7,"font-family":"Bitter"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":0.8,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":3,"font-size":3,"font-family":"Bitter"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#4e4e4e","stroke":"#b5b5b5","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":22,"font-size":22,"font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":18,"font-size":18,"font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#1b1423","filter":null}}`, - styleClean: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.5,"filter":"url(#blur7)","mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.09,"filter":null,"mask":"url(#land)"},"#gridOverlay":{"opacity":0.8,"scale":1,"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":12,"font-size":12,"stroke":"#414141","stroke-width":0.45,"stroke-dasharray":3,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#eeedeb","filter":null},"#markers":{"opacity":null,"rescale":null,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0,"fill":"#0080ff","filter":null},"#population":{"opacity":null,"stroke-width":2.58,"stroke-dasharray":0,"stroke-linecap":"butt","filter":"url(#blur3)"},"#rural":{"stroke":"#ff0000"},"#urban":{"stroke":"#800000"},"#freshwater":{"opacity":0.5,"fill":"#aadaff","stroke":"#5f799d","stroke-width":0,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#595959","stroke-width":0.4,"filter":null,"auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":1,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#aadaff"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#f6d068","stroke-width":0.7,"stroke-dasharray":0,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#ffffff","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#4f82c6","stroke-width":0.45,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":"url(#water)"},"#statesBody":{"opacity":0.3,"filter":null},"#statesHalo":{"opacity":0.5,"data-width":1,"stroke-width":1,"filter":null},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow01)"},"#emblems":{"opacity":1,"stroke-width":1,"filter":null},"#texture":{"opacity":null,"filter":null,"mask":"url(#land)"},"#textureImage":{},"#zones":{"opacity":0.7,"stroke":"#ff6262","stroke-width":0,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#aadaff"},"#oceanicPattern":{"href":"", "opacity":0.2},"#terrs":{"opacity":0.5,"scheme":"bright","terracing":0,"skip":5,"relax":0,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":12.74,"font-size":12.74,"font-family":"Arial","stroke":"#909090","stroke-width":1.13,"stroke-dasharray":0,"stroke-linecap":"round","data-x":98.39,"data-y":12.67,"data-columns":null},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#414141","text-shadow":"white 0 0 4px","data-size":7,"font-size":7,"font-family":"Arial"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#303030","stroke-width":1.7},"#burgLabels > #towns":{"opacity":1,"fill":"#414141","data-size":3,"font-size":3,"font-family":"Arial"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.06},"#labels > #states":{"opacity":1,"fill":"#292929","stroke":"#303030","stroke-width":0,"text-shadow":"white 0 0 2px","data-size":10,"font-size":10,"font-family":"Arial","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#414141","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":18,"font-size":18,"font-family":"Arial","filter":null},"#fogging":{"opacity":1,"fill":"#ffffff","filter":null}}`, - styleLight: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000","stroke-width":0.02,"fill-opacity":0.8,"filter":null},"#biomes":{"opacity":0.5,"filter":null,"mask":"url(#land)"},"#stateBorders":{"opacity":0.8,"stroke":"#4c483e","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"square","filter":null},"#provinceBorders":{"opacity":0.8,"stroke":"#56566d","stroke-width":0.2,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.5,"scale":1,"dx":0,"dy":0,"type":"pointyHex","stroke":"#808080","stroke-width":1,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":0.7,"data-size":15,"font-size":15,"stroke":"#734d37","stroke-width":1.5,"stroke-dasharray":5,"stroke-linecap":"square","filter":null,"mask":""},"#compass":{"opacity":0.6,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.5,"stroke":null,"stroke-width":0,"filter":null},"#cults":{"opacity":0.5,"stroke":"#777777","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#f9f2ea","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":null},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#2554ef","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":1,"fill":"#98cdc4","stroke":"#719892","stroke-width":0.46,"filter":"url(#dropShadow05)"},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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":1,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":1,"stroke":"#5e5e5e","stroke-width":0.4,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.6,"set":"colored","size":1,"density":0.3,"filter":null,"mask":""},"#rivers":{"opacity":null,"filter":null,"fill":"#6d94ba"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#3c1d0b","stroke-width":1.37,"stroke-dasharray":2,"stroke-linecap":"inherit","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#95481a","stroke-width":0.88,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.2,"filter":null},"#statesHalo":{"opacity":0.3,"data-width":25,"stroke-width":25,"filter":"blur(5px)"},"#provs":{"opacity":0.4,"fill":"#000000","font-size":5,"font-family":"IM Fell English","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.5,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1.5,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.9,"stroke-width":1,"filter":null},"#texture":{"opacity":0.39,"filter":null,"mask":""},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":"url(#dropShadow05)","layers":"-6,-3,-1"},"#oceanBase":{"fill":"#8dc1c8"},"#oceanicPattern":{"href":"./images/pattern1.png","opacity":0.2},"#terrs":{"opacity":0.4,"scheme":"light","terracing":10,"skip":5,"relax":0,"curve":0,"filter":"url(#turbulence)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":54.73,"data-y":62.98,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#3a3a3a","text-shadow":"white 0px 0px 4px","data-size":8,"font-size":8,"font-family":"IM Fell English"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":3,"stroke":"#3e3e4b","stroke-width":0.4,"stroke-dasharray":"0.5 0.25","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":5.5,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0px 0px 4px","data-size":4,"font-size":4,"font-family":"IM Fell English"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1.2,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":2.2,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e3e","stroke":"#000000","stroke-width":0.3,"text-shadow":"white 0px 0px 6px","data-size":14,"font-size":14,"font-family":"IM Fell English","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#f24706","stroke":"#701b05","stroke-width":0.1,"text-shadow":"white 0px 0px 4px","data-size":6,"font-size":6,"font-family":"IM Fell English","filter":null},"#fogging":{"opacity":1,"fill":"#30426f","filter":null}}`, - styleWatercolor: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000","stroke-width":0.2,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.6,"filter":null,"mask":"url(#land)"},"#stateBorders":{"opacity":0.6,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":3,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":0.5,"stroke":"#56566d","stroke-width":0.5,"stroke-dasharray":"0 2","stroke-linecap":"round","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"dx":0,"dy":0,"type":"pointyHex","stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"transform":null,"filter":null,"mask":null},"#coordinates":{"opacity":1,"data-size":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":"translate(80 80) scale(.25)"},"#relig":{"opacity":0.7,"stroke":"#777777","stroke-width":0,"filter":"url(#bluredSplotch)"},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":"url(#splotch)"},"#landmass":{"opacity":1,"fill":"#eef6fb","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","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.5,"fill":"#a6c1fd","stroke":"#5f799d","stroke-width":0.7,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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":1,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.5,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":1,"set":"gray","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#2e89c2"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#969696","stroke-width":0.7,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#969696","stroke-width":0.4,"stroke-dasharray":"","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.9,"stroke":"#969696","stroke-width":0.7,"stroke-dasharray":"","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.05,"filter":null},"#statesHalo":{"opacity":0.4,"data-width":8,"stroke-width":8,"filter":"blur(2px)"},"#provs":{"opacity":0.7,"fill":"#000000","font-size":4,"font-family":"Comfortaa","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.7,"fill":"#dfe8ec","stroke":"#000000","stroke-width":0,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.95,"stroke-width":1,"filter":null},"#texture":{"opacity":0.2,"filter":null,"mask":"url(#land)"},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":null,"layers":"-6,-4,-2"},"#oceanBase":{"fill":"#2d788b"},"#oceanicPattern":{"href":"./images/kiwiroo.png","opacity":0.5},"#terrs":{"opacity":0.5,"scheme":"light","terracing":0,"skip":5,"relax":1,"curve":0,"filter":null,"mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#043449","text-shadow":"white 0px 0px 2px","data-size":5,"font-size":5,"font-family":"Comfortaa"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0px 0px 4px","data-size":3,"font-size":3,"font-family":"Comfortaa"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#ffffff","stroke":"#000000","stroke-width":0.15,"text-shadow":"black 1px 1px 2px","data-size":20,"font-size":20,"font-family":"Gloria Hallelujah","filter":null},"#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":"Comfortaa","filter":null},"#fogging":{"opacity":0.97,"fill":"#8398ce","filter":null}}`, - styleCyberpunk: `{"#map":{"background-color":"#000000","filter":null,"data-filter":null},"#armies":{"font-size":8,"box-size":4,"stroke":"#000000","stroke-width":0.6,"fill-opacity":1,"filter":null},"#biomes":{"opacity":0.7,"filter":"","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#ffffff","stroke-width":1,"stroke-dasharray":3,"stroke-linecap":"round","filter":""},"#provinceBorders":{"opacity":0.5,"stroke":"#ffffff","stroke-width":0.3,"stroke-dasharray":1,"stroke-linecap":"round","filter":""},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"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":"#4a4a4a","stroke-width":1,"stroke-dasharray":6,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.9,"transform":null,"filter":null,"mask":"","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.5,"stroke":"#404040","stroke-width":2,"filter":"url(#splotch)"},"#cults":{"opacity":0.35,"stroke":"#777777","stroke-width":2,"stroke-dasharray":null,"stroke-linecap":null,"filter":"url(#splotch)"},"#landmass":{"opacity":1,"fill":"#04011e","filter":null},"#markers":{"opacity":0.8,"rescale":1,"filter":"url(#dropShadow05)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","filter":null},"#population":{"opacity":null,"stroke-width":1.6,"stroke-dasharray":null,"stroke-linecap":"square","filter":null},"#rural":{"stroke":"#5294ff"},"#urban":{"stroke":"#5cdeff"},"#freshwater":{"opacity":0.9,"fill":"#381579","stroke":"#47228c","stroke-width":3,"filter":null},"#salt":{"opacity":0.5,"fill":"#409b8a","stroke":"#388985","stroke-width":0.7,"filter":null},"#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.7,"fill":"#c9bfa7","stroke":"#8e816f","stroke-width":0.7,"filter":null},"#sea_island":{"opacity":0.6,"stroke":"#1f3846","stroke-width":0.7,"filter":"url(#dropShadow)","auto-filter":1},"#lake_island":{"opacity":1,"stroke":"#7c8eaf","stroke-width":0.35,"filter":null},"#terrain":{"opacity":0.9,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":null,"filter":null,"fill":"#6738bc"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":1,"stroke":"#c44ac0","stroke-width":0.9,"stroke-dasharray":"2 3","stroke-linecap":"round","filter":null,"mask":null},"#trails":{"opacity":1,"stroke":"#df2654","stroke-width":0.2,"stroke-dasharray":".5 1","stroke-linecap":"round","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#a890c6","stroke-width":0.6,"stroke-dasharray":"1.2 2.4","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0,"filter":null},"#statesHalo":{"opacity":1,"data-width":13,"stroke-width":13,"filter":"blur(8.25px)"},"#provs":{"opacity":0.2,"fill":"#933e3e","font-size":8,"font-family":"Orbitron","filter":""},"#temperature":{"opacity":0.8,"font-size":"22px","fill":"#551282","fill-opacity":0.3,"stroke":null,"stroke-width":3,"stroke-dasharray":2,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.3,"fill":"#919191","stroke":"#949494","stroke-width":0,"filter":"url(#dropShadow05)"},"#emblems":{"opacity":0.75,"stroke-width":0.5,"filter":""},"#texture":{"opacity":0.14,"filter":null,"mask":"url(#water)"},"#zones":{"opacity":0.7,"stroke":"#ffffff","stroke-width":0.3,"stroke-dasharray":null,"stroke-linecap":"inherit","filter":"url(#dropShadow05)","mask":null},"#oceanLayers":{"filter":"","layers":"-6,-3,-1"},"#oceanBase":{"fill":"#05001f"},"#oceanicPattern":{"href":"","opacity":0.15},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":6,"skip":0,"relax":2,"curve":0,"filter":"","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#burgLabels > #cities":{"opacity":1,"fill":"#ffffff","text-shadow":"white 0px 0px 4px","data-size":8,"font-size":8,"font-family":"Orbitron"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":2,"stroke":"#444444","stroke-width":0.25,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":4,"stroke":"#3e3e4b","stroke-width":1},"#burgLabels > #towns":{"opacity":1,"fill":"#ffffff","text-shadow":"white 0px 0px 4px","data-size":3,"font-size":3,"font-family":"Orbitron"},"#burgIcons > #towns":{"opacity":0.95,"fill":"#ffffff","fill-opacity":0.7,"size":0.8,"stroke":"#3e3e4b","stroke-width":0.2,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1.6,"stroke":"#3e3e4b","stroke-width":1},"#labels > #states":{"opacity":1,"fill":"#ffffff","stroke":"#000000","stroke-width":0,"text-shadow":"white 0px 0px 4px","data-size":18,"font-size":18,"font-family":"Orbitron","filter":""},"#labels > #addedLabels":{"opacity":1,"fill":"#ffffff","stroke":"#000000","stroke-width":0,"text-shadow":"white 0px 0px 4px","data-size":18,"font-size":18,"font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#1b1423","filter":null}}`, - styleMonochrome: `{"#map":{"background-color":"#000000","filter":"url(#filter-grayscale)","data-filter":"grayscale"},"#armies":{"font-size":6,"box-size":3,"stroke":"#000","stroke-width":0.3,"opacity":1,"fill-opacity":1,"filter":null},"#biomes":{"opacity":null,"filter":"url(#blur5)","mask":"url(#land)"},"#stateBorders":{"opacity":1,"stroke":"#56566d","stroke-width":1,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null},"#provinceBorders":{"opacity":1,"stroke":"#56566d","stroke-width":0.4,"stroke-dasharray":1,"stroke-linecap":"butt","filter":null},"#cells":{"opacity":null,"stroke":"#808080","stroke-width":0.1,"filter":null,"mask":null},"#gridOverlay":{"opacity":0.8,"scale":1,"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":12,"font-size":12,"stroke":"#d4d4d4","stroke-width":1,"stroke-dasharray":5,"stroke-linecap":null,"filter":null,"mask":null},"#compass":{"opacity":0.8,"transform":null,"filter":null,"mask":"url(#water)","shape-rendering":"optimizespeed"},"#rose":{"transform":null},"#relig":{"opacity":0.7,"stroke":"#404040","stroke-width":0.7,"filter":null},"#cults":{"opacity":0.6,"stroke":"#777777","stroke-width":0.5,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#landmass":{"opacity":1,"fill":"#000000","filter":null},"#markers":{"opacity":null,"rescale":1,"filter":"url(#dropShadow01)"},"#prec":{"opacity":null,"stroke":"#000000","stroke-width":0.1,"fill":"#003dff","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":1,"fill":"#000000","stroke":"#515151","stroke-width":0,"filter":null},"#salt":{"opacity":1,"fill":"#000000","stroke":"#484848","stroke-width":0,"filter":null},"#sinkhole":{"opacity":1,"fill":"#000000","stroke":"#5f5f5f","stroke-width":0.5,"filter":null},"#frozen":{"opacity":1,"fill":"#000000","stroke":"#6f6f6f","stroke-width":0,"filter":null},"#lava":{"opacity":1,"fill":"#000000","stroke":"#5d5d5d","stroke-width":0,"filter":null},"#sea_island":{"opacity":1,"stroke":"#1f3846","stroke-width":0,"filter":null,"auto-filter":0},"#lake_island":{"opacity":0,"stroke":"#7c8eaf","stroke-width":0,"filter":null},"#terrain":{"opacity":null,"set":"simple","size":1,"density":0.4,"filter":null,"mask":null},"#rivers":{"opacity":0.2,"filter":"url(#blur1)","fill":"#000000"},"#ruler":{"opacity":null,"filter":null},"#roads":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.7,"stroke-dasharray":2,"stroke-linecap":"butt","filter":null,"mask":null},"#trails":{"opacity":0.9,"stroke":"#d06324","stroke-width":0.25,"stroke-dasharray":".8 1.6","stroke-linecap":"butt","filter":null,"mask":null},"#searoutes":{"opacity":0.8,"stroke":"#ffffff","stroke-width":0.45,"stroke-dasharray":"1 2","stroke-linecap":"round","filter":null,"mask":null},"#statesBody":{"opacity":0.4,"filter":null},"#statesHalo":{"opacity":0.4,"data-width":10,"stroke-width":10,"filter":"blur(5px)"},"#provs":{"opacity":0.7,"fill":"#000000","data-size":10,"font-size":10,"font-family":"Georgia","filter":null},"#temperature":{"opacity":null,"font-size":"8px","fill":"#000000","fill-opacity":0.3,"stroke":null,"stroke-width":1.8,"stroke-dasharray":null,"stroke-linecap":null,"filter":null},"#ice":{"opacity":0.9,"fill":"#e8f0f6","stroke":"#e8f0f6","stroke-width":1,"filter":"url(#dropShadow05)"},"#texture":{"opacity":1,"filter":null,"mask":"url(#land)"},"#emblems": {"opacity": 0.5,"stroke-width": 0.5,"filter": null},"#textureImage":{},"#zones":{"opacity":0.6,"stroke":"#333333","stroke-width":0,"stroke-dasharray":null,"stroke-linecap":"butt","filter":null,"mask":null},"#oceanLayers":{"filter":null,"layers":"none"},"#oceanBase":{"fill":"#000000"},"#oceanicPattern":{"href":"", "opacity":0.2},"#terrs":{"opacity":1,"scheme":"monochrome","terracing":0,"skip":5,"relax":0,"curve":0,"filter":"url(#blur3)","mask":"url(#land)"},"#legend":{"data-size":13,"font-size":13,"font-family":"Almendra SC","stroke":"#812929","stroke-width":2.5,"stroke-dasharray":"0 4 10 4","stroke-linecap":"round","data-x":99,"data-y":93,"data-columns":8},"#legendBox":{},"#burgLabels > #cities":{"opacity":1,"fill":"#3e3e4b","text-shadow":"white 0 0 4px","data-size":7,"font-size":7,"font-family":"Almendra SC"},"#burgIcons > #cities":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":1,"stroke":"#3e3e4b","stroke-width":0.24,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #cities":{"opacity":1,"fill":"#ffffff","size":2,"stroke":"#3e3e4b","stroke-width":1.2},"#burgLabels > #towns":{"opacity":1,"fill":"#3e3e4b","data-size":4,"font-size":4,"font-family":"Almendra SC"},"#burgIcons > #towns":{"opacity":1,"fill":"#ffffff","fill-opacity":0.7,"size":0.5,"stroke":"#3e3e4b","stroke-width":0.12,"stroke-dasharray":"","stroke-linecap":"butt"},"#anchors > #towns":{"opacity":1,"fill":"#ffffff","size":1,"stroke":"#3e3e4b","stroke-width":1.2},"#labels > #states":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":22,"font-size":22,"font-family":"Almendra SC","filter":null},"#labels > #addedLabels":{"opacity":1,"fill":"#3e3e4b","stroke":"#3a3a3a","stroke-width":0,"text-shadow":"white 0 0 4px","data-size":18,"font-size":18,"font-family":"Almendra SC","filter":null},"#fogging":{"opacity":0.98,"fill":"#30426f","filter":null}}` -}; - -// apply default or custom style settings on load -function applyStyleOnLoad() { - const preset = localStorage.getItem("presetStyle"); - const style = preset && (defaultStyles[preset] || localStorage.getItem(preset)); - - if (preset && style && JSON.isValid(style)) { - applyStyle(JSON.parse(style)); - updateMapFilter(); - stylePreset.value = preset; - stylePreset.dataset.old = preset; - } else { - if (preset && preset !== "styleDefault" && ERROR) console.error(`Style preset ${preset} is not available in localStorage, applying default style`); - stylePreset.value = "styleDefault"; - stylePreset.dataset.old = preset; - applyDefaultStyle(); - } -} - -// set default style -function applyDefaultStyle() { - armies.attr("opacity", 1).attr("fill-opacity", 1).attr("font-size", 6).attr("box-size", 3).attr("stroke", "#000").attr("stroke-width", 0.3); - - biomes.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)"); - ice.attr("opacity", 0.9).attr("fill", "#e8f0f6").attr("stroke", "#e8f0f6").attr("stroke-width", 1).attr("filter", "url(#dropShadow05)"); - stateBorders - .attr("opacity", 0.8) - .attr("stroke", "#56566d") - .attr("stroke-width", 1) - .attr("stroke-dasharray", "2") - .attr("stroke-linecap", "butt") - .attr("filter", null); - provinceBorders - .attr("opacity", 0.8) - .attr("stroke", "#56566d") - .attr("stroke-width", 0.5) - .attr("stroke-dasharray", "0 2") - .attr("stroke-linecap", "round") - .attr("filter", null); - cells.attr("opacity", null).attr("stroke", "#808080").attr("stroke-width", 0.1).attr("filter", null).attr("mask", null); - - gridOverlay - .attr("opacity", 0.8) - .attr("type", "pointyHex") - .attr("scale", 1) - .attr("dx", 0) - .attr("dy", 0) - .attr("stroke", "#777777") - .attr("stroke-width", 0.5) - .attr("stroke-dasharray", null) - .attr("filter", null) - .attr("mask", null); - coordinates - .attr("opacity", 1) - .attr("data-size", 12) - .attr("font-size", 12) - .attr("stroke", "#d4d4d4") - .attr("stroke-width", 1) - .attr("stroke-dasharray", 5) - .attr("filter", null) - .attr("mask", null); - compass.attr("opacity", 0.8).attr("transform", null).attr("filter", null).attr("mask", "url(#water)").attr("shape-rendering", "optimizespeed"); - if (!d3.select("#initial").size()) d3.select("#rose").attr("transform", "translate(80 80) scale(.25)"); - - relig.attr("opacity", 0.7).attr("stroke", "#777777").attr("stroke-width", 0).attr("filter", null); - cults.attr("opacity", 0.6).attr("stroke", "#777777").attr("stroke-width", 0.5).attr("filter", null); - landmass.attr("opacity", 1).attr("fill", "#eef6fb").attr("filter", null); - markers.attr("opacity", null).attr("rescale", 1).attr("filter", "url(#dropShadow01)"); - - prec.attr("opacity", null).attr("stroke", "#000000").attr("stroke-width", 0).attr("fill", "#003dff").attr("filter", null); - population.attr("opacity", null).attr("stroke-width", 1.6).attr("stroke-dasharray", null).attr("stroke-linecap", "butt").attr("filter", null); - population.select("#rural").attr("stroke", "#0000ff"); - population.select("#urban").attr("stroke", "#ff0000"); - - lakes.select("#freshwater").attr("opacity", 0.5).attr("fill", "#a6c1fd").attr("stroke", "#5f799d").attr("stroke-width", 0.7).attr("filter", null); - lakes.select("#salt").attr("opacity", 0.5).attr("fill", "#409b8a").attr("stroke", "#388985").attr("stroke-width", 0.7).attr("filter", null); - lakes.select("#sinkhole").attr("opacity", 1).attr("fill", "#5bc9fd").attr("stroke", "#53a3b0").attr("stroke-width", 0.7).attr("filter", null); - lakes.select("#frozen").attr("opacity", 0.95).attr("fill", "#cdd4e7").attr("stroke", "#cfe0eb").attr("stroke-width", 0).attr("filter", null); - lakes.select("#lava").attr("opacity", 0.7).attr("fill", "#90270d").attr("stroke", "#f93e0c").attr("stroke-width", 2).attr("filter", "url(#crumpled)"); - lakes.select("#dry").attr("opacity", 1).attr("fill", "#c9bfa7").attr("stroke", "#8e816f").attr("stroke-width", 0.7).attr("filter", null); - - coastline - .select("#sea_island") - .attr("opacity", 0.5) - .attr("stroke", "#1f3846") - .attr("stroke-width", 0.7) - .attr("auto-filter", 1) - .attr("filter", "url(#dropShadow)"); - coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", 0.35).attr("filter", null); - - terrain.attr("opacity", null).attr("set", "simple").attr("size", 1).attr("density", 0.4).attr("filter", null).attr("mask", null); - rivers.attr("opacity", null).attr("fill", "#5d97bb").attr("filter", null); - ruler.attr("opacity", null).attr("filter", null); - - roads - .attr("opacity", 0.9) - .attr("stroke", "#d06324") - .attr("stroke-width", 0.7) - .attr("stroke-dasharray", "2") - .attr("stroke-linecap", "butt") - .attr("filter", null) - .attr("mask", null); - trails - .attr("opacity", 0.9) - .attr("stroke", "#d06324") - .attr("stroke-width", 0.25) - .attr("stroke-dasharray", ".8 1.6") - .attr("stroke-linecap", "butt") - .attr("filter", null) - .attr("mask", null); - searoutes - .attr("opacity", 0.8) - .attr("stroke", "#ffffff") - .attr("stroke-width", 0.45) - .attr("stroke-dasharray", "1 2") - .attr("stroke-linecap", "round") - .attr("filter", null) - .attr("mask", null); - - statesBody.attr("opacity", 0.4).attr("filter", null); - statesHalo.attr("data-width", 10).attr("stroke-width", 10).attr("opacity", 0.4).attr("filter", "blur(5px)"); - - provs.attr("opacity", 0.7).attr("fill", "#000000").attr("font-family", "Georgia").attr("data-size", 10).attr("font-size", 10).attr("filter", null); - - temperature - .attr("opacity", null) - .attr("fill", "#000000") - .attr("stroke-width", 1.8) - .attr("fill-opacity", 0.3) - .attr("font-size", "8px") - .attr("stroke-dasharray", null) - .attr("filter", null) - .attr("mask", null); - texture.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)"); - texture.select("#textureImage").attr("x", 0).attr("y", 0); - zones - .attr("opacity", 0.6) - .attr("stroke", "#333333") - .attr("stroke-width", 0) - .attr("stroke-dasharray", null) - .attr("stroke-linecap", "butt") - .attr("filter", null) - .attr("mask", null); - - // ocean and svg default style - svg.attr("background-color", "#000000").attr("data-filter", null).attr("filter", null); - oceanLayers.select("rect").attr("fill", "#466eab"); // old color #53679f - oceanLayers.attr("filter", null).attr("layers", "-6,-3,-1"); - svg.select("#oceanicPattern").attr("href", "./images/pattern1.png").attr("opacity", 0.2); - - // heightmap style - terrs - .attr("opacity", null) - .attr("filter", null) - .attr("mask", "url(#land)") - .attr("stroke", "none") - .attr("scheme", "bright") - .attr("terracing", 0) - .attr("skip", 5) - .attr("relax", 0) - .attr("curve", 0); - - // legend - legend - .attr("font-family", "Almendra SC") - .attr("font-size", 13) - .attr("data-size", 13) - .attr("data-x", 99) - .attr("data-y", 93) - .attr("data-columns", 8) - .attr("stroke-width", 2.5) - .attr("stroke", "#812929") - .attr("stroke-dasharray", "0 4 10 4") - .attr("stroke-linecap", "round"); - legend.select("#legendBox").attr("fill", "#ffffff").attr("fill-opacity", 0.8); - - const citiesSize = Math.max(rn(8 - regionsOutput.value / 20), 3); - burgLabels - .select("#cities") - .attr("fill", "#3e3e4b") - .attr("opacity", 1) - .style("text-shadow", "white 0 0 4px") - .attr("font-family", "Almendra SC") - .attr("font-size", citiesSize) - .attr("data-size", citiesSize); - burgIcons - .select("#cities") - .attr("opacity", 1) - .attr("size", 1) - .attr("stroke-width", 0.24) - .attr("fill", "#ffffff") - .attr("stroke", "#3e3e4b") - .attr("fill-opacity", 0.7) - .attr("stroke-dasharray", "") - .attr("stroke-linecap", "butt"); - anchors.select("#cities").attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("stroke-width", 1.2).attr("size", 2); - - burgLabels - .select("#towns") - .attr("fill", "#3e3e4b") - .attr("opacity", 1) - .style("text-shadow", "white 0 0 4px") - .attr("font-family", "Almendra SC") - .attr("font-size", 3) - .attr("data-size", 4); - burgIcons - .select("#towns") - .attr("opacity", 1) - .attr("size", 0.5) - .attr("stroke-width", 0.12) - .attr("fill", "#ffffff") - .attr("stroke", "#3e3e4b") - .attr("fill-opacity", 0.7) - .attr("stroke-dasharray", "") - .attr("stroke-linecap", "butt"); - anchors.select("#towns").attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#3e3e4b").attr("stroke-width", 1.2).attr("size", 1); - - const stateLabelSize = Math.max(rn(24 - regionsOutput.value / 6), 6); - labels - .select("#states") - .attr("fill", "#3e3e4b") - .attr("opacity", 1) - .attr("stroke", "#3a3a3a") - .attr("stroke-width", 0) - .style("text-shadow", "white 0 0 4px") - .attr("font-family", "Almendra SC") - .attr("font-size", stateLabelSize) - .attr("data-size", stateLabelSize) - .attr("filter", null); - labels - .select("#addedLabels") - .attr("fill", "#3e3e4b") - .attr("opacity", 1) - .attr("stroke", "#3a3a3a") - .attr("stroke-width", 0) - .style("text-shadow", "white 0 0 4px") - .attr("font-family", "Almendra SC") - .attr("font-size", 18) - .attr("data-size", 18) - .attr("filter", null); - - fogging.attr("opacity", 0.98).attr("fill", "#30426f"); - emblems.attr("opacity", 0.9).attr("stroke-width", 1).attr("filter", null); -} - -// apply style settings in JSON -function applyStyle(style) { - for (const selector in style) { - const el = document.querySelector(selector); - if (!el) continue; - for (const attribute in style[selector]) { - const value = style[selector][attribute]; - - if (value === "null" || value === null) { - el.removeAttribute(attribute); - continue; - } - - if (attribute === "text-shadow") { - el.style[attribute] = value; - } else { - el.setAttribute(attribute, value); - } - } - } -} - -// change current style preset to another saved one -function changeStylePreset(preset) { - if (customization) return tip("Please exit the customization mode first", false, "error"); - - if (sessionStorage.getItem("styleChangeWarningShown")) { - changeStyle(); - } else { - sessionStorage.setItem("styleChangeWarningShown", true); - alertMessage.innerHTML = "Are you sure you want to change the style preset? All unsaved style changes will be lost"; - $("#alert").dialog({ - resizable: false, - title: "Change style preset", - width: "23em", - buttons: { - Change: function () { - changeStyle(); - $(this).dialog("close"); - }, - Cancel: function () { - stylePreset.value = stylePreset.dataset.old; - $(this).dialog("close"); - } - } - }); - } - - function changeStyle() { - const customPreset = localStorage.getItem(preset); - if (customPreset) { - if (JSON.isValid(customPreset)) applyStyle(JSON.parse(customPreset)); - else { - tip("Cannot parse stored style JSON. Default style applied", false, "error", 5000); - applyDefaultStyle(); - } - } else if (defaultStyles[preset]) { - const style = defaultStyles[preset]; - if (JSON.isValid(style)) applyStyle(JSON.parse(style)); - else tip("Cannot parse style JSON", false, "error", 5000); - } else applyDefaultStyle(); - - removeStyleButton.style.display = stylePreset.selectedOptions[0].dataset.system ? "none" : "inline-block"; - updateElements(); // change elements - selectStyleElement(); // re-select element to trigger values update - updateMapFilter(); - localStorage.setItem("presetStyle", preset); // save preset to use it onload - stylePreset.dataset.old = stylePreset.value; // save current value - } -} - function updateElements() { // burgIcons to desired size - burgIcons.selectAll("g").each(function (d) { + burgIcons.selectAll("g").each(function () { const size = +this.getAttribute("size"); d3.select(this) .selectAll("circle") @@ -1120,175 +795,6 @@ function updateElements() { invokeActiveZooming(); } -function addStylePreset() { - $("#styleSaver").dialog({ - title: "Style Saver", - width: "26em", - position: {my: "center", at: "center", of: "svg"} - }); - - const currentPreset = document.getElementById("stylePreset").selectedOptions[0]; - const styleName = currentPreset ? currentPreset.text : "custom"; - document.getElementById("styleSaverName").value = styleName; - styleSaverJSON.value = JSON.stringify(getStyle(), null, 2); - checkName(); - - if (modules.saveStyle) return; - modules.saveStyle = true; - - // add listeners - document.getElementById("styleSaverName").addEventListener("input", checkName); - document.getElementById("styleSaverSave").addEventListener("click", saveStyle); - document.getElementById("styleSaverDownload").addEventListener("click", styleDownload); - document.getElementById("styleSaverLoad").addEventListener("click", () => styleToLoad.click()); - document.getElementById("styleToLoad").addEventListener("change", function () { - uploadFile(this, styleUpload); - }); - - function getStyle() { - const style = {}; - const attributes = { - "#map": ["background-color", "filter", "data-filter"], - "#armies": ["font-size", "box-size", "stroke", "stroke-width", "fill-opacity", "filter"], - "#biomes": ["opacity", "filter", "mask"], - "#stateBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], - "#provinceBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], - "#cells": ["opacity", "stroke", "stroke-width", "filter", "mask"], - "#gridOverlay": ["opacity", "scale", "dx", "dy", "type", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "transform", "filter", "mask"], - "#coordinates": ["opacity", "data-size", "font-size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], - "#compass": ["opacity", "transform", "filter", "mask", "shape-rendering"], - "#rose": ["transform"], - "#relig": ["opacity", "stroke", "stroke-width", "filter"], - "#cults": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], - "#landmass": ["opacity", "fill", "filter"], - "#markers": ["opacity", "rescale", "filter"], - "#prec": ["opacity", "stroke", "stroke-width", "fill", "filter"], - "#population": ["opacity", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], - "#rural": ["stroke"], - "#urban": ["stroke"], - "#freshwater": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#salt": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#sinkhole": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#frozen": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#lava": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#dry": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#sea_island": ["opacity", "stroke", "stroke-width", "filter", "auto-filter"], - "#lake_island": ["opacity", "stroke", "stroke-width", "filter"], - "#terrain": ["opacity", "set", "size", "density", "filter", "mask"], - "#rivers": ["opacity", "filter", "fill"], - "#ruler": ["opacity", "filter"], - "#roads": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], - "#trails": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], - "#searoutes": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], - "#statesBody": ["opacity", "filter"], - "#statesHalo": ["opacity", "data-width", "stroke-width", "filter"], - "#provs": ["opacity", "fill", "font-size", "font-family", "filter"], - "#temperature": ["opacity", "font-size", "fill", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], - "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"], - "#emblems": ["opacity", "stroke-width", "filter"], - "#texture": ["opacity", "filter", "mask"], - "#textureImage": ["x", "y"], - "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], - "#oceanLayers": ["filter", "layers"], - "#oceanBase": ["fill"], - "#oceanicPattern": ["href", "opacity"], - "#terrs": ["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"], - "#legend": ["data-size", "font-size", "font-family", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "data-x", "data-y", "data-columns"], - "#legendBox": ["fill", "fill-opacity"], - "#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], - "#burgIcons > #cities": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"], - "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"], - "#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], - "#burgIcons > #towns": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"], - "#anchors > #towns": ["opacity", "fill", "size", "stroke", "stroke-width"], - "#labels > #states": ["opacity", "fill", "stroke", "stroke-width", "text-shadow", "data-size", "font-size", "font-family", "filter"], - "#labels > #addedLabels": ["opacity", "fill", "stroke", "stroke-width", "text-shadow", "data-size", "font-size", "font-family", "filter"], - "#fogging": ["opacity", "fill", "filter"] - }; - - for (const selector in attributes) { - const el = document.querySelector(selector); - if (!el) continue; - - style[selector] = {}; - for (const attr of attributes[selector]) { - let value = el.style[attr] || el.getAttribute(attr); - if (attr === "font-size" && el.hasAttribute("data-size")) value = el.getAttribute("data-size"); - style[selector][attr] = parseValue(value); - } - } - - function parseValue(value) { - if (value === "null" || value === null) return null; - if (value === "") return ""; - if (!isNaN(+value)) return +value; - return value; - } - - return style; - } - - function checkName() { - let tip = ""; - const v = "style" + styleSaverName.value; - const listed = Array.from(stylePreset.options).some(o => o.value == v); - const stored = localStorage.getItem(v); - if (!stored && listed) tip = "default"; - else if (stored) tip = "existing"; - else if (styleSaverName.value) tip = "new"; - styleSaverTip.innerHTML = tip; - } - - function saveStyle() { - if (!styleSaverJSON.value) return tip("Please provide a style JSON", false, "error"); - if (!JSON.isValid(styleSaverJSON.value)) return tip("JSON string is not valid, please check the format", false, "error"); - if (!styleSaverName.value) return tip("Please provide a preset name", false, "error"); - if (styleSaverTip.innerHTML === "default") return tip("You cannot overwrite default preset, please change the name", false, "error"); - - const preset = "style" + styleSaverName.value; - applyOption(stylePreset, preset, styleSaverName.value); // add option - localStorage.setItem("presetStyle", preset); // mark preset as default - localStorage.setItem(preset, styleSaverJSON.value); // save preset - - applyStyle(JSON.parse(styleSaverJSON.value)); - updateMapFilter(); - invokeActiveZooming(); - - $("#styleSaver").dialog("close"); - removeStyleButton.style.display = "inline-block"; - tip("Style preset is saved", false, "success", 4000); - } - - function styleDownload() { - if (!styleSaverJSON.value) return tip("Please provide a style JSON", false, "error"); - if (!JSON.isValid(styleSaverJSON.value)) return tip("JSON string is not valid, please check the format", false, "error"); - if (!styleSaverName.value) return tip("Please provide a preset name", false, "error"); - - const data = styleSaverJSON.value; - if (!data) return tip("Please provide a style JSON", false, "error"); - downloadFile(data, "style" + styleSaverName.value + ".json", "application/json"); - } - - function styleUpload(dataLoaded) { - if (!dataLoaded) return tip("Cannot load the file. Please check the data format", false, "error"); - const data = JSON.stringify(JSON.parse(dataLoaded), null, 2); - styleSaverJSON.value = data; - } -} - -function removeStylePreset() { - if (stylePreset.selectedOptions[0].dataset.system) return tip("Cannot remove system preset", false, "error"); - - localStorage.removeItem("presetStyle"); - localStorage.removeItem(stylePreset.value); - stylePreset.selectedOptions[0].remove(); - removeStyleButton.style.display = "none"; - - applyDefaultStyle(); - updateMapFilter(); - invokeActiveZooming(); -} - // GLOBAL FILTERS mapFilters.addEventListener("click", applyMapFilter); function applyMapFilter(event) { @@ -1301,10 +807,3 @@ function applyMapFilter(event) { button.classList.add("pressed"); svg.attr("data-filter", button.id).attr("filter", "url(#filter-" + button.id + ")"); } - -function updateMapFilter() { - const filter = svg.attr("data-filter"); - mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); - if (!filter) return; - mapFilters.querySelector("#" + filter).classList.add("pressed"); -} diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js new file mode 100644 index 00000000..dc87d647 --- /dev/null +++ b/modules/ui/stylePresets.js @@ -0,0 +1,295 @@ +// UI module to control the style presets +"use strict"; + +const defaultStyles = ["default", "ancient", "gloom", "clean", "light", "watercolor", "cyberpunk", "monochrome"]; + +// add styles to list +{ + const defaultOptions = defaultStyles.map(styleName => ``); + const storedStyles = Object.keys(localStorage).filter(key => key.startsWith("fmgStyle")); + const customOptions = storedStyles.map(styleName => ``); + const options = defaultOptions.join("") + customOptions.join(""); + document.getElementById("stylePreset").innerHTML = options; +} + +async function applyStyleOnLoad() { + let preset = localStorage.getItem("presetStyle") || "default"; + let style = {}; + + const isCustom = !defaultStyles.includes(preset); + if (isCustom) { + const storedStyleJSON = localStorage.getItem(preset); + if (!storedStyleJSON) { + console.error(`Custom style ${preset} in not found in localStorage. Appliying default style`); + preset = "default"; + } else { + const isValid = JSON.isValid(storedStyleJSON); + if (isValid) { + style = JSON.parse(storedStyleJSON); + } else { + console.error(`Custom style ${preset} stored in localStorage is not valid. Appliying default style`); + preset = "default"; + } + } + } else { + const defaultStyle = await fetch(`/styles/${preset}.json`) + .then(res => res.json()) + .catch(err => { + console.error("Error on loading style", preset, err); + return {}; + }); + style = defaultStyle; + } + + applyStyle(style); + updateMapFilter(); + stylePreset.value = stylePreset.dataset.old = preset; +} + +function applyStyle(style) { + for (const selector in style) { + const el = document.querySelector(selector); + if (!el) continue; + for (const attribute in style[selector]) { + const value = style[selector][attribute]; + + if (value === "null" || value === null) { + el.removeAttribute(attribute); + continue; + } + + if (attribute === "text-shadow") { + el.style[attribute] = value; + } else { + el.setAttribute(attribute, value); + } + } + } +} + +// change current style preset to another saved one +function changeStylePreset(preset) { + if (customization) return tip("Please exit the customization mode first", false, "error"); + + if (sessionStorage.getItem("styleChangeWarningShown")) { + changeStyle(); + } else { + sessionStorage.setItem("styleChangeWarningShown", true); + alertMessage.innerHTML = "Are you sure you want to change the style preset? All unsaved style changes will be lost"; + $("#alert").dialog({ + resizable: false, + title: "Change style preset", + width: "23em", + buttons: { + Change: function () { + changeStyle(); + $(this).dialog("close"); + }, + Cancel: function () { + stylePreset.value = stylePreset.dataset.old; + $(this).dialog("close"); + } + } + }); + } + + function changeStyle() { + const customPreset = localStorage.getItem(preset); + if (customPreset) { + if (JSON.isValid(customPreset)) applyStyle(JSON.parse(customPreset)); + else { + tip("Cannot parse stored style JSON. Default style applied", false, "error", 5000); + applyDefaultStyle(); + } + } else if (defaultStyles[preset]) { + const style = defaultStyles[preset]; + if (JSON.isValid(style)) applyStyle(JSON.parse(style)); + else tip("Cannot parse style JSON", false, "error", 5000); + } else applyDefaultStyle(); + + const isDefault = defaultStyles.includes(stylePreset.value); + removeStyleButton.style.display = isDefault ? "none" : "inline-block"; + updateElements(); // change elements + selectStyleElement(); // re-select element to trigger values update + updateMapFilter(); + localStorage.setItem("presetStyle", preset); // save preset to use it onload + stylePreset.dataset.old = stylePreset.value; // save current value + } +} + +function addStylePreset() { + $("#styleSaver").dialog({ + title: "Style Saver", + width: "26em", + position: {my: "center", at: "center", of: "svg"} + }); + + const currentPreset = document.getElementById("stylePreset").selectedOptions[0]; + const styleName = currentPreset ? currentPreset.text : "custom"; + document.getElementById("styleSaverName").value = styleName; + styleSaverJSON.value = JSON.stringify(getStyle(), null, 2); + checkName(); + + if (modules.saveStyle) return; + modules.saveStyle = true; + + // add listeners + document.getElementById("styleSaverName").addEventListener("input", checkName); + document.getElementById("styleSaverSave").addEventListener("click", saveStyle); + document.getElementById("styleSaverDownload").addEventListener("click", styleDownload); + document.getElementById("styleSaverLoad").addEventListener("click", () => styleToLoad.click()); + document.getElementById("styleToLoad").addEventListener("change", function () { + uploadFile(this, styleUpload); + }); + + function getStyle() { + const style = {}; + const attributes = { + "#map": ["background-color", "filter", "data-filter"], + "#armies": ["font-size", "box-size", "stroke", "stroke-width", "fill-opacity", "filter"], + "#biomes": ["opacity", "filter", "mask"], + "#stateBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], + "#provinceBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], + "#cells": ["opacity", "stroke", "stroke-width", "filter", "mask"], + "#gridOverlay": ["opacity", "scale", "dx", "dy", "type", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "transform", "filter", "mask"], + "#coordinates": ["opacity", "data-size", "font-size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], + "#compass": ["opacity", "transform", "filter", "mask", "shape-rendering"], + "#rose": ["transform"], + "#relig": ["opacity", "stroke", "stroke-width", "filter"], + "#cults": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], + "#landmass": ["opacity", "fill", "filter"], + "#markers": ["opacity", "rescale", "filter"], + "#prec": ["opacity", "stroke", "stroke-width", "fill", "filter"], + "#population": ["opacity", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], + "#rural": ["stroke"], + "#urban": ["stroke"], + "#freshwater": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#salt": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#sinkhole": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#frozen": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#lava": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#dry": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#sea_island": ["opacity", "stroke", "stroke-width", "filter", "auto-filter"], + "#lake_island": ["opacity", "stroke", "stroke-width", "filter"], + "#terrain": ["opacity", "set", "size", "density", "filter", "mask"], + "#rivers": ["opacity", "filter", "fill"], + "#ruler": ["opacity", "filter"], + "#roads": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], + "#trails": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], + "#searoutes": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], + "#statesBody": ["opacity", "filter"], + "#statesHalo": ["opacity", "data-width", "stroke-width", "filter"], + "#provs": ["opacity", "fill", "font-size", "font-family", "filter"], + "#temperature": ["opacity", "font-size", "fill", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], + "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"], + "#emblems": ["opacity", "stroke-width", "filter"], + "#texture": ["opacity", "filter", "mask"], + "#textureImage": ["x", "y"], + "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], + "#oceanLayers": ["filter", "layers"], + "#oceanBase": ["fill"], + "#oceanicPattern": ["href", "opacity"], + "#terrs": ["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"], + "#legend": ["data-size", "font-size", "font-family", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "data-x", "data-y", "data-columns"], + "#legendBox": ["fill", "fill-opacity"], + "#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], + "#burgIcons > #cities": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"], + "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"], + "#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], + "#burgIcons > #towns": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"], + "#anchors > #towns": ["opacity", "fill", "size", "stroke", "stroke-width"], + "#labels > #states": ["opacity", "fill", "stroke", "stroke-width", "text-shadow", "data-size", "font-size", "font-family", "filter"], + "#labels > #addedLabels": ["opacity", "fill", "stroke", "stroke-width", "text-shadow", "data-size", "font-size", "font-family", "filter"], + "#fogging": ["opacity", "fill", "filter"] + }; + + for (const selector in attributes) { + const el = document.querySelector(selector); + if (!el) continue; + + style[selector] = {}; + for (const attr of attributes[selector]) { + let value = el.style[attr] || el.getAttribute(attr); + if (attr === "font-size" && el.hasAttribute("data-size")) value = el.getAttribute("data-size"); + style[selector][attr] = parseValue(value); + } + } + + function parseValue(value) { + if (value === "null" || value === null) return null; + if (value === "") return ""; + if (!isNaN(+value)) return +value; + return value; + } + + return style; + } + + function checkName() { + let tip = ""; + const v = "style" + styleSaverName.value; + const listed = Array.from(stylePreset.options).some(o => o.value == v); + const stored = localStorage.getItem(v); + if (!stored && listed) tip = "default"; + else if (stored) tip = "existing"; + else if (styleSaverName.value) tip = "new"; + styleSaverTip.innerHTML = tip; + } + + function saveStyle() { + if (!styleSaverJSON.value) return tip("Please provide a style JSON", false, "error"); + if (!JSON.isValid(styleSaverJSON.value)) return tip("JSON string is not valid, please check the format", false, "error"); + if (!styleSaverName.value) return tip("Please provide a preset name", false, "error"); + if (styleSaverTip.innerHTML === "default") return tip("You cannot overwrite default preset, please change the name", false, "error"); + + const preset = "style" + styleSaverName.value; + applyOption(stylePreset, preset, styleSaverName.value); // add option + localStorage.setItem("presetStyle", preset); // mark preset as default + localStorage.setItem(preset, styleSaverJSON.value); // save preset + + applyStyle(JSON.parse(styleSaverJSON.value)); + updateMapFilter(); + invokeActiveZooming(); + + $("#styleSaver").dialog("close"); + removeStyleButton.style.display = "inline-block"; + tip("Style preset is saved", false, "success", 4000); + } + + function styleDownload() { + if (!styleSaverJSON.value) return tip("Please provide a style JSON", false, "error"); + if (!JSON.isValid(styleSaverJSON.value)) return tip("JSON string is not valid, please check the format", false, "error"); + if (!styleSaverName.value) return tip("Please provide a preset name", false, "error"); + + const data = styleSaverJSON.value; + if (!data) return tip("Please provide a style JSON", false, "error"); + downloadFile(data, "style" + styleSaverName.value + ".json", "application/json"); + } + + function styleUpload(dataLoaded) { + if (!dataLoaded) return tip("Cannot load the file. Please check the data format", false, "error"); + const data = JSON.stringify(JSON.parse(dataLoaded), null, 2); + styleSaverJSON.value = data; + } +} + +function removeStylePreset() { + const isDefault = defaultStyles.includes(stylePreset.value); + if (isDefault) return tip("Cannot remove system preset", false, "error"); + + localStorage.removeItem("presetStyle"); + localStorage.removeItem(stylePreset.value); + stylePreset.selectedOptions[0].remove(); + removeStyleButton.style.display = "none"; + + applyDefaultStyle(); + updateMapFilter(); + invokeActiveZooming(); +} + +function updateMapFilter() { + const filter = svg.attr("data-filter"); + mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); + if (!filter) return; + mapFilters.querySelector("#" + filter).classList.add("pressed"); +} diff --git a/styles/ancient.json b/styles/ancient.json new file mode 100644 index 00000000..09704553 --- /dev/null +++ b/styles/ancient.json @@ -0,0 +1,389 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 8, + "box-size": 4, + "stroke": "#000", + "stroke-width": 0.2, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": null, + "filter": null, + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 0.8, + "stroke": "#56566d", + "stroke-width": 1, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null + }, + "#provinceBorders": { + "opacity": 0.8, + "stroke": "#56566d", + "stroke-width": 0.2, + "stroke-dasharray": 1, + "stroke-linecap": "butt", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "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": 12, + "font-size": 12, + "stroke": "#d4d4d4", + "stroke-width": 1, + "stroke-dasharray": 5, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.5, + "transform": null, + "filter": "url(#filter-sepia)", + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": "translate(80 80) scale(.25)" + }, + "#relig": { + "opacity": 0.7, + "stroke": "#404040", + "stroke-width": 0.7, + "filter": null + }, + "#cults": { + "opacity": 0.6, + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#landmass": { + "opacity": 1, + "fill": "#e3dfce", + "filter": null + }, + "#markers": { + "opacity": null, + "rescale": 1, + "filter": "" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0.1, + "fill": "#003dff", + "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.6, + "fill": "#c8d6e0", + "stroke": "#968d6e", + "stroke-width": 0.7, + "filter": null + }, + "#salt": { + "opacity": 0.5, + "fill": "#339482", + "stroke": "#836a34", + "stroke-width": 0.7, + "filter": null + }, + "#sinkhole": { + "opacity": 1, + "fill": "#c3d6df", + "stroke": "#b29062", + "stroke-width": 0.7, + "filter": null + }, + "#frozen": { + "opacity": 0.95, + "fill": "#cdd4e7", + "stroke": "#cfe0eb", + "stroke-width": 0, + "filter": null + }, + "#lava": { + "opacity": 0.7, + "fill": "#a04e18", + "stroke": "#835520", + "stroke-width": 2, + "filter": "url(#paper)" + }, + "#dry": { + "opacity": 0.7, + "fill": "#c6b795", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 0.5, + "stroke": "#1f3846", + "stroke-width": 0.7, + "filter": "url(#dropShadow)", + "auto-filter": 1 + }, + "#lake_island": { + "opacity": 1, + "stroke": "#7c8eaf", + "stroke-width": 0.35, + "filter": null + }, + "#terrain": { + "opacity": 1, + "set": "simple", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": null, + "filter": "", + "fill": "#a69b7d" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 0.7, + "stroke": "#8d502a", + "stroke-width": 1, + "stroke-dasharray": 3, + "stroke-linecap": "inherit", + "filter": "", + "mask": null + }, + "#trails": { + "opacity": 0.7, + "stroke": "#924217", + "stroke-width": 0.5, + "stroke-dasharray": "1 2", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#b16925", + "stroke-width": 0.8, + "stroke-dasharray": "1 2", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0.2, + "filter": "url(#filter-sepia)" + }, + "#statesHalo": { + "opacity": 0.4, + "data-width": 10, + "stroke-width": 10, + "filter": "blur(6px)" + }, + "#provs": { + "opacity": 0.7, + "fill": "#000000", + "font-size": 10, + "font-family": "Georgia", + "filter": null + }, + "#temperature": { + "opacity": null, + "font-size": "8px", + "fill": "#000000", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 1.8, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.35, + "fill": "#e8f0f6", + "stroke": "#e8f0f6", + "stroke-width": 3, + "filter": "url(#dropShadow05)" + }, + "#emblems": { + "opacity": 0.8, + "stroke-width": 0.8, + "filter": "url(#dropShadow05)" + }, + "#texture": { + "opacity": 0.6, + "filter": "", + "mask": "" + }, + "#textureImage": { + "x": 0, + "y": 0 + }, + "#zones": { + "opacity": 0.6, + "stroke": "#333333", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#oceanLayers": { + "filter": "", + "layers": "-6,-4,-2" + }, + "#oceanBase": { + "fill": "#c99f64" + }, + "#oceanicPattern": { + "href": "./images/kiwiroo.png", + "opacity": 0.4 + }, + "#terrs": { + "opacity": null, + "scheme": "bright", + "terracing": 0, + "skip": 2, + "relax": 1, + "curve": 0, + "filter": "url(#blur3)", + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 99, + "data-y": 93, + "data-columns": 8 + }, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0px 0px 4px", + "data-size": 12, + "font-size": 12, + "font-family": "Great Vibes" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#fdfab9", + "fill-opacity": 0.7, + "size": 1, + "stroke": "#6f4e1f", + "stroke-width": 0.3, + "stroke-dasharray": ".3 .4", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 2, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0px 0px 4px", + "data-size": 5, + "font-size": 5, + "font-family": "Great Vibes" + }, + "#burgIcons > #towns": { + "opacity": 1, + "fill": "#fef4d8", + "fill-opacity": 0.7, + "size": 0.5, + "stroke": "#72472c", + "stroke-width": 0.12, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#3e3e4b", + "stroke": "#3a3a3a", + "stroke-width": 0, + "text-shadow": "white 0px 0px 4px", + "data-size": 22, + "font-size": 22, + "font-family": "Great Vibes", + "filter": "url(#filter-sepia)" + }, + "#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": "Times New Roman", + "filter": "url(#filter-sepia)" + }, + "#fogging": { + "opacity": 0.98, + "fill": "#30426f", + "filter": null + } +} diff --git a/styles/clean.json b/styles/clean.json new file mode 100644 index 00000000..fd00c5ad --- /dev/null +++ b/styles/clean.json @@ -0,0 +1,388 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 6, + "box-size": 3, + "stroke": "#000", + "stroke-width": 0, + "opacity": 1, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": 0.5, + "filter": "url(#blur7)", + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 0.8, + "stroke": "#414141", + "stroke-width": 0.7, + "stroke-dasharray": 0, + "stroke-linecap": "butt", + "filter": null + }, + "#provinceBorders": { + "opacity": 0.8, + "stroke": "#414141", + "stroke-width": 0.45, + "stroke-dasharray": 1, + "stroke-linecap": "butt", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.09, + "filter": null, + "mask": "url(#land)" + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "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": 12, + "font-size": 12, + "stroke": "#414141", + "stroke-width": 0.45, + "stroke-dasharray": 3, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.8, + "transform": null, + "filter": null, + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": null + }, + "#relig": { + "opacity": 0.7, + "stroke": "#404040", + "stroke-width": 0.7, + "filter": null + }, + "#cults": { + "opacity": 0.6, + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#landmass": { + "opacity": 1, + "fill": "#eeedeb", + "filter": null + }, + "#markers": { + "opacity": null, + "rescale": null, + "filter": "url(#dropShadow01)" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0, + "fill": "#0080ff", + "filter": null + }, + "#population": { + "opacity": null, + "stroke-width": 2.58, + "stroke-dasharray": 0, + "stroke-linecap": "butt", + "filter": "url(#blur3)" + }, + "#rural": { + "stroke": "#ff0000" + }, + "#urban": { + "stroke": "#800000" + }, + "#freshwater": { + "opacity": 0.5, + "fill": "#aadaff", + "stroke": "#5f799d", + "stroke-width": 0, + "filter": null + }, + "#salt": { + "opacity": 0.5, + "fill": "#409b8a", + "stroke": "#388985", + "stroke-width": 0.7, + "filter": null + }, + "#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.7, + "fill": "#c9bfa7", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 0.6, + "stroke": "#595959", + "stroke-width": 0.4, + "filter": null, + "auto-filter": 0 + }, + "#lake_island": { + "opacity": 0, + "stroke": "#7c8eaf", + "stroke-width": 0, + "filter": null + }, + "#terrain": { + "opacity": 1, + "set": "simple", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": null, + "filter": null, + "fill": "#aadaff" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 0.9, + "stroke": "#f6d068", + "stroke-width": 0.7, + "stroke-dasharray": 0, + "stroke-linecap": "inherit", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 1, + "stroke": "#ffffff", + "stroke-width": 0.25, + "stroke-dasharray": "", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#4f82c6", + "stroke-width": 0.45, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null, + "mask": "url(#water)" + }, + "#statesBody": { + "opacity": 0.3, + "filter": null + }, + "#statesHalo": { + "opacity": 0.5, + "data-width": 1, + "stroke-width": 1, + "filter": null + }, + "#provs": { + "opacity": 0.7, + "fill": "#000000", + "data-size": 10, + "font-size": 10, + "font-family": "Georgia", + "filter": null + }, + "#temperature": { + "opacity": null, + "font-size": "8px", + "fill": "#000000", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 1.8, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.9, + "fill": "#e8f0f6", + "stroke": "#e8f0f6", + "stroke-width": 1, + "filter": "url(#dropShadow01)" + }, + "#emblems": { + "opacity": 1, + "stroke-width": 1, + "filter": null + }, + "#texture": { + "opacity": null, + "filter": null, + "mask": "url(#land)" + }, + "#textureImage": {}, + "#zones": { + "opacity": 0.7, + "stroke": "#ff6262", + "stroke-width": 0, + "stroke-dasharray": "", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#oceanLayers": { + "filter": null, + "layers": "none" + }, + "#oceanBase": { + "fill": "#aadaff" + }, + "#oceanicPattern": { + "href": "", + "opacity": 0.2 + }, + "#terrs": { + "opacity": 0.5, + "scheme": "bright", + "terracing": 0, + "skip": 5, + "relax": 0, + "curve": 0, + "filter": null, + "mask": "url(#land)" + }, + "#legend": { + "data-size": 12.74, + "font-size": 12.74, + "font-family": "Arial", + "stroke": "#909090", + "stroke-width": 1.13, + "stroke-dasharray": 0, + "stroke-linecap": "round", + "data-x": 98.39, + "data-y": 12.67, + "data-columns": null + }, + "#legendBox": {}, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#414141", + "text-shadow": "white 0 0 4px", + "data-size": 7, + "font-size": 7, + "font-family": "Arial" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 0.24, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 2, + "stroke": "#303030", + "stroke-width": 1.7 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#414141", + "data-size": 3, + "font-size": 3, + "font-family": "Arial" + }, + "#burgIcons > #towns": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 0.5, + "stroke": "#3e3e4b", + "stroke-width": 0.12, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 1.06 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#292929", + "stroke": "#303030", + "stroke-width": 0, + "text-shadow": "white 0 0 2px", + "data-size": 10, + "font-size": 10, + "font-family": "Arial", + "filter": null + }, + "#labels > #addedLabels": { + "opacity": 1, + "fill": "#414141", + "stroke": "#3a3a3a", + "stroke-width": 0, + "text-shadow": "white 0 0 4px", + "data-size": 18, + "font-size": 18, + "font-family": "Arial", + "filter": null + }, + "#fogging": { + "opacity": 1, + "fill": "#ffffff", + "filter": null + } +} diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json new file mode 100644 index 00000000..579d093b --- /dev/null +++ b/styles/cyberpunk.json @@ -0,0 +1,385 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 8, + "box-size": 4, + "stroke": "#000000", + "stroke-width": 0.6, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": 0.7, + "filter": "", + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 1, + "stroke": "#ffffff", + "stroke-width": 1, + "stroke-dasharray": 3, + "stroke-linecap": "round", + "filter": "" + }, + "#provinceBorders": { + "opacity": 0.5, + "stroke": "#ffffff", + "stroke-width": 0.3, + "stroke-dasharray": 1, + "stroke-linecap": "round", + "filter": "" + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "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": "#4a4a4a", + "stroke-width": 1, + "stroke-dasharray": 6, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.9, + "transform": null, + "filter": null, + "mask": "", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": null + }, + "#relig": { + "opacity": 0.5, + "stroke": "#404040", + "stroke-width": 2, + "filter": "url(#splotch)" + }, + "#cults": { + "opacity": 0.35, + "stroke": "#777777", + "stroke-width": 2, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": "url(#splotch)" + }, + "#landmass": { + "opacity": 1, + "fill": "#04011e", + "filter": null + }, + "#markers": { + "opacity": 0.8, + "rescale": 1, + "filter": "url(#dropShadow05)" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0.1, + "fill": "#003dff", + "filter": null + }, + "#population": { + "opacity": null, + "stroke-width": 1.6, + "stroke-dasharray": null, + "stroke-linecap": "square", + "filter": null + }, + "#rural": { + "stroke": "#5294ff" + }, + "#urban": { + "stroke": "#5cdeff" + }, + "#freshwater": { + "opacity": 0.9, + "fill": "#381579", + "stroke": "#47228c", + "stroke-width": 3, + "filter": null + }, + "#salt": { + "opacity": 0.5, + "fill": "#409b8a", + "stroke": "#388985", + "stroke-width": 0.7, + "filter": null + }, + "#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.7, + "fill": "#c9bfa7", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 0.6, + "stroke": "#1f3846", + "stroke-width": 0.7, + "filter": "url(#dropShadow)", + "auto-filter": 1 + }, + "#lake_island": { + "opacity": 1, + "stroke": "#7c8eaf", + "stroke-width": 0.35, + "filter": null + }, + "#terrain": { + "opacity": 0.9, + "set": "simple", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": null, + "filter": null, + "fill": "#6738bc" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 1, + "stroke": "#c44ac0", + "stroke-width": 0.9, + "stroke-dasharray": "2 3", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 1, + "stroke": "#df2654", + "stroke-width": 0.2, + "stroke-dasharray": ".5 1", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#a890c6", + "stroke-width": 0.6, + "stroke-dasharray": "1.2 2.4", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0, + "filter": null + }, + "#statesHalo": { + "opacity": 1, + "data-width": 13, + "stroke-width": 13, + "filter": "blur(8.25px)" + }, + "#provs": { + "opacity": 0.2, + "fill": "#933e3e", + "font-size": 8, + "font-family": "Orbitron", + "filter": "" + }, + "#temperature": { + "opacity": 0.8, + "font-size": "22px", + "fill": "#551282", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 3, + "stroke-dasharray": 2, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.3, + "fill": "#919191", + "stroke": "#949494", + "stroke-width": 0, + "filter": "url(#dropShadow05)" + }, + "#emblems": { + "opacity": 0.75, + "stroke-width": 0.5, + "filter": "" + }, + "#texture": { + "opacity": 0.14, + "filter": null, + "mask": "url(#water)" + }, + "#zones": { + "opacity": 0.7, + "stroke": "#ffffff", + "stroke-width": 0.3, + "stroke-dasharray": null, + "stroke-linecap": "inherit", + "filter": "url(#dropShadow05)", + "mask": null + }, + "#oceanLayers": { + "filter": "", + "layers": "-6,-3,-1" + }, + "#oceanBase": { + "fill": "#05001f" + }, + "#oceanicPattern": { + "href": "", + "opacity": 0.15 + }, + "#terrs": { + "opacity": 1, + "scheme": "monochrome", + "terracing": 6, + "skip": 0, + "relax": 2, + "curve": 0, + "filter": "", + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 99, + "data-y": 93, + "data-columns": 8 + }, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#ffffff", + "text-shadow": "white 0px 0px 4px", + "data-size": 8, + "font-size": 8, + "font-family": "Orbitron" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 2, + "stroke": "#444444", + "stroke-width": 0.25, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 4, + "stroke": "#3e3e4b", + "stroke-width": 1 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#ffffff", + "text-shadow": "white 0px 0px 4px", + "data-size": 3, + "font-size": 3, + "font-family": "Orbitron" + }, + "#burgIcons > #towns": { + "opacity": 0.95, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 0.8, + "stroke": "#3e3e4b", + "stroke-width": 0.2, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1.6, + "stroke": "#3e3e4b", + "stroke-width": 1 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 0, + "text-shadow": "white 0px 0px 4px", + "data-size": 18, + "font-size": 18, + "font-family": "Orbitron", + "filter": "" + }, + "#labels > #addedLabels": { + "opacity": 1, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 0, + "text-shadow": "white 0px 0px 4px", + "data-size": 18, + "font-size": 18, + "font-family": "Almendra SC", + "filter": null + }, + "#fogging": { + "opacity": 0.98, + "fill": "#1b1423", + "filter": null + } +} diff --git a/styles/default.json b/styles/default.json new file mode 100644 index 00000000..eb4acb69 --- /dev/null +++ b/styles/default.json @@ -0,0 +1,385 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 6, + "box-size": 3, + "stroke": "#000", + "stroke-width": 0.3, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": null, + "filter": null, + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 0.8, + "stroke": "#56566d", + "stroke-width": 1, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null + }, + "#provinceBorders": { + "opacity": 0.8, + "stroke": "#56566d", + "stroke-width": 0.5, + "stroke-dasharray": "0 2", + "stroke-linecap": "round", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "dx": 0, + "dy": 0, + "type": "pointyHex", + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "transform": null, + "filter": null, + "mask": null + }, + "#coordinates": { + "opacity": 1, + "data-size": 12, + "font-size": 12, + "stroke": "#d4d4d4", + "stroke-width": 1, + "stroke-dasharray": 5, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.8, + "transform": null, + "filter": null, + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": null + }, + "#relig": { + "opacity": 0.7, + "stroke": "#777777", + "stroke-width": 0, + "filter": null + }, + "#cults": { + "opacity": 0.6, + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#landmass": { + "opacity": 1, + "fill": "#eef6fb", + "filter": null + }, + "#markers": { + "opacity": null, + "rescale": 1, + "filter": "url(#dropShadow01)" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0, + "fill": "#003dff", + "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.5, + "fill": "#a6c1fd", + "stroke": "#5f799d", + "stroke-width": 0.7, + "filter": null + }, + "#salt": { + "opacity": 0.5, + "fill": "#409b8a", + "stroke": "#388985", + "stroke-width": 0.7, + "filter": null + }, + "#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": 1, + "fill": "#c9bfa7", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 0.5, + "stroke": "#1f3846", + "stroke-width": 0.7, + "filter": "url(#dropShadow)", + "auto-filter": 1 + }, + "#lake_island": { + "opacity": 1, + "stroke": "#7c8eaf", + "stroke-width": 0.35, + "filter": null + }, + "#terrain": { + "opacity": null, + "set": "simple", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": null, + "filter": null, + "fill": "#5d97bb" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 0.9, + "stroke": "#d06324", + "stroke-width": 0.7, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 0.9, + "stroke": "#d06324", + "stroke-width": 0.25, + "stroke-dasharray": ".8 1.6", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#ffffff", + "stroke-width": 0.45, + "stroke-dasharray": "1 2", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0.4, + "filter": null + }, + "#statesHalo": { + "opacity": 0.4, + "data-width": 10, + "stroke-width": 10, + "filter": "blur(5px)" + }, + "#provs": { + "opacity": 0.7, + "fill": "#000000", + "font-size": 10, + "font-family": "Georgia", + "filter": null + }, + "#temperature": { + "opacity": null, + "font-size": "8px", + "fill": "#000000", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 1.8, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.9, + "fill": "#e8f0f6", + "stroke": "#e8f0f6", + "stroke-width": 1, + "filter": "url(#dropShadow05)" + }, + "#emblems": { + "opacity": 0.9, + "stroke-width": 1, + "filter": null + }, + "#texture": { + "opacity": null, + "filter": null, + "mask": "url(#land)" + }, + "#zones": { + "opacity": 0.6, + "stroke": "#333333", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#oceanLayers": { + "filter": null, + "layers": "-6,-3,-1" + }, + "#oceanBase": { + "fill": "#466eab" + }, + "#oceanicPattern": { + "href": "./images/pattern1.png", + "opacity": 0.2 + }, + "#terrs": { + "opacity": null, + "scheme": "bright", + "terracing": 0, + "skip": 5, + "relax": 0, + "curve": 0, + "filter": null, + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 99, + "data-y": 93, + "data-columns": 8 + }, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0px 0px 4px", + "data-size": 7, + "font-size": 7, + "font-family": "Almendra SC" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 0.24, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 2, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0px 0px 4px", + "data-size": 4, + "font-size": 4, + "font-family": "Almendra SC" + }, + "#burgIcons > #towns": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 0.5, + "stroke": "#3e3e4b", + "stroke-width": 0.12, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#3e3e4b", + "stroke": "#3a3a3a", + "stroke-width": 0, + "text-shadow": "white 0px 0px 4px", + "data-size": 22, + "font-size": 22, + "font-family": "Almendra SC", + "filter": null + }, + "#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.98, + "fill": "#30426f", + "filter": null + } +} diff --git a/styles/gloom.json b/styles/gloom.json new file mode 100644 index 00000000..528d5764 --- /dev/null +++ b/styles/gloom.json @@ -0,0 +1,391 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 6, + "box-size": 3, + "stroke": "#000", + "stroke-width": 0.3, + "opacity": 1, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": null, + "filter": "url(#blur5)", + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 1, + "stroke": "#56566d", + "stroke-width": 1, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null + }, + "#provinceBorders": { + "opacity": 1, + "stroke": "#56566d", + "stroke-width": 0.3, + "stroke-dasharray": ".7 1", + "stroke-linecap": "butt", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "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": "#4a4a4a", + "stroke-width": 1, + "stroke-dasharray": 6, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.6, + "transform": null, + "filter": null, + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": "translate(100 100) scale(0.3)" + }, + "#relig": { + "opacity": 0.7, + "stroke": "#404040", + "stroke-width": 1, + "filter": null + }, + "#cults": { + "opacity": 0.7, + "stroke": "#777777", + "stroke-width": 1.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#landmass": { + "opacity": 1, + "fill": "#e0e0e0", + "filter": null + }, + "#markers": { + "opacity": 0.8, + "rescale": 1, + "filter": "url(#dropShadow05)" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0.1, + "fill": "#003dff", + "filter": null + }, + "#population": { + "opacity": null, + "stroke-width": 1.6, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": null + }, + "#rural": { + "stroke": "#0000aa" + }, + "#urban": { + "stroke": "#9d0000" + }, + "#freshwater": { + "opacity": 0.5, + "fill": "#a6c1fd", + "stroke": "#5f799d", + "stroke-width": 0.7, + "filter": null + }, + "#salt": { + "opacity": 0.5, + "fill": "#409b8a", + "stroke": "#388985", + "stroke-width": 0.7, + "filter": null + }, + "#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.7, + "fill": "#c9bfa7", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 0.6, + "stroke": "#1f3846", + "stroke-width": 0.7, + "filter": "url(#dropShadow)", + "auto-filter": 1 + }, + "#lake_island": { + "opacity": 1, + "stroke": "#7c8eaf", + "stroke-width": 0.35, + "filter": null + }, + "#terrain": { + "opacity": 0.9, + "set": "simple", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": null, + "filter": null, + "fill": "#779582" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 1, + "stroke": "#8b4418", + "stroke-width": 0.9, + "stroke-dasharray": "2 3", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 1, + "stroke": "#844017", + "stroke-width": 0.2, + "stroke-dasharray": ".5 1", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#5e1865", + "stroke-width": 0.6, + "stroke-dasharray": "1.2 2.4", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0.4, + "filter": null + }, + "#statesHalo": { + "opacity": 0.5, + "data-width": 12, + "stroke-width": 12, + "filter": "blur(10px)" + }, + "#provs": { + "opacity": 0.7, + "fill": "#000000", + "data-size": 10, + "font-size": 10, + "font-family": "Georgia", + "filter": null + }, + "#temperature": { + "opacity": 1, + "font-size": "11px", + "fill": "#62001b", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 2, + "stroke-dasharray": 2, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.9, + "fill": "#e8f0f6", + "stroke": "#e8f0f6", + "stroke-width": 1, + "filter": "url(#dropShadow05)" + }, + "#emblems": { + "opacity": 0.6, + "stroke-width": 0.5, + "filter": null + }, + "#texture": { + "opacity": null, + "filter": null, + "mask": "url(#land)" + }, + "#textureImage": { + "x": 0, + "y": 0 + }, + "#zones": { + "opacity": 0.5, + "stroke": "#333333", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": "url(#dropShadow01)", + "mask": null + }, + "#oceanLayers": { + "filter": null, + "layers": "-6,-4,-2" + }, + "#oceanBase": { + "fill": "#4e6964" + }, + "#oceanicPattern": { + "href": "./images/pattern3.png", + "opacity": 0.2 + }, + "#terrs": { + "opacity": 1, + "scheme": "bright", + "terracing": 0, + "skip": 0, + "relax": 1, + "curve": 1, + "filter": "url(#filter-grayscale)", + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 99, + "data-y": 93, + "data-columns": 8 + }, + "#legendBox": {}, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0 0 4px", + "data-size": 7, + "font-size": 7, + "font-family": "Bitter" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 2, + "stroke": "#444444", + "stroke-width": 0.25, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 0.8, + "fill": "#ffffff", + "size": 4, + "stroke": "#3e3e4b", + "stroke-width": 1 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#3e3e4b", + "data-size": 3, + "font-size": 3, + "font-family": "Bitter" + }, + "#burgIcons > #towns": { + "opacity": 0.95, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 0.8, + "stroke": "#3e3e4b", + "stroke-width": 0.2, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1.6, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#4e4e4e", + "stroke": "#b5b5b5", + "stroke-width": 0, + "text-shadow": "white 0 0 4px", + "data-size": 22, + "font-size": 22, + "font-family": "Almendra SC", + "filter": null + }, + "#labels > #addedLabels": { + "opacity": 1, + "fill": "#3e3e4b", + "stroke": "#3a3a3a", + "stroke-width": 0, + "text-shadow": "white 0 0 4px", + "data-size": 18, + "font-size": 18, + "font-family": "Almendra SC", + "filter": null + }, + "#fogging": { + "opacity": 0.98, + "fill": "#1b1423", + "filter": null + } +} diff --git a/styles/light.json b/styles/light.json new file mode 100644 index 00000000..5663d6c8 --- /dev/null +++ b/styles/light.json @@ -0,0 +1,385 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 8, + "box-size": 4, + "stroke": "#000", + "stroke-width": 0.02, + "fill-opacity": 0.8, + "filter": null + }, + "#biomes": { + "opacity": 0.5, + "filter": null, + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 0.8, + "stroke": "#4c483e", + "stroke-width": 1, + "stroke-dasharray": 2, + "stroke-linecap": "square", + "filter": null + }, + "#provinceBorders": { + "opacity": 0.8, + "stroke": "#56566d", + "stroke-width": 0.2, + "stroke-dasharray": 1, + "stroke-linecap": "butt", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.5, + "scale": 1, + "dx": 0, + "dy": 0, + "type": "pointyHex", + "stroke": "#808080", + "stroke-width": 1, + "stroke-dasharray": null, + "stroke-linecap": null, + "transform": null, + "filter": null, + "mask": null + }, + "#coordinates": { + "opacity": 0.7, + "data-size": 15, + "font-size": 15, + "stroke": "#734d37", + "stroke-width": 1.5, + "stroke-dasharray": 5, + "stroke-linecap": "square", + "filter": null, + "mask": "" + }, + "#compass": { + "opacity": 0.6, + "transform": null, + "filter": null, + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": null + }, + "#relig": { + "opacity": 0.5, + "stroke": null, + "stroke-width": 0, + "filter": null + }, + "#cults": { + "opacity": 0.5, + "stroke": "#777777", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#landmass": { + "opacity": 1, + "fill": "#f9f2ea", + "filter": null + }, + "#markers": { + "opacity": null, + "rescale": 1, + "filter": null + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0.1, + "fill": "#2554ef", + "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": 1, + "fill": "#98cdc4", + "stroke": "#719892", + "stroke-width": 0.46, + "filter": "url(#dropShadow05)" + }, + "#salt": { + "opacity": 0.5, + "fill": "#409b8a", + "stroke": "#388985", + "stroke-width": 0.7, + "filter": null + }, + "#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": 1, + "fill": "#c9bfa7", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 1, + "stroke": "#5e5e5e", + "stroke-width": 0.4, + "filter": "url(#dropShadow)", + "auto-filter": 1 + }, + "#lake_island": { + "opacity": 1, + "stroke": "#7c8eaf", + "stroke-width": 0.35, + "filter": null + }, + "#terrain": { + "opacity": 0.6, + "set": "colored", + "size": 1, + "density": 0.3, + "filter": null, + "mask": "" + }, + "#rivers": { + "opacity": null, + "filter": null, + "fill": "#6d94ba" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 0.9, + "stroke": "#3c1d0b", + "stroke-width": 1.37, + "stroke-dasharray": 2, + "stroke-linecap": "inherit", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 0.9, + "stroke": "#95481a", + "stroke-width": 0.88, + "stroke-dasharray": ".8 1.6", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#ffffff", + "stroke-width": 0.45, + "stroke-dasharray": "1 2", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0.2, + "filter": null + }, + "#statesHalo": { + "opacity": 0.3, + "data-width": 25, + "stroke-width": 25, + "filter": "blur(5px)" + }, + "#provs": { + "opacity": 0.4, + "fill": "#000000", + "font-size": 5, + "font-family": "IM Fell English", + "filter": null + }, + "#temperature": { + "opacity": null, + "font-size": "8px", + "fill": "#000000", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 1.8, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.5, + "fill": "#e8f0f6", + "stroke": "#e8f0f6", + "stroke-width": 1.5, + "filter": "url(#dropShadow05)" + }, + "#emblems": { + "opacity": 0.9, + "stroke-width": 1, + "filter": null + }, + "#texture": { + "opacity": 0.39, + "filter": null, + "mask": "" + }, + "#zones": { + "opacity": 0.6, + "stroke": "#333333", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#oceanLayers": { + "filter": "url(#dropShadow05)", + "layers": "-6,-3,-1" + }, + "#oceanBase": { + "fill": "#8dc1c8" + }, + "#oceanicPattern": { + "href": "./images/pattern1.png", + "opacity": 0.2 + }, + "#terrs": { + "opacity": 0.4, + "scheme": "light", + "terracing": 10, + "skip": 5, + "relax": 0, + "curve": 0, + "filter": "url(#turbulence)", + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 54.73, + "data-y": 62.98, + "data-columns": 8 + }, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#3a3a3a", + "text-shadow": "white 0px 0px 4px", + "data-size": 8, + "font-size": 8, + "font-family": "IM Fell English" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 3, + "stroke": "#3e3e4b", + "stroke-width": 0.4, + "stroke-dasharray": "0.5 0.25", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 5.5, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0px 0px 4px", + "data-size": 4, + "font-size": 4, + "font-family": "IM Fell English" + }, + "#burgIcons > #towns": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 1.2, + "stroke": "#3e3e4b", + "stroke-width": 0.2, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 2.2, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#3e3e3e", + "stroke": "#000000", + "stroke-width": 0.3, + "text-shadow": "white 0px 0px 6px", + "data-size": 14, + "font-size": 14, + "font-family": "IM Fell English", + "filter": null + }, + "#labels > #addedLabels": { + "opacity": 1, + "fill": "#f24706", + "stroke": "#701b05", + "stroke-width": 0.1, + "text-shadow": "white 0px 0px 4px", + "data-size": 6, + "font-size": 6, + "font-family": "IM Fell English", + "filter": null + }, + "#fogging": { + "opacity": 1, + "fill": "#30426f", + "filter": null + } +} diff --git a/styles/monochrome.json b/styles/monochrome.json new file mode 100644 index 00000000..4d3ed9a4 --- /dev/null +++ b/styles/monochrome.json @@ -0,0 +1,381 @@ +{ + "#map": { + "background-color": "#000000", + "filter": "url(#filter-grayscale)", + "data-filter": "grayscale" + }, + "#armies": { + "font-size": 6, + "box-size": 3, + "stroke": "#000", + "stroke-width": 0.3, + "opacity": 1, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": null, + "filter": "url(#blur5)", + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 1, + "stroke": "#56566d", + "stroke-width": 1, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null + }, + "#provinceBorders": { + "opacity": 1, + "stroke": "#56566d", + "stroke-width": 0.4, + "stroke-dasharray": 1, + "stroke-linecap": "butt", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "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": 12, + "font-size": 12, + "stroke": "#d4d4d4", + "stroke-width": 1, + "stroke-dasharray": 5, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.8, + "transform": null, + "filter": null, + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": null + }, + "#relig": { + "opacity": 0.7, + "stroke": "#404040", + "stroke-width": 0.7, + "filter": null + }, + "#cults": { + "opacity": 0.6, + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#landmass": { + "opacity": 1, + "fill": "#000000", + "filter": null + }, + "#markers": { + "opacity": null, + "rescale": 1, + "filter": "url(#dropShadow01)" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0.1, + "fill": "#003dff", + "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": 1, + "fill": "#000000", + "stroke": "#515151", + "stroke-width": 0, + "filter": null + }, + "#salt": { + "opacity": 1, + "fill": "#000000", + "stroke": "#484848", + "stroke-width": 0, + "filter": null + }, + "#sinkhole": { + "opacity": 1, + "fill": "#000000", + "stroke": "#5f5f5f", + "stroke-width": 0.5, + "filter": null + }, + "#frozen": { + "opacity": 1, + "fill": "#000000", + "stroke": "#6f6f6f", + "stroke-width": 0, + "filter": null + }, + "#lava": { + "opacity": 1, + "fill": "#000000", + "stroke": "#5d5d5d", + "stroke-width": 0, + "filter": null + }, + "#sea_island": { + "opacity": 1, + "stroke": "#1f3846", + "stroke-width": 0, + "filter": null, + "auto-filter": 0 + }, + "#lake_island": { + "opacity": 0, + "stroke": "#7c8eaf", + "stroke-width": 0, + "filter": null + }, + "#terrain": { + "opacity": null, + "set": "simple", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": 0.2, + "filter": "url(#blur1)", + "fill": "#000000" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 0.9, + "stroke": "#d06324", + "stroke-width": 0.7, + "stroke-dasharray": 2, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 0.9, + "stroke": "#d06324", + "stroke-width": 0.25, + "stroke-dasharray": ".8 1.6", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.8, + "stroke": "#ffffff", + "stroke-width": 0.45, + "stroke-dasharray": "1 2", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0.4, + "filter": null + }, + "#statesHalo": { + "opacity": 0.4, + "data-width": 10, + "stroke-width": 10, + "filter": "blur(5px)" + }, + "#provs": { + "opacity": 0.7, + "fill": "#000000", + "data-size": 10, + "font-size": 10, + "font-family": "Georgia", + "filter": null + }, + "#temperature": { + "opacity": null, + "font-size": "8px", + "fill": "#000000", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 1.8, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.9, + "fill": "#e8f0f6", + "stroke": "#e8f0f6", + "stroke-width": 1, + "filter": "url(#dropShadow05)" + }, + "#texture": { + "opacity": 1, + "filter": null, + "mask": "url(#land)" + }, + "#emblems": { + "opacity": 0.5, + "stroke-width": 0.5, + "filter": null + }, + "#textureImage": {}, + "#zones": { + "opacity": 0.6, + "stroke": "#333333", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#oceanLayers": { + "filter": null, + "layers": "none" + }, + "#oceanBase": { + "fill": "#000000" + }, + "#oceanicPattern": { + "href": "", + "opacity": 0.2 + }, + "#terrs": { + "opacity": 1, + "scheme": "monochrome", + "terracing": 0, + "skip": 5, + "relax": 0, + "curve": 0, + "filter": "url(#blur3)", + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 99, + "data-y": 93, + "data-columns": 8 + }, + "#legendBox": {}, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0 0 4px", + "data-size": 7, + "font-size": 7, + "font-family": "Almendra SC" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 0.24, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 2, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#3e3e4b", + "data-size": 4, + "font-size": 4, + "font-family": "Almendra SC" + }, + "#burgIcons > #towns": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 0.5, + "stroke": "#3e3e4b", + "stroke-width": 0.12, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#3e3e4b", + "stroke": "#3a3a3a", + "stroke-width": 0, + "text-shadow": "white 0 0 4px", + "data-size": 22, + "font-size": 22, + "font-family": "Almendra SC", + "filter": null + }, + "#labels > #addedLabels": { + "opacity": 1, + "fill": "#3e3e4b", + "stroke": "#3a3a3a", + "stroke-width": 0, + "text-shadow": "white 0 0 4px", + "data-size": 18, + "font-size": 18, + "font-family": "Almendra SC", + "filter": null + }, + "#fogging": { + "opacity": 0.98, + "fill": "#30426f", + "filter": null + } +} diff --git a/styles/watercolor.json b/styles/watercolor.json new file mode 100644 index 00000000..3e890876 --- /dev/null +++ b/styles/watercolor.json @@ -0,0 +1,385 @@ +{ + "#map": { + "background-color": "#000000", + "filter": null, + "data-filter": null + }, + "#armies": { + "font-size": 8, + "box-size": 4, + "stroke": "#000", + "stroke-width": 0.2, + "fill-opacity": 1, + "filter": null + }, + "#biomes": { + "opacity": 0.6, + "filter": null, + "mask": "url(#land)" + }, + "#stateBorders": { + "opacity": 0.6, + "stroke": "#56566d", + "stroke-width": 1, + "stroke-dasharray": 3, + "stroke-linecap": "butt", + "filter": null + }, + "#provinceBorders": { + "opacity": 0.5, + "stroke": "#56566d", + "stroke-width": 0.5, + "stroke-dasharray": "0 2", + "stroke-linecap": "round", + "filter": null + }, + "#cells": { + "opacity": null, + "stroke": "#808080", + "stroke-width": 0.1, + "filter": null, + "mask": null + }, + "#gridOverlay": { + "opacity": 0.8, + "scale": 1, + "dx": 0, + "dy": 0, + "type": "pointyHex", + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "transform": null, + "filter": null, + "mask": null + }, + "#coordinates": { + "opacity": 1, + "data-size": 12, + "font-size": 12, + "stroke": "#d4d4d4", + "stroke-width": 1, + "stroke-dasharray": 5, + "stroke-linecap": null, + "filter": null, + "mask": null + }, + "#compass": { + "opacity": 0.8, + "transform": null, + "filter": null, + "mask": "url(#water)", + "shape-rendering": "optimizespeed" + }, + "#rose": { + "transform": "translate(80 80) scale(.25)" + }, + "#relig": { + "opacity": 0.7, + "stroke": "#777777", + "stroke-width": 0, + "filter": "url(#bluredSplotch)" + }, + "#cults": { + "opacity": 0.6, + "stroke": "#777777", + "stroke-width": 0.5, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": "url(#splotch)" + }, + "#landmass": { + "opacity": 1, + "fill": "#eef6fb", + "filter": null + }, + "#markers": { + "opacity": null, + "rescale": 1, + "filter": "url(#dropShadow01)" + }, + "#prec": { + "opacity": null, + "stroke": "#000000", + "stroke-width": 0.1, + "fill": "#003dff", + "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.5, + "fill": "#a6c1fd", + "stroke": "#5f799d", + "stroke-width": 0.7, + "filter": null + }, + "#salt": { + "opacity": 0.5, + "fill": "#409b8a", + "stroke": "#388985", + "stroke-width": 0.7, + "filter": null + }, + "#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": 1, + "fill": "#c9bfa7", + "stroke": "#8e816f", + "stroke-width": 0.7, + "filter": null + }, + "#sea_island": { + "opacity": 0.5, + "stroke": "#1f3846", + "stroke-width": 0.7, + "filter": "url(#dropShadow)", + "auto-filter": 1 + }, + "#lake_island": { + "opacity": 1, + "stroke": "#7c8eaf", + "stroke-width": 0.35, + "filter": null + }, + "#terrain": { + "opacity": 1, + "set": "gray", + "size": 1, + "density": 0.4, + "filter": null, + "mask": null + }, + "#rivers": { + "opacity": null, + "filter": null, + "fill": "#2e89c2" + }, + "#ruler": { + "opacity": null, + "filter": null + }, + "#roads": { + "opacity": 0.9, + "stroke": "#969696", + "stroke-width": 0.7, + "stroke-dasharray": "", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#trails": { + "opacity": 0.9, + "stroke": "#969696", + "stroke-width": 0.4, + "stroke-dasharray": "", + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#searoutes": { + "opacity": 0.9, + "stroke": "#969696", + "stroke-width": 0.7, + "stroke-dasharray": "", + "stroke-linecap": "round", + "filter": null, + "mask": null + }, + "#statesBody": { + "opacity": 0.05, + "filter": null + }, + "#statesHalo": { + "opacity": 0.4, + "data-width": 8, + "stroke-width": 8, + "filter": "blur(2px)" + }, + "#provs": { + "opacity": 0.7, + "fill": "#000000", + "font-size": 4, + "font-family": "Comfortaa", + "filter": null + }, + "#temperature": { + "opacity": null, + "font-size": "8px", + "fill": "#000000", + "fill-opacity": 0.3, + "stroke": null, + "stroke-width": 1.8, + "stroke-dasharray": null, + "stroke-linecap": null, + "filter": null + }, + "#ice": { + "opacity": 0.7, + "fill": "#dfe8ec", + "stroke": "#000000", + "stroke-width": 0, + "filter": "url(#dropShadow05)" + }, + "#emblems": { + "opacity": 0.95, + "stroke-width": 1, + "filter": null + }, + "#texture": { + "opacity": 0.2, + "filter": null, + "mask": "url(#land)" + }, + "#zones": { + "opacity": 0.6, + "stroke": "#333333", + "stroke-width": 0, + "stroke-dasharray": null, + "stroke-linecap": "butt", + "filter": null, + "mask": null + }, + "#oceanLayers": { + "filter": null, + "layers": "-6,-4,-2" + }, + "#oceanBase": { + "fill": "#2d788b" + }, + "#oceanicPattern": { + "href": "./images/kiwiroo.png", + "opacity": 0.5 + }, + "#terrs": { + "opacity": 0.5, + "scheme": "light", + "terracing": 0, + "skip": 5, + "relax": 1, + "curve": 0, + "filter": null, + "mask": "url(#land)" + }, + "#legend": { + "data-size": 13, + "font-size": 13, + "font-family": "Almendra SC", + "stroke": "#812929", + "stroke-width": 2.5, + "stroke-dasharray": "0 4 10 4", + "stroke-linecap": "round", + "data-x": 99, + "data-y": 93, + "data-columns": 8 + }, + "#burgLabels > #cities": { + "opacity": 1, + "fill": "#043449", + "text-shadow": "white 0px 0px 2px", + "data-size": 5, + "font-size": 5, + "font-family": "Comfortaa" + }, + "#burgIcons > #cities": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 0.24, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #cities": { + "opacity": 1, + "fill": "#ffffff", + "size": 2, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#burgLabels > #towns": { + "opacity": 1, + "fill": "#3e3e4b", + "text-shadow": "white 0px 0px 4px", + "data-size": 3, + "font-size": 3, + "font-family": "Comfortaa" + }, + "#burgIcons > #towns": { + "opacity": 1, + "fill": "#ffffff", + "fill-opacity": 0.7, + "size": 0.5, + "stroke": "#3e3e4b", + "stroke-width": 0.12, + "stroke-dasharray": "", + "stroke-linecap": "butt" + }, + "#anchors > #towns": { + "opacity": 1, + "fill": "#ffffff", + "size": 1, + "stroke": "#3e3e4b", + "stroke-width": 1.2 + }, + "#labels > #states": { + "opacity": 1, + "fill": "#ffffff", + "stroke": "#000000", + "stroke-width": 0.15, + "text-shadow": "black 1px 1px 2px", + "data-size": 20, + "font-size": 20, + "font-family": "Gloria Hallelujah", + "filter": null + }, + "#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": "Comfortaa", + "filter": null + }, + "#fogging": { + "opacity": 0.97, + "fill": "#8398ce", + "filter": null + } +} From 8c41639839f2bc984f0041d0999e60d81145b674 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 5 Feb 2022 23:05:35 +0300 Subject: [PATCH 19/60] style creator rework --- index.html | 4 +- modules/ui/stylePresets.js | 272 ++++++++++++++++++++----------------- 2 files changed, 146 insertions(+), 130 deletions(-) diff --git a/index.html b/index.html index 8f1c5498..41b1b1a8 100644 --- a/index.html +++ b/index.html @@ -309,9 +309,9 @@

    Style preset:

    - + - +

    Select element:

    + +
    Zones: 0
    @@ -2902,10 +2909,29 @@
    - + +
+ +