diff --git a/src/app.ts b/src/app.ts index 3dec969..04907da 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,13 +1,25 @@ +import {fetchPalette, Palette} from "./sprite"; + export class App { private canvas: HTMLCanvasElement; + private readonly context: CanvasRenderingContext2D; private lastTime: DOMHighResTimeStamp = 0; private isRunning: boolean = false; + private palette?: Palette; + public constructor(canvas: HTMLCanvasElement) { this.canvas = canvas; - this.updateSize(window.innerWidth, window.innerHeight); + const context = canvas.getContext("2d"); + if (context === null) { + throw new Error("Failed to get 2D context"); + } + context.imageSmoothingEnabled = false; // pixelart + this.context = context; - document.onresize = () => this.updateSize(window.innerWidth, window.innerHeight); + this.updateSize(window.innerWidth, window.innerHeight); + window.onresize = () => this.updateSize(window.innerWidth, window.innerHeight); + fetchPalette("").then(p => this.palette = p); } public run() { @@ -20,7 +32,16 @@ export class App { } private draw(time: DOMHighResTimeStamp) { - // TODO: actually draw stuff + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + if (this.palette) { + let x = 0; + for (let s of this.palette.sprites) { + for (let y = 0; y < 4; y++) { + s.draw(this.context, y * 128, x, y); + } + x += 128; + } + } this.lastTime = time; if (this.isRunning) {