summaryrefslogtreecommitdiffstats
path: root/src/view
diff options
context:
space:
mode:
Diffstat (limited to 'src/view')
-rw-r--r--src/view/InputHandler.ts40
-rw-r--r--src/view/MapView.ts30
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));
}
}