From 68ff0cb4b1f5e8d354282ef988fcb42240e34d1b Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Wed, 31 Oct 2018 15:10:40 +0100 Subject: Get rid of MapView and MapState --- src/index.ts | 7 ++--- src/model/state/MapState.ts | 6 ---- src/view/MapLoader.ts | 57 ----------------------------------- src/view/MapView.ts | 38 ----------------------- src/view/map.ts | 73 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 75 insertions(+), 106 deletions(-) delete mode 100644 src/model/state/MapState.ts delete mode 100644 src/view/MapLoader.ts delete mode 100644 src/view/MapView.ts create mode 100644 src/view/map.ts (limited to 'src') diff --git a/src/index.ts b/src/index.ts index e21b006..3e7f33d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,6 @@ import MapData from './model/data/MapData'; -import MapState from './model/state/MapState'; -import {loadMap} from './view/MapLoader'; +import { loadMap } from './view/map'; import Renderer from './view/renderer/Renderer'; window.onload = () => { @@ -14,9 +13,7 @@ window.onload = () => { const xhr = new XMLHttpRequest(); xhr.addEventListener('load', async function() { - const mapData = new MapData(JSON.parse(this.responseText)); - const map = new MapState(mapData); - + const map = new MapData(JSON.parse(this.responseText)); const mapView = await loadMap(renderer, map); mapView.render(); }); diff --git a/src/model/state/MapState.ts b/src/model/state/MapState.ts deleted file mode 100644 index 2931dfb..0000000 --- a/src/model/state/MapState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import MapData from '../data/MapData'; - -export default class MapState { - public constructor(public readonly data: MapData) { - } -} diff --git a/src/view/MapLoader.ts b/src/view/MapLoader.ts deleted file mode 100644 index c3504e3..0000000 --- a/src/view/MapLoader.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { loadImages, mkTexture } from 'util/image'; -import { mapValues, nextPowerOf2 } from '../util'; - -import { TileCoords } from './tile'; - -import MapState from '../model/state/MapState'; -import MapView from './MapView'; -import Renderer from './renderer/Renderer'; - -export interface TileMap { - texture: WebGLTexture; - tiles: Map; -} - -function loadTiles(tiles: Map): Promise> { - return loadImages(mapValues((t) => `resources/sprite/tile/${t}.png`, tiles)); -} - -function mkTileMap( - gl: WebGLRenderingContext, - tiles: Map, -): TileMap { - const tileSize = 32; - - const canvasDim = nextPowerOf2(Math.sqrt(tiles.size)); - const canvasSize = canvasDim * tileSize; - - const canvas = document.createElement('canvas'); - canvas.width = canvas.height = canvasSize; - - let x = 0, y = 0; - const map: Map = new Map(); - const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - - for (const [k, tile] of tiles) { - ctx.drawImage(tile, x * tileSize, y * tileSize); - map.set(k, [x / canvasDim, y / canvasDim, (x + 1) / canvasDim, (y + 1) / canvasDim]); - - x++; - if (x === canvasDim) { - x = 0; - y++; - } - } - - return { - texture: mkTexture(gl, canvas), - tiles: map, - }; -} - -export async function loadMap(r: Renderer, map: MapState): Promise { - const tiles = await loadTiles(map.data.tiles); - const tileMap = mkTileMap(r.getContext(), tiles); - - return new MapView(r, map, tileMap); -} diff --git a/src/view/MapView.ts b/src/view/MapView.ts deleted file mode 100644 index a5af8f7..0000000 --- a/src/view/MapView.ts +++ /dev/null @@ -1,38 +0,0 @@ -import MapState from '../model/state/MapState'; -import { TileMap } from './MapLoader'; -import Renderer from './renderer/Renderer'; -import { TileView, TileViewBuilder } from './tile'; - -export default class MapView { - private static addTile(builder: TileViewBuilder, tileMap: TileMap, x: number, y: number, tile: string) { - if (tile === ' ') - return; - - const tilePos = tileMap.tiles.get(tile); - if (!tilePos) - throw new Error('invalid tile specifier in map data'); - - builder.addTile([x, y, x + 1, y + 1], tilePos); - } - - private readonly tileView: TileView; - - constructor( - r: Renderer, - map: MapState, - tileMap: TileMap, - ) { - const builder = new TileViewBuilder(r, tileMap.texture); - - for (let x = 0; x < map.data.width; x++) - for (let y = 0; y < map.data.height; y++) - for (const layer of map.data.layers) - MapView.addTile(builder, tileMap, x, y, layer[y][x]); - - this.tileView = builder.build(); - } - - public render(): void { - this.tileView.render(); - } -} diff --git a/src/view/map.ts b/src/view/map.ts new file mode 100644 index 0000000..954e39e --- /dev/null +++ b/src/view/map.ts @@ -0,0 +1,73 @@ +import MapData from '../model/data/MapData'; +import { mapValues, nextPowerOf2 } from '../util'; + +import Renderer from './renderer/Renderer'; +import { TileCoords, TileView, TileViewBuilder } from './tile'; +import { loadImages, mkTexture } from './util/image'; + +interface TileMap { + texture: WebGLTexture; + tiles: Map; +} + +function loadTiles(tiles: Map): Promise> { + return loadImages(mapValues((t) => `resources/sprite/tile/${t}.png`, tiles)); +} + +function mkTileMap( + gl: WebGLRenderingContext, + tiles: Map, +): TileMap { + const tileSize = 32; + + const canvasDim = nextPowerOf2(Math.sqrt(tiles.size)); + const canvasSize = canvasDim * tileSize; + + const canvas = document.createElement('canvas'); + canvas.width = canvas.height = canvasSize; + + let x = 0, y = 0; + const map: Map = new Map(); + const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; + + for (const [k, tile] of tiles) { + ctx.drawImage(tile, x * tileSize, y * tileSize); + map.set(k, [x / canvasDim, y / canvasDim, (x + 1) / canvasDim, (y + 1) / canvasDim]); + + x++; + if (x === canvasDim) { + x = 0; + y++; + } + } + + return { + texture: mkTexture(gl, canvas), + tiles: map, + }; +} + +function addTile(builder: TileViewBuilder, tileMap: TileMap, x: number, y: number, tile: string) { + if (tile === ' ') + return; + + const tilePos = tileMap.tiles.get(tile); + if (!tilePos) + throw new Error('invalid tile specifier in map data'); + + builder.addTile([x, y, x + 1, y + 1], tilePos); +} + +export async function loadMap(r: Renderer, map: MapData): Promise { + const tiles = await loadTiles(map.tiles); + const tileMap = mkTileMap(r.getContext(), tiles); + + const builder = new TileViewBuilder(r, tileMap.texture); + + for (const layer of map.layers) + for (let x = 0; x < map.width; x++) + for (let y = 0; y < map.height; y++) + addTile(builder, tileMap, x, y, layer[y][x]); + + return builder.build(); +} -- cgit v1.2.3