Init

js/tower.js

@@ -1,4 +1,4 @@
-import { TowerMap } from 'tower_map.js';
+import { TowerMap } from './tower_map.js';
 export function main() {
     document.body.style.margin = '0';
     document.body.style.backgroundColor = 'black';
@@ -7,7 +7,9 @@ export function main() {
     container.style.width = '100vmin';
     container.style.height = '100vmin';
     const map = new TowerMap(container);
-    map.draw();
+    map.set_size(20, 20);
+    map.set_tileset('tropical');
 }
 ;
+main();
 //# sourceMappingURL=tower.js.map

js/tower.js.map

@@ -1 +1 @@
-{"version":3,"file":"tower.js","sourceRoot":"","sources":["../ts/tower.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,UAAU,IAAI;IAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;IAE9C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;IAEnC,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpC,GAAG,CAAC,IAAI,EAAE,CAAC;AACb,CAAC;AAAA,CAAC"}
+{"version":3,"file":"tower.js","sourceRoot":"","sources":["../ts/tower.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,UAAU,IAAI;IAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;IAE9C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;IAEnC,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpC,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACrB,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC9B,CAAC;AAAA,CAAC;AAEF,IAAI,EAAE,CAAC"}

js/tower_map.js

@@ -11,18 +11,25 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     }
     return privateMap.get(receiver);
 };
-var _prnt;
+var _prnt, _tileset;
 export class TowerMap {
     constructor(prnt) {
         _prnt.set(this, void 0);
+        _tileset.set(this, void 0);
         __classPrivateFieldSet(this, _prnt, prnt);
         __classPrivateFieldGet(this, _prnt).style.display = 'grid';
     }
-    draw() {
-        __classPrivateFieldGet(this, _prnt).style.backgroundImage = 'url("images/land1.svg")';
-        __classPrivateFieldGet(this, _prnt).style.gridTemplateColumns = 'repeat(20, 1ft)';
-        __classPrivateFieldGet(this, _prnt).style.gridTemplateRows = 'repeat(20, 1ft)';
+    set_size(x, y) {
+        __classPrivateFieldGet(this, _prnt).style.gridTemplateColumns = `repeat(${x}, 1fr)`;
+        __classPrivateFieldGet(this, _prnt).style.gridTemplateRows = `repeat(${y}, 1fr)`;
+    }
+    set_tileset(set) {
+        __classPrivateFieldSet(this, _tileset, set);
+        __classPrivateFieldGet(this, _prnt).style.backgroundImage = this.get_url('land');
+    }
+    get_url(tile) {
+        return `url("images/${__classPrivateFieldGet(this, _tileset)}/${tile}.svg")`;
     }
 }
-_prnt = new WeakMap();
+_prnt = new WeakMap(), _tileset = new WeakMap();
 //# sourceMappingURL=tower_map.js.map

js/tower_map.js.map

@@ -1 +1 @@
-{"version":3,"file":"tower_map.js","sourceRoot":"","sources":["../ts/tower_map.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,MAAM,OAAO,QAAQ;IAGnB,YAAY,IAAiB;QAF7B,wBAAM;QAGJ,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,oCAAW,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,IAAI;QACF,oCAAW,KAAK,CAAC,eAAe,GAAG,yBAAyB,CAAC;QAC7D,oCAAW,KAAK,CAAC,mBAAmB,GAAG,iBAAiB,CAAC;QACzD,oCAAW,KAAK,CAAC,gBAAgB,GAAG,iBAAiB,CAAC;IACxD,CAAC;CACF"}
+{"version":3,"file":"tower_map.js","sourceRoot":"","sources":["../ts/tower_map.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,MAAM,OAAO,QAAQ;IAInB,YAAY,IAAiB;QAH7B,wBAAmB;QACnB,2BAAiB;QAGf,uBAAA,IAAI,SAAS,IAAI,EAAC;QAClB,oCAAW,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,oCAAW,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC3D,oCAAW,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IAC1D,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,uBAAA,IAAI,YAAY,GAAG,EAAC;QACpB,oCAAW,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;IAEO,OAAO,CAAC,IAAY;QAC1B,OAAO,eAAe,sCAAa,IAAI,IAAI,QAAQ,CAAC;IACtD,CAAC;CACF"}

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")`;
   }
 }

tsconfig.json

@@ -12,8 +12,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "strictFunctionTypes": true,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": true
+    "strictNullChecks": true
   },
   "files": [
     "ts/tower.ts",