Start implementing input handling

2 files changed, 57 insertions, 13 deletions

diff --git a/src/view/InputHandler.ts b/src/view/InputHandler.ts
new file mode 100644
index 0000000..e39ffe0
--- /dev/null
+++ b/src/view/InputHandler.ts
@@ -0,0 +1,40 @@
+'use strict';
+
+
+import Direction from '../model/Direction';
+
+
+class InputHandler {
+        keys: {[key: number]: boolean} = {};
+
+        listeners: (() => void)[] = [];
+
+        private callListeners() {
+                this.listeners.forEach(l => l());
+        }
+
+        constructor() {
+                window.addEventListener('keydown', (ev) => {
+                        this.keys[ev.keyCode] = true;
+                        this.callListeners();
+                });
+
+                window.addEventListener('keyup', (ev) => {
+                        delete this.keys[ev.keyCode];
+                        this.callListeners();
+                });
+        }
+
+        addListener(l: () => void) {
+                this.listeners.push(l);
+        }
+}
+
+module InputHandler {
+        export const Left = 37;
+        export const Up = 38;
+        export const Right = 39;
+        export const Down = 40;
+};
+
+export default InputHandler;
diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index b366d28..1eadebb 100644
--- a/src/view/MapView.ts
+++ b/src/view/MapView.ts
@@ -40,15 +40,17 @@ function loadEntities(entities: EntityPosition[]): Promise<{[key: string]: HTMLI
 
 
 export default class MapView {
-        redrawPending: boolean = false;
+        private redrawPending: boolean = false;
 
-        canvas: HTMLCanvasElement;
-        ctx: CanvasRenderingContext2D;
+        private canvas: HTMLCanvasElement;
+        private ctx: CanvasRenderingContext2D;
 
-        tiles: {[key: string]: HTMLImageElement};
-        entitySprites: {[key: string]: HTMLImageElement};
+        private tiles: {[key: string]: HTMLImageElement};
+        private entitySprites: {[key: string]: HTMLImageElement};
 
-        constructor(private map: MapData, private entities: {[key: string]: EntityPosition}) {
+        constructor(private map: MapData,
+                    private entities: {[key: string]: EntityPosition},
+                    private updateState: (time: number) => void) {
                 this.canvas = document.createElement('canvas');
                 this.canvas.style.position = 'absolute';
                 body.appendChild(this.canvas);
@@ -71,11 +73,11 @@ export default class MapView {
                 });
         }
 
-        getEntities(): EntityPosition[] {
-                return _.valuesIn<EntityPosition>(this.entities);
+        private getEntities(): EntityPosition[] {
+                return _.values<EntityPosition>(this.entities);
         }
 
-        setSize() {
+        private setSize() {
                 var e = document.documentElement;
                 this.canvas.width = window.innerWidth || e.clientWidth || body.clientWidth;
                 this.canvas.height = window.innerHeight || e.clientHeight || body.clientHeight;
@@ -83,14 +85,14 @@ export default class MapView {
                 this.redraw()
         }
 
-        drawTile(x: number, y: number, tile: HTMLImageElement) {
+        private drawTile(x: number, y: number, tile: HTMLImageElement) {
                 if (!tile)
                         return;
 
                 this.ctx.drawImage(tile, x, y);
         }
 
-        drawEntity(e: EntityPosition) {
+        private drawEntity(e: EntityPosition) {
                 var sprite = this.entitySprites[e.entity.name];
                 if (!sprite)
                         return;
@@ -104,7 +106,9 @@ export default class MapView {
                 );
         }
 
-        draw() {
+        private draw(time: number) {
+                this.updateState(time);
+
                 this.redrawPending = false;
 
                 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -137,6 +141,6 @@ export default class MapView {
                         return;
 
                 this.redrawPending = true;
-                window.requestAnimationFrame(() => this.draw());
+                window.requestAnimationFrame((time: number) => this.draw(time));
         }
 }