diff --git a/msagent.js/src/agent.ts b/msagent.js/src/agent.ts index 062bc1d..0aa54e3 100644 --- a/msagent.js/src/agent.ts +++ b/msagent.js/src/agent.ts @@ -432,4 +432,8 @@ export class Agent { if (remove) this.remove(); else this.cnv.style.display = 'none'; } + + listAnimations() { + return this.data.animInfo.map((n) => n.name); + } } diff --git a/webapp/src/css/style.scss b/webapp/src/css/style.scss index 2876fbc..eb75ebc 100644 --- a/webapp/src/css/style.scss +++ b/webapp/src/css/style.scss @@ -268,3 +268,15 @@ html { button { user-select: none; } + + +#animWindow { + #animSelectContainer { + display: flex; + flex-direction: row; + #animPlayBtn { + align-self: flex-end; + margin-left: auto; + } + } +} \ No newline at end of file diff --git a/webapp/src/html/index.html b/webapp/src/html/index.html index 5d7b7bd..715b4fb 100644 --- a/webapp/src/html/index.html +++ b/webapp/src/html/index.html @@ -120,7 +120,21 @@ - +
+
+
Animations
+
+ +
+
+
+
+
+ + +
+
+
diff --git a/webapp/src/ts/client.ts b/webapp/src/ts/client.ts index 7479442..ae44441 100644 --- a/webapp/src/ts/client.ts +++ b/webapp/src/ts/client.ts @@ -32,6 +32,7 @@ export interface MSAgentClientEvents { adduser: (user: User) => void; remuser: (user: User) => void; chat: (user: User, msg: string) => void; + animwindow: (animations: string[]) => void; } export interface APIAgentInfo { @@ -218,6 +219,13 @@ export class MSAgentClient { setContextMenu(user: User) { let ctx = user.agent.getContextMenu(); ctx.clearItems(); + // Animations + if (user.username === this.username) { + let anims = new ContextMenuItem('Animations', () => { + this.events.emit('animwindow', user.agent.listAnimations()); + }); + ctx.addItem(anims); + } // Mute let _user = user; let mute = new ContextMenuItem('Mute', () => { diff --git a/webapp/src/ts/main.ts b/webapp/src/ts/main.ts index 708c40c..75a3050 100644 --- a/webapp/src/ts/main.ts +++ b/webapp/src/ts/main.ts @@ -21,7 +21,10 @@ const elements = { imageUploadBtn: document.getElementById('imageUploadBtn') as HTMLButtonElement, chatSendBtn: document.getElementById('chatSendBtn') as HTMLButtonElement, - roomSettingsWindow: document.getElementById('roomSettingsWindow') as HTMLDivElement + roomSettingsWindow: document.getElementById('roomSettingsWindow') as HTMLDivElement, + animWindow: document.getElementById('animWindow') as HTMLDivElement, + animSelect: document.getElementById('animSelect') as HTMLSelectElement, + animPlayBtn: document.getElementById('animPlayBtn') as HTMLButtonElement, }; let Room: MSAgentClient; @@ -39,6 +42,16 @@ function roomInit() { elements.logonView.style.display = 'block'; elements.chatView.style.display = 'none'; }); + Room.on('animwindow', (animations) => { + elements.animSelect.innerHTML = ''; + for (let anim of animations) { + let option = document.createElement('option'); + option.innerText = anim; + option.value = anim; + elements.animSelect.appendChild(option); + } + animWindow.show(); + }); } let motdWindow = new MSWindow(elements.motdWindow, { @@ -57,6 +70,16 @@ let roomSettingsWindow = new MSWindow(elements.roomSettingsWindow, { startPosition: MSWindowStartPosition.Center }); +let animWindow = new MSWindow(elements.animWindow, { + minWidth: 200, + minHeight: 90, + startPosition: MSWindowStartPosition.Center +}); + +elements.animPlayBtn.addEventListener('click', () => { + Room?.animation(elements.animSelect.value); +}); + logonWindow.show(); // roomSettingsWindow.show();