Depth stacking within layers

ts/grid.ts

@@ -3,23 +3,26 @@ import { Tile } from './tile.js';
 import { TileFactory } from './tile_factory.js';
 
 export class Grid {
-  #prnt: HTMLElement;
-  #tileset: string;
-  #layers: Map<string, Layer> = new Map<string, Layer>();
+  prnt: HTMLElement;
+  tileset: string;
+  layers: Map<string, Layer> = new Map<string, Layer>();
+  height: number;
 
   constructor(prnt: HTMLElement) {
-    this.#prnt = prnt;
-    this.#prnt.style.display = 'grid';
+    this.prnt = prnt;
+    this.prnt.style.display = 'grid';
   }
 
   set_size(x: number, y: number) {
-    this.#prnt.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
-    this.#prnt.style.gridTemplateRows = `repeat(${y}, 1fr)`;
+    this.height = y;
+
+    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 = `url("images/${this.#tileset}/land.svg")`;
+    this.tileset = set;
+    this.prnt.style.backgroundImage = `url("images/${this.tileset}/land.svg")`;
 
     // TODO: Notify layers
   }
@@ -28,35 +31,33 @@ export class Grid {
     const newNames: Set<string> = new Set<string>(layers);
 
     for (const name of newNames) {
-      if (!this.#layers.has(name)) {
+      if (!this.layers.has(name)) {
         const layer = new Layer();
-        layer.set_tileset(this.#tileset);
-        this.#layers.set(name, layer);
+        layer.set_tileset(this.tileset);
+        this.layers.set(name, layer);
       }
     }
 
-    for (const name of this.#layers.keys()) {
+    for (const name of this.layers.keys()) {
       if (!newNames.has(name)) {
         // TODO: Notify layer to tear down
-        this.#layers.delete(name);
+        this.layers.delete(name);
       }
     }
 
     for (let i = 0; i < layers.length; i++) {
-      const name = layers[i];
-      const level = i + 1;
-      const layer = this.#layers.get(name)!;
-      layer.set_level(level);
+      const layer = this.layers.get(layers[i])!;
+      layer.set_level(i * this.height);
     }
   }
 
   add_tile(tile_factory: TileFactory, x: number, y: number): Tile {
-    const tile = this.#layers.get(tile_factory.layer_name)!.add_tile(tile_factory);
+    const tile = this.layers.get(tile_factory.layer_name)!.add_tile(tile_factory, y);
 
     // Grids are 1-indexed
     tile.elem.style.gridColumnStart = `${x + 1}`;
     tile.elem.style.gridRowStart = `${y + 1}`;
-    this.#prnt.appendChild(tile.elem);
+    this.prnt.appendChild(tile.elem);
 
     return tile;
   }