diff --git a/.dist/localuser.js b/.dist/localuser.js index d09e961..ff6d7b3 100644 --- a/.dist/localuser.js +++ b/.dist/localuser.js @@ -30,7 +30,7 @@ class Localuser { lookingguild; guildhtml; ws; - typing; + typing = new Map(); connectionSucceed = 0; errorBackoff = 0; mfa_enabled; @@ -89,7 +89,6 @@ class Localuser { const guildid = guild.snowflake; this.guildids.get(guildid.id).channelids[thing.channel_id].readStateInfo(thing); } - this.typing = []; } outoffocus() { document.getElementById("servers").innerHTML = ""; @@ -583,11 +582,12 @@ class Localuser { thing.unreads(html); } } - typingStart(typing) { - if (this.channelfocus.snowflake === typing.d.channel_id) { - const memb = typing.d.member; + async typingStart(typing) { + 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; } @@ -607,7 +607,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(); @@ -636,18 +636,25 @@ class Localuser { rendertyping() { 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) { diff --git a/.dist/member.js b/.dist/member.js index b050cee..2615097 100644 --- a/.dist/member.js +++ b/.dist/member.js @@ -8,6 +8,7 @@ class Member { user; roles = []; id; + nick; static contextmenu = new Contextmenu("User Menu"); static setUpContextMenu() { this.contextmenu.addbutton("Copy user id", function () { diff --git a/webpage/index.html b/webpage/index.html index d307620..f1cc77a 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -68,9 +68,9 @@ diff --git a/webpage/localuser.ts b/webpage/localuser.ts index 4434502..22e48a0 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -34,7 +34,7 @@ class Localuser{ lookingguild:Guild; guildhtml:Map; ws:WebSocket; - typing:[string,number][]; + typing:Map=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{ + 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){ diff --git a/webpage/member.ts b/webpage/member.ts index 549f4cd..584ead3 100644 --- a/webpage/member.ts +++ b/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(){ diff --git a/webpage/style.css b/webpage/style.css index 8f9ee8c..34d361c 100644 --- a/webpage/style.css +++ b/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 {