Minor animation improvements

- Bind nextFrame to window.requestAnimationFrame to prevent hanging if the tab is out of focus
- Playing an animation when one is already queued/in progress now cancels the old one instead of throwing an error

msagent.js/src/agent.ts

@@ -24,6 +24,7 @@ function randint(min: number, max: number) {
 class AgentAnimationState {
 	char: Agent;
 	anim: AcsAnimation;
+	private cancelled: boolean = false;
 
 	finishCallback: () => void;
 	frameIndex = 0;
@@ -41,7 +42,14 @@ class AgentAnimationState {
 		this.nextFrame();
 	}
 
+	cancel() {
+		this.cancelled = true;
+		clearTimeout(this.interval);
+	}
+
 	nextFrame() {
+		requestAnimationFrame(() => {
+			if (this.cancelled) return;
 			this.char.drawAnimationFrame(this.anim.frameInfo[this.frameIndex++]);
 
 			if (this.frameIndex >= this.anim.frameInfo.length) {
@@ -53,6 +61,7 @@ class AgentAnimationState {
 			this.interval = setTimeout(() => {
 				this.nextFrame();
 			}, this.anim.frameInfo[this.frameIndex].frameDuration * 10);
+		});
 	}
 }
 
@@ -350,7 +359,10 @@ export class Agent {
 
 	// add promise versions later.
 	playAnimation(index: number, finishCallback: () => void) {
-		if (this.animState != null) throw new Error('Cannot play multiple animations at once.');
+		if (this.animState != null) {
+			this.animState.cancel();
+			this.animState = null;
+		}
 		let animInfo = this.data.animInfo[index];
 
 		// Create and start the animation state