From bd07aafa5ef95df39c2c7f29b1ff6e9a6540243d Mon Sep 17 00:00:00 2001 From: Tsyxy <58307123+Tsyxy@users.noreply.github.com> Date: Wed, 7 Jul 2021 16:34:27 +0200 Subject: [PATCH] Add files via upload it can print out the new buildings into the spreadsheet --- modules/ui/burgs-overview.js | 311 +++++++++++++---------------------- 1 file changed, 114 insertions(+), 197 deletions(-) diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js index c570b3c7..5e847c81 100644 --- a/modules/ui/burgs-overview.js +++ b/modules/ui/burgs-overview.js @@ -14,11 +14,8 @@ function overviewBurgs() { modules.overviewBurgs = true; $("#burgsOverview").dialog({ - title: "Burgs Overview", - resizable: false, - width: fitContent(), - close: exitAddBurgMode, - position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} + title: "Burgs Overview", resizable: false, width: fitContent(), close: exitAddBurgMode, + position: { my: "right top", at: "right-10 top+10", of: "svg", collision: "fit" } }); // add listeners @@ -30,9 +27,7 @@ function overviewBurgs() { document.getElementById("addNewBurg").addEventListener("click", enterAddBurgMode); document.getElementById("burgsExport").addEventListener("click", downloadBurgsData); document.getElementById("burgNamesImport").addEventListener("click", renameBurgsInBulk); - document.getElementById("burgsListToLoad").addEventListener("change", function () { - uploadFile(this, importBurgNames); - }); + document.getElementById("burgsListToLoad").addEventListener("change", function () { uploadFile(this, importBurgNames) }); document.getElementById("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove); function refreshBurgsEditor() { @@ -46,7 +41,7 @@ function overviewBurgs() { stateFilter.options.length = 0; // remove all options stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1)); stateFilter.options.add(new Option(pack.states[0].name, 0, false, !selectedState)); - 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 => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState))); const cultureFilter = document.getElementById("burgsFilterCulture"); @@ -54,7 +49,7 @@ function overviewBurgs() { cultureFilter.options.length = 0; // remove all options cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1)); cultureFilter.options.add(new Option(pack.cultures[0].name, 0, false, !selectedCulture)); - const culturesSorted = pack.cultures.filter(c => c.i && !c.removed).sort((a, b) => (a.name > b.name ? 1 : -1)); + const culturesSorted = pack.cultures.filter(c => c.i && !c.removed).sort((a, b) => (a.name > b.name) ? 1 : -1); culturesSorted.forEach(c => cultureFilter.options.add(new Option(c.name, c.i, false, c.i == selectedCulture))); } @@ -67,11 +62,10 @@ function overviewBurgs() { if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture body.innerHTML = ""; - let lines = "", - totalPopulation = 0; + let lines = "", totalPopulation = 0; for (const b of filtered) { - const population = b.population * populationRate * urbanization; + const population = b.population * populationRate.value * urbanization.value; totalPopulation += population; const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg"; const state = pack.states[b.state].name; @@ -88,11 +82,10 @@ function overviewBurgs() {
- - + +
- `; } @@ -111,8 +104,6 @@ function overviewBurgs() { body.querySelectorAll("div > input.burgPopulation").forEach(el => el.addEventListener("change", changeBurgPopulation)); body.querySelectorAll("div > span.icon-star-empty").forEach(el => el.addEventListener("click", toggleCapitalStatus)); body.querySelectorAll("div > span.icon-anchor").forEach(el => el.addEventListener("click", togglePortStatus)); - body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("click", toggleBurgLockStatus)); - body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("mouseover", showBurgOLockTip)); body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openBurgEditor)); body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerBurgRemove)); @@ -121,7 +112,7 @@ function overviewBurgs() { function getCultureOptions(culture) { let options = ""; - pack.cultures.filter(c => !c.removed).forEach(c => (options += ``)); + pack.cultures.filter(c => !c.removed).forEach(c => options += ``); return options; } @@ -147,8 +138,7 @@ function overviewBurgs() { function zoomIntoBurg() { const burg = +this.parentNode.dataset.id; const label = document.querySelector("#burgLabels [data-id='" + burg + "']"); - const x = +label.getAttribute("x"), - y = +label.getAttribute("y"); + const x = +label.getAttribute("x"), y = +label.getAttribute("y"); zoomTo(x, y, 8, 2000); } @@ -163,10 +153,10 @@ function overviewBurgs() { const burg = +this.parentNode.dataset.id; if (this.value == "" || isNaN(+this.value)) { tip("Please provide an integer number (like 10000, not 10K)", false, "error"); - this.value = si(pack.burgs[burg].population * populationRate * urbanization); + this.value = si(pack.burgs[burg].population * populationRate.value * urbanization.value); return; } - pack.burgs[burg].population = this.value / populationRate / urbanization; + pack.burgs[burg].population = this.value / populationRate.value / urbanization.value; this.parentNode.dataset.population = this.value; this.value = si(this.value); @@ -188,25 +178,6 @@ function overviewBurgs() { else this.classList.add("inactive"); } - function toggleBurgLockStatus() { - const burg = +this.parentNode.dataset.id; - toggleBurgLock(burg); - if (this.classList.contains("icon-lock")) { - this.classList.remove("icon-lock"); - this.classList.add("icon-lock-open"); - this.classList.add("inactive"); - } else { - this.classList.remove("icon-lock-open"); - this.classList.add("icon-lock"); - this.classList.remove("inactive"); - } - } - - function showBurgOLockTip() { - const burg = +this.parentNode.dataset.id; - showBurgLockTip(burg); - } - function openBurgEditor() { const burg = +this.parentNode.dataset.id; editBurg(burg); @@ -214,24 +185,18 @@ function overviewBurgs() { function triggerBurgRemove() { const burg = +this.parentNode.dataset.id; - if (pack.burgs[burg].capital) { - tip("You cannot remove the capital. Please change the capital first", false, "error"); - return; - } + if (pack.burgs[burg].capital) { tip("You cannot remove the capital. Please change the capital first", false, "error"); return; } alertMessage.innerHTML = "Are you sure you want to remove the burg?"; $("#alert").dialog({ - resizable: false, - title: "Remove burg", + resizable: false, title: "Remove burg", buttons: { Remove: function () { $(this).dialog("close"); removeBurg(burg); burgsOverviewAddLines(); }, - Cancel: function () { - $(this).dialog("close"); - } + Cancel: function () { $(this).dialog("close"); } } }); } @@ -239,22 +204,16 @@ function overviewBurgs() { function regenerateNames() { body.querySelectorAll(":scope > div").forEach(function (el) { const burg = +el.dataset.id; - //if (pack.burgs[burg].lock) return; const culture = pack.burgs[burg].culture; const name = Names.getCulture(culture); - if (!pack.burgs[burg].lock) { - el.querySelector(".burgName").value = name; - pack.burgs[burg].name = el.dataset.name = name; - burgLabels.select("[data-id='" + burg + "']").text(name); - } + el.querySelector(".burgName").value = name; + pack.burgs[burg].name = el.dataset.name = name; + burgLabels.select("[data-id='" + burg + "']").text(name); }); } function enterAddBurgMode() { - if (this.classList.contains("pressed")) { - exitAddBurgMode(); - return; - } + if (this.classList.contains("pressed")) { exitAddBurgMode(); return; }; customization = 3; this.classList.add("pressed"); tip("Click on the map to create a new burg. Hold Shift to add multiple", true, "warn"); @@ -264,14 +223,8 @@ function overviewBurgs() { function addBurgOnClick() { const point = d3.mouse(this); const cell = findCell(point[0], point[1]); - if (pack.cells.h[cell] < 20) { - tip("You cannot place state into the water. Please click on a land cell", false, "error"); - return; - } - if (pack.cells.burg[cell]) { - tip("There is already a burg in this cell. Please select a free cell", false, "error"); - return; - } + if (pack.cells.h[cell] < 20) { tip("You cannot place state into the water. Please click on a land cell", false, "error"); return; } + if (pack.cells.burg[cell]) { tip("There is already a burg in this cell. Please select a free cell", false, "error"); return; } addBurg(point); // add new burg if (d3.event.shiftKey === false) { @@ -293,29 +246,23 @@ function overviewBurgs() { const states = pack.states.map(s => { const color = s.color ? s.color : "#ccc"; const name = s.fullName ? s.fullName : s.name; - return {id: s.i, state: s.i ? 0 : null, color, name}; + return { id: s.i, state: s.i ? 0 : null, color, name } + }); + const burgs = pack.burgs.filter(b => b.i && !b.removed).map(b => { + const id = b.i + states.length - 1; + const population = b.population; + const capital = b.capital; + const province = pack.cells.province[b.cell]; + const parent = province ? province + states.length - 1 : b.state; + return { id, i: b.i, state: b.state, culture: b.culture, province, parent, name: b.name, population, capital, x: b.x, y: b.y } }); - const burgs = pack.burgs - .filter(b => b.i && !b.removed) - .map(b => { - const id = b.i + states.length - 1; - const population = b.population; - const capital = b.capital; - const province = pack.cells.province[b.cell]; - const parent = province ? province + states.length - 1 : b.state; - return {id, i: b.i, state: b.state, culture: b.culture, province, parent, name: b.name, population, capital, x: b.x, y: b.y}; - }); const data = states.concat(burgs); - const root = d3 - .stratify() - .parentId(d => d.state)(data) - .sum(d => d.population) - .sort((a, b) => b.value - a.value); + const root = d3.stratify().parentId(d => d.state)(data) + .sum(d => d.population).sort((a, b) => b.value - a.value); - const width = 150 + 200 * uiSizeOutput.value, - height = 150 + 200 * uiSizeOutput.value; - const margin = {top: 0, right: -50, bottom: -10, left: -50}; + const width = 150 + 200 * uiSizeOutput.value, height = 150 + 200 * uiSizeOutput.value; + const margin = { top: 0, right: -50, bottom: -10, left: -50 }; const w = width - margin.left - margin.right; const h = height - margin.top - margin.bottom; const treeLayout = d3.pack().size([w, h]).padding(3); @@ -327,27 +274,17 @@ function overviewBurgs() { `; alertMessage.innerHTML += `
`; - const svg = d3 - .select("#alertMessage") - .insert("svg", "#burgsInfo") - .attr("id", "burgsTree") - .attr("width", width) - .attr("height", height - 10) - .attr("stroke-width", 2); + const svg = d3.select("#alertMessage").insert("svg", "#burgsInfo").attr("id", "burgsTree") + .attr("width", width).attr("height", height - 10).attr("stroke-width", 2); const graph = svg.append("g").attr("transform", `translate(-50, -10)`); document.getElementById("burgsTreeType").addEventListener("change", updateChart); treeLayout(root); - const node = graph - .selectAll("circle") - .data(root.leaves()) - .join("circle") - .attr("data-id", d => d.data.i) - .attr("r", d => d.r) - .attr("fill", d => d.parent.data.color) - .attr("cx", d => d.x) - .attr("cy", d => d.y) + const node = graph.selectAll("circle").data(root.leaves()) + .join("circle").attr("data-id", d => d.data.i) + .attr("r", d => d.r).attr("fill", d => d.parent.data.color) + .attr("cx", d => d.x).attr("cy", d => d.y) .on("mouseenter", d => showInfo(event, d)) .on("mouseleave", d => hideInfo(event, d)) .on("click", d => zoomTo(d.data.x, d.data.y, 8, 2000)); @@ -356,7 +293,7 @@ function overviewBurgs() { d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119"); const name = d.data.name; const parent = d.parent.data.name; - const population = si(d.value * populationRate * urbanization); + const population = si(d.value * populationRate.value * urbanization.value); burgsInfo.innerHTML = `${name}. ${parent}. Population: ${population}`; burgHighlightOn(ev); @@ -372,107 +309,106 @@ function overviewBurgs() { } function updateChart() { - const getStatesData = () => - pack.states.map(s => { - const color = s.color ? s.color : "#ccc"; - const name = s.fullName ? s.fullName : s.name; - return {id: s.i, state: s.i ? 0 : null, color, name}; - }); + const getStatesData = () => pack.states.map(s => { + const color = s.color ? s.color : "#ccc"; + const name = s.fullName ? s.fullName : s.name; + return { id: s.i, state: s.i ? 0 : null, color, name } + }); - const getCulturesData = () => - pack.cultures.map(c => { - const color = c.color ? c.color : "#ccc"; - return {id: c.i, culture: c.i ? 0 : null, color, name: c.name}; - }); + const getCulturesData = () => pack.cultures.map(c => { + const color = c.color ? c.color : "#ccc"; + return { id: c.i, culture: c.i ? 0 : null, color, name: c.name } + }); const getParentData = () => { const states = pack.states.map(s => { const color = s.color ? s.color : "#ccc"; const name = s.fullName ? s.fullName : s.name; - return {id: s.i, parent: s.i ? 0 : null, color, name}; + return { id: s.i, parent: s.i ? 0 : null, color, name } + }); + const provinces = pack.provinces.filter(p => p.i && !p.removed).map(p => { + return { id: p.i + states.length - 1, parent: p.state, color: p.color, name: p.fullName } }); - const provinces = pack.provinces - .filter(p => p.i && !p.removed) - .map(p => { - return {id: p.i + states.length - 1, parent: p.state, color: p.color, name: p.fullName}; - }); return states.concat(provinces); - }; + } - const getProvincesData = () => - pack.provinces.map(p => { - const color = p.color ? p.color : "#ccc"; - const name = p.fullName ? p.fullName : p.name; - return {id: p.i ? p.i : 0, province: p.i ? 0 : null, color, name}; - }); + const getProvincesData = () => pack.provinces.map(p => { + const color = p.color ? p.color : "#ccc"; + const name = p.fullName ? p.fullName : p.name; + return { id: p.i ? p.i : 0, province: p.i ? 0 : null, color, name } + }); const value = d => { if (this.value === "states") return d.state; if (this.value === "cultures") return d.culture; if (this.value === "parent") return d.parent; if (this.value === "provinces") return d.province; - }; + } - const base = this.value === "states" ? getStatesData() : this.value === "cultures" ? getCulturesData() : this.value === "parent" ? getParentData() : getProvincesData(); - burgs.forEach(b => (b.id = b.i + base.length - 1)); + const base = this.value === "states" ? getStatesData() + : this.value === "cultures" ? getCulturesData() + : this.value === "parent" ? getParentData() : getProvincesData(); + burgs.forEach(b => b.id = b.i + base.length - 1); const data = base.concat(burgs); - const root = d3 - .stratify() - .parentId(d => value(d))(data) - .sum(d => d.population) - .sort((a, b) => b.value - a.value); + const root = d3.stratify().parentId(d => value(d))(data) + .sum(d => d.population).sort((a, b) => b.value - a.value); - node - .data(treeLayout(root).leaves()) - .transition() - .duration(2000) - .attr("data-id", d => d.data.i) - .attr("fill", d => d.parent.data.color) - .attr("cx", d => d.x) - .attr("cy", d => d.y) - .attr("r", d => d.r); + node.data(treeLayout(root).leaves()).transition().duration(2000) + .attr("data-id", d => d.data.i).attr("fill", d => d.parent.data.color) + .attr("cx", d => d.x).attr("cy", d => d.y).attr("r", d => d.r); } $("#alert").dialog({ - title: "Burgs bubble chart", - width: fitContent(), - position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"}, - buttons: {}, - close: () => { - alertMessage.innerHTML = ""; - } + title: "Burgs bubble chart", width: fitContent(), + position: { my: "left bottom", at: "left+10 bottom-10", of: "svg" }, buttons: {}, + close: () => { alertMessage.innerHTML = ""; } }); + } function downloadBurgsData() { - let data = "Id,Burg,Province,State,Culture,Religion,Population,Longitude,Latitude,Elevation (" + heightUnit.value + "),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers + let data = "Id,Burg,Type,Province,State,Culture,Culturetype,Religion,Population,Longitude,Latitude,Elevation (" + heightUnit.value + "),Capital,Port,Citadel,Walls,Plaza,Temple,Library,Hospital,Manufactory,Pasture,Industrial,Food,Land Trade,Water Trade,Shanty Town\n"; // headers const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs valid.forEach(b => { data += b.i + ","; data += b.name + ","; + data += b.type + ","; const province = pack.cells.province[b.cell]; data += province ? pack.provinces[province].fullName + "," : ","; data += b.state ? pack.states[b.state].fullName + "," : pack.states[b.state].name + ","; data += pack.cultures[b.culture].name + ","; + data += pack.cultures[b.culture].type + ","; data += pack.religions[pack.cells.religion[b.cell]].name + ","; - data += rn(b.population * populationRate * urbanization) + ","; + data += rn(b.population * populationRate.value * urbanization.value) + ","; // add geography data data += mapCoordinates.lonW + (b.x / graphWidth) * mapCoordinates.lonT + ","; data += mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT + ","; // this is inverted in QGIS otherwise data += parseInt(getHeight(pack.cells.h[b.cell])) + ","; - // add status data + // add status data, + + + //change by tsyxy: instead of printing out the name of the building, it prints it's size. also, library added, am planning on adding others + data += b.capital ? "capital," : ","; - data += b.port ? "port," : ","; - data += b.citadel ? "citadel," : ","; - data += b.walls ? "walls," : ","; - data += b.plaza ? "plaza," : ","; - data += b.temple ? "temple," : ","; - data += b.shanty ? "shanty town\n" : "\n"; + data += b.port ? b.port + "," : ","; + data += b.citadel ? b.citadel + "," : ","; + data += b.walls ? b.walls + "," : ","; + data += b.plaza ? b.plaza + "," : ","; + data += b.temple ? b.temple + "," : ","; + data += b.library ? b.library + "," : ","; + data += b.hospital ? b.hospital + "," : ","; + data += b.manufactory ? b.manufactory + "," : ","; + data += b.pasture ? b.pasture + "," : ","; + data += b.industrial ? b.industrial + "," : ","; + data += b.food ? b.food + "," : ","; + data += b.landtrade ? b.landtrade + "," : ","; + data += b.watertrade ? b.watertrade + "," : ","; + data += b.shanty ? b.shanty + "\n" : "\n"; }); const name = getFileName("Burgs") + ".csv"; @@ -485,59 +421,43 @@ function overviewBurgs() { alertMessage.innerHTML = message; $("#alert").dialog({ - title: "Burgs bulk renaming", - width: "22em", - position: {my: "center", at: "center", of: "svg"}, + title: "Burgs bulk renaming", width: "22em", + position: { my: "center", at: "center", of: "svg" }, buttons: { Download: function () { - const data = pack.burgs - .filter(b => b.i && !b.removed) - .map(b => b.name) - .join("\r\n"); + const data = pack.burgs.filter(b => b.i && !b.removed).map(b => b.name).join("\r\n"); const name = getFileName("Burg names") + ".txt"; downloadFile(data, name); }, Upload: () => burgsListToLoad.click(), - Cancel: function () { - $(this).dialog("close"); - } + Cancel: function () { $(this).dialog("close"); } } }); } function importBurgNames(dataLoaded) { - if (!dataLoaded) { - tip("Cannot load the file, please check the format", false, "error"); - return; - } + if (!dataLoaded) { tip("Cannot load the file, please check the format", false, "error"); return; } const data = dataLoaded.split("\r\n"); - if (!data.length) { - tip("Cannot parse the list, please check the file format", false, "error"); - return; - } + if (!data.length) { tip("Cannot parse the list, please check the file format", false, "error"); return; } - let change = [], - message = `Burgs will be renamed as below. Please confirm`; + let change = [], message = `Burgs will be renamed as below. Please confirm`; message += ``; const burgs = pack.burgs.filter(b => b.i && !b.removed); for (let i = 0; i < data.length && i <= burgs.length; i++) { const v = data[i]; if (!v || !burgs[i] || v == burgs[i].name) continue; - change.push({id: burgs[i].i, name: v}); + change.push({ id: burgs[i].i, name: v }); message += ``; } message += `
IdCurrent nameNew Name
${burgs[i].i}${burgs[i].name}${v}
`; - if (!change.length) message = "No changes found in the file. Please change some names to get a result"; + if (!change.length) message = "No changes found in the file. Please change some names to get a result" alertMessage.innerHTML = message; $("#alert").dialog({ - title: "Burgs bulk renaming", - width: "22em", - position: {my: "center", at: "center", of: "svg"}, + title: "Burgs bulk renaming", width: "22em", + position: { my: "center", at: "center", of: "svg" }, buttons: { - Cancel: function () { - $(this).dialog("close"); - }, + Cancel: function () { $(this).dialog("close"); }, Confirm: function () { for (let i = 0; i < change.length; i++) { const id = change[i].id; @@ -552,25 +472,22 @@ function overviewBurgs() { } function triggerAllBurgsRemove() { - alertMessage.innerHTML = `Are you sure you want to remove all unlocked burgs except for capitals? + alertMessage.innerHTML = `Are you sure you want to remove all burgs except of capitals?
To remove a capital you have to remove a state first`; $("#alert").dialog({ - resizable: false, - title: "Remove all burgs", + resizable: false, title: "Remove all burgs", buttons: { Remove: function () { $(this).dialog("close"); removeAllBurgs(); }, - Cancel: function () { - $(this).dialog("close"); - } + Cancel: function () { $(this).dialog("close"); } } }); } function removeAllBurgs() { - pack.burgs.filter(b => b.i && !(b.capital || b.lock)).forEach(b => removeBurg(b.i)); + pack.burgs.filter(b => b.i && !b.capital).forEach(b => removeBurg(b.i)); burgsOverviewAddLines(); } }