From b7fec57c0463e58f1ad8db126ff4879f59b057d0 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Wed, 6 Jan 2016 21:39:15 +0100 Subject: Start implementing input handling --- src/view/InputHandler.ts | 40 ++++++++++++++++++++++++++++++++++++++++ src/view/MapView.ts | 30 +++++++++++++++++------------- 2 files changed, 57 insertions(+), 13 deletions(-) create mode 100644 src/view/InputHandler.ts (limited to 'src/view') 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(this.entities); + private getEntities(): EntityPosition[] { + return _.values(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)); } } -- cgit v1.2.3