msagent.js/web: Implement graceful exit

This implementation isn't perfect (sometimes an animation can get stuck playing), but it does work for the most part.

(All animation playing logic is async/promise now, which is fine because we only ever used the promise versions)

msagent.js/web/src/agent.ts

@@ -10,37 +10,78 @@ function randint(min: number, max: number) {
 	return Math.floor(Math.random() * (max - min) + min);
 }
 
+enum AnimState {
+	Idle = 0,
+	Cancel = 1,
+	Playing = 2
+}
+
+// an externally resolveable promise
+class ExternallyResolveablePromise<T> {
+	private rescb: (t: T) => void;
+	private rejectcb: (e: Error) => void;
+	public promise: Promise<T>;
+
+	constructor() {
+		let rescb;
+		let rejectcb;
+
+		this.promise = new Promise<T>((res, rej) => {
+			rescb = res;
+			rejectcb = rej;
+		});
+
+		this.rescb = rescb!;
+		this.rejectcb = rejectcb!;
+	}
+
+	resolve(t: T) {
+		this.rescb(t);
+	}
+
+	reject(e: Error) {
+		this.rejectcb(e);
+	}
+
+	raw() {
+		return this.promise;
+	}
+}
+
 // animation state (used during animation playback)
 class AgentAnimationState {
 	char: Agent;
 	anim: AcsAnimation;
-	private cancelled: boolean = false;
 
-	finishCallback: () => void;
+	private animState: AnimState;
+	private finishPromise = new ExternallyResolveablePromise<void>();
+
 	frameIndex = 0;
-
 	interval = 0;
 
-	constructor(char: Agent, anim: AcsAnimation, finishCallback: () => void) {
+	constructor(char: Agent, anim: AcsAnimation) {
 		this.char = char;
 		this.anim = anim;
-		this.finishCallback = finishCallback;
+		this.animState = AnimState.Idle;
 	}
 
 	// start playing the animation
-	play() {
+	async play() {
+		this.animState = AnimState.Playing;
 		this.nextFrame();
+		await this.finishPromise.raw();
+
+		this.animState = AnimState.Idle;
+		clearInterval(this.interval);
 	}
 
-	cancel() {
+	async cancel() {
-		this.cancelled = true;
+		this.animState = AnimState.Cancel;
-		clearTimeout(this.interval);
+		await this.finishPromise.raw();
 	}
 
 	nextFrame() {
 		requestAnimationFrame(() => {
-			if (this.cancelled) return;
-
 			// Handle animation branching, if it is required
 			let bi = this.anim.frameInfo[this.frameIndex].branchInfo;
 			if (bi.length != 0) {
@@ -85,10 +126,26 @@ class AgentAnimationState {
 				}
 			}
 
-			this.char.drawAnimationFrame(this.anim.frameInfo[this.frameIndex++]);
+			// Actually draw the requested frame
+			let fi = this.anim.frameInfo[this.frameIndex];
+
+			this.char.drawAnimationFrame(fi);
+
+			// If we've requested to cancel the animation and we're in a branch loop,
+			// then this is how we get out of it.
+			if (this.animState == AnimState.Cancel) {
+				if (fi.branchExitFrameIndex != -2) {
+					this.frameIndex = fi.branchExitFrameIndex;
+				} else {
+					this.finishPromise.resolve();
+					return;
+				}
+			} else {
+				this.frameIndex += 1;
+			}
 
 			if (this.frameIndex >= this.anim.frameInfo.length) {
-				this.finishCallback();
+				this.finishPromise.resolve();
 				return;
 			}
 
@@ -366,30 +423,32 @@ export class Agent {
 	}
 
 	// add promise versions later.
-	playAnimation(index: number, finishCallback: () => void) {
+	async playAnimation(index: number): Promise<void> {
 		if (this.animState != null) {
-			this.animState.cancel();
+			await this.animState.cancel();
-			this.animState = null;
 		}
+
 		let animInfo = this.data.animInfo[index];
 
 		// Create and start the animation state
-		this.animState = new AgentAnimationState(this, animInfo.animationData, () => {
+		this.animState = new AgentAnimationState(this, animInfo.animationData);
+		await this.animState.play();
 		this.animState = null;
-			finishCallback();
-		});
-		this.animState.play();
 	}
 
-	playAnimationByName(name: string, finishCallback: () => void) {
+	async playAnimationByName(name: string): Promise<void> {
 		let index = this.data.animInfo.findIndex((n) => n.name == name);
-		if (index !== -1) this.playAnimation(index, finishCallback);
+		if (index !== -1) return this.playAnimation(index);
+		//throw new Error(`Unknown animation \"${name}\"`);
+		return;
 	}
 
-	playAnimationByNamePromise(name: string): Promise<void> {
+	async exitAnimation(): Promise<void> {
-		return new Promise((res, rej) => {
+		if (this.animState != null) {
-			this.playAnimationByName(name, () => res());
+			await this.animState.cancel();
-		});
+			this.animState = null;
+		}
+		// (After this we need to play the restpose animation or whatever exit is applicable)
 	}
 
 	setUsername(username: string, color: string) {

webapp/src/ts/client.ts

@@ -397,7 +397,7 @@ export class MSAgentClient {
 				let animMsg = msg as MSAgentAnimationMessage;
 				let user = this.users.find((u) => u.username === animMsg.data.username);
 				if (!user || user.muted) return;
-				await user.agent.playAnimationByNamePromise(animMsg.data.anim);
+				await user.agent.playAnimationByName(animMsg.data.anim);
 				await user.doAnim('rest');
 				break;
 			}

webapp/src/ts/testbed.ts

@@ -22,7 +22,7 @@ input.addEventListener('change', async () => {
 	agent.addToDom(mount);
 
 	agent.show();
-	await agent.playAnimationByNamePromise("Show");
+	await agent.playAnimationByName("Show");
 	console.log('Agent created');
 });
 
@@ -40,7 +40,7 @@ form.addEventListener('submit', async (e) => {
 	agent.addToDom(document.body);
 
 	agent.show();
-	await agent.playAnimationByNamePromise("Show");
+	await agent.playAnimationByName("Show");
 	
 	console.log(`Loaded agent from ${url}`);
 });

webapp/src/ts/user.ts

@@ -20,7 +20,7 @@ export class User {
 	async doAnim(action: string) {
 		// @ts-ignore
 		for (let anim of this.animations[action]) {
-			await this.agent.playAnimationByNamePromise(anim);
+			await this.agent.playAnimationByName(anim);
 		}
 	}
 }