3 files changed, 24 insertions, 16 deletions

diff --git a/src/controller/gamecontext.ts b/src/controller/gamecontext.ts
index 9bb87e5..1595b41 100644
--- a/src/controller/gamecontext.ts
+++ b/src/controller/gamecontext.ts
@@ -39,7 +39,7 @@ export class GameContext implements CollidableGroup {
 		);
 	}
 
-	private static async loadMap(renderer: Renderer, name: string): Promise<[SpriteView, Collidable[]]> {
+	private static async loadMap(renderer: Renderer, name: string): Promise<[SpriteView[], Collidable[]]> {
 		const map = new MapData(await getJSON(`resources/map/${name}.json`));
 		return [await loadMap(renderer, map), mkCollision(map.collision)];
 	}
@@ -61,7 +61,7 @@ export class GameContext implements CollidableGroup {
 
 	private constructor(
 		private readonly renderer: Renderer,
-		private readonly mapView: SpriteView,
+		private readonly mapView: SpriteView[],
 		private readonly player: EntityContext,
 		private readonly entities: EntityContext[],
 		private readonly collision: Collidable[],
@@ -168,7 +168,8 @@ export class GameContext implements CollidableGroup {
 		this.renderer.setCenter(this.player.pos);
 		this.renderer.clear();
 
-		this.mapView.render();
+		for (const layer of this.mapView)
+			layer.render();
 
 		for (const r of [...this.entities, this.player])
 			r.render(time);
diff --git a/src/model/data/map.ts b/src/model/data/map.ts
index b36f6b5..81ce051 100644
--- a/src/model/data/map.ts
+++ b/src/model/data/map.ts
@@ -1,14 +1,18 @@
 import { Collision } from './collision';
 
+export interface MapLayer {
+	readonly tiles: number[][];
+}
+
 export interface MapDataInput {
 	readonly tiles: string[];
-	readonly layers: number[][][];
+	readonly layers: MapLayer[];
 	readonly collision: Collision[];
 }
 
 export class MapData {
 	public readonly tiles: string[];
-	public readonly layers: number[][][];
+	public readonly layers: MapLayer[];
 	public readonly collision: Collision[];
 
 	public readonly width: number;
@@ -19,7 +23,7 @@ export class MapData {
 		this.layers = data.layers;
 		this.collision = data.collision;
 
-		this.height = this.layers[0].length;
-		this.width = this.layers[0][0].length;
+		this.height = this.layers[0].tiles.length;
+		this.width = this.layers[0].tiles[0].length;
 	}
 }
diff --git a/src/view/map.ts b/src/view/map.ts
index 9bdbd30..f5d6eba 100644
--- a/src/view/map.ts
+++ b/src/view/map.ts
@@ -2,7 +2,7 @@ import { Renderer } from './renderer/renderer';
 import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
 import { loadImage, mkTexture } from './util/image';
 
-import { MapData } from '../model/data/map';
+import { MapData, MapLayer } from '../model/data/map';
 
 import { nextPowerOf2 } from '../util';
 
@@ -58,16 +58,19 @@ function addSprite(builder: SpriteViewBuilder, tileset: Tileset, x: number, y: n
 	builder.addSprite([x, y, x + 1, y + 1], tilePos);
 }
 
-export async function loadMap(r: Renderer, map: MapData): Promise<SpriteView> {
-	const tiles = await loadTiles(map.tiles);
-	const tileset = mkTileset(r, tiles);
-
+function buildMapLayer(r: Renderer, tileset: Tileset, layer: number[][]): SpriteView {
 	const builder = new SpriteViewBuilder(r, tileset.texture);
 
-	for (const layer of map.layers)
-		for (let x = 0; x < map.width; x++)
-			for (let y = 0; y < map.height; y++)
-				addSprite(builder, tileset, x, y, layer[y][x]);
+	for (let x = 0; x < layer[0].length; x++)
+		for (let y = 0; y < layer.length; y++)
+			addSprite(builder, tileset, x, y, layer[y][x]);
 
 	return builder.build();
 }
+
+export async function loadMap(r: Renderer, map: MapData): Promise<SpriteView[]> {
+	const tiles = await loadTiles(map.tiles);
+	const tileset = mkTileset(r, tiles);
+
+	return map.layers.map((layer) => buildMapLayer(r, tileset, layer.tiles));
+}