Make RoleMembers popup work again

[ShaneMcC]

guild.roles is no longer always populated.

Similar to #759, but also includes a class-reroll.

Used https://github.com/NyxIsBad/discordscripts/blob/master/classes_mapping.csv to figure out new class names

[ShaneMcC]

This will resolve #753 and #756

[Teteros]

Thanks, the rolemembers popup works again with this patch 👍
I can't click on any of the members and show their profiles from there though, any ideas?

edit: When it comes to this script the current popout selector returns a NodeList instead of the expected Document which can be adjusted, this brings back the role popout with the search bar which works.

--- a/Plugins/RoleMembers/RoleMembers.plugin.js
+++ b/Plugins/RoleMembers/RoleMembers.plugin.js
@@ -223,7 +225,7 @@ module.exports = !global.ZeresPluginLibrary ? Dummy : (([Plugin, Api]) => {
             let members = GuildMemberStore.getMembers(guildId);
             if (guildId != roleId) members = members.filter(m => m.roles.includes(role.id));
 
-            const popout = DOM.parseHTML(Utilities.formatString(popoutHTML, {memberCount: members.length}));
+            const popout = DOM.parseHTML(Utilities.formatString(popoutHTML, {memberCount: members.length}))[0];
             const searchInput = popout.querySelector("input");
             searchInput.addEventListener("keyup", () => {
                 const items = popout.querySelectorAll(".role-member");
@@ -240,7 +242,7 @@ module.exports = !global.ZeresPluginLibrary ? Dummy : (([Plugin, Api]) => {
             for (const member of members) {
                 const user = UserStore.getUser(member.userId);
                 const discriminator = user.discriminator != 0 ? "#" + user.discriminator : "";
-                const elem = DOM.parseHTML(Utilities.formatString(itemHTML, {username: Utils.escapeHTML(user.username), discriminator, avatar_url: ImageResolver.getUserAvatarURL(user)}));
+                const elem = DOM.parseHTML(Utilities.formatString(itemHTML, {username: Utils.escapeHTML(user.username), discriminator, avatar_url: ImageResolver.getUserAvatarURL(user)}))[0];
                 elem.addEventListener("click", () => {

but showUserPopout() from the ZeresPluginLibrary needs to be fixed for user profile popouts to work.
cc zerebos/BDPluginLibrary#218

[Teteros]

So discord updated and this PR needs to be updated again.

My attempt at updating the new class names:

--- RoleMembers.plugin.js.beforeUpdate	2024-05-21 21:58:13.566694651 +0100
+++ RoleMembers.plugin.js	2024-07-05 20:00:24.881050545 +0100
@@ -99,20 +99,20 @@
     const UserStore = DiscordModules.UserStore;
     const ImageResolver = DiscordModules.ImageResolver;
 
-    const popoutHTML = `<div class="theme-dark layer__6b5c3" style="z-index: 100">
-<div class="animatorBottom__90ece translate__02873 didRender__7e24c popout-role-members" style="margin-top: 0;">
-    <div class="container_cff83e selectFilterPopout_ef1367 elevationBorderHigh__24051 role-members-popout">
+    const popoutHTML = `<div class="theme-dark layer_cd0de5" style="z-index: 100">
+<div class="animatorBottom_f88ae3 translate_f88ae3 didRender_f88ae3 popout-role-members" style="margin-top: 0;">
+    <div class="container_ac201b selectFilterPopout_cfe282 elevationBorderHigh_ff8688 role-members-popout">
         <div class="container__33507 medium__5b9a9">
-            <div class="inner__999f6"><input class="input__48d49" placeholder="Search Members — {{memberCount}}" value="">
-                <div tabindex="0" class="iconLayout__67261 medium__5b9a9" role="button">
-                    <div class="iconContainer__4d295">
-                        <svg name="Search" class="icon_fb52f0 visible_c5d475" width="18" height="18" viewBox="0 0 18 18"><g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M3.60091481,7.20297313 C3.60091481,5.20983419 5.20983419,3.60091481 7.20297313,3.60091481 C9.19611206,3.60091481 10.8050314,5.20983419 10.8050314,7.20297313 C10.8050314,9.19611206 9.19611206,10.8050314 7.20297313,10.8050314 C5.20983419,10.8050314 3.60091481,9.19611206 3.60091481,7.20297313 Z M12.0057176,10.8050314 L11.3733562,10.8050314 L11.1492281,10.5889079 C11.9336764,9.67638651 12.4059463,8.49170955 12.4059463,7.20297313 C12.4059463,4.32933105 10.0766152,2 7.20297313,2 C4.32933105,2 2,4.32933105 2,7.20297313 C2,10.0766152 4.32933105,12.4059463 7.20297313,12.4059463 C8.49170955,12.4059463 9.67638651,11.9336764 10.5889079,11.1492281 L10.8050314,11.3733562 L10.8050314,12.0057176 L14.8073185,16 L16,14.8073185 L12.2102538,11.0099776 L12.0057176,10.8050314 Z"></path></g></svg>
+            <div class="inner_c18ec9"><input class="input_c18ec9" placeholder="Search Members — {{memberCount}}" value="">
+                <div tabindex="0" class="iconLayout_effbe2 small_effbe2" role="button">
+                    <div class="iconContainer_effbe2">
+                        <svg name="Search" class="icon_effbe2 visible_effbe2" width="18" height="18" viewBox="0 0 18 18"><g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M3.60091481,7.20297313 C3.60091481,5.20983419 5.20983419,3.60091481 7.20297313,3.60091481 C9.19611206,3.60091481 10.8050314,5.20983419 10.8050314,7.20297313 C10.8050314,9.19611206 9.19611206,10.8050314 7.20297313,10.8050314 C5.20983419,10.8050314 3.60091481,9.19611206 3.60091481,7.20297313 Z M12.0057176,10.8050314 L11.3733562,10.8050314 L11.1492281,10.5889079 C11.9336764,9.67638651 12.4059463,8.49170955 12.4059463,7.20297313 C12.4059463,4.32933105 10.0766152,2 7.20297313,2 C4.32933105,2 2,4.32933105 2,7.20297313 C2,10.0766152 4.32933105,12.4059463 7.20297313,12.4059463 C8.49170955,12.4059463 9.67638651,11.9336764 10.5889079,11.1492281 L10.8050314,11.3733562 L10.8050314,12.0057176 L14.8073185,16 L16,14.8073185 L12.2102538,11.0099776 L12.0057176,10.8050314 Z"></path></g></svg>
                     </div>
                 </div>
             </div>
         </div>
         <div>
-            <div class="list__9970c list_bc6ec7 none__7a473 scrollerBase_f742b2 role-members" dir="ltr" style="overflow: hidden scroll; padding-right: 0px; max-height: 400px;">
+            <div class="list_eef3ef list_ac201b none_eed6a8 scrollerBase_eed6a8 role-members" dir="ltr" style="overflow: hidden scroll; padding-right: 0px; max-height: 400px;">
                 
             </div>
         </div>
@@ -120,19 +120,19 @@
 </div>
 </div>
 `;
-    const itemHTML = `<div class="item__287de role-member">
-    <div class="itemCheckbox_c26cf8">
-        <div class="wrapper__3ed10 avatar__31cab" role="img" aria-hidden="false" style="width: 32px; height: 32px;">
-            <svg width="40" height="32" viewBox="0 0 40 32" class="mask__1979f svg_f5b652" aria-hidden="true">
+    const itemHTML = `<div class="item_eef3ef role-member">
+    <div class="itemCheckbox_eef3ef">
+        <div class="wrapper_c51b4e avatar_cfe282" role="img" aria-hidden="false" style="width: 32px; height: 32px;">
+            <svg width="40" height="32" viewBox="0 0 40 32" class="mask__d5067d svg_a6bf1c" aria-hidden="true">
                 <foreignObject x="0" y="0" width="32" height="32" mask="url(#svg-mask-avatar-default)">
-                        <div class="avatarStack__789b4">
-                            <img src="{{avatar_url}}" alt=" " class="avatar__991e2" aria-hidden="true">
+                        <div class="avatarStack_c51b4e">
+                            <img src="{{avatar_url}}" alt=" " class="avatar_c51b4e" aria-hidden="true">
                         </div>
                 </foreignObject>
             </svg>
         </div>
     </div>
-    <div class="itemLabel_d89e4d">
+    <div class="itemLabel_eef3ef">
         <span class="username">{{username}}</span>
     </div>
 </div>

gets us this far:

Probably got the search bar a bit off but it works

[r0kym]

@Teteros It does work thanks