Init

ts/tower.ts

@@ -1,4 +1,4 @@
-import { TowerMap } from 'tower_map.js';
+import { TowerMap } from './tower_map.js';
 
 export function main() {
   document.body.style.margin = '0';
@@ -10,5 +10,8 @@ export function main() {
   container.style.height = '100vmin';
 
   const map = new TowerMap(container);
-  map.draw();
+  map.set_size(20, 20);
+  map.set_tileset('tropical');
 };
+
+main();

ts/tower_map.ts

@@ -1,14 +1,23 @@
 export class TowerMap {
-  #prnt;
+  #prnt: HTMLElement;
+  #tileset: string;
 
   constructor(prnt: HTMLElement) {
     this.#prnt = prnt;
     this.#prnt.style.display = 'grid';
   }
 
-  draw() {
-    this.#prnt.style.backgroundImage = 'url("images/land1.svg")';
-    this.#prnt.style.gridTemplateColumns = 'repeat(20, 1ft)';
-    this.#prnt.style.gridTemplateRows = 'repeat(20, 1ft)';
+  set_size(x: number, y: number) {
+    this.#prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
+    this.#prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
+  }
+
+  set_tileset(set: string) {
+    this.#tileset = set;
+    this.#prnt.style.backgroundImage = this.get_url('land');
+  }
+
+  private get_url(tile: string) {
+    return `url("images/${this.#tileset}/${tile}.svg")`;
   }
 }