Implement simple map renderer

src/view/MapLoader.ts

@@ -0,0 +1,59 @@
+import {mapValues, mapValuesAsync, nextPowerOf2} from '../util';
+
+import Renderer from './Renderer';
+import MapView from './MapView';
+import MapData from '../model/MapData';
+
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+        return new Promise(function(resolve, reject) {
+                let img = new Image();
+                img.addEventListener('load', () => { resolve(img); });
+                img.addEventListener('error', () => { reject(Error('failed to load ' + url)); });
+                img.src = url;
+        });
+}
+
+function loadImages(urls: Map<string, string>): Promise<Map<string, HTMLImageElement>> {
+        return mapValuesAsync(loadImage, urls);
+}
+
+function loadTiles(tiles: Map<string, string>): Promise<Map<string, HTMLImageElement>> {
+        return loadImages(mapValues(t => `resources/sprite/tile/${t}.png`, tiles));
+}
+
+function mkTileTexture(gl: WebGLRenderingContext, tiles: Map<string, HTMLImageElement>): [WebGLTexture, Map<string, number>] {
+        let canvas = document.createElement('canvas');
+        canvas.width = nextPowerOf2(tiles.size) * MapView.tileSize;
+        canvas.height = MapView.tileSize;
+
+        let i = 0;
+        let ret: Map<string, number> = new Map();
+        let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+        for (let [k, tile] of tiles) {
+                ctx.drawImage(tile, i * MapView.tileSize, 0);
+                ret.set(k, i++);
+        }
+
+        let texture = gl.createTexture();
+        if (!texture)
+                throw new Error('unable to create texture');
+
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+        return [texture, ret];
+}
+
+
+export async function loadMap(r: Renderer, mapData: MapData): Promise<MapView> {
+        let tiles = await loadTiles(mapData.tiles);
+        let [tileTexture, tileMap] = mkTileTexture(r.gl, tiles);
+
+        return new MapView(r, mapData, tileTexture, tileMap);
+}