diff --git a/index.css b/index.css index 94dd7c3a..732ef36a 100644 --- a/index.css +++ b/index.css @@ -470,17 +470,17 @@ input[type="color"] { border: 1px solid #a9a9a9; } -input[type='color']::-webkit-color-swatch-wrapper { +input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } -#options input[type='color'] { +#options input[type="color"] { width: 4.5em; height: 1em; border: 0; } -#convertImageDialog input[type='color'] { +#convertImageDialog input[type="color"] { width: 38px; padding: 0; border: 0; @@ -495,7 +495,7 @@ input[type='color']::-webkit-color-swatch-wrapper { font-size: smaller; } -#options input[type='range'] { +#options input[type="range"] { height: 8px; background: 0; appearance: none; @@ -504,7 +504,7 @@ input[type='color']::-webkit-color-swatch-wrapper { padding: 0; } -#options input[type='range']::-webkit-slider-thumb { +#options input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; border-radius: 15%; width: 0.91em; @@ -516,7 +516,7 @@ input[type='color']::-webkit-color-swatch-wrapper { box-shadow: 0.5px 0.5px 0px var(--dark-solid); } -#options input[type='range']::-moz-range-thumb { +#options input[type="range"]::-moz-range-thumb { -moz-appearance: none; border-radius: 15%; width: 0.73em; @@ -527,22 +527,22 @@ input[type='color']::-webkit-color-swatch-wrapper { box-shadow: 0.5px 0.5px 0px var(--dark-solid); } -#options input[type='range']::-webkit-slider-runnable-track { +#options input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: #ffffff; } -#options input[type='range']::-moz-range-track { +#options input[type="range"]::-moz-range-track { -moz-appearance: none; background-color: #ffffff; height: 2px; } -#options input[type='number'] { +#options input[type="number"] { font-size: 0.8em; } -#options input[type='text'] { +#options input[type="text"] { border: 0px; width: 62%; font-size: smaller; @@ -553,7 +553,7 @@ input[type='color']::-webkit-color-swatch-wrapper { font-size: smaller; } -#optionsContent input[type='number'] { +#optionsContent input[type="number"] { border: 0; text-align: right; background-color: transparent; @@ -561,8 +561,8 @@ input[type='color']::-webkit-color-swatch-wrapper { -moz-appearance: textfield; } -#optionsContent input[type='number']::-webkit-inner-spin-button, -#optionsContent input[type='number']::-webkit-outer-spin-button { +#optionsContent input[type="number"]::-webkit-inner-spin-button, +#optionsContent input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @@ -582,7 +582,7 @@ input[type='color']::-webkit-color-swatch-wrapper { text-align: left; } -#optionsContent input[type='range'] { +#optionsContent input[type="range"] { width: 100%; } @@ -606,7 +606,7 @@ input[type='color']::-webkit-color-swatch-wrapper { transform: translate(0px, 1px); } -#styleElements input[type='range'] { +#styleElements input[type="range"] { width: 64%; } @@ -629,16 +629,6 @@ input[type='color']::-webkit-color-swatch-wrapper { width: 100%; } -#styleSelectFont > option { - font-size: 2em; -} - -#sticked { - display: flex; - justify-content: space-evenly; - width: 100%; -} - #sticked button { background-color: transparent; font-weight: bold; diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js index 81cac633..b16246fd 100644 --- a/modules/dynamic/editors/states-editor.js +++ b/modules/dynamic/editors/states-editor.js @@ -294,13 +294,13 @@ function statesEditorAddLines() { $body.innerHTML = lines; // update footer - statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length; - statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length; - statesFooterBurgs.innerHTML = totalBurgs; - statesFooterArea.innerHTML = `${si(totalArea)} ${unit}`; - statesFooterPopulation.innerHTML = si(totalPopulation); - statesFooterArea.dataset.area = totalArea; - statesFooterPopulation.dataset.population = totalPopulation; + byId("statesFooterStates").innerHTML = pack.states.filter(s => s.i && !s.removed).length; + byId("statesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length; + byId("statesFooterBurgs").innerHTML = totalBurgs; + byId("statesFooterArea").innerHTML = si(totalArea) + unit; + byId("statesFooterArea").dataset.area = totalArea; + byId("statesFooterPopulation").innerHTML = si(totalPopulation); + byId("statesFooterPopulation").dataset.population = totalPopulation; // add listeners $body.querySelectorAll(":scope > div").forEach($line => { diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js index 8bc8b9d5..9b78d118 100644 --- a/modules/dynamic/heightmap-selection.js +++ b/modules/dynamic/heightmap-selection.js @@ -1,7 +1,6 @@ const initialSeed = generateSeed(); let graph = getGraph(grid); -const initialSeed = generateSeed(); appendStyleSheet(); insertHtml(); addListeners(); @@ -97,19 +96,6 @@ function appendStyleSheet() { justify-self: end; } - @media (max-width: 600px) { - .heightmap-selection_container { - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - grid-gap: 4px; - } - } - - @media (min-width: 2000px) { - .heightmap-selection_container { - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - } - } - .heightmap-selection article { padding: 4px; border-radius: 8px; @@ -322,20 +308,6 @@ async function drawPrecreatedHeightmap(id) { article.querySelector("img").src = dataUrl; } -function drawTemplatePreview(id) { - const heights = HeightmapGenerator.fromTemplate(graph, id); - const dataUrl = drawHeights(heights); - const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`); - article.querySelector("img").src = dataUrl; -} - -async function drawPrecreatedHeightmap(id) { - const heights = await HeightmapGenerator.fromPrecreated(graph, id); - const dataUrl = drawHeights(heights); - const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`); - article.querySelector("img").src = dataUrl; -} - function regeneratePreview(article, id) { graph = getGraph(graph); const seed = generateSeed(); diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js index cd55c448..621f4427 100644 --- a/modules/dynamic/hierarchy-tree.js +++ b/modules/dynamic/hierarchy-tree.js @@ -62,18 +62,8 @@ export function open(props) { } function appendStyleSheet() { - const styles = /* css */ ` - - #hierarchyTree { - display: flex; - flex-direction: column; - justify-content: space-between; - } - - #hierarchyTree > svg { - height: 100%; - } - + const style = document.createElement("style"); + style.textContent = /* css */ ` #hierarchyTree_selectedOrigins > button { margin: 0 2px; } @@ -428,6 +418,7 @@ function selectElement(d) { `; }); + byId("hierarchyTree_originSelector").innerHTML = /*html*/ `