🍓Strawberi CSS: A PFQ Accessibility Tool
Forum Index > PokéFarm > Guides >
🍓Strawberi CSS🍓
Hi, my name is Iris. I really like clicker games. I've played Cookie Clicker, Candy Box! and Candy Box 2, Anti-Idle, Progress Quest, and (of course) Pokéfarm Q. I also have very fragile hands, so playing these games can be a bit... painful. Without a little bit of help, that is. Enter Strawberi, the project that I've been cooking up over the past few weeks. Through the power of CSS1, Strawberi creates a Big Convenient Buttontm at the bottom of your screen. Clicking this 🍓 button is the same as clicking a different link or button somewhere else on the page. With a little bit of fiddling, I've set it up so that clicking on these buttons allows you to perform tasks around the site quickly and efficiently, without having to strain your fingers or move your wrists very much. Like the site itself, I've split it into different modules, and I've made it as easy as possible to customize the button and disable any modules you don't like. There's also two Site Skins, JPM4/strawberi and JPM4/blackberi, that let you try Strawberi right away. If that sounds good to you, head over to the Github and have fun with Strawberi! For everyone else, keep reading, or reply to this thread2 and I'll do my best to respond right away.How does it work?
I'm glad you asked!
Strawberi uses ::before pseudo-elements in fixed positions to create the illusion of a magic button that does whatever you want it to do. ::before is a little bit special; you don't need HTML access to "create" a ::before element on the screen, which is one of the reasons that it's a pseudo-element and not a proper element. So, by assigning these ::before elements to buttons or links that disappear after you click them, you can create a priority system for tasks on the screen.
Here's an example:
For the Party Module, Strawberi's CSS selectors check for the Next button (.mu_navlink.next) and all of the different buttons for feeding Pokémon on the site (.berrybuttons[data-berry], .action button, .action>a). For each of these, it assigns a ::before pseudo-element with a content value of "🍓", activating the invisible stack of buttons at the bottom of the screen whenever something in those categories is clickable. Then, when the user clicks that button, the action buttons next to the Pokémon disappear, and the user can then press the button after that, and so on and so on until they finally click the Next button and go to the next user.
Modules can be very complicated (like the Fishing Module) or very simple (like the Daycare Module, which is literally just one line), but they all do effectively the same thing: Activate one of the invisible ::before elements by giving it a content value so that you can click on it and do something convenient.
I hope that this is clear from the explanation, but Strawberi doesn't do anything "automatically." You have to personally press the button once for each action you want to do. This is so that I don't violate Pokéfarm's Terms of Service, of course, but CSS is also limited enough that it kind of can't do anything on its own. That's why I used CSS to create Strawberi: There was absolutely no chance that I would accidentally create an autoclicker or anything else that would violate TOS.
What does it do?
If you go to the Nearby Places page of your Farm, Strawberi has Modules for the first nine areas on that list (so, the Lab, the Fields, the Shelter, the Daycare, the Garden, the Scour Area, the Wishforge, the Fishing Hut, and the Trade Center).
On top of that, there are smaller Modules for other things. The Boxes Module helps with opening Treasure Boxes, the Notification Module helps with clicking on notification links, the Dialog Module helps close pop-up dialog boxes (confirmation windows), the Daycare Module helps with adopting Eggs, the Evolve Module helps with the QOL Script's easy evolution function, and the Training Module helps collect all of your Training Bags.
Strawberi's buttons usually mean "Yes." Would you like to open a box? Yes. Would you like to throw this Pokéball? Yes. If you want to say No (like refusing a gift), or do something with a little bit more finesse (like planting many different berries), you'll have to do those actions yourself.
If the thought of unintentionally saying Yes to something makes you feel a little queasy, you can disable the nausea-inducing Module whenever you like by removing the clearly labeled CSS from the code. I've done my best to make sure that you can't do anything really dangerous, like mass-release Pokémon, so if you run into something that players really shouldn't be spamming Yes about you should send in a bug report right away.
What do the Site Skins look like?
Light Mode Skin
Dark Mode Skin
I have another question...
(This section may be updated in the future.)
Q: Can Strawberi be used with Google Chrome?
(Or Edge, or Opera, or any other Chromium browser?)
A: Yes. However, you may run into visual glitches, especially with the Site Skins.
If a visual glitch is preventing you from using the site normally, please create an issue on the Github's issue tracker. Thank you!
Q: How does this Field Module compare to Winterbraid's One Button Fields?
A: It's a different implementation.
- OBF is developed for Chrome;
- Strawberi is developed for Firefox.
- OBF is lightweight and standalone;
- Strawberi covers most of the site.
- OBF uses precise CSS selectors;
- Strawberi is designed to be scalable.
- OBF can be toggled with the QOL script;
- Strawberi cannot.
Iris, Lav, & Angel - They/Them
🍓"Developer" of Strawberi-CSS🍓 🪦Three Ghosts in a Trenchcoat🪦BG by boodrian CC BY-SA 3.0 via Wikimedia Commons
Wow, thank you for this! Currently testing it with your provided skins :) (by the way, it's nice! Lots of little extra styling I hadn't thought of!)
One thing from Winterbraid's OBF I miss though is being able to turn the button off when browsing public fields; sometimes I browse to buy, not to click, and currently Strawberri is in the way, it hides about the whole last row. I think OBF somehow adds some more height to the page so that if you scroll all the way to the bottom, the button doesn't cover the field. Would it be possible to do the same? Worst case scenario I might keep OBF and remove that part from Strawberri myself as you said it should be possible. Still gonna keep testing it as-is, just wanted to give you my first impressions. That must have been a lot of work, thanks for sharing it!
Noah | he/they | AuDHD
: 0 pts!
Journal (F2U codes)
credits
credits
Code @RAINB0W
Forum Icon F2U @MellowKun on Deviantart
Divider F2U @hedgehominoid on Deviantart
Signature Pagedoll F2U @SquishDemon on Deviantart
Shop logo commissionned from Lilieth for my shop
I collect fairy Deltas!
^ My Trade Shop! ^currently testing this. what a neat resource! ill update with feedback this evening :-)
Calypso ~ Adult ~ She/Her
~GRAFAIAI COLLECTOR~ ~IV BREEDER~
It is 09:16 AM Sun in Caly's Cave PFP by Ashe MoonQUOTE originally posted by Noahverse
Wow, thank you for this! Currently testing it with your provided skins :) (by the way, it's nice! Lots of little extra styling I hadn't thought of!)
One thing from Winterbraid's OBF I miss though is being able to turn the button off when browsing public fields; sometimes I browse to buy, not to click, and currently Strawberri is in the way, it hides about the whole last row...
I'd like to double the height of the strawberry button . can you walk me thru that?
QUOTE originally posted by Calypso Halcyon
I'd like to double the height of the strawberry button . can you walk me thru that?
This looks incredibly convinent! However...is there a way to just plug in the strawberry part and not the colors of the site skin?? Either one hurts my eyes lol ( I have my skin had dark mode, like black, cuz my eyes r sensitive after staring too long lol)
- ★
- ★
- ★
- ★
- ★
Star | She/Her | Psychopath
BORED TO DEATH!!
Collecting
x 500
x 500
I have another question! in the shelter module, are we able to program it to utilize either flute instead of refreshing? sometimes I prefer just eggs, sometimes just 'mons, but never just reload
if it were possible to program in just one or the other, it would make life so much easier!
QUOTE originally posted by ShootingStarRain
This looks incredibly convinent! However...is there a way to just plug in the strawberry part and not the colors of the site skin?? Either one hurts my eyes lol ( I have my skin had dark mode, like black, cuz my eyes r sensitive after staring too long lol)
QUOTE originally posted by Calypso Halcyon
I have another question! in the shelter module, are we able to program it to utilize either flute instead of refreshing? sometimes I prefer just eggs, sometimes just 'mons, but never just reload
if it were possible to program in just one or the other, it would make life so much easier!
QUOTE originally posted by Shuppiberi
QUOTE originally posted by Calypso Halcyon
I have another question! in the shelter module, are we able to program it to utilize either flute instead of refreshing? sometimes I prefer just eggs, sometimes just 'mons, but never just reload
if it were possible to program in just one or the other, it would make life so much easier!
Cannot post: Please log in to post