diff --git a/webpage/localuser.ts b/webpage/localuser.ts index 10751ce..13ebd16 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -381,6 +381,14 @@ class Localuser{ this.createGuild(); } + const guildDiscoveryContainer=document.createElement("div"); + guildDiscoveryContainer.textContent="🧭"; + guildDiscoveryContainer.classList.add("home","servericon"); + serverlist.appendChild(guildDiscoveryContainer); + guildDiscoveryContainer.addEventListener("click", ()=>{ + this.guildDiscovery(); + }); + } this.unreads(); } @@ -430,6 +438,66 @@ class Localuser{ ]]) full.show(); } + async guildDiscovery() { + const content=document.createElement("div"); + content.textContent="Loading..."; + const full=new Fullscreen(["html", content]); + full.show(); + + const res=await fetch(this.info.api.toString()+"/v9/discoverable-guilds?limit=16", { + headers: this.headers + }); + const json=await res.json(); + + content.innerHTML=""; + const title=document.createElement("h2"); + title.textContent="Guild discovery ("+json.total+" entries)"; + content.appendChild(title); + + const guilds=document.createElement("div"); + guilds.id="discovery-guild-content"; + + json.guilds.forEach(guild=>{ + const content=document.createElement("div"); + content.classList.add("discovery-guild"); + + if(guild.banner) { + const banner=document.createElement("img"); + banner.classList.add("banner"); + banner.crossOrigin="anonymous"; + banner.src=this.info.api.toString()+"/v9/icons/"+guild.id+"/"+guild.banner+".png?size=256"; + banner.alt=""; + content.appendChild(banner); + } + + const nameContainer=document.createElement("div"); + nameContainer.classList.add("flex"); + const img=document.createElement("img"); + img.classList.add("icon"); + img.crossOrigin="anonymous"; + img.src=this.info.api.toString()+"/v9/"+(guild.icon ? ("icons/"+guild.id+"/"+guild.icon+".png?size=48") : "embed/avatars/3.png"); + img.alt=""; + nameContainer.appendChild(img); + + const name=document.createElement("h3"); + name.textContent=guild.name; + nameContainer.appendChild(name); + content.appendChild(nameContainer); + const desc=document.createElement("p"); + desc.textContent=guild.description; + content.appendChild(desc); + + content.addEventListener("click", async ()=>{ + const joinRes=await fetch(this.info.api.toString()+"/v9/guilds/"+guild.id+"/members/@me", { + method: "PUT", + headers: this.headers + }); + if(joinRes.ok) full.hide(); + }) + guilds.appendChild(content); + }) + content.appendChild(guilds); + } messageCreate(messagep):void{ messagep.d.guild_id??="@me"; this.guildids[messagep.d.guild_id].channelids[messagep.d.channel_id].messageCreate(messagep); diff --git a/webpage/style.css b/webpage/style.css index 5d86e19..554f951 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1246,3 +1246,45 @@ span { background:green; } } + +#discovery-guild-content { + display: grid; + /*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/ + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.discovery-guild { + width: 220px; + height: 175px; + margin: 5px; + padding: 5px; + background-color: var(--discovery-bg); + border-radius: 5px; + box-shadow: 1px 1px 7px var(--primary-text); + overflow: hidden; + cursor: pointer; +} + +.discovery-guild .flex { + align-items: center; +} + +.discovery-guild img.banner { + width: 215px; +} + +.discovery-guild img.icon { + width: 48px; + height: 48px; + margin-right: 5px; + border-radius: 50%; + transition: border-radius .2s; +} +.discovery-guild img.icon:hover { + border-radius: 30%; +} + +.discovery-guild p { + overflow-wrap: anywhere; + max-width: 215px; +} diff --git a/webpage/themes.css b/webpage/themes.css index 4ae08cf..448e3db 100644 --- a/webpage/themes.css +++ b/webpage/themes.css @@ -44,6 +44,7 @@ --scrollbar-thumb-hover: #16161f; --markdown-timestamp: #2f2f33; --embed: #1a1823; + --discovery-bg: #37373b; } .WHITE-theme { color-scheme: light; @@ -87,6 +88,7 @@ --scrollbar-thumb-hover: #a5a5b8; --markdown-timestamp: #c8c8da; --embed: #f2f3f5; + --discovery-bg: #c6c6d8; } .Light-theme { color-scheme: light; @@ -139,4 +141,5 @@ --scrollbar-thumb-hover: #a7a7be; --markdown-timestamp: #c8c8da; --embed: #cdccd1; + --discovery-bg: #c6c6d8; }