Draw inside the requestAnimationFrame callback

I'm pretty sure it's required to use the API this way
(oh god it's so ugly)

1 files changed, 39 insertions, 31 deletions

diff --git a/static/games/rms/rms.js b/static/games/rms/rms.js
index 3bf1850..838c0ad 100644
--- a/static/games/rms/rms.js
+++ b/static/games/rms/rms.js
@@ -399,18 +399,22 @@ async function get_pbullet_bitmap() {
 
 async function generic_message(ctx, image, okay) {
 	const bitmap = await get_bitmap(image, 800, 600);
-	while (true) {
-		await new Promise(window.requestAnimationFrame);
-		const ev = events;
-		events = [];
-		for (const event of ev) {
-			const [type, keycode] = event;
-			if (type === 'keydown' && keycode === okay) {
-				return;
+	await new Promise((resolve) => {
+		const loop = () => {
+			const ev = events;
+			events = [];
+			for (const event of ev) {
+				const [type, keycode] = event;
+				if (type === 'keydown' && keycode === okay) {
+					resolve();
+					return;
+				}
 			}
-		}
-		ctx.drawImage(bitmap, 0, 0);
-	}
+			ctx.drawImage(bitmap, 0, 0);
+			window.requestAnimationFrame(loop);
+		};
+		window.requestAnimationFrame(loop);
+	});
 }
 
 async function introduction(ctx) {
@@ -452,29 +456,33 @@ async function main() {
 		};
 		let last_frame_time = null;
 		let accumulator = 0;
-		game: while (true) {
-			const now = await new Promise(requestAnimationFrame);
-			if (last_frame_time !== null) {
-				accumulator += now - last_frame_time;
-			}
-			last_frame_time = now;
+		const result = await new Promise((resolve) => {
+			const loop = (now) => {
+				if (last_frame_time !== null) {
+					accumulator += now - last_frame_time;
+				}
+				last_frame_time = now;
 
-			while (accumulator >= duration) {
-				accumulator -= duration;
+				while (accumulator >= duration) {
+					accumulator -= duration;
 
-				ctx.fillStyle = "white";
-				ctx.fillRect(0, 0, x_dim, y_dim);
-				const result = frame(ctx, st, events, textures);
-				events = [];
-				if (result === 'loss') {
-					await loss(ctx);
-					break game;
+					ctx.fillStyle = "white";
+					ctx.fillRect(0, 0, x_dim, y_dim);
+					const result = frame(ctx, st, events, textures);
+					events = [];
+					if (result === 'loss' || result === 'win') {
+						resolve(result);
+						return;
+					}
 				}
-				if (result === 'win') {
-					await victory(ctx);
-					break game;
-				}
-			}
+				window.requestAnimationFrame(loop);
+			};
+			window.requestAnimationFrame(loop);
+		});
+		if (result === 'loss') {
+			await loss(ctx);
+		} else if (result === 'win') {
+			await victory(ctx);
 		}
 	}
 }