guild banner updates

Author: MathMan05

src/webpage/contextmenu.ts

@@ -153,7 +153,7 @@ class Contextmenu<x, y> {
 	addSeperator(visable?: (obj1: x, obj2: y) => boolean) {
 		this.buttons.push(new Seperator(visable));
 	}
-	private makemenu(x: number, y: number, addinfo: x, other: y) {
+	makemenu(x: number, y: number, addinfo: x, other: y) {
 		const div = document.createElement("div");
 		div.classList.add("contextmenu", "flexttb");
 

src/webpage/guild.ts

@@ -13,6 +13,7 @@ import {
 	invitejson,
 	rolesjson,
 	emojipjson,
+	extendedProperties,
 } from "./jsontypes.js";
 import {User} from "./user.js";
 import {I18n} from "./i18n.js";
@@ -433,6 +434,17 @@ class Guild extends SnowFlake {
 		this.roleUpdate(role, -1);
 	}
 	onEmojiUpdate = (_: emojipjson[]) => {};
+	update(json: extendedProperties) {
+		this.large = json.large;
+		this.member_count = json.member_count;
+		this.emojis = json.emojis;
+		this.headers = this.owner.headers;
+		this.channels = [];
+
+		this.roles = [];
+		this.roleids = new Map();
+		this.banner = json.banner;
+	}
 	constructor(json: guildjson | -1, owner: Localuser, member: memberjson | User | null) {
 		if (json === -1 || member === null) {
 			super("@me");
@@ -442,22 +454,28 @@ class Guild extends SnowFlake {
 			console.log(json.stickers, ":3");
 		}
 		super(json.id);
+		this.owner = owner;
 		this.large = json.large;
 		this.member_count = json.member_count;
 		this.emojis = json.emojis;
-		this.owner = owner;
 		this.headers = this.owner.headers;
 		this.channels = [];
-		this.properties = json.properties;
+		if (json.properties) {
+			this.properties = json.properties;
+		}
 		this.roles = [];
 		this.roleids = new Map();
+		this.banner = json.properties.banner;
+		if (json.roles) {
+			for (const roley of json.roles) {
+				const roleh = new Role(roley, this);
+				this.roles.push(roleh);
+				this.roleids.set(roleh.id, roleh);
+			}
+		}
 
 		this.message_notifications = 0;
-		for (const roley of json.roles) {
-			const roleh = new Role(roley, this);
-			this.roles.push(roleh);
-			this.roleids.set(roleh.id, roleh);
-		}
+
 		this.sortRoles();
 		if (member instanceof User) {
 			console.warn(member);

src/webpage/jsontypes.ts

@@ -241,6 +241,10 @@ type guildjson = {
 	guild_hashes: {};
 	joined_at: string;
 };
+type extendedProperties = guildjson["properties"] & {
+	emojis: emojipjson[];
+	large: boolean;
+};
 type startTypingjson = {
 	d: {
 		channel_id: string;
@@ -579,6 +583,12 @@ type wsjson =
 				emojis: emojipjson[];
 			};
 			s: number;
+	  }
+	| {
+			op: 0;
+			t: "GUILD_UPDATE";
+			d: extendedProperties;
+			s: number;
 	  };
 
 type memberChunk = {
@@ -749,4 +759,5 @@ export {
 	sdpback,
 	opRTC12,
 	emojipjson,
+	extendedProperties,
 };

src/webpage/localuser.ts

@@ -478,6 +478,13 @@ class Localuser {
 					}
 					break;
 				}
+				case "GUILD_UPDATE": {
+					const guildy = this.guildids.get(temp.d.id);
+					if (guildy) {
+						guildy.update(temp.d);
+					}
+					break;
+				}
 				case "GUILD_CREATE":
 					(async () => {
 						const guildy = new Guild(temp.d, this, this.user);
@@ -887,6 +894,34 @@ class Localuser {
 		}
 		this.lookingguild = guild;
 		(document.getElementById("serverName") as HTMLElement).textContent = guild.properties.name;
+		const banner = document.getElementById("servertd");
+		console.log(guild.banner, banner);
+		if (banner) {
+			if (guild.banner) {
+				//https://cdn.discordapp.com/banners/677271830838640680/fab8570de5bb51365ba8f36d7d3627ae.webp?size=240
+				banner.style.setProperty(
+					"background-image",
+					`linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%), url(${this.info.cdn}/banners/${guild.id}/${guild.banner})`,
+				);
+				banner.classList.add("Banner");
+				//background-image:
+			} else {
+				banner.style.removeProperty("background-image");
+				banner.classList.remove("Banner");
+			}
+			if (guild.id !== "@me") {
+				banner.style.setProperty("cursor", `pointer`);
+				banner.onclick = (e) => {
+					e.preventDefault();
+					e.stopImmediatePropagation();
+					const box = banner.getBoundingClientRect();
+					Guild.contextmenu.makemenu(box.left + 16, box.bottom + 5, guild, undefined);
+				};
+			} else {
+				banner.style.removeProperty("cursor");
+				banner.onclick = () => {};
+			}
+		}
 		//console.log(this.guildids,id)
 		const channels = document.getElementById("channels") as HTMLDivElement;
 		channels.innerHTML = "";

src/webpage/style.css

@@ -725,6 +725,7 @@ span.instanceStatus {
 	background: var(--channels-bg);
 	user-select: none;
 }
+
 .header {
 	flex: none;
 	height: 48px;
@@ -734,8 +735,14 @@ span.instanceStatus {
 	align-items: center;
 	user-select: none;
 }
+.Banner {
+	height: 100px;
+	align-items: start;
+	padding-top: 10px;
+	background-size: cover;
+}
 #serverName {
-	font-size: 1.15rem;
+	font-size: 1rem;
 }
 #channels {
 	flex: 1;