diff --git a/src/ui/components/tilemap.ts b/src/ui/components/tilemap.ts index 9f86e1d..46ffa18 100644 --- a/src/ui/components/tilemap.ts +++ b/src/ui/components/tilemap.ts @@ -52,6 +52,7 @@ export class TileMap { private tiles: number[][] = []; private canvas: HTMLCanvasElement; private cursor: HTMLImageElement; + private mapSize: Vector = { x: 79, y: 21 }; // Fixed map size? Might change in other version? constructor(root: HTMLElement, private tileSet: TileSet) { this.canvas = document.createElement('canvas'); @@ -91,6 +92,12 @@ export class TileMap { private clearCanvas() { this.cursor.style.display = 'none'; this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + const map = mult(this.mapSize, this.tileSize); + const localPos = this.localToCanvas({ x: 1, y: 0 }); + + this.context.fillStyle = '#111'; + this.context.fillRect(localPos.x, localPos.y, map.x, map.y); } private rerender() { @@ -121,11 +128,7 @@ export class TileMap { const source = this.tileSet.getCoordinateForTile(tile); const size = this.tileSet.tileSize; - - const globalPos = this.toGlobal({ x, y }); - const globalCenter = this.toGlobal(this.center); - const relPosFromCenter = sub(globalPos, globalCenter); - const localPos = add(this.canvasCenter, relPosFromCenter); + const localPos = this.localToCanvas({ x, y }); this.context.drawImage( // Source @@ -142,6 +145,13 @@ export class TileMap { ); } + private localToCanvas(pos: Vector) { + const globalPos = this.toGlobal(pos); + const globalCenter = this.toGlobal(this.center); + const relPosFromCenter = sub(globalPos, globalCenter); + return add(this.canvasCenter, relPosFromCenter); + } + private toGlobal(vec: Vector): Vector { return mult(vec, this.tileSize); } diff --git a/src/ui/screens/game-screen.ts b/src/ui/screens/game-screen.ts index d92a013..26f0472 100644 --- a/src/ui/screens/game-screen.ts +++ b/src/ui/screens/game-screen.ts @@ -76,7 +76,6 @@ export class GameScreen extends Screen { } public openQuestion(question: string, choices: string[], defaultChoice: string) { - // this.console.appendLine(`${question} ${choices.map(c => c === defaultChoice ? `${c}` : c)}`); const dialog = new Question(question, choices, defaultChoice); this.elem.appendChild(dialog.elem); }