QoL features & fixes

Author: DEVTomatoCake

TODO.md

@@ -5,11 +5,14 @@ List of properties which should be editable somewhere, and handled if necessary
 | Status | Meaning
 | --- | ---
 | ❌ | Not implemented but planned
+| 🟨 | Partly implemented
 | ✅ | Implemented
-| ⛔ | Not planned
+| ⛔ | Not planned or impossible due to missing information
 
 ## User data
 
+`/users/@me/`
+
 | Status | Field | Type | Notes
 | --- | --- | --- | ---
 | ✅ | username | string - Constraints: 1 to 100 chars
@@ -23,34 +26,38 @@ List of properties which should be editable somewhere, and handled if necessary
 
 ## User profile
 
+`/users/{id}/profile/`
+
 | Status | Field | Type | Notes
 | --- | --- | --- | ---
 | ✅ | bio | string
 | ❌ | accent_color | integer┃null
 | ❌ | banner | string┃null
 | ✅ | pronouns | string
-| ❌ | theme_colors | [{missing-type-info}] - Min Items: 2 Max Items: 2
+| ❌ | theme_colors | [integer, integer]
 
 ## User settings
 
+`/users/@me/settings/`
+
 | Status | Field | Type | Notes
 | --- | --- | --- | ---
-| ❌ | status | enum - Allowed: dnd┃idle┃invisible┃offline┃online
+| ❌ | status | string - one of: dnd┃idle┃invisible┃online
 | ❌ | afk_timeout | integer
 | ⛔ | allow_accessibility_detection | boolean | What's this for?
 | ❌ | animate_emoji | boolean
 | ❌ | animate_stickers | integer
 | ⛔ | contact_sync_enabled | boolean | Not possible in Web
 | ❌ | convert_emoticons | boolean
-| ❌ | custom_status | object - ANY OF: 1: object: emoji_id: string, emoji_name: string, expires_at: integer, text: string; 2: null
-| ❌ | default_guilds_restricted | boolean
+| ❌ | custom_status | object - one of: 1: object: emoji_id: string, emoji_name: string, expires_at: integer, text: string; 2: null
+| ⛔ | default_guilds_restricted | boolean | What's this for?
 | ⛔ | detect_platform_accounts | boolean | What's this for?
 | ❌ | developer_mode | boolean
 | ⛔ | disable_games_tab | boolean | No use in SB
 | ❌ | enable_tts_command | boolean
 | ❌ | explicit_content_filter | integer
 | ⛔ | friend_discovery_flags | integer | What's this for?
-| ❌ | friend_source_flags | object - all*: boolean
+| ⛔ | friend_source_flags | object - all*: boolean | What's this for?
 | ⛔ | gateway_connected | boolean | What's this for?
 | ❌ | gif_auto_play | boolean
 | ❌ | guild_folders | array of object: color*: integer, guild_ids*: [string], id*: integer, name*: string, guild_positions: [string]
@@ -61,25 +68,39 @@ List of properties which should be editable somewhere, and handled if necessary
 | ⛔ | native_phone_integration_enabled | boolean | What's this for?
 | ❌ | render_embeds | boolean
 | ❌ | render_reactions | boolean
-| ❌ | restricted_guilds | [string]
+| ⛔ | restricted_guilds | [string] | What's this for?
 | ⛔ | show_current_game | boolean | Not possible in Web
 | ⛔ | stream_notifications_enabled | boolean | What's this for?
-| ✅ | theme | enum - Allowed: dark┃light
+| ✅ | theme | string - one of: dark┃light
 | ❌ | timezone_offset | integer
 | ❌ | view_nsfw_guilds | boolean
 
 ## Guild settings
 
+`/users/@me/guilds/{guild_id}/settings/`
+
 | Status | Field | Type | Notes
 | --- | --- | --- | ---
 | ❌ | channel_overrides | object: [any-key]: object: message_notifications*: integer; mute_config*: object: end_time*: integer, selected_time_window*: integer, muted*: boolean, channel_id*: string┃null
 | ❌ | message_notifications | integer
 | ❌ | mobile_push | boolean
-| ❌ | mute_config | object - ANY OF: 1: object: end_time*: integer, selected_time_window*: integer; 2: null
+| ❌ | mute_config | object - one of: 1: object: end_time*: integer, selected_time_window*: integer; 2: null
 | ❌ | muted | boolean
 | ❌ | suppress_everyone | boolean
 | ❌ | suppress_roles | boolean
-| ❌ | flags | integer | Which flags?
+| ⛔ | flags | integer | Which flags?
 | ❌ | mute_scheduled_events | boolean
 | ❌ | hide_muted_channels | boolean
-| ❌ | notify_highlights | number
+| ⛔ | notify_highlights | number | What's this for?
+
+## Guild member settings
+
+`/guilds/{guild_id}/profile/{member_id}`
+
+| Status | Field | Type | Notes
+| --- | --- | --- | ---
+| ❌ | banner | string┃null
+| ❌ | nick | string
+| ❌ | bio | string
+| ❌ | pronouns | string
+| ❌ | theme_colors | [integer, integer]

index.js

@@ -56,22 +56,29 @@ app.use("/", (req, res) => {
 	const reqPath = req.path.replace(/[^\w.-]/g, "")
 	if (reqPath.length == 0) return res.sendFile(path.join(__dirname, "webpage", "index.html"))
 
-	if (fs.existsSync(path.join(__dirname, "webpage", reqPath))) res.sendFile(path.join(__dirname, "webpage", reqPath))
-	else if (fs.existsSync(path.join(__dirname, "webpage", "font", reqPath.replace("font", "")))) {
-		res.sendFile(path.join(__dirname, "webpage", "font", reqPath.replace("font", "")), {
+	if (reqPath.startsWith("channels") || reqPath.startsWith("invite")) return res.sendFile(path.join(__dirname, "webpage", "index.html"))
+	if (reqPath == "login") return res.sendFile(path.join(__dirname, "webpage", "login.html"))
+	if (reqPath == "register") return res.sendFile(path.join(__dirname, "webpage", "register.html"))
+
+	if (!/^[\w-]+\.\w+$/.test(reqPath)) {
+		res.status(400).send("Invalid path!")
+		return console.warn("Invalid path requested: " + reqPath + " | " + req.originalUrl)
+	}
+
+	if (fs.existsSync(path.join(__dirname, "webpage", reqPath))) return res.sendFile(path.join(__dirname, "webpage", reqPath))
+	if (fs.existsSync(path.join(__dirname, "webpage", "font", reqPath.replace("font", ""))))
+		return res.sendFile(path.join(__dirname, "webpage", "font", reqPath.replace("font", "")), {
 			maxAge: 1000 * 60 * 60 * 24 * 90
 		})
-	} else if (fs.existsSync(path.join(__dirname, "webpage", "icons", "bootstrap", reqPath.replace("iconsbootstrap", "")))) {
-		res.sendFile(path.join(__dirname, "webpage", "icons", "bootstrap", reqPath.replace("iconsbootstrap", "")), {
+	if (fs.existsSync(path.join(__dirname, "webpage", "icons", "bootstrap", reqPath.replace("iconsbootstrap", ""))))
+		return res.sendFile(path.join(__dirname, "webpage", "icons", "bootstrap", reqPath.replace("iconsbootstrap", "")), {
 			maxAge: 1000 * 60 * 60 * 24
 		})
-	} else if (fs.existsSync(path.join(__dirname, "webpage", "icons", reqPath.replace("icons", "")))) {
-		res.sendFile(path.join(__dirname, "webpage", "icons", reqPath.replace("icons", "")), {
+	if (fs.existsSync(path.join(__dirname, "webpage", "icons", reqPath.replace("icons", ""))))
+		return res.sendFile(path.join(__dirname, "webpage", "icons", reqPath.replace("icons", "")), {
 			maxAge: 1000 * 60 * 60 * 24
 		})
-	} else if (fs.existsSync(path.join(__dirname, "webpage", reqPath + ".html"))) res.sendFile(path.join(__dirname, "webpage", reqPath + ".html"))
-	else if (/^connections[a-z]{1,30}callback$/.test(reqPath)) res.sendFile(path.join(__dirname, "webpage", "connections.html"))
-	else res.sendFile(path.join(__dirname, "webpage", "index.html"))
+	if (/^connections[a-z]{1,30}callback$/.test(reqPath)) return res.sendFile(path.join(__dirname, "webpage", "connections.html"))
 })
 
 const PORT = process.env.PORT || 25512

package.json

@@ -1,10 +1,10 @@
 {
   "name": "jankclient",
   "version": "0.1.0",
-  "description": "A SpaceBar Client written in JS, HTML and CSS. To run, clone the repo and do either `node index.js` or `bun index.js`. To access Jank Client after init simply go to http://localhost:8080/login and login with your username and password.",
+  "description": "A SpaceBar Client written in JS, HTML and CSS. To run, clone the repo and run `npm start`. To access Jank Client after init simply go to http://localhost:8080/login and login with your username and password.",
   "main": "index.js",
   "scripts": {
-    "start": "node index.js",
+    "start": "node .",
     "minify": "node minify.js",
     "taiko": "taiko",
     "test": "taiko test.js",

webpage/guild.js

@@ -168,8 +168,8 @@ class Guild {
 				break
 			}
 		}
-		if (!html) return
 
+		if (!html) return
 		if (read) html.children[0].classList.remove("notiunread")
 		else html.children[0].classList.add("notiunread")
 	}
@@ -376,29 +376,29 @@ class Guild {
 		noti.classList.add("unread")
 		divy.append(noti)
 		this.localuser.guildhtml.set(this.id, divy)
-		if (this.properties.icon === null) {
-			const div = document.createElement("div")
-			div.textContent = this.properties.name.split(" ").map(e => e[0]).join("")
-			div.classList.add("blankserver", "servericon")
-			divy.appendChild(div)
-			div.onclick = () => {
-				this.loadGuild()
-				this.loadChannel()
-			}
-			Guild.contextmenu.bind(div, this)
-		} else {
+		if (this.properties.icon) {
 			const img = document.createElement("img")
 			img.classList.add("pfp", "servericon")
 			img.crossOrigin = "anonymous"
 			img.src = instance.cdn + "/icons/" + this.properties.id + "/" + this.properties.icon + ".png?size=48"
 			img.alt = "Server: " + this.properties.name
 			divy.appendChild(img)
 
-			img.onclick = () => {
+			img.addEventListener("click", () => {
 				this.loadGuild()
 				this.loadChannel()
-			}
+			})
 			Guild.contextmenu.bind(img, this)
+		} else {
+			const div = document.createElement("div")
+			div.textContent = this.properties.name.replace(/'s /g, " ").replace(/\w+/g, word => word[0]).replace(/\s/g, "")
+			div.classList.add("blankserver", "servericon")
+			divy.appendChild(div)
+			div.addEventListener("click", () => {
+				this.loadGuild()
+				this.loadChannel()
+			})
+			Guild.contextmenu.bind(div, this)
 		}
 		return divy
 	}

webpage/index.js

@@ -77,6 +77,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 				users.currentuser = thing.uid
 				localStorage.setItem("userinfos", JSON.stringify(users))
 				thisuser.initwebsocket().then(() => {
+					if (Contextmenu.currentmenu != "") Contextmenu.currentmenu.remove()
 					thisuser.loaduser()
 					thisuser.init()
 					document.getElementById("loading").classList.add("doneloading")

webpage/service.js

@@ -69,10 +69,12 @@ self.addEventListener("fetch", event => {
 
 			const responseFromCache = await cache.match(isindexhtml(event.request.url) ? "/index" : event.request)
 			if (responseFromCache && (
-				url.pathname == "/manifest.json" || url.pathname == "/logo.svg" ||
-				url.pathname.startsWith("/icons/") || url.pathname.startsWith("/font/")
+				url.pathname == "/emoji.bin" ||
+				url.pathname == "/favicon.ico" || url.pathname == "/logo.svg" || url.pathname == "/logo.webp" ||
+				url.pathname == "/manifest.json" ||
+				url.pathname.startsWith("/font/") || url.pathname.startsWith("/icons/")
 			)) return responseFromCache
-			else if (responseFromCache) console.log("Found a cached response for " + (isindexhtml(event.request.url) ? "/index" : event.request.url))
+			if (responseFromCache) console.log("Found a cached response for " + (isindexhtml(event.request.url) ? "/index" : url.pathname))
 
 			const responseFromNetwork = await fetch(isindexhtml(event.request.url) ? "/index" : event.request)
 			cache.put(isindexhtml(event.request.url) ? "/index" : event.request, responseFromNetwork.clone())

webpage/settings.js

@@ -474,7 +474,7 @@ class RoleList extends Buttons {
 	}
 	handleString(str) {
 		this.curid = str
-		const perm = this.permissions.find(_ => _[0].id === str)[1]
+		const perm = this.permissions.find(p => p[0].id == str)[1]
 		this.permission.deny = perm.deny
 		this.permission.allow = perm.allow
 		this.options.name = SnowFlake.getSnowFlakeFromID(str, Role).getObject().name

webpage/style.css

@@ -360,6 +360,7 @@ small.subtext {
 	vertical-align: top;
 	overflow: auto;
 	flex-shrink: 0;
+	width: 56px;
 }
 
 #servers {
@@ -1146,7 +1147,7 @@ span {
 	background: var(--profile-bg);
 	display: inline-block;
 	cursor: pointer;
-	box-shadow: 0 -.5in 1in color-mix(in srgb, var(--shadow) 42%, transparent);
+	box-shadow: 0 -.2in .8in color-mix(in srgb, var(--shadow) 60%, transparent);
 	width: 240px;
 	z-index: 3;
 	position: absolute;

webpage/user.js

@@ -47,7 +47,7 @@ class User {
 				this.bio = new MarkDown(userjson[thing], this.localuser)
 				continue
 			}
-			if (thing === "id") {
+			if (thing == "id") {
 				this.snowflake = new SnowFlake(userjson[thing], this)
 				continue
 			}
@@ -98,7 +98,7 @@ class User {
 	getpfpsrc() {
 		if (this.hypotheticalpfp) return this.avatar
 
-		if (this.avatar === null) return instance.cdn + "/embed/avatars/3.png"
+		if (this.avatar === null) return instance.cdn + "/embed/avatars/" + ((this.id >>> 22) % 6) + ".png?size=64"
 		return instance.cdn + "/avatars/" + this.id + "/" + this.avatar + ".png?size=64"
 	}
 	buildprofile(x, y, type = "author") {