computernewb/MSAgent-Chat
6
0
Fork 0
Code Issues 14 Pull requests 1 Projects Releases Packages Wiki Activity Actions

make show/hide play respective animations

Browse source
This commit is contained in:
Lily Tsuru 2024-07-09 23:31:40 -04:00
parent 36ad3fe178
commit 803c63f1f9
2 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
msagent.js/src/agent.ts
View file

@ -16,13 +16,16 @@ function dwAlign(off: number): number {
class AgentAnimationState { class AgentAnimationState {
char: Agent; char: Agent;
anim: AcsAnimation; anim: AcsAnimation;
finishCallback: () => void;
frameIndex = 0; frameIndex = 0;
interval = 0; interval = 0;
constructor(char: Agent, anim: AcsAnimation) { constructor(char: Agent, anim: AcsAnimation, finishCallback: () => void) {
this.char = char; this.char = char;
this.anim = anim; this.anim = anim;
this.finishCallback = finishCallback;
} }
// start playing the animation // start playing the animation
@ -34,7 +37,7 @@ class AgentAnimationState {
this.char.renderFrame(this.anim.frameInfo[this.frameIndex++]); this.char.renderFrame(this.anim.frameInfo[this.frameIndex++]);
if(this.frameIndex >= this.anim.frameInfo.length) { if(this.frameIndex >= this.anim.frameInfo.length) {
this.char.animationFinished(); this.finishCallback();
return; return;
} }
//@ts-ignore //@ts-ignore
@ -59,7 +62,7 @@ export class Agent {
this.cnv.width = data.characterInfo.charWidth; this.cnv.width = data.characterInfo.charWidth;
this.cnv.height = data.characterInfo.charHeight; this.cnv.height = data.characterInfo.charHeight;
this.cnv.style.position = 'fixed'; this.cnv.style.position = 'fixed';
this.hide(); this.cnv.style.display = 'none';
} }
renderFrame(frame: AcsAnimationFrameInfo) { renderFrame(frame: AcsAnimationFrameInfo) {
@ -107,21 +110,24 @@ export class Agent {
parent.appendChild(this.cnv); parent.appendChild(this.cnv);
} }
playAnimation(index: number) { // add promise versions later.
playAnimation(index: number, finishCallback: () => void) {
if(this.animState != null) if(this.animState != null)
throw new Error('Cannot play multiple animations at once.'); throw new Error('Cannot play multiple animations at once.');
let animInfo = this.data.animInfo[index]; let animInfo = this.data.animInfo[index];
console.log("playing animation", animInfo.name); // Create and start the animation state
this.animState = new AgentAnimationState(this, animInfo.animationData); this.animState = new AgentAnimationState(this, animInfo.animationData, () => {
this.animationFinished();
finishCallback();
});
this.animState.play(); this.animState.play();
} }
playAnimationByName(name: String) { playAnimationByName(name: String, finishCallback: () => void) {
let index = this.data.animInfo.findIndex((n) => n.name == name); let index = this.data.animInfo.findIndex((n) => n.name == name);
if(index !== -1) if(index !== -1)
this.playAnimation(index); this.playAnimation(index, finishCallback);
} }
animationFinished() { animationFinished() {
@ -130,12 +136,15 @@ export class Agent {
show() { show() {
this.cnv.style.display = 'block'; this.cnv.style.display = 'block';
// TODO: play the show animation this.playAnimationByName("Show", () => {});
} }
hide() { hide() {
// TODO: play the hide animation (then clear the canvas) // TODO: play the hide animation (then clear the canvas)
// (if not constructing. We can probably just duplicate this one line and put it in the constructor tbh) // (if not constructing. We can probably just duplicate this one line and put it in the constructor tbh)
this.cnv.style.display = 'none';
this.playAnimationByName("Hide", () => {
this.cnv.style.display = 'none';
});
} }
} }

2
webapp/src/ts/testbed.ts
View file

@ -14,8 +14,6 @@ input.addEventListener("change", async () => {
agent.addToDom(document.body); agent.addToDom(document.body);
agent.show(); agent.show();
agent.playAnimationByName("Show");
console.log("parsed character"); console.log("parsed character");
}) })