GameContext: async render loop

src/controller/gamecontext.ts

@@ -9,7 +9,7 @@ import { Renderer } from '../view/renderer/renderer';
 
 import { Collidable } from '../math/collision';
 import { Movement } from '../math/line';
-import { getJSON } from '../util';
+import { getJSON, nextAnimationFrame } from '../util';
 
 import { vec2 } from 'gl-matrix';
 
@@ -84,7 +84,7 @@ export class GameContext implements CollidableGroup {
 			}
 		});
 
-		window.requestAnimationFrame(this.render);
+		this.renderLoop();
 	}
 
 	public getTranslation(): null {
@@ -160,16 +160,18 @@ export class GameContext implements CollidableGroup {
 			this.updateStep();
 	}
 
-	private render = (curTime: number) => {
-		const time = curTime - this.initTime;
-		this.update(time);
-
+	private render(): void {
 		this.renderer.setCenter(this.player.pos);
 		this.renderer.clear();
 
 		for (const r of [this.mapView, ...this.entities, this.player])
-			r.render(time);
+			r.render(this.time);
+	}
 
-		window.requestAnimationFrame(this.render);
+	private async renderLoop(): Promise<void> {
+		while (true) {
+			this.update(await nextAnimationFrame() - this.initTime);
+			this.render();
+		}
 	}
 }

src/util.ts

@@ -78,3 +78,7 @@ export function get(url: string): Promise<XMLHttpRequest> {
 export async function getJSON(url: string): Promise<any> {
 	return JSON.parse((await get(url)).responseText);
 }
+
+export function nextAnimationFrame(): Promise<DOMHighResTimeStamp> {
+	return new Promise((resolve) => window.requestAnimationFrame(resolve));
+}