add animation tool menu and context menu item

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);
+	}
 }

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;
+		}
+	}
+}

webapp/src/html/index.html

@@ -120,7 +120,21 @@
 					</div>
 				</div>
 			</div>
-
+			<div class="window" id="animWindow">
+				<div class="title-bar">
+					<div class="title-bar-text">Animations</div>
+					<div class="title-bar-controls">
+						<button aria-label="Close"></button>
+					</div>
+				</div>
+				<div class="window-body">
+					<label for="animSelect">Animation:</label><br>
+					<div id="animSelectContainer">
+						<select id="animSelect"></select>
+						<button id="animPlayBtn">Play</button>	
+					</div>
+				</div>
+			</div>
 			<div id="chatBar">
 				<input type="text" id="chatInput" placeholder="Send a message" />
 				<button id="imageUploadBtn">Image</button>

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', () => {

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();