Modern, realistic, neon theme for Drawaria.online with animations and effects.
Okay, let's explain how this whole script works in a way someone who's not a programmer can understand.
Imagine the Drawaria.online website is like a house. It has walls (the layout), paint colors, furniture (buttons, input fields), pictures (images), and different rooms (like the login area, the game area, the chat).
Normally, Drawaria.online has its own blueprint and decoration style. This Tampermonkey script is like having a magic paintbrush and some special instructions that let you redecorate the house every time you visit it, without actually changing the original house itself.
Here's a breakdown of how the script acts like that magic paintbrush:
It's a "User Script": Think of this like a special instruction manual that your web browser follows only when you're visiting Drawaria.online (because of the @match line). It doesn't affect any other websites.
It Runs Early (@run-at document-start): The script tries to start redecorating even before the whole house (the webpage) is fully built. This is like trying to paint the walls while the builders are still putting them up, so the new paint is already there when you first see the room. This helps avoid seeing the original decoration before your new one appears.
It Fetches Special Paint Colors and Styles (GM_xmlhttpRequest, GM_addStyle, @require):
GM_xmlhttpRequest and GM_addStyle together are like ordering a special paint color palette (the "Orbitron" font from Google Fonts) and then mixing it into your magic paintbrush so you can use it.
@require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js is like bringing in a special toolkit (jQuery) that makes it easier for the script to find and change specific pieces of furniture or parts of the house. (Although in the final version we mostly used plain CSS, this line is often included for more complex scripts).
**It Defines Your New Decoration Style (const neonStyles = \...`):** This big block of text inside the backticks ( `) is like the main design plan for your redecorated house. It uses a language called CSS (Cascading Style Sheets), which is like saying:
"Find the main background, and paint it this dark purple color (--dark-bg)."
"Find all the links (a) and make them pink (--neon-pink) and underline them only when you hover over them."
"Find the login box in the middle (#login-midcol), give it a dark background (--dark-bg-alt), round corners (border-radius), and a glowing border (border + box-shadow)."
"Find the 'Play' button (.btn-warning) and make its main color neon pink, and make it glow and move slightly when you hover over it (:hover and transform)."
"Find those empty box areas on the sides (#login-leftcol > div, #login-rightcol > div:not(.loginbox)) and give them a slightly transparent dark background, round corners, and importantly, a neon blue border that blinks."
Applying the New Decoration (GM_addStyle(neonStyles);): This is the magic paintbrush actually applying the design plan to the house. It tells the browser, "Okay, now use all these new rules to draw the page instead of the old ones."
Handling Things After the House is Ready (window.onload = function() { ... };): Sometimes, even with the early painting, you might need to make final touches after the house is completely built and all the original furniture is in place. This part of the script waits until everything is loaded (window.onload) and then can make small adjustments using JavaScript (like checking if a specific part of the page is hidden and making it visible, though we commented out that example).
In Simple Terms:
This script is a set of instructions for your web browser to make Drawaria.online look like a futuristic, neon-lit place instead of its default look. It changes colors, adds glows and shadows, makes things pulse or blink, and uses a different font, all running in the background whenever you visit the site. It doesn't change the game itself, just how it appears to you.
