Hello everyone.
some of you might remember the userscript I made together with @Levi 3 years ago:
https://drrr.chat/d/574-drrr-comutils-added-functionality-to-your-chatroom
I have to admit the way I coded it is pretty bad. I actually made it after I learned JavaScript for barely 1 week. It's really inefficient, lags out your browser in some cases and spams the sites API with fetch requests. Also, the frontend only works properly on FullHD screens.
That's why I coded a new framework for it from scratch.
Some things which work way better now:
- Way more efficient
- It's Modular
- Easily expandable
I will now explain some differences between the new and the old version for the tech-savvy people among you guys. 😎
Efficiency:
Let's take the Blacklist function from the old module for exmaple. It had around 70 lines of codes. Also, every single function implemented in the V1 version fetched its data from the API BY ITSELF. I have no idea what I was thinking back then, but this results in the API getting completely spammed by whoever uses this script. While this may not be an issue for the users, it's certainly not good for the server nor Cloudflare lol.
The V2 Version uses a system consisting of 2 loops:
The first loop polls data, from the lounge and the room you're inside of at that time, once every 5 seconds and distributes that data to every activated module that needs this kind of data (room name, description, users of a room, lounge data etc).
setInterval(async () => {
//Retrieving data from the lounge and current room
let data = {
roomData: await fetchAPI('room'),
loungeData: await fetchAPI('lounge')
}
//Handling data dependent modules
for (const module of loadedModules) {
if (module.type === 'data') {
module.run(data);
}
}
}, 5000);
The second loop handles every NEW messages using the update API and distributes this data to modules that are dependend on the message flow, such as the mute module or the command handler.
while (true) {
//Retrieving the newest messages of the current room
let room = await fetchNewMessages();
if (room.talks && update > 0) {
//Handling message flow dependent modules
for (const module of loadedModules) {
if (module.type === 'message') {
module.run(room.talks);
}
}
}
update = room.update;
}
This is way more efficient than before.
Some of you might have already noticed, but each module contains a run method which basically defines what a module does.
let blacklist = {
name: 'blacklist',
type: 'data',
storage: [],
storageKey: 'blacklistedUsers',
run: async function ({
roomData
}) {
for (const user of roomData.room.users) {
for (const blacklistedUser of this.storage) {
if (user.name === blacklistedUser) {
await banUser(await findUser(user.name, roomData.room.users));
}
}
}
}
};
As you can see, the new blacklist module only has 16 lines of code.
Each module stores its data (if it has data to store) in the local browser storage, so your settings get saved each time you close the website and loaded once you open it up again (with the userscript enabled).
This code loads the data for each module:
async function loadData() {
for (module of modules) {
if (module.storage !== undefined)
module.storage = JSON.parse(localStorage.getItem(module.storageKey));
}
}
The modules I already coded are:
- Blacklist
- Whitelist
- Mute
- Notify (Notifies you if a certain user is in another room.)
- A command handler
- Force Darkmode
I believe this userscript introduces a way for every user to get bot-like-behavior, without needing any knowledge about that kind of stuff. Honestly, at this point even a monkey could do that as long as he has a PC 🐒. You could technically implement everything a bot could do as well.
Now the reason I made this thread:
- Please give me recommendations for modules I should add!
- I really need help with the front-end. Yes, there is no front-end yet and I absolutely suck at anything front-end related. So if you have some HTML / CSS knowledge and would like to help me, please let me know.
Here's the entire code in case you want to see all of it:
https://github.com/DrrrUtil/DrrrUtilsV2/blob/main/DrrrUtils.js