Merge pull request #22 from DEVTomatoCake/jank/guild-discovery

Add guild discovery

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

webpage/style.css

@@ -1241,4 +1241,46 @@ span {
 	button{
 		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;
+}

webpage/themes.css

@@ -43,6 +43,7 @@
 	--scrollbar-thumb: #201f29;
 	--scrollbar-thumb-hover: #16161f;
 	--embed: #1a1823;
+	--discovery-bg: #37373b;
 }
 .WHITE-theme {
 	color-scheme: light;
@@ -85,6 +86,7 @@
 	--scrollbar-thumb: #b0afc0;
 	--scrollbar-thumb-hover: #a5a5b8;
 	--embed: #f2f3f5;
+	--discovery-bg: #c6c6d8;
 }
 .Light-theme {
 	color-scheme: light;
@@ -136,4 +138,5 @@
 	--scrollbar-thumb: #bdbcca;
 	--scrollbar-thumb-hover: #a7a7be;
 	--embed: #cdccd1;
+	--discovery-bg: #c6c6d8;
 }