add the little triangle you get when a message is over

4 files changed, 27 insertions, 6 deletions

diff --git a/webAO/client.html b/webAO/client.html
index c033f24..2be5ea4 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -55,8 +55,8 @@
 					<div id="client_name"></div>
 					<div id="client_chat">
 						<p id="client_inner_chat"></p>
-					</div>
-					<div id="client_chatwaiting">&#9654;</div>
+						<div id="client_chatwaiting">&#9654;</div>
+					</div>					
 				</div>
 				<img id="client_testimony" alt="Testimony overlay" style="display: none;" onerror="imgError(this);">
 			</div>
diff --git a/webAO/client.js b/webAO/client.js
index aa08e75..66fdfbc 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1246,6 +1246,7 @@ class Viewport {
 		const nameBox = document.getElementById("client_name");
 		const chatBox = document.getElementById("client_chat");
 		const chatContainerBox = document.getElementById("client_chatcontainer");
+		const waitingBox = document.getElementById("client_chatwaiting");
 		const eviBox = document.getElementById("client_evi");
 		const shoutSprite = document.getElementById("client_shout");
 		const chatBoxInner = document.getElementById("client_inner_chat");
@@ -1305,6 +1306,7 @@ class Viewport {
 		//Set the nameplate after it (might) have been hidden
 		nameBox.innerText = this.chatmsg.nameplate;
 		//Clear out the last message
+		waitingBox.innerText = "";
 		chatBoxInner.innerText = this.textnow;
 	}
 
@@ -1469,6 +1471,7 @@ class Viewport {
 		const nameBox = document.getElementById("client_name");
 		const chatBox = document.getElementById("client_chat");
 		const chatContainerBox = document.getElementById("client_chatcontainer");
+		const waitingBox = document.getElementById("client_chatwaiting");
 		const charSprite = document.getElementById("client_char");
 		const pairSprite = document.getElementById("client_pair_char");
 		const eviBox = document.getElementById("client_evi");
@@ -1602,6 +1605,7 @@ class Viewport {
 				if (this.textnow === this.chatmsg.content) {
 					charSprite.src = AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/" + encodeURI(this.chatmsg.silent.toLowerCase()) + ".gif";
 					charSprite.style.display = "";
+					waitingBox.innerHTML = "&#9654;";
 					this._animating = false;
 					clearTimeout(this.updater);
 				}
@@ -1620,7 +1624,8 @@ class Viewport {
 						this.textTimer = 0;
 						this._animating = false;
 						charSprite.src = AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/" + encodeURI(this.chatmsg.silent.toLowerCase()) + ".gif";
-            charSprite.style.display = "";
+						charSprite.style.display = "";
+						waitingBox.innerHTML = "&#9654;";
 						clearTimeout(this.updater);
 					}
 				}
diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css
index 3ac5bfe..936caec 100644
--- a/webAO/styles/classic.css
+++ b/webAO/styles/classic.css
@@ -14,6 +14,8 @@ img {
 	display: none;
 	padding: 0px 6px;
 	height: 7%;
+	min-width: 3em;
+	text-justify: distribute;
 	border: 1px solid rgba(255, 255, 255, 0.7);
 	background: rgba(73, 0, 254, 0.5);
 	top: 63%;
@@ -25,10 +27,10 @@ img {
 	font-size: 1em;
 	display: none;
 	width: 98%;
-	width: calc(100% - 4px);
+	width: calc(100% - 2px);
 	margin: auto;
 	height: 30%;
-	border: 2px solid rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(255, 255, 255, 0.7);
 	background-color: rgba(0, 0, 0, 0.5);
 	top: 70%;
 	border-radius: 4px;
@@ -46,6 +48,21 @@ img {
 	color: white;
 }
 
+#client_chatwaiting {
+	display: block;
+	right: 0px;
+	bottom: 0.25em;
+	width: 1em;
+	position: absolute;
+	animation: idling 0.4s linear infinite;
+}
+
+@keyframes idling {
+	0%   {right: -2px;}
+  	50%  {right: 2px;}
+  	100% {right: -2px;}
+  }
+
 #evi_name {
 	background-color: #393939;
 	color: #ffad18;
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index e736e16..9997e99 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -171,7 +171,6 @@
 }
 
 #client_bench {
-	display: none;
 	position: absolute;
 	height: auto;
 	width: 100%;