From 54f06dea104eceadab838b6ebc2ca0d1ed05221b Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Sat, 21 Dec 2024 15:38:41 -0600 Subject: [PATCH] initial badge work --- src/webpage/Dbadges.ts | 246 +++++++++++++++++++++++++++++++++++++++ src/webpage/localuser.ts | 6 +- src/webpage/style.css | 14 ++- src/webpage/user.ts | 97 ++++++++++++--- translations/en.json | 29 +++++ 5 files changed, 374 insertions(+), 18 deletions(-) create mode 100644 src/webpage/Dbadges.ts diff --git a/src/webpage/Dbadges.ts b/src/webpage/Dbadges.ts new file mode 100644 index 0000000..50b3964 --- /dev/null +++ b/src/webpage/Dbadges.ts @@ -0,0 +1,246 @@ +const badgeArr = [ + [ + "staff", + { + id: "staff", + description: "staff", + translate: true, + icon: "5e74e9b61934fc1f67c65515d1f7e60d", + }, + ], + [ + "partner", + { + id: "partner", + description: "partner", + translate: true, + icon: "3f9748e53446a137a052f3454e2de41e", + }, + ], + [ + "certified_moderator", + { + id: "certified_moderator", + description: "certified_moderator", + translate: true, + icon: "fee1624003e2fee35cb398e125dc479b", + }, + ], + [ + "hypesquad", + { + id: "hypesquad", + description: "hypesquad", + translate: true, + icon: "bf01d1073931f921909045f3a39fd264", + }, + ], + [ + "hypesquad_house_1", + { + id: "hypesquad_house_1", + description: "hypesquad_house_1", + translate: true, + icon: "8a88d63823d8a71cd5e390baa45efa02", + }, + ], + [ + "hypesquad_house_2", + { + id: "hypesquad_house_2", + description: "hypesquad_house_2", + translate: true, + icon: "011940fd013da3f7fb926e4a1cd2e618", + }, + ], + [ + "hypesquad_house_3", + { + id: "hypesquad_house_3", + description: "hypesquad_house_3", + translate: true, + icon: "3aa41de486fa12454c3761e8e223442e", + }, + ], + [ + "bug_hunter_level_1", + { + id: "bug_hunter_level_1", + description: "bug_hunter_level_1", + translate: true, + icon: "2717692c7dca7289b35297368a940dd0", + }, + ], + [ + "bug_hunter_level_2", + { + id: "bug_hunter_level_2", + description: "bug_hunter_level_2", + translate: true, + icon: "848f79194d4be5ff5f81505cbd0ce1e6", + }, + ], + [ + "active_developer", + { + id: "active_developer", + description: "active_developer", + translate: true, + icon: "6bdc42827a38498929a4920da12695d9", + }, + ], + [ + "verified_developer", + { + id: "verified_developer", + description: "verified_developer", + translate: true, + icon: "6df5892e0f35b051f8b61eace34f4967", + }, + ], + [ + "early_supporter", + { + id: "early_supporter", + description: "early_supporter", + translate: true, + icon: "7060786766c9c840eb3019e725d2b358", + }, + ], + [ + "premium", + { + id: "premium", + description: "premium", + translate: true, + icon: "2ba85e8026a8614b640c2837bcdfe21b", + }, + ], + [ + "guild_booster_lvl1", + { + id: "guild_booster_lvl1", + description: "guild_booster_lvl1", + translate: true, + icon: "51040c70d4f20a921ad6674ff86fc95c", + }, + ], + [ + "guild_booster_lvl2", + { + id: "guild_booster_lvl2", + description: "guild_booster_lvl2", + translate: true, + icon: "0e4080d1d333bc7ad29ef6528b6f2fb7", + }, + ], + [ + "guild_booster_lvl3", + { + id: "guild_booster_lvl3", + description: "guild_booster_lvl3", + translate: true, + icon: "72bed924410c304dbe3d00a6e593ff59", + }, + ], + [ + "guild_booster_lvl4", + { + id: "guild_booster_lvl4", + description: "guild_booster_lvl4", + translate: true, + icon: "df199d2050d3ed4ebf84d64ae83989f8", + }, + ], + [ + "guild_booster_lvl5", + { + id: "guild_booster_lvl5", + description: "guild_booster_lvl5", + translate: true, + icon: "996b3e870e8a22ce519b3a50e6bdd52f", + }, + ], + [ + "guild_booster_lvl6", + { + id: "guild_booster_lvl6", + description: "guild_booster_lvl6", + translate: true, + icon: "991c9f39ee33d7537d9f408c3e53141e", + }, + ], + [ + "guild_booster_lvl7", + { + id: "guild_booster_lvl7", + description: "guild_booster_lvl7", + translate: true, + icon: "cb3ae83c15e970e8f3d410bc62cb8b99", + }, + ], + [ + "guild_booster_lvl8", + { + id: "guild_booster_lvl8", + description: "guild_booster_lvl8", + translate: true, + icon: "7142225d31238f6387d9f09efaa02759", + }, + ], + [ + "guild_booster_lvl9", + { + id: "guild_booster_lvl9", + description: "guild_booster_lvl9", + translate: true, + icon: "ec92202290b48d0879b7413d2dde3bab", + }, + ], + [ + "bot_commands", + { + id: "bot_commands", + description: "bot_commands", + translate: true, + icon: "6f9e37f9029ff57aef81db857890005e", + }, + ], + [ + "automod", + { + id: "automod", + description: "automod", + translate: true, + icon: "f2459b691ac7453ed6039bbcfaccbfcd", + }, + ], + [ + "application_guild_subscription", + { + id: "application_guild_subscription", + description: "application_guild_subscription", + translate: true, + icon: "d2010c413a8da2208b7e4f35bd8cd4ac", + }, + ], + [ + "legacy_username", + { + id: "legacy_username", + description: "legacy_username", + translate: true, + icon: "6de6d34650760ba5551a79732e98ed60", + }, + ], + [ + "quest_completed", + { + id: "quest_completed", + description: "quest_completed", + translate: true, + icon: "7d9ae358c8c5e118768335dbe68b4fb8", + }, + ], +]; +export {badgeArr}; diff --git a/src/webpage/localuser.ts b/src/webpage/localuser.ts index d84dc8a..b68dc99 100644 --- a/src/webpage/localuser.ts +++ b/src/webpage/localuser.ts @@ -28,11 +28,15 @@ import {I18n, langmap} from "./i18n.js"; import {Emoji} from "./emoji.js"; import {Play} from "./audio/play.js"; import {Message} from "./message.js"; +import {badgeArr} from "./Dbadges.js"; const wsCodesRetry = new Set([4000, 4001, 4002, 4003, 4005, 4007, 4008, 4009]); class Localuser { - badges: Map = new Map(); + badges: Map< + string, + {id: string; description: string; icon: string; link?: string; translate?: boolean} + > = new Map(badgeArr); lastSequence: number | null = null; token!: string; userinfo!: Specialuser; diff --git a/src/webpage/style.css b/src/webpage/style.css index 304bfd6..0b1134b 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -1582,6 +1582,17 @@ img.bigembedimg { width: 100%; object-fit: cover; } +.badge{ + display:inline-flex; + padding:2px; + border:solid 2px var(--black); + border-radius:8px; + img{ + object-fit: contain; + width:18px; + height:18px; + } +} .infosection { flex: 1; width: calc(100% - 16px); @@ -1600,13 +1611,14 @@ img.bigembedimg { .infosection h2, .infosection h3 { word-break: break-word; + font-size: 20px; } .infosection hr { width: 100%; } .tag { margin: 4px 0; - font-size: 0.9em; + font-size: 0.9em !important;!i;!; color: var(--secondary-text); } .pronouns { diff --git a/src/webpage/user.ts b/src/webpage/user.ts index 92c20ed..fb6e130 100644 --- a/src/webpage/user.ts +++ b/src/webpage/user.ts @@ -9,6 +9,7 @@ import {Role} from "./role.js"; import {Search} from "./search.js"; import {I18n} from "./i18n.js"; import {Direct} from "./direct.js"; +import {Hover} from "./hover.js"; class User extends SnowFlake { owner: Localuser; @@ -356,7 +357,7 @@ class User extends SnowFlake { ).then((res) => res.json()); } - async getBadge(id: string): Promise { + async getBadge(id: string) { if (this.localuser.badges.has(id)) { return this.localuser.badges.get(id); } else { @@ -508,7 +509,65 @@ class User extends SnowFlake { return `${this.info.cdn}/embed/avatars/${int}.png`; } } + async getBadges() { + let i = 0; + let flagbits = this.public_flags; + const ids = [ + "staff", + "partner", + "certified_moderator", + "hypesquad", + "hypesquad_house_1", + "hypesquad_house_2", + "hypesquad_house_3", + "bug_hunter_level_1", + "bug_hunter_level_2", + "active_developer", + "verified_developer", + "early_supporter", + "premium", + "guild_booster_lvl1", + "guild_booster_lvl2", + "guild_booster_lvl3", + "guild_booster_lvl4", + "guild_booster_lvl5", + "guild_booster_lvl6", + "guild_booster_lvl7", + "guild_booster_lvl8", + "guild_booster_lvl9", + "bot_commands", + "automod", + "application_guild_subscription", + "legacy_username", + "quest_completed", + ]; + let badgeids: string[] = []; + while (flagbits !== 0) { + if (flagbits & 1) { + badgeids.push(ids[i]); + } + flagbits >>= 1; + i++; + } + if (this.badge_ids) { + badgeids = badgeids.concat(this.badge_ids); + } + let badges: { + id: string; + description: string; + icon: string; + link?: string; + translate?: boolean; + }[] = []; + + const b = (await Promise.all(badgeids.map((_) => this.getBadge(_)))).filter( + (_) => _ !== undefined, + ); + badges = b; + + return badges; + } async buildprofile( x: number, y: number, @@ -560,23 +619,29 @@ class User extends SnowFlake { const badgediv = document.createElement("div"); badgediv.classList.add("badges"); (async () => { - if (!this.badge_ids) return; - for (const id of this.badge_ids) { - const badgejson = await this.getBadge(id); - if (badgejson) { - const badge = document.createElement(badgejson.link ? "a" : "div"); - badge.classList.add("badge"); - const img = document.createElement("img"); + const badges = await this.getBadges(); + for (const badgejson of badges) { + const badge = document.createElement(badgejson.link ? "a" : "div"); + badge.classList.add("badge"); + const img = document.createElement("img"); + if (URL.canParse(badgejson.icon)) { img.src = badgejson.icon; - badge.append(img); - const span = document.createElement("span"); - span.textContent = badgejson.description; - badge.append(span); - if (badge instanceof HTMLAnchorElement) { - badge.href = badgejson.link; - } - badgediv.append(badge); + } else { + img.src = this.info.cdn + "/badge-icons/" + badgejson.icon + ".png"; } + badge.append(img); + let hovertxt: string; + if (badgejson.translate) { + hovertxt = I18n.getTranslation("badge." + badgejson.description); + } else { + hovertxt = badgejson.description; + } + const hover = new Hover(hovertxt); + hover.addEvent(badge); + if (badgejson.link && badge instanceof HTMLAnchorElement) { + badge.href = badgejson.link; + } + badgediv.append(badge); } })(); const pfp = await this.buildstatuspfp(guild); diff --git a/translations/en.json b/translations/en.json index 578933a..8c4edb6 100644 --- a/translations/en.json +++ b/translations/en.json @@ -411,6 +411,35 @@ "ban":"Ban $1 from $2", "nick:":"Nickname:" }, + "badge":{ + "staff":"Instance staff", + "partner":"Instance partner", + "certified_moderator":"Moderator", + "hypesquad":"Copyrighted thing", + "hypesquad_house_1":"Bravery", + "hypesquad_house_2":"Brilliance", + "hypesquad_house_3":"Balance", + "bug_hunter_level_1":"Bug hunter level 1", + "bug_hunter_level_2":"Bug hunter level 2", + "active_developer":"Active Developer", + "verified_developer":"Verified Developer", + "early_supporter":"Early supporter", + "premium":"Premium", + "guild_booster_lvl1":"Boosted guild", + "guild_booster_lvl2":"Boosted guild", + "guild_booster_lvl3":"Boosted guild", + "guild_booster_lvl4":"Boosted guild", + "guild_booster_lvl5":"Boosted guild", + "guild_booster_lvl6":"Boosted guild", + "guild_booster_lvl7":"Boosted guild", + "guild_booster_lvl8":"Boosted guild", + "guild_booster_lvl9":"Boosted guild for quite a while", + "bot_commands":"Supports commands", + "automod":"Uses automod", + "application_guild_subscription":"Has premium", + "legacy_username":"Has legacy username", + "quest_completed":"did a quest" + }, "uploadFilesText":"Upload your files here!", "errorReconnect":"Unable to connect to the server, retrying in **$1** seconds...", "retrying":"Retrying...",