diff --git a/.gitignore b/.gitignore index 0f0d3c17..b0a273f0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .idea /node_modules -/dist \ No newline at end of file +/dist +/coverage diff --git a/index.css b/index.css index b3a0c566..1cb69877 100644 --- a/index.css +++ b/index.css @@ -1143,12 +1143,17 @@ div#regimentSelectorBody > div > div { filter: sepia(1) hue-rotate(200deg); } +.colorsContainer { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-column-gap: 0.3em; + grid-row-gap: 0.2em; +} + .color-div { width: 3em; - height: 1em; - display: inline-block; - margin: 0 0.16em; - border: 1px #c5c5c5 groove; + height: 1.5em; + border: 1px #999 solid; cursor: pointer; } diff --git a/index.html b/index.html index cb29d687..38e5cf2f 100644 --- a/index.html +++ b/index.html @@ -2245,7 +2245,7 @@ - Support Ukraine + Support Ukraine war.ukraine.ua/support-ukraine @@ -2643,8 +2643,8 @@
-
Avarage depth:
- +
Average depth:
+
@@ -4046,11 +4046,6 @@ > -
`; if (type === "Strait") return /* html */ `${common} @@ -814,7 +851,9 @@ function editHeightmap(options) { w: - + `; @@ -1135,7 +1174,7 @@ function editHeightmap(options) { .on("click", mapClicked); const colors = pallete.map(p => `rgb(${p[0]}, ${p[1]}, ${p[2]})`); - d3.select("#colorsUnassigned") + d3.select("#colorsUnassignedContainer") .selectAll("div") .data(colors) .enter() @@ -1198,25 +1237,23 @@ function editHeightmap(options) { this.setAttribute("data-height", height); }); - if (selectedColor.parentNode.id === "colorsUnassigned") { - colorsAssigned.appendChild(selectedColor); + if (selectedColor.parentNode.id === "colorsUnassignedContainer") { + colorsAssignedContainer.appendChild(selectedColor); colorsAssigned.style.display = "block"; - byId("colorsUnassignedNumber").innerHTML = colorsUnassigned.childElementCount - 2; - byId("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2; + byId("colorsUnassignedNumber").innerHTML = colorsUnassignedContainer.childElementCount - 2; + byId("colorsAssignedNumber").innerHTML = colorsAssignedContainer.childElementCount - 2; } } // auto assign color based on luminosity or hue function autoAssing(type) { - let unassigned = colorsUnassigned.querySelectorAll("div"); + let unassigned = colorsUnassignedContainer.querySelectorAll("div"); if (!unassigned.length) { heightsFromImage(+convertColors.value); - unassigned = colorsUnassigned.querySelectorAll("div"); - if (!unassigned.length) { - tip("No unassigned colors. Please load an image and click the button again", false, "error"); - return; - } + unassigned = colorsUnassignedContainer.querySelectorAll("div"); + if (!unassigned.length) + return tip("No unassigned colors. Please load an image and click the button again", false, "error"); } const getHeightByHue = function (color) { @@ -1245,7 +1282,8 @@ function editHeightmap(options) { const assinged = []; // store assigned heights unassigned.forEach(el => { const clr = el.dataset.color; - const height = type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr); + const height = + type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr); const colorTo = color(1 - (height < 20 ? (height - 5) / 100 : height / 100)); viewbox .select("#heights") @@ -1259,18 +1297,18 @@ function editHeightmap(options) { } // if color is already added, remove it el.style.backgroundColor = el.dataset.color = colorTo; el.dataset.height = height; - colorsAssigned.appendChild(el); + colorsAssignedContainer.appendChild(el); assinged[height] = true; }); // sort assigned colors by height - Array.from(colorsAssigned.children) + Array.from(colorsAssignedContainer.children) .sort((a, b) => +a.dataset.height - +b.dataset.height) - .forEach(line => colorsAssigned.appendChild(line)); + .forEach(line => colorsAssignedContainer.appendChild(line)); colorsAssigned.style.display = "block"; colorsUnassigned.style.display = "none"; - byId("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2; + byId("colorsAssignedNumber").innerHTML = colorsAssignedContainer.childElementCount - 2; } function setConvertColorsNumber() { @@ -1290,7 +1328,8 @@ function editHeightmap(options) { } function applyConversion() { - if (colorsAssigned.childElementCount < 3) return tip("Please do the assignment first", false, "error"); + if (colorsAssignedContainer.childElementCount < 3) + return tip("Please assign colors to heights first", false, "error"); viewbox .select("#heights") diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js index 972a9cb8..7d766672 100644 --- a/modules/ui/lakes-editor.js +++ b/modules/ui/lakes-editor.js @@ -48,13 +48,14 @@ function editLake() { document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit(); const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v])); - document.getElementById("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value; + document.getElementById("lakeShoreLength").value = + si(length * distanceScaleInput.value) + " " + distanceUnitInput.value; const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i)); const heights = lakeCells.map(i => cells.h[i]); document.getElementById("lakeElevation").value = getHeight(l.height); - document.getElementById("lakeAvarageDepth").value = getHeight(d3.mean(heights), "abs"); + document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs"); document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs"); document.getElementById("lakeFlux").value = l.flux; @@ -91,7 +92,9 @@ function editLake() { .attr("r", 0.4) .attr("data-v", d => d) .call(d3.drag().on("drag", dragVertex)) - .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights")); + .on("mousemove", () => + tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights") + ); } function dragVertex() { diff --git a/modules/ui/namesbase-editor.js b/modules/ui/namesbase-editor.js index 1e08ad2a..e2d214ff 100644 --- a/modules/ui/namesbase-editor.js +++ b/modules/ui/namesbase-editor.js @@ -23,15 +23,23 @@ function editNamesbase() { const uploader = document.getElementById("namesbaseToLoad"); document.getElementById("namesbaseUpload").addEventListener("click", () => { - uploader.addEventListener("change", function (event) { - uploadFile(event.target, d => namesbaseUpload(d, true)); - }, { once: true }); + uploader.addEventListener( + "change", + function (event) { + uploadFile(event.target, d => namesbaseUpload(d, true)); + }, + {once: true} + ); uploader.click(); }); document.getElementById("namesbaseUploadExtend").addEventListener("click", () => { - uploader.addEventListener("change", function (event) { - uploadFile(event.target, d => namesbaseUpload(d, false)); - }, { once: true }); + uploader.addEventListener( + "change", + function (event) { + uploadFile(event.target, d => namesbaseUpload(d, false)); + }, + {once: true} + ); uploader.click(); }); @@ -57,10 +65,8 @@ function editNamesbase() { function updateInputs() { const base = +document.getElementById("namesbaseSelect").value; - if (!nameBases[base]) { - tip(`Namesbase ${base} is not defined`, false, "error"); - return; - } + if (!nameBases[base]) return tip(`Namesbase ${base} is not defined`, false, "error"); + document.getElementById("namesbaseTextarea").value = nameBases[base].b; document.getElementById("namesbaseName").value = nameBases[base].name; document.getElementById("namesbaseMin").value = nameBases[base].min; @@ -86,20 +92,23 @@ function editNamesbase() { function updateNamesData() { const base = +document.getElementById("namesbaseSelect").value; - const b = document.getElementById("namesbaseTextarea").value; - if (b.split(",").length < 3) { - tip("The names data provided is too short of incorrect", false, "error"); - return; - } - nameBases[base].b = b; + const rawInput = document.getElementById("namesbaseTextarea").value; + if (rawInput.split(",").length < 3) return tip("The names data provided is too short of incorrect", false, "error"); + + const namesData = rawInput.replace(/[/|]/g, ""); + nameBases[base].b = namesData; Names.updateChain(base); } function updateBaseName() { const base = +document.getElementById("namesbaseSelect").value; const select = document.getElementById("namesbaseSelect"); - select.options[namesbaseSelect.selectedIndex].innerHTML = this.value; - nameBases[base].name = this.value; + + const rawName = this.value; + const name = rawName.replace(/[/|]/g, ""); + + select.options[namesbaseSelect.selectedIndex].innerHTML = name; + nameBases[base].name = name; } function updateBaseMin() { @@ -147,21 +156,28 @@ function editNamesbase() { : "none"; const geminate = namesArray.map(name => name.match(/[^\w\s]|(.)(?=\1)/g) || []).flat(); - const doubled = unique(geminate).filter(char => geminate.filter(doudledChar => doudledChar === char).length > 3) || ["none"]; + const doubled = unique(geminate).filter( + char => geminate.filter(doudledChar => doudledChar === char).length > 3 + ) || ["none"]; const duplicates = unique(namesArray.filter((e, i, a) => a.indexOf(e) !== i)).join(", ") || "none"; const multiwordRate = d3.mean(namesArray.map(n => +n.includes(" "))); const getLengthQuality = () => { - if (length < 30) return "[not enough]"; - if (length < 100) return "[low]"; - if (length <= 400) return "[good]"; + if (length < 30) + return "[not enough]"; + if (length < 100) + return "[low]"; + if (length <= 400) + return "[good]"; return "[overmuch]"; }; const getVarietyLevel = () => { - if (variety < 15) return "[low]"; - if (variety < 30) return "[mean]"; + if (variety < 15) + return "[low]"; + if (variety < 30) + return "[mean]"; return "[good]"; }; @@ -175,9 +191,14 @@ function editNamesbase() {
Median name length: ${d3.median(wordsLength)}
Non-basic chars: ${nonBasicLatinChars}
-
Doubled chars: ${doubled.join("")}
+
Doubled chars: ${doubled.join( + "" + )}
Duplicates: ${duplicates}
-
Multi-word names: ${rn(multiwordRate * 100, 2)}%
+
Multi-word names: ${rn( + multiwordRate * 100, + 2 + )}%
`; $("#alert").dialog({ @@ -194,7 +215,8 @@ function editNamesbase() { function namesbaseAdd() { const base = nameBases.length; - const b = "This,is,an,example,of,name,base,showing,correct,format,It,should,have,at,least,one,hundred,names,separated,with,comma"; + const b = + "This,is,an,example,of,name,base,showing,correct,format,It,should,have,at,least,one,hundred,names,separated,with,comma"; nameBases.push({name: "Base" + base, min: 5, max: 12, d: "", m: 0, b}); document.getElementById("namesbaseSelect").add(new Option("Base" + base, base)); document.getElementById("namesbaseSelect").value = base; @@ -232,7 +254,7 @@ function editNamesbase() { downloadFile(data, name); } - function namesbaseUpload(dataLoaded, override=true) { + function namesbaseUpload(dataLoaded, override = true) { const data = dataLoaded.split("\r\n"); if (!data || !data[0]) { tip("Cannot load a namesbase. Please check the data format", false, "error");