LaptopCat / AutoBSC

Automatically collect rewards, answer polls and quizzes, place predictions for Brawl Stars Championship
MIT License
3 stars 1 forks source link

Ideas for Improvements! #1

Closed 123SONIC321 closed 2 months ago

123SONIC321 commented 2 months ago

Hi, I've recently discovered this userscript, and it's fantastic! I have a few suggestions to make it even better. How about adding an option to remove heavy elements so that devices with lower specs can also enjoy watching the match without their browser lagging? I've actually built something similar for myself using the Element Picker and the uBlock Origin extension. I'm not sure if this is helpful, but I hope it is.

! event.supercell.com Removes heavy elements
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--xlarge
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--xlarge
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--xlarge
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--xlarge
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--large
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--large
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--large
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--large
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--medium
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--medium
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--medium
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--medium
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--small
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--left.Cheer__gradient--small
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--small
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > div.Cheer__gradient.Cheer__gradient--right.Cheer__gradient--small
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(1) > canvas
event.supercell.com###__layout > div > div:nth-child(1) > div > div.Tournament__cheerContainer > div > div:nth-child(2) > canvas

Also, I recommend removing the element that blocks video interactions. This would allow us to use the stream player buttons (like on YouTube or Twitch) to change the live video quality and more.

! event.supercell.com This allows you to interact with the stream player buttons 
event.supercell.com###__layout > div > div:nth-child(1) > div > section.Tournament__video > div.Video > div.Video__Player > div.Video__InteractionBlocker
event.supercell.com###__layout > div > div:nth-child(1) > div > section.Tournament__video > div.Video > div.Video__Player > div.VideoCover.VideoCover--hidden

I apologize for my poor English. I have no knowledge of coding or programming, and I created these using only the uBlock's Element Picker Best of luck!☆

123SONIC321 commented 2 months ago

remove heavy elements

It removes cheer animations (not the cheer button) which uses so much ram and slows down the entire website on low end PCs

image

LaptopCat commented 2 months ago

Hello! Glad you are enjoying the userscript.

Thanks for the suggestions! I have implemented both of them. Player controls are shown by default, and there is now an option in the config (Low Detail Mode) to remove cheer animations.

123SONIC321 commented 2 months ago

Thank you so much 😊🙏

123SONIC321 commented 2 months ago

Hi, it's me again @LaptopCat I wanted to let you know that I've been sharing your userscript with others, and they love it! I've even taken the initiative to translate it into Persian for my community. However, I've noticed that the text looks a bit off without a proper font. Could you please guide me on how to set up a custom font for it? And how can I test this userscript when the website is not broadcasting a match?

LaptopCat commented 2 months ago

Hello,

You can change the font like this:

  1. Go to somewhere around line 342 of the script (it should be <div id="autobsc-overlay" style="position: absolute; top: 20%; z-index: 99999999; background: antiquewhite">)
  2. Change the style attribute to use a different font (sans-serif, for example): <div id="autobsc-overlay" style="position: absolute; top: 20%; z-index: 99999999; background: antiquewhite; font-family: 'sans-serif'"> I'm not sure how to include custom fonts with a userscript, but this might help you: https://stackoverflow.com/questions/41852594/dynamically-load-fonts

As for testing the userscript without a broadcast, it's not possible to fully test it (testing functionality like completing quizzes and etc.) without running some kind of private server software (I don't think anyone has made one yet) But if you only need to test the overlay, you can try to make it always call the setup function (add this after line 488): setupAutoBsc()

It should look like this: image

123SONIC321 commented 2 months ago

Thank you, it worked. @LaptopCat I don't want to be a bother, but isn't it possible to fetch the font from a URL and not necessarily require the user to have the font installed on their system? For example, this is Vazirmatn font URL https://github.com/rastikerdar/vazirmatn/raw/master/fonts/ttf/Vazirmatn-Regular.ttf (.woff2 is also available)

And this only changes the overlay font, and the logs sent to the right side, I think their font is in a different place.

LaptopCat commented 2 months ago

This seems to work: image

I'm not sure how to change the font for all of the feed on the right side, but you can do it for each element:

  1. Locate the text using the element picker in developer tools
  2. See what the class name is (it can be something like RewardCard__textContainer__title)
  3. Add a style to replace the font:
    .RewardCard__textContainer__title {
    font-family: "vazirmatn" !important;
    }

You can add styles here (between the <style> and </style> lines) image

And instead of making lots of styles, you can combine them by placing a comma between each selector:

.RewardCard__textContainer__title, .RewardCard__textContainer__subTitle {
    font-family: "vazirmatn" !important;
}