From b35fda436b4b29c58859c7e8ded867bca041650d Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 5 Jun 2022 18:34:21 +0300 Subject: [PATCH] fix: religion path to be closed --- modules/ui/layers.js | 170 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 137 insertions(+), 33 deletions(-) diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 4f93cbab..304f455a 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -6,16 +6,68 @@ restoreCustomPresets(); // run on-load function getDefaultPresets() { return { - political: ["toggleBorders", "toggleIcons", "toggleIce", "toggleLabels", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"], - cultural: ["toggleBorders", "toggleCultures", "toggleIcons", "toggleLabels", "toggleRivers", "toggleRoutes", "toggleScaleBar"], - religions: ["toggleBorders", "toggleIcons", "toggleLabels", "toggleReligions", "toggleRivers", "toggleRoutes", "toggleScaleBar"], + political: [ + "toggleBorders", + "toggleIcons", + "toggleIce", + "toggleLabels", + "toggleRivers", + "toggleRoutes", + "toggleScaleBar", + "toggleStates" + ], + cultural: [ + "toggleBorders", + "toggleCultures", + "toggleIcons", + "toggleLabels", + "toggleRivers", + "toggleRoutes", + "toggleScaleBar" + ], + religions: [ + "toggleBorders", + "toggleIcons", + "toggleLabels", + "toggleReligions", + "toggleRivers", + "toggleRoutes", + "toggleScaleBar" + ], provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar"], biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar"], heightmap: ["toggleHeight", "toggleRivers"], physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar"], - poi: ["toggleBorders", "toggleHeight", "toggleIce", "toggleIcons", "toggleMarkers", "toggleRivers", "toggleRoutes", "toggleScaleBar"], - military: ["toggleBorders", "toggleIcons", "toggleLabels", "toggleMilitary", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"], - emblems: ["toggleBorders", "toggleIcons", "toggleIce", "toggleEmblems", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"], + poi: [ + "toggleBorders", + "toggleHeight", + "toggleIce", + "toggleIcons", + "toggleMarkers", + "toggleRivers", + "toggleRoutes", + "toggleScaleBar" + ], + military: [ + "toggleBorders", + "toggleIcons", + "toggleLabels", + "toggleMilitary", + "toggleRivers", + "toggleRoutes", + "toggleScaleBar", + "toggleStates" + ], + emblems: [ + "toggleBorders", + "toggleIcons", + "toggleIce", + "toggleEmblems", + "toggleRivers", + "toggleRoutes", + "toggleScaleBar", + "toggleStates" + ], landmass: ["toggleScaleBar"] }; } @@ -193,12 +245,23 @@ function drawHeightmap() { paths[h] += round(lineGen(points)); } - terrs.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight).attr("fill", scheme(0.8)); // draw base layer + terrs + .append("rect") + .attr("x", 0) + .attr("y", 0) + .attr("width", graphWidth) + .attr("height", graphHeight) + .attr("fill", scheme(0.8)); // draw base layer for (const i of d3.range(20, 101)) { if (paths[i].length < 10) continue; const color = getColor(i, scheme); if (terracing) - terrs.append("path").attr("d", paths[i]).attr("transform", "translate(.7,1.4)").attr("fill", d3.color(color).darker(terracing)).attr("data-height", i); + terrs + .append("path") + .attr("d", paths[i]) + .attr("transform", "translate(.7,1.4)") + .attr("fill", d3.color(color).darker(terracing)) + .attr("data-height", i); terrs.append("path").attr("d", paths[i]).attr("fill", color).attr("data-height", i); } @@ -701,10 +764,8 @@ function drawCultures() { TIME && console.time("drawCultures"); cults.selectAll("path").remove(); - const cells = pack.cells, - vertices = pack.vertices, - cultures = pack.cultures, - n = cells.i.length; + const {cells, vertices, cultures} = pack; + const n = cells.i.length; const used = new Uint8Array(cells.i.length); const paths = new Array(cultures.length).fill(""); @@ -777,11 +838,9 @@ function drawReligions() { TIME && console.time("drawReligions"); relig.selectAll("path").remove(); - const cells = pack.cells, - vertices = pack.vertices, - religions = pack.religions, - features = pack.features, - n = cells.i.length; + const {cells, vertices, religions} = pack; + const n = cells.i.length; + const used = new Uint8Array(cells.i.length); const vArray = new Array(religions.length); // store vertices array const body = new Array(religions.length).fill(""); // store path around each religion @@ -801,11 +860,15 @@ function drawReligions() { const points = chain.map(v => vertices.p[v[0]]); if (!vArray[r]) vArray[r] = []; vArray[r].push(points); - body[r] += "M" + points.join("L"); + body[r] += "M" + points.join("L") + "Z"; gap[r] += "M" + vertices.p[chain[0][0]] + - chain.reduce((r2, v, i, d) => (!i ? r2 : !v[2] ? r2 + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r2 + "M" + vertices.p[v[0]] : r2), ""); + chain.reduce( + (r2, v, i, d) => + !i ? r2 : !v[2] ? r2 + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r2 + "M" + vertices.p[v[0]] : r2, + "" + ); } const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, religions[i].color]).filter(d => d[0]); @@ -971,7 +1034,9 @@ function drawStates() { const bodyString = bodyData.map(d => ``).join(""); const gapString = gapData.map(d => ``).join(""); - const clipString = bodyData.map(d => ``).join(""); + const clipString = bodyData + .map(d => ``) + .join(""); const haloString = haloData .map( d => @@ -1064,7 +1129,9 @@ function drawBorders() { const s = cells.state[i]; // if cell is on province border - const provToCell = cells.c[i].find(n => cells.state[n] === s && p > cells.province[n] && pUsed[p][n] !== cells.province[n]); + const provToCell = cells.c[i].find( + n => cells.state[n] === s && p > cells.province[n] && pUsed[p][n] !== cells.province[n] + ); if (provToCell) { const provTo = cells.province[provToCell]; pUsed[p][provToCell] = provTo; @@ -1101,7 +1168,8 @@ function drawBorders() { function connectVertices(current, f, array, t, used) { let chain = []; const checkCell = c => c >= n || array[c] !== f; - const checkVertex = v => vertices.c[v].some(c => array[c] === f) && vertices.c[v].some(c => array[c] === t && cells.h[c] >= 20); + const checkVertex = v => + vertices.c[v].some(c => array[c] === f) && vertices.c[v].some(c => array[c] === t && cells.h[c] >= 20); // find starting vertex for (let i = 0; i < 1000; i++) { @@ -1234,7 +1302,11 @@ function getProvincesVertices() { gap[p] += "M" + vertices.p[chain[0][0]] + - chain.reduce((r, v, i, d) => (!i ? r : !v[2] ? r + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r + "M" + vertices.p[v[0]] : r), ""); + chain.reduce( + (r, v, i, d) => + !i ? r : !v[2] ? r + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r + "M" + vertices.p[v[0]] : r, + "" + ); } // find province visual center @@ -1373,7 +1445,17 @@ function drawCoordinates() { pos = projection(c); // map coordinates const [x, y] = lat ? [rn(p.x, 2), rn(pos[1], 2)] : [rn(pos[0], 2), rn(p.y, 2)]; // labels position const v = lat ? c[1] : c[0]; // label - const text = !v ? v : Number.isInteger(v) ? (lat ? (c[1] < 0 ? -c[1] + "°S" : c[1] + "°N") : c[0] < 0 ? -c[0] + "°W" : c[0] + "°E") : ""; + const text = !v + ? v + : Number.isInteger(v) + ? lat + ? c[1] < 0 + ? -c[1] + "°S" + : c[1] + "°N" + : c[0] < 0 + ? -c[0] + "°W" + : c[0] + "°E" + : ""; return {lat, x, y, text}; }); @@ -1483,7 +1565,9 @@ function drawRivers() { if (!cells || cells.length < 2) return; if (points && points.length !== cells.length) { - console.error(`River ${i} has ${cells.length} cells, but only ${points.length} points defined. Resetting points data`); + console.error( + `River ${i} has ${cells.length} cells, but only ${points.length} points defined. Resetting points data` + ); points = undefined; } @@ -1552,15 +1636,20 @@ const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => { return ``; if (shape === "pin") return ``; - if (shape === "square") return ``; - if (shape === "squarish") return ``; + if (shape === "square") + return ``; + if (shape === "squarish") + return ``; if (shape === "diamond") return ``; if (shape === "hex") return ``; if (shape === "hexy") return ``; - if (shape === "shieldy") return ``; - if (shape === "shield") return ``; + if (shape === "shieldy") + return ``; + if (shape === "shield") + return ``; if (shape === "pentagon") return ``; - if (shape === "heptagon") return ``; + if (shape === "heptagon") + return ``; if (shape === "circle") return ``; if (shape === "no") return ""; }; @@ -1744,19 +1833,34 @@ function drawEmblems() { const burgNodes = nodes.filter(node => node.type === "burg"); const burgString = burgNodes - .map(d => ``) + .map( + d => + `` + ) .join(""); emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString); const provinceNodes = nodes.filter(node => node.type === "province"); const provinceString = provinceNodes - .map(d => ``) + .map( + d => + `` + ) .join(""); emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString); const stateNodes = nodes.filter(node => node.type === "state"); const stateString = stateNodes - .map(d => ``) + .map( + d => + `` + ) .join(""); emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);