fixed the typing indicator

webpage/index.html

@@ -68,9 +68,9 @@
                 <div id="typing" class="hidden">
                     <p id="typingtext">typing</p>
                     <div class="loading-indicator">
-                        <span class="dot">.</span>
-                        <span class="dot">.</span>
-                        <span class="dot">.</span>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
                     </div>
                 </div>
             </div>

webpage/localuser.ts

@@ -34,7 +34,7 @@ class Localuser{
     lookingguild:Guild;
     guildhtml:Map<string, HTMLDivElement>;
     ws:WebSocket;
-    typing:[string,number][];
+    typing:Map<Member,number>=new Map();
     connectionSucceed=0;
     errorBackoff=0;
     mfa_enabled:boolean;
@@ -95,7 +95,6 @@ class Localuser{
             const guildid=guild.snowflake;
             this.guildids.get(guildid.id).channelids[thing.channel_id].readStateInfo(thing);
         }
-        this.typing=[];
     }
     outoffocus():void{
         document.getElementById("servers").innerHTML="";
@@ -600,11 +599,12 @@ class Localuser{
             thing.unreads(html);
         }
     }
-    typingStart(typing):void{
-        if(this.channelfocus.snowflake===typing.d.channel_id){
-            const memb=typing.d.member;
+    async typingStart(typing):Promise<void>{
+        if(this.channelfocus.id===typing.d.channel_id){
+            const guild=SnowFlake.getSnowFlakeFromID(typing.d.guild_id,Guild).getObject()
+            const memb=await Member.new(typing.d.member,guild);
             let name;
-            if(memb.id===this.user.snowflake){
+            if(memb.id===this.user.id){
                 console.log("you is typing")
                 return;
             }
@@ -623,7 +623,7 @@ class Localuser{
                 }
             }
             if(!already){
-                this.typing.push([name,new Date().getTime()]);
+                this.typing.set(memb,new Date().getTime());
             }
             setTimeout(this.rendertyping.bind(this),10000);
             this.rendertyping();
@@ -653,18 +653,23 @@ class Localuser{
     rendertyping():void{
         const typingtext=document.getElementById("typing")
         let build="";
-        const array2=[];
         let showing=false;
         let i=0;
-        for(const thing of this.typing){
-            i++;
-            if(thing[1]>new Date().getTime()-5000){
-                build+=thing[0];
-                array2.push(thing);
-                showing=true;
-                if(i!==this.typing.length){
-                    build+=",";
+        const curtime=new Date().getTime()-5000;
+        for(const thing of this.typing.keys()){
+            if(this.typing.get(thing)>curtime){
+                if(i!==0){
+                    build+=", ";
                 }
+                i++;
+                if(thing.nick){
+                    build+=thing.nick;
+                }else{
+                    build+=thing.user.username;
+                }
+                showing=true;
+            }else{
+                this.typing.delete(thing);
             }
         }
         if(i>1){

webpage/member.ts

@@ -11,6 +11,7 @@ class Member{
     user:User;
     roles:Role[]=[];
     id:string;
+    nick:string;
     static contextmenu:Contextmenu=new Contextmenu("User Menu");
     static setUpContextMenu(){
         this.contextmenu.addbutton("Copy user id",function(){

webpage/style.css

@@ -387,13 +387,12 @@ div {
 	box-sizing: border-box;
 	color: var(--primary-text);
 	background: var(--textarea-bg);
-	/* border: 1px solid var(--black); */
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	align-items: stretch;
-	margin: .0in .1in .15in .1in;
+	margin: .0in .1in .25in .1in;
 	box-shadow: 0 .01in .05in black;
 }
 #typebox:focus{
@@ -445,14 +444,13 @@ p {
 #typing {
 	display: flex;
 	position: absolute;
-	top: 0;
-	right: 4px;
-	background-color: var(--typing-bg);
+	bottom: 0;
+	left: 0;
 	width: fit-content;
-	transform: translateY(-100%);
-	border-radius: 5px 5px 0 0;
-	padding: 4px;
-	transition: transform .5s ease, opacity .1s ease;
+	:;
+	margin-left: .1in;
+	margin-bottom: .03in;
+	transition: opacity .3s;
 	opacity: 1;
 }
 
@@ -471,11 +469,17 @@ hr {
 	font-size: 24px;
 	display: flex;
 	gap: 0;
+	align-items: center;
 }
 
 .dot {
 	animation: fade 1s infinite;
 	line-height: 14px;
+	width: 6px;
+	height: 6px;
+	background: var(--primary-text);
+	border-radius: 1in;
+	margin-right: .03in;
 }
 
 .dot:nth-child(1) {
@@ -492,7 +496,7 @@ hr {
 
 #typing p {
 	margin: 0;
-	padding-right: 5px;
+	padding-right: .03in;
 }
 
 #typing.hidden {
@@ -500,7 +504,6 @@ hr {
 	/* Move down out of view */
 	opacity: 0;
 	/* Fade out */
-	display: none;
 }
 
 @keyframes fade {