diff --git a/scripts/generate-relief-atlases.js b/scripts/generate-relief-atlases.js index 88bd322d..6adf4ed3 100644 --- a/scripts/generate-relief-atlases.js +++ b/scripts/generate-relief-atlases.js @@ -57,10 +57,8 @@ fs.mkdirSync(OUTPUT_DIR, {recursive: true}); const browser = await chromium.launch(); const page = await browser.newPage(); - for (const [set, ids] of Object.entries(RELIEF_SYMBOLS)) { + for (const [set, {ids, cols, rows}] of Object.entries(RELIEF_SYMBOLS)) { const n = ids.length; - const cols = Math.ceil(Math.sqrt(n)); - const rows = Math.ceil(n / cols); const W = cols * SPRITE_SIZE; const H = rows * SPRITE_SIZE; diff --git a/src/config/relief-config.ts b/src/config/relief-config.ts index b591c10a..5db57607 100644 --- a/src/config/relief-config.ts +++ b/src/config/relief-config.ts @@ -1,5 +1,11 @@ -export const RELIEF_SYMBOLS: Record = { - simple: [ +function createAtlas(ids: string[]) { + const n = ids.length || 1; + const cols = Math.ceil(Math.sqrt(n)); + return { ids, cols, rows: Math.ceil(n / cols) }; +} + +export const RELIEF_SYMBOLS = { + simple: createAtlas([ "relief-mount-1", "relief-hill-1", "relief-conifer-1", @@ -9,8 +15,8 @@ export const RELIEF_SYMBOLS: Record = { "relief-grass-1", "relief-swamp-1", "relief-dune-1", - ], - gray: [ + ]), + gray: createAtlas([ "relief-mount-2-bw", "relief-mount-3-bw", "relief-mount-4-bw", @@ -45,8 +51,8 @@ export const RELIEF_SYMBOLS: Record = { "relief-palm-2-bw", "relief-deciduous-2-bw", "relief-deciduous-3-bw", - ], - colored: [ + ]), + colored: createAtlas([ "relief-mount-2", "relief-mount-3", "relief-mount-4", @@ -81,9 +87,16 @@ export const RELIEF_SYMBOLS: Record = { "relief-palm-2", "relief-deciduous-2", "relief-deciduous-3", - ], + ]), }; +export const RELIEF_ATLASES = Object.fromEntries( + Object.entries(RELIEF_SYMBOLS).map(([set, { cols, rows }]) => [ + set, + { url: `images/relief/${set}.png`, cols, rows }, + ]), +); + export const VARIANT_RANGES: Record = { mount: [2, 7], mountSnow: [1, 6], diff --git a/src/renderers/draw-relief-icons.ts b/src/renderers/draw-relief-icons.ts index b0d5a66b..819e6fc3 100644 --- a/src/renderers/draw-relief-icons.ts +++ b/src/renderers/draw-relief-icons.ts @@ -1,33 +1,10 @@ -import { RELIEF_SYMBOLS } from "../config/relief-config"; +import { RELIEF_ATLASES, RELIEF_SYMBOLS } from "../config/relief-config"; import type { ReliefIcon } from "../modules/relief-generator"; import { generateRelief } from "../modules/relief-generator"; import { TextureAtlasLayer } from "../modules/texture-atlas-layer"; import { byId } from "../utils"; -const atlases = Object.fromEntries( - Object.entries(RELIEF_SYMBOLS).map(([set, ids]) => { - const n = ids.length || 1; - const cols = Math.ceil(Math.sqrt(n)); - return [ - set, - { url: `images/relief/${set}.png`, cols, rows: Math.ceil(n / cols) }, - ]; - }), -); - -const terrainLayer = new TextureAtlasLayer("terrain", atlases); - -function resolveQuads(icons: ReliefIcon[]) { - return icons.map((r) => { - const id = r.href.startsWith("#") ? r.href.slice(1) : r.href; - for (const [set, ids] of Object.entries(RELIEF_SYMBOLS)) { - const tileIndex = ids.indexOf(id); - if (tileIndex !== -1) - return { atlasId: set, x: r.x, y: r.y, s: r.s, tileIndex }; - } - throw new Error(`Relief: unknown symbol href "${r.href}"`); - }); -} +const terrainLayer = new TextureAtlasLayer("terrain", RELIEF_ATLASES); function drawSvg(icons: ReliefIcon[], parentEl: HTMLElement): void { parentEl.innerHTML = icons @@ -43,7 +20,6 @@ window.drawRelief = ( parentEl: HTMLElement | undefined = byId("terrain"), ) => { if (!parentEl) throw new Error("Relief: parent element not found"); - parentEl.innerHTML = ""; parentEl.dataset.mode = type; @@ -57,6 +33,18 @@ window.drawRelief = ( } }; +function resolveQuads(icons: ReliefIcon[]) { + return icons.map((r) => { + const id = r.href.startsWith("#") ? r.href.slice(1) : r.href; + for (const [set, { ids }] of Object.entries(RELIEF_SYMBOLS)) { + const tileIndex = ids.indexOf(id); + if (tileIndex !== -1) + return { atlasId: set, x: r.x, y: r.y, s: r.s, tileIndex }; + } + throw new Error(`Relief: unknown symbol href "${r.href}"`); + }); +} + window.undrawRelief = () => { terrainLayer.clear(); const terrainEl = byId("terrain");