The last time I played Planetarion must have been about 12–15 years ago when I was young. I am not sure what monitor I was using at the time, but it must have been some glorious 1024×768 miracle of technology that displayed Planetarion in all its luster. These days, I am old (
not as old as Dead_Meat, of course) and have a pretty sizeable screen with a high resolution in front of me. So when I signed up for Planetarion Round 85 for shits and giggles, I saw all the tiny lettering and minuscule boxes and thought to myself "oh, hell no".
So I have thrown together a quick new stylesheet that turns Planetarion into a marvel of modern website technology. Or at least, it makes letters bigger and adds some colour, so that it looks decent enough to actually play again in the year of our lord 2020.
As I created this in the last stages of the previous round and the current round awaiting its start, it is probably not 100% finished. There may be some messages, boxes, or areas that I have not (yet) seen or not had access to that may not be correctly styled. I have not had any incoming or defense yet, for example, which I am led to believe is a pretty important part of the game.
However, I think it is pretty complete from everything that I have seen thus far, so I am happy to share it with the community (
all remaining five of you) and see if there is any feedback or areas that I have missed updating.
Edit: UltimateNewbie is now also helping. We are (well, mostly he did the work) creating an SCSS version of the whole thing for easier updating, and he has also added a number of good ideas. A new joint version should be up soonish!
Jeez, stop talking and give it to me already.
That's what she said. Okay, okay, the instructions.
- Get an extension for your browser that allows you to set user stylesheets.
Personally, I use 'User Javascript and CSS' for Chrome (shoutout to my Vivaldi homies), but there quite a few others out there for at least Chrome and Firefox, such as Stylus, Restyle, and so on. Search Mozilla Addons or the Chrome Web Store for 'User CSS' and you should find something.
- Set Planetarion to the Round 32 skin
This stylesheet specifically overrides/adds onto the Round 32 skin, as that seems to be the most commonly used and default one. Other skins in the game may introduce alternative styling that ends up breaking this particular stylesheet.
- Add a user stylesheet for game.planetarion.com and copy/paste the contents of one of the stylesheets linked below into it.
Do this according to the instructions of your chosen extension. Usually it is just a matter of pressing the extension button while you are somewhere on game.planetarion.com (could be the login page, the game, or the manual, for example).
- Optional, but recommended: install 'Ubuntu' font.
I designed this layout using the Ubuntu font, which is available under an open license from Google Fonts. Click the '1 Family Selected' popup thing in the bottom right, and use the download button at the top right to download the fonts. Then install them to see the new Planetarion layout in all its glory.
Where are the goods and what does it look like?
You can find the new stylesheet below, along with a couple of screenshots. Due to the use of CSS variables, it is actually pretty easy to customise the colours and pretty simple to create alternate colour schemes, even if you do not know much about CSS. Just edit the list of colour values at the top to modify the colour scheme if you prefer Planetarion in purple. I have already created an alternative dark layout based on the Round 8–9 colours (as played during the time of the extinction of the dinosaurs).
Current version: 0.8b (25 Jan 2020)
*** IMPORTANT ***
UltimateNewbie has put a lot of work into continuing work on the dark skin, and it's an absolute work of art:
https://raw.githubusercontent.com/Fr...ist/styles.css. Highly recommend this version.
Frequently Asked Questions
Just kidding, no one has asked me any of this even once, let alone frequently.
- Is this safe?
The only thing the CSS code does is change what Planetarion looks like on your computer. The code is also entirely open and available for you or anyone with some CSS knowledge to read through and check. It's a bit messy, but so is Planetarion's HTML. I might still clean it up a bit later on, but there's some wacky overrides needed in some cases.
- Is this responsive and mobile-friendly?
It is a little bit responsive, in that most of the fixed-width stuff is gone and within a certain range, the layout adapts to the viewport as best as possible. Some stuff like the battle calc remains fixed-width, however.
As there are not really any mobile browsers that (easily) allow you to set custom user CSS, I guess that this solution is pretty much out of the window for playing PA on your mobile, though.
- Who do I blame if I have incoming, but don't see it because this stylesheet has made it invisible?
When in doubt, always blame Minty. Also, do let me know and I will personally come test it for you with my Astropods.