From 33bf3b8978286ee218035ff7c36a75a3e058828d Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 12 Dec 2021 22:49:17 +0300 Subject: [PATCH 01/29] supporters update --- modules/ui/options.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/options.js b/modules/ui/options.js index 82b3b8a4..7567723d 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -102,7 +102,7 @@ function showSupporters() { Dominick Ormsby,Linn Browning,Václav Švec,Alan Buehne,George J.Lekkas,Alexandre Boivin,Tommy Mayfield,Skylar Mangum-Turner,Karen Blythe,Stefan Gugerel, 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`; + Jonathan Williams,ojacid .,Brian Wilson,A Patreon of the Ahts,Shubham Jakhotiya,www15o,Jan Bundesmann,Angelique Badger`; const array = supporters .replace(/(?:\r\n|\r|\n)/g, "") From d2991643d0d4acf0d4f096703322b95d70bb6572 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20Montero=20Lamas?= Date: Wed, 15 Dec 2021 18:12:56 +0100 Subject: [PATCH 02/29] Wetland Added a function to calculate wetland in separated statements. Fixed some typos. --- main.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 6cab8c0a..cd52efbc 100644 --- a/main.js +++ b/main.js @@ -907,7 +907,7 @@ function defineMapSize() { const template = document.getElementById("templateInput").value; // heightmap template const part = grid.features.some(f => f.land && f.border); // if land goes over map borders const max = part ? 80 : 100; // max size - const lat = () => gauss(P(0.5) ? 40 : 60, 15, 25, 75); // latiture shift + const lat = () => gauss(P(0.5) ? 40 : 60, 15, 25, 75); // latitude shift if (!part) { if (template === "Pangea") return [100, 50]; @@ -1052,7 +1052,7 @@ function generatePrecipitation() { } let humidity = maxPrec - cells.h[first]; // initial water amount - if (humidity <= 0) continue; // if first cell in row is too elevated cosdired wind dry + if (humidity <= 0) continue; // if first cell in row is too elevated consider wind dry for (let s = 0, current = first; s < steps; s++, current += next) { if (cells.temp[current] < -5) continue; // no flux in permafrost @@ -1393,6 +1393,12 @@ function reMarkFeatures() { TIME && console.timeEnd("reMarkFeatures"); } +function isWetLand(moisture, temperature, height) { + if (moisture > 40 && temperature > -2 && height < 25) return true; //near coast + if (moisture > 24 && temperature > -2 && height > 24 && height < 60) return true; //off coast + return false; +} + // assign biome id for each cell function defineBiomes() { TIME && console.time("defineBiomes"); @@ -1425,7 +1431,7 @@ function defineBiomes() { function getBiomeId(moisture, temperature, height) { if (height < 20) return 0; // marine biome: all water cells if (temperature < -5) return 11; // permafrost biome - if (moisture > 40 && temperature > -2 && (height < 25 || (moisture > 24 && height > 24 && height < 60))) return 12; // wetland biome + if (isWetLand(moisture, temperature, height)) return 12; // wetland biome const moistureBand = Math.min((moisture / 5) | 0, 4); // [0-4] const temperatureBand = Math.min(Math.max(20 - temperature, 0), 25); // [0-25] From f57f004f9e7ae311c6542f7007304aca1b4f7ba5 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Thu, 16 Dec 2021 00:51:12 +0300 Subject: [PATCH 03/29] set MFCG iframe to preview mode --- index.css | 1 - index.html | 2 +- modules/ui/burg-editor.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 9cdcbbe6..a45f063b 100644 --- a/index.css +++ b/index.css @@ -38,7 +38,6 @@ textarea { iframe { border: 0; - pointer-events: none; width: 100%; } diff --git a/index.html b/index.html index 4f63f6f7..630f43b8 100644 --- a/index.html +++ b/index.html @@ -2033,7 +2033,7 @@ -
+
See in City Generator by Watabou. Seed: diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js index 7af55c29..18e589df 100644 --- a/modules/ui/burg-editor.js +++ b/modules/ui/burg-editor.js @@ -405,7 +405,7 @@ function editBurg(id) { function updateMFCGFrame(burg) { const mfcgURL = getMFCGlink(burg); - document.getElementById("mfcgPreview").setAttribute("src", mfcgURL); + document.getElementById("mfcgPreview").setAttribute("src", mfcgURL + "&preview=1"); document.getElementById("mfcgLink").setAttribute("href", mfcgURL); } From 6ad2f3463937b4dd97831dfd405038e7df12652e Mon Sep 17 00:00:00 2001 From: Azgaar Date: Thu, 23 Dec 2021 14:23:31 +0300 Subject: [PATCH 04/29] configMarkers - edit icons relative parent --- modules/ui/tools.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/tools.js b/modules/ui/tools.js index f928c25c..a7d413f1 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -739,7 +739,7 @@ function configMarkersGeneration() { const inputId = `markerIconInput${index}`; return ` - + From c20bcc1502ab737ef97ad69ba5e3a43a6d8f5f4b Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 29 Dec 2021 22:11:45 +0300 Subject: [PATCH 05/29] ensure marker id is unique --- modules/load.js | 25 +++++++++++++++++++++++++ modules/markers-generator.js | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/modules/load.js b/modules/load.js index 94192436..cf661c74 100644 --- a/modules/load.js +++ b/modules/load.js @@ -1013,6 +1013,31 @@ function parseLoadedData(data) { ERROR && console.error("Data Integrity Check. Province", p.i, "is linked to removed state", p.state); p.removed = true; // remove incorrect province }); + + { + const markerIds = []; + let nextId = last(pack.markers)?.i + 1 || 0; + + pack.markers.forEach(marker => { + if (markerIds[marker.i]) { + ERROR && console.error("Data Integrity Check. Marker", marker.i, "has non-unique id. Changing to", nextId); + + const domElements = document.querySelectorAll("#marker" + marker.i); + if (domElements[1]) domElements[1].id = "marker" + nextId; // rename 2nd dom element + + const noteElements = notes.filter(note => note.id === "marker" + marker.i); + if (noteElements[1]) noteElements[1].id = "marker" + nextId; // rename 2nd note + + marker.i = nextId; + nextId += 1; + } else { + markerIds[marker.i] = true; + } + }); + + // sort markers by index + pack.markers.sort((a, b) => a.i - b.i); + } })(); changeMapSize(); diff --git a/modules/markers-generator.js b/modules/markers-generator.js index b60c3599..1aefca5e 100644 --- a/modules/markers-generator.js +++ b/modules/markers-generator.js @@ -97,7 +97,7 @@ window.Markers = (function () { } function addMarker({cell, type, icon, dx, dy, px}) { - const i = pack.markers.length; + const i = last(pack.markers)?.i + 1 || 0; const [x, y] = getMarkerCoordinates(cell); const marker = {i, icon, type, x, y, cell}; if (dx) marker.dx = dx; From 8efce5dcd9144abb0a8fe4b2162ed375d8670a16 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 29 Dec 2021 22:15:04 +0300 Subject: [PATCH 06/29] 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 7567723d..cb2613e6 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -102,7 +102,8 @@ function showSupporters() { Dominick Ormsby,Linn Browning,Václav Švec,Alan Buehne,George J.Lekkas,Alexandre Boivin,Tommy Mayfield,Skylar Mangum-Turner,Karen Blythe,Stefan Gugerel, 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`; + Jonathan Williams,ojacid .,Brian Wilson,A Patreon of the Ahts,Shubham Jakhotiya,www15o,Jan Bundesmann,Angelique Badger,Joshua Xiong,Moist mongol, + Frank Fewkes`; const array = supporters .replace(/(?:\r\n|\r|\n)/g, "") From f08b77bd6ad4088ab0adef20947efe68e46cbc69 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 29 Dec 2021 23:23:27 +0300 Subject: [PATCH 07/29] add details to rivers json export --- modules/export.js | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/modules/export.js b/modules/export.js index 4a9abd9f..7b88a7e6 100644 --- a/modules/export.js +++ b/modules/export.js @@ -405,8 +405,8 @@ function saveGeoJSON_Cells() { json.features.push(feature); }); - const name = getFileName("Cells") + ".geojson"; - downloadFile(JSON.stringify(json), name, "application/json"); + const fileName = getFileName("Cells") + ".geojson"; + downloadFile(JSON.stringify(json), fileName, "application/json"); } function saveGeoJSON_Routes() { @@ -421,30 +421,25 @@ function saveGeoJSON_Routes() { json.features.push(feature); }); - const name = getFileName("Routes") + ".geojson"; - downloadFile(JSON.stringify(json), name, "application/json"); + const fileName = getFileName("Routes") + ".geojson"; + downloadFile(JSON.stringify(json), fileName, "application/json"); } function saveGeoJSON_Rivers() { const json = {type: "FeatureCollection", features: []}; rivers.selectAll("path").each(function () { - const coordinates = getRiverPoints(this); - const id = this.id; - const width = +this.dataset.increment; - const increment = +this.dataset.increment; - const river = pack.rivers.find(r => r.i === +id.slice(5)); - const name = river ? river.name : ""; - const type = river ? river.type : ""; - const i = river ? river.i : ""; - const basin = river ? river.basin : ""; + const river = pack.rivers.find(r => r.i === +this.id.slice(5)); + if (!river) return; - const feature = {type: "Feature", geometry: {type: "LineString", coordinates}, properties: {id, i, basin, name, type, width, increment}}; + const coordinates = getRiverPoints(this); + const properties = {...river, id: this.id}; + const feature = {type: "Feature", geometry: {type: "LineString", coordinates}, properties}; json.features.push(feature); }); - const name = getFileName("Rivers") + ".geojson"; - downloadFile(JSON.stringify(json), name, "application/json"); + const fileName = getFileName("Rivers") + ".geojson"; + downloadFile(JSON.stringify(json), fileName, "application/json"); } function saveGeoJSON_Markers() { From 604dcfacf690ccdde012d58294f7accf34577adb Mon Sep 17 00:00:00 2001 From: Azgaar Date: Thu, 30 Dec 2021 18:49:36 +0300 Subject: [PATCH 08/29] normalize prec, flux and river width --- main.js | 5 ++- modules/load.js | 3 +- modules/river-generator.js | 62 ++++++++++++++++++++++++++++++++---- modules/ui/layers.js | 15 ++++++--- modules/ui/rivers-creator.js | 3 +- modules/ui/tools.js | 4 ++- 6 files changed, 76 insertions(+), 16 deletions(-) diff --git a/main.js b/main.js index cd52efbc..c8580264 100644 --- a/main.js +++ b/main.js @@ -979,7 +979,10 @@ function generatePrecipitation() { prec.selectAll("*").remove(); const {cells, cellsX, cellsY} = grid; cells.prec = new Uint8Array(cells.i.length); // precipitation array - const modifier = precInput.value / 100; // user's input + + const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25; + const precInputModifier = precInput.value / 100; + const modifier = cellsNumberModifier * precInputModifier; const westerly = []; const easterly = []; diff --git a/modules/load.js b/modules/load.js index cf661c74..67596ba9 100644 --- a/modules/load.js +++ b/modules/load.js @@ -828,6 +828,7 @@ function parseLoadedData(data) { // v 1.65 changed rivers data d3.select("#rivers").attr("style", null); // remove style to unhide layer const {cells, rivers} = pack; + const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2); for (const river of rivers) { const node = document.getElementById("river" + river.i); @@ -856,7 +857,7 @@ function parseLoadedData(data) { river.points = riverPoints; } - river.widthFactor = 1; + river.widthFactor = defaultWidthFactor; cells.i.forEach(i => { const riverInWater = cells.r[i] && cells.h[i] < 20; diff --git a/modules/river-generator.js b/modules/river-generator.js index 173f5626..0943ea9c 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -23,22 +23,27 @@ window.Rivers = (function () { resolveDepressions(h); drainWater(); defineRivers(); + calculateConfluenceFlux(); Lakes.cleanupLakeData(); - if (allowErosion) cells.h = Uint8Array.from(h); // apply changed heights as basic one + if (allowErosion) { + cells.h = Uint8Array.from(h); // apply gradient + downcutRivers(); // downcut river beds + } TIME && console.timeEnd("generateRivers"); function drainWater() { const MIN_FLUX_TO_FORM_RIVER = 30; + const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25; + const prec = grid.cells.prec; - const area = pack.cells.area; const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]); const lakeOutCells = Lakes.setClimateData(h); land.forEach(function (i) { - cells.fl[i] += (prec[cells.g[i]] * area[i]) / 100; // add flux from precipitation + cells.fl[i] += prec[cells.g[i]] / cellsNumberModifier; // add flux from precipitation // create lake outlet if lake is not in deep depression and flux > evaporation const lakes = lakeOutCells[i] ? features.filter(feature => i === feature.outCell && feature.flux > feature.evaporation) : []; @@ -90,6 +95,15 @@ window.Rivers = (function () { // cells is depressed if (h[i] <= h[min]) return; + // debug + // .append("line") + // .attr("x1", pack.cells.p[i][0]) + // .attr("y1", pack.cells.p[i][1]) + // .attr("x2", pack.cells.p[min][0]) + // .attr("y2", pack.cells.p[min][1]) + // .attr("stroke", "#333") + // .attr("stroke-width", 0.2); + if (cells.fl[i] < MIN_FLUX_TO_FORM_RIVER) { // flux is too small to operate as a river if (h[min] >= 20) cells.fl[min] += cells.fl[i]; @@ -149,6 +163,9 @@ window.Rivers = (function () { cells.conf = new Uint16Array(cells.i.length); pack.rivers = []; + const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2); + const mainStemWidthFactor = defaultWidthFactor * 1.2; + for (const key in riversData) { const riverCells = riversData[key]; if (riverCells.length < 3) continue; // exclude tiny rivers @@ -166,7 +183,7 @@ window.Rivers = (function () { const mouth = riverCells[riverCells.length - 2]; const parent = riverParents[key] || 0; - const widthFactor = !parent || parent === riverId ? 1.2 : 1; + const widthFactor = !parent || parent === riverId ? mainStemWidthFactor : defaultWidthFactor; const meanderedPoints = addMeandering(riverCells); const discharge = cells.fl[mouth]; // m3 in second const length = getApproximateLength(meanderedPoints); @@ -176,6 +193,22 @@ window.Rivers = (function () { } } + function downcutRivers() { + const MAX_DOWNCUT = 5; + + for (const i of pack.cells.i) { + if (cells.h[i] < 35) continue; // don't donwcut lowlands + if (!cells.fl[i]) continue; + + const higherCells = cells.c[i].filter(c => cells.h[c] > cells.h[i]); + const higherFlux = higherCells.reduce((acc, c) => acc + cells.fl[c], 0) / higherCells.length; + if (!higherFlux) continue; + + const downcut = Math.floor(cells.fl[i] / higherFlux); + if (downcut) cells.h[i] -= Math.min(downcut, MAX_DOWNCUT); + } + } + function calculateConfluenceFlux() { for (const i of cells.i) { if (!cells.conf[i]) continue; @@ -344,14 +377,14 @@ window.Rivers = (function () { const LENGTH_PROGRESSION = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / LENGTH_FACTOR); const MAX_PROGRESSION = last(LENGTH_PROGRESSION); - const getOffset = (flux, pointNumber, widthFactor = 1, startingWidth = 0) => { + const getOffset = (flux, pointNumber, widthFactor, startingWidth = 0) => { const fluxWidth = Math.min(flux ** 0.9 / FLUX_FACTOR, MAX_FLUX_WIDTH); const lengthWidth = pointNumber * STEP_WIDTH + (LENGTH_PROGRESSION[pointNumber] || MAX_PROGRESSION); return widthFactor * (lengthWidth + fluxWidth) + startingWidth; }; // build polygon from a list of points and calculated offset (width) - const getRiverPath = function (points, widthFactor = 1, startingWidth = 0) { + const getRiverPath = function (points, widthFactor, startingWidth = 0) { const riverPointsLeft = []; const riverPointsRight = []; @@ -444,5 +477,20 @@ window.Rivers = (function () { return getBasin(parent); }; - return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, getWidth, getOffset, getApproximateLength, getRiverPoints, remove}; + return { + generate, + alterHeights, + resolveDepressions, + addMeandering, + getRiverPath, + specify, + getName, + getType, + getBasin, + getWidth, + getOffset, + getApproximateLength, + getRiverPoints, + remove + }; })(); diff --git a/modules/ui/layers.js b/modules/ui/layers.js index baae4c88..a258b241 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -470,23 +470,28 @@ function togglePrec(event) { function drawPrec() { prec.selectAll("circle").remove(); - const cells = grid.cells, - p = grid.points; + const {cells, points} = grid; prec.style("display", "block"); const show = d3.transition().duration(800).ease(d3.easeSinIn); prec.selectAll("text").attr("opacity", 0).transition(show).attr("opacity", 1); + const cellsNumberModifier = pointsInput.dataset.cells / 10000; const data = cells.i.filter(i => cells.h[i] >= 20 && cells.prec[i]); + const getRadius = prec => { + const base = prec / cellsNumberModifier / 2; + return rn(Math.sqrt(base), 2); + }; + prec .selectAll("circle") .data(data) .enter() .append("circle") - .attr("cx", d => p[d][0]) - .attr("cy", d => p[d][1]) + .attr("cx", d => points[d][0]) + .attr("cy", d => points[d][1]) .attr("r", 0) .transition(show) - .attr("r", d => rn(Math.max(Math.sqrt(cells.prec[d] * 0.5), 0.8), 2)); + .attr("r", d => getRadius(cells.prec[d])); } function togglePopulation(event) { diff --git a/modules/ui/rivers-creator.js b/modules/ui/rivers-creator.js index df6cd3e9..83a4d1b9 100644 --- a/modules/ui/rivers-creator.js +++ b/modules/ui/rivers-creator.js @@ -89,7 +89,8 @@ function createRiver() { const source = riverCells[0]; const mouth = parent === riverId ? last(riverCells) : riverCells[riverCells.length - 2]; const sourceWidth = 0.05; - const widthFactor = 1.2; + const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2); + const widthFactor = 1.2 * defaultWidthFactor; const meanderedPoints = addMeandering(riverCells); diff --git a/modules/ui/tools.js b/modules/ui/tools.js index a7d413f1..162cf202 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -624,7 +624,9 @@ function addRiverOnClick() { const source = riverCells[0]; const mouth = riverCells[riverCells.length - 2]; - const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1); + + const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2); + const widthFactor = river?.widthFactor || (!parent || parent === riverId ? defaultWidthFactor * 1.2 : defaultWidthFactor); const meanderedPoints = addMeandering(riverCells); const discharge = cells.fl[mouth]; // m3 in second From 05217d176dec2878cbb1545727993e493d2a20c5 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Thu, 30 Dec 2021 19:24:48 +0300 Subject: [PATCH 09/29] scale previpitation layer circles --- modules/ui/layers.js | 8 +++----- modules/ui/style.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/modules/ui/layers.js b/modules/ui/layers.js index a258b241..653cc9e4 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -471,16 +471,14 @@ function togglePrec(event) { function drawPrec() { prec.selectAll("circle").remove(); const {cells, points} = grid; + prec.style("display", "block"); const show = d3.transition().duration(800).ease(d3.easeSinIn); prec.selectAll("text").attr("opacity", 0).transition(show).attr("opacity", 1); - const cellsNumberModifier = pointsInput.dataset.cells / 10000; + const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25; const data = cells.i.filter(i => cells.h[i] >= 20 && cells.prec[i]); - const getRadius = prec => { - const base = prec / cellsNumberModifier / 2; - return rn(Math.sqrt(base), 2); - }; + const getRadius = prec => rn(Math.sqrt(prec / 4) / cellsNumberModifier, 2); prec .selectAll("circle") diff --git a/modules/ui/style.js b/modules/ui/style.js index bbaa6a93..b5a8f3b9 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -831,7 +831,7 @@ function applyDefaultStyle() { 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.1).attr("fill", "#003dff").attr("filter", null); + 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"); From 865afdc2aae9811714445d2469b7b4308b5397fc Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 31 Dec 2021 18:21:37 +0300 Subject: [PATCH 10/29] diplomacy - change relations screen --- index.css | 68 ++++--- index.html | 23 +-- modules/ui/diplomacy-editor.js | 326 +++++++++++++++++++++------------ modules/ui/provinces-editor.js | 2 +- modules/ui/states-editor.js | 2 +- 5 files changed, 259 insertions(+), 162 deletions(-) diff --git a/index.css b/index.css index a45f063b..d03993f5 100644 --- a/index.css +++ b/index.css @@ -29,6 +29,11 @@ input:read-only { cursor: default; } +input[type="radio"] { + vertical-align: bottom; + cursor: pointer; +} + textarea { padding: 2px; text-indent: 1px; @@ -834,75 +839,79 @@ fieldset { } .matrix-table { - width: 100%; - font-size: smaller; - text-align: center; - border-collapse: collapse; + max-height: 80vh; + max-width: 85vw; + scrollbar-width: thin; + overflow: auto; } -table.matrix-table th, -table.matrix-table td { +.matrix-table > table { + text-align: center; + border-collapse: collapse; + font-size: smaller; +} + +.matrix-table > table th, +.matrix-table > table td { border: 1px solid var(--dark-solid); height: 2em; padding: 0.2em; position: relative; } -table.matrix-table th { +.matrix-table > table th { background-color: #302a2a; color: #ffffff; } -table.matrix-table tr:hover th { - background: #3e3636; -} - -table.matrix-table td:hover { +.matrix-table > table td:hover { outline: 2px solid var(--dark-solid); outline-offset: -1px; z-index: 1; + cursor: pointer; } -table.matrix-table td.Ally { +.matrix-table > table td.Ally { background-color: #73ec73; color: #000000; } -table.matrix-table td.Friendly { +.matrix-table > table td.Friendly { background-color: #d4f8aa; } -table.matrix-table td.Neutral { +.matrix-table > table td.Neutral { background-color: #d8d9d3; } -table.matrix-table td.Suspicion { +.matrix-table > table td.Suspicion { background-color: #eeafaa; } -table.matrix-table td.Enemy { +.matrix-table > table td.Enemy { background-color: #ffa39c; color: #af0d23; } -table.matrix-table td.Unknown { +.matrix-table > table td.Unknown { background-color: #c1bfbf; } -table.matrix-table td.Rival { +.matrix-table > table td.Rival { background-color: #bd845c; } -table.matrix-table td.Vassal { +.matrix-table > table td.Vassal { background-color: #87cefa; } -table.matrix-table td.Suzerain { +.matrix-table > table td.Suzerain { background-color: #8f8fe1; } -table.matrix-table td.x { +.matrix-table > table td.x { background-color: #d4ca94; + cursor: initial; } #sizeOutput { @@ -1310,19 +1319,23 @@ div.slider .ui-slider-handle { } #alertMessage::-webkit-scrollbar, -.table::-webkit-scrollbar { +.table::-webkit-scrollbar, +.matrix-table::-webkit-scrollbar { width: 6px; + height: 6px; background-color: transparent; } #alertMessage::-webkit-scrollbar-thumb, -.table::-webkit-scrollbar-thumb { +.table::-webkit-scrollbar-thumb, +.matrix-table::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 6px; } #alertMessage::-webkit-scrollbar-thumb:hover, -.table::-webkit-scrollbar-thumb:hover { +.table::-webkit-scrollbar-thumb:hover, +.matrix-table::-webkit-scrollbar-thumb:hover { background: #666; } @@ -1504,15 +1517,14 @@ div.states > .riverType { width: 5em; } -div.states > .coaIcon { +.coaIcon { stroke-width: 3; width: 1.4em; height: 1.4em; margin: -0.3em 0; - cursor: pointer; } -div.states > .coaIcon > use { +.coaIcon > use { pointer-events: none; } diff --git a/index.html b/index.html index 630f43b8..673ffc7e 100644 --- a/index.html +++ b/index.html @@ -2735,33 +2735,25 @@ + +