MapView: scale view

1 files changed, 13 insertions, 4 deletions

diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index 31305d7..a12d9d4 100644
--- a/src/view/MapView.ts
+++ b/src/view/MapView.ts
@@ -64,6 +64,7 @@ export default class MapView {
 
         private canvas: HTMLCanvasElement;
         private ctx: CanvasRenderingContext2D;
+        private scale: number;
 
         private tiles: {[key: string]: HTMLImageElement};
         private entitySprites: {[key: string]: HTMLImageElement};
@@ -106,6 +107,9 @@ export default class MapView {
                 this.canvas.width = w;
                 this.canvas.height = h;
 
+                var pixels = Math.max(w/20, h/15.0);
+                this.scale = Math.ceil(pixels / tileSize);
+
                 this.redraw()
         }
 
@@ -113,7 +117,7 @@ export default class MapView {
                 if (!tile)
                         return;
 
-                this.ctx.drawImage(tile, x, y);
+                this.ctx.drawImage(tile, x*this.scale, y*this.scale, tileSize*this.scale, tileSize*this.scale);
         }
 
         private drawEntity(e: EntityPosition, time: number): boolean {
@@ -127,8 +131,8 @@ export default class MapView {
                         sprite,
                         tiles(e.direction), 0,
                         tileSize, tileSize,
-                        tiles(p.x), tiles(p.y),
-                        tileSize, tileSize
+                        tiles(p.x)*this.scale, tiles(p.y)*this.scale,
+                        tileSize*this.scale, tileSize*this.scale
                 );
 
                 return !!e.transition;
@@ -141,7 +145,7 @@ export default class MapView {
                 var h = this.canvas.height;
 
                 this.ctx.translate(Math.round(w/2), Math.round(h/2));
-                this.ctx.translate(-tiles(origin.x + 0.5), -tiles(origin.y + 0.5));
+                this.ctx.translate(-tiles(origin.x + 0.5)*this.scale, -tiles(origin.y + 0.5)*this.scale);
         }
 
         private draw(time: number) {
@@ -158,6 +162,11 @@ export default class MapView {
 
                 this.setOrigin(time);
 
+                (<any>this.ctx).mozImageSmoothingEnabled = false;
+                (<any>this.ctx).webkitImageSmoothingEnabled = false;
+                (<any>this.ctx).msImageSmoothingEnabled = false;
+                (<any>this.ctx).imageSmoothingEnabled = false;
+
                 this.map.layers.forEach((layer) => {
                         let y = 0;