Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

🍓Strawberi CSS: A PFQ Accessibility Tool

Forum Index > PokéFarm > Guides >

Shuppiberi's AvatarShuppiberi
Shuppiberi's Avatar

🍓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.
Use whichever you like. Q: Are you worried about releasing this during the PFQ Recode? A: Not really. If the HTML changes, Strawberi will be updated accordingly.
1 Only compatible with PFQ. QOL script recommended. Tested on Firefox. 2 I'd appreciate it if you'd direct your bug reports to the Github instead of sending them directly to me. It makes it easier to manage. Thanks!

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
Noahverse's AvatarNoahverse
Noahverse's Avatar
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


: 1160 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 05:57 AM Mon in Calypso's Cave PFP by Ashe Moon
Shuppiberi's AvatarShuppiberi
Shuppiberi's Avatar

QUOTE 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...
Thanks so much! The Field Module is supposed to have a nice big buffer at the bottom, so I'm guessing this is unintended behavior. Would you mind making an issue report on the Github? Please include the browser you're using and the pixel size of your screen, so I can test it out. In the meantime, yes, you can hotswap OBF instead! It should work if you delete the Field Module and add OBF onto the end of the CSS. Edit: It turns out that OCF is fully incompatible with Strawberi. I'm sorry.
I'd like to double the height of the strawberry button . can you walk me thru that?
Shuppiberi's AvatarShuppiberi
Shuppiberi's Avatar

QUOTE originally posted by Calypso Halcyon

I'd like to double the height of the strawberry button . can you walk me thru that?
Yeah, of course! Short version: Change line 18 and line 34 to have the height values you want-- "vh" is the measurement, it stands for "viewport height," so the default of 10vh is "10% of the screen." 20vh would be 20%, and so on. Long version: In the Core Module (at the top of Strawberi.css), there's two little headers. The first says /*Make room on the screen for the 🍓 Buttons.*/ The second says /*Create the 🍓 Buttons.*/ /*Targets every single button on the site! ⚠️*/ Below each of those headers, there are height values. Here's the one that creates room on the screen: /*Make room on the screen for the 🍓 Buttons.*/ #footbar { display: none!important; } #content::after { position: absolute; height: 15vh; width: 100%; content: ""; } So, to double the height of the button, change /*Create the 🍓 Buttons.*/ "height: 10vh;" to "height: 20vh;" and that will double the height. Then, you'll have to make more space for the button, so you'll change /*Make room on the screen for the 🍓 Buttons.*/ "height: 15vh;" to "height: 25vh;" to match the 10vh increase you added to the other one. This explanation might be a little bit confusing, haha. I can try to post some screenshots, if that would work better.
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
Sells a variety of things!
Credits
Full credits here. PFP => Salty_Lightning on Pinterest Button => Kaelwolfur
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!
Shuppiberi's AvatarShuppiberi
Shuppiberi's Avatar

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)
On Github, Strawberi.css is separate from the skins. You can inject it without changing the colors of the site.

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!
This could be possible, with the new button architecture. I'll make an issue for it in the tracker. Edit: I forgot to say, there's also an option to pick just one of the white flute or black flute to be the reload button instead. It's under the Shelter Module. I'm talking about having multiple reload buttons on the screen at the same time.
Noahverse's AvatarNoahverse
Noahverse's Avatar

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!
This could be possible, with the new button architecture. I'll make an issue for it in the tracker. Edit: I forgot to say, there's also an option to pick just one of the white flute or black flute to be the reload button instead. It's under the Shelter Module. I'm talking about having multiple reload buttons on the screen at the same time.
Aaah, I've actually been working on this for personal use (I use both flutes a lot so...), but I could share my version of the code on the issue tracker if you want? :)

Cannot post: Please log in to post

© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page