refactor: Update RELIEF_SYMBOLS structure and utilize RELIEF_ATLASES for terrainLayer

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;
 

src/config/relief-config.ts

@@ -1,5 +1,11 @@
-export const RELIEF_SYMBOLS: Record<string, string[]> = {
+function createAtlas(ids: string[]) {
-  simple: [
+  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<string, string[]> = {
     "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<string, string[]> = {
     "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<string, string[]> = {
     "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<string, [number, number]> = {
   mount: [2, 7],
   mountSnow: [1, 6],

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(
+const terrainLayer = new TextureAtlasLayer("terrain", RELIEF_ATLASES);
-  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}"`);
-  });
-}
 
 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");