Transforms Drawaria.online with a highly authentic Minecraft aesthetic, including a custom background, blocky UI, pixelated elements, and Minecraft sound effects.
// ==UserScript==
// @name Drawaria.online Minecraft Theme
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Transforms Drawaria.online with a highly authentic Minecraft aesthetic, including a custom background, blocky UI, pixelated elements, and Minecraft sound effects.
// @author YouTubeDrawaria
// @match https://drawaria.online/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=minecraft.net
// @grant GM_addStyle
// @license MIT
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// --- Global variables to hold theme elements for easy removal ---
let minecraftStyleElement = null;
let musicToggleButton = null;
let chatObserver = null;
let isThemeActive = false;
let clickSoundHandler = null;
let logoInterval = null; // To handle logo replacement until found
let fontLinkElement = null; // To hold the font link element for removal
// --- Minecraft Theme Colors and Resources (based on provided images) ---
const minecraftColors = {
// Button colors (unified to gray)
mcButtonBg: 'rgb(100, 100, 100)', // Default button background (gray)
mcButtonBgHover: 'rgb(80, 80, 80)', // Button background on hover (darker gray)
mcButtonBgActive: 'rgb(60, 60, 60)', // Button background on active/pressed (even darker)
mcButtonBorder: 'rgb(50, 50, 50)', // Dark border for buttons
// UI Panel backgrounds (more opaque)
mcPanelBgMain: 'rgb(70, 70, 70)', // Main panels (leftbar, rightbar, modal content)
mcPanelBgSecondary: 'rgb(50, 50, 50)', // Selected list items, deeper nested panels
mcPanelBorder: 'rgb(40, 40, 40)', // Strong border for panels
// Room List specific colors (from Playground rooms screenshot)
mcRoomListGridBg: 'rgb(40, 40, 40)', // Background for the entire #roomlist grid
mcRoomItemBg: 'rgb(60, 60, 60)', // Background for individual .roomlist-item
mcRoomItemBorder: 'rgb(30, 30, 30)', // Border for individual .roomlist-item
// Text colors
mcTextLight: 'rgb(220, 220, 220)', // Light text on dark backgrounds
mcTextDark: 'rgb(33, 33, 33)', // Dark text on light backgrounds
mcTextAccent: 'rgb(254, 255, 154)', // Yellowish accent (like splash text)
// Other elements
mcProgressBar: 'rgb(76, 175, 80)', // Green for progress bars (like exp bar)
mcHighlight: 'rgba(76, 175, 80, 0.4)', // Greenish highlight for selected/drawer
// Background and Logo
backgroundTexture: 'https://i.ibb.co/zVYJrkvR/800px-Overworld-1.webp',
logoUrl: 'https://i.ibb.co/c4KLhzd/image.png',
backgroundMusicUrl: 'https://www.myinstants.com/media/sounds/minecraft-theme.mp3',
clickSoundUrl: 'https://www.myinstants.com/media/sounds/minecraft-click-cropped.mp3'
};
// --- 1. THEME ACTIVATION FUNCTION ---
function activateTheme() {
if (isThemeActive) return; // Prevent re-activation
// A. Load Google Font
fontLinkElement = document.createElement('link');
fontLinkElement.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap';
fontLinkElement.rel = 'stylesheet';
document.head.appendChild(fontLinkElement);
// B. Inject CSS Styles
minecraftStyleElement = GM_addStyle(`
/* Global Resets and Minecraft Aesthetic Defaults */
html, body {
height: 100%;
background: url('${minecraftColors.backgroundTexture}') no-repeat center center fixed !important;
background-size: cover !important;
background-color: ${minecraftColors.mcPanelBgMain} !important; /* Fallback for background */
overflow-x: hidden !important; /* Prevent horizontal scrollbar */
overflow-y: auto !important; /* Allow vertical scrollbar only when needed */
scrollbar-width: auto; /* Firefox */
scrollbar-color: ${minecraftColors.mcButtonBorder} ${minecraftColors.mcPanelBgSecondary}; /* Firefox */
image-rendering: pixelated; /* Global pixelation */
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
body::before, body::after { content: none !important; }
/* Allow scrolling on homepage */
body:has(#main) {
overflow: auto !important;
}
/* Global Text Styling for Minecraft Look */
body, #main, #leftbar, #rightbar, .loginbox, .btn, .playerlist-row, .roomlist-item,
.chatbox_messages, .bubble, .modal-content, .form-control, .input-group-text,
h1, h2, h3, h4, h5, h6, span, a, div:not(.pcr-current-color), td {
color: ${minecraftColors.mcTextLight} !important; /* Default text to light gray */
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark}; /* Pixelated shadow for outline */
font-family: 'Press Start 2P', 'Consolas', 'Monaco', 'Lucida Console', monospace !important; /* Updated font-family */
-webkit-font-smoothing: none; /* Disable font anti-aliasing */
font-smoothing: none;
font-size: 10px !important; /* Smaller base font size */
}
/* Adjust specific font sizes */
h1 { font-size: 20px !important; }
h2 { font-size: 18px !important; }
h3 { font-size: 16px !important; }
h4 { font-size: 14px !important; }
h5 { font-size: 12px !important; }
h6 { font-size: 11px !important; }
.btn, button, input[type="submit"] { font-size: 12px !important; } /* Buttons slightly larger for readability */
.form-control, .input-group-text, select, textarea { font-size: 11px !important; }
.playerlist-row, .roomlist-item { font-size: 10px !important; }
.chatbox_messages .chatmessage { font-size: 10px !important; }
.bubble { font-size: 9px !important; }
.dropdown-menu .dropdown-item { font-size: 10px !important; }
.playerchatmessage-selfname, .playerchatmessage-selfname ~ .playerchatmessage-text { font-size: 10px !important; }
.systemchatmessage1, .systemchatmessage2, .systemchatmessage3, .systemchatmessage4, .systemchatmessage5,
.systemchatmessage6, .systemchatmessage7, .systemchatmessage8, .systemchatmessage9 { font-size: 9px !important; }
/* Specific text colors for better readability */
.roomlist-item, .roomlist-playercount, .roomlist-descr, .roomlist-mostlang,
.dropdown-item.loginbox-alloptionslink,
div[style*="color: gray; padding: 1em; font-size: 0.9em"], /* specific gray text div */
.playerlist-row:not(.playerlist-name-loggedin) a:not(.playerlist-name-self a),
.playerlist-name a, .playerlist-rank-first { /* Ensure player names are light text */
color: ${minecraftColors.mcTextLight} !important;
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark} !important;
}
.playerchatmessage-selfname, .playerchatmessage-selfname ~ .playerchatmessage-text,
.systemchatmessage1, .systemchatmessage2, .systemchatmessage3, .systemchatmessage4, .systemchatmessage5,
.systemchatmessage6, .systemchatmessage7, .systemchatmessage8, .systemchatmessage9 {
color: ${minecraftColors.mcTextAccent} !important; /* Yellowish accent for self/system messages */
font-style: normal !important; /* Remove italic from system messages */
}
/* Main UI Panels and Containers - Solid, Opaque Look */
#leftbar, #rightbar, .loginbox, .modal-dialog .modal-content,
.topbox-content, .accountbox-coins, .playerlist-infobox-notlogged,
#customvotingbox, .accountbox-exp-progress-bg, .accountbox-itemscontainer-slot,
.inventorydlg-groupview, .inventorydlg-shoplist, .inventorydlg-addcoinsview,
.musictracks-newtrackbox, .playerlist-turnscore,
.modal-content, .card-body,
ul.nav.nav-tabs, div.table-responsive, table.table.border, thead tr, th, tbody tr, td,
nav.pagination-nav, ul.pagination.justify-content-center.m-0,
div[style*="max-width: calc(4 * 300px + (4 * 300px) * (0.02 * 3));"], /* Gallery container */
div.grid-item.galleryimage[style*="position: absolute;"] .info,
div.commentlist,
div[style*="padding: 2px; background: #005abb6e;"], /* Specific header div */
h1[style*="text-align: center; color: white; margin: 0; background: #ffffff52; padding: 10px; border-radius: 3px;"], /* Specific H1 */
div.container[style*="margin-bottom: 20px; color:#000000;"] *, /* Global container elements */
.container > .row.justify-content-center.no-gutters:not(#friendscontainer > .row.justify-content-center.no-gutters), /* Friendscontainer exclusion */
#friendscontainer .row.justify-content-center.no-gutters, /* Friendscontainer itself */
.playerlist-drawerhighlight {
background-color: ${minecraftColors.mcPanelBgMain} !important; /* Main panel background */
border: 2px solid ${minecraftColors.mcPanelBorder} !important;
box-shadow: none !important; /* Remove any soft shadows */
border-radius: 2px !important; /* Blocky corners */
backdrop-filter: none !important; /* No blur for solid look */
}
/* Elements that appear 'deeper' or more contained - Second panel background color */
.chatbox_messages, .Panel,
.tab-content, .tab-content .tab-pane, .tab-content form, .tab-content .form-group,
.logincol, .loginbutton-icon,
div[style*="padding: 1em; background: aliceblue; border-radius: 0.3em;"], /* Another specific div */
.List.Library, .List.Library ul, .List.Library li,
.Canvas, .Canvas canvas,
.Panel .List.Layers, .Panel .List.Layers ul, .Panel .List.Layers li,
.drawcontrols-settingscontainer,
.pcr-app, .inventorydlg-leftpanel, #dtrTranslatorContainer, #dtrDropdownPanel,
.chatmessage:nth-child(odd), /* Odd chat messages */
.playerlist-avatar-spawned, /* Player spawned avatar bg */
.playerlist-exp-bar, /* Exp bar background */
.cheat-row input[type="number"], /* Cheat inputs */
#dtrSelectedLanguageDisplay, #dtrDropdownPanel .dtr-lang-item {
background-color: ${minecraftColors.mcPanelBgSecondary} !important; /* Secondary panel background */
border: 2px solid ${minecraftColors.mcPanelBorder} !important;
border-radius: 2px !important;
}
/* Room List and Room Items (NEW Aesthetic from Screenshot) */
#roomlist {
background-color: ${minecraftColors.mcRoomListGridBg} !important; /* Background for the grid itself */
border: 2px solid ${minecraftColors.mcRoomItemBorder} !important; /* Border around the entire grid */
border-radius: 2px !important;
}
.roomlist-item {
background-color: ${minecraftColors.mcRoomItemBg} !important; /* Background for each room item box */
border: 2px solid ${minecraftColors.mcRoomItemBorder} !important; /* Border around each room item */
border-radius: 2px !important;
}
.roomlist-preview { /* Make the preview background transparent to show the image */
background: transparent !important;
}
.roomlist-groupheader { /* Adjust header for rooms */
border-bottom: 1px solid ${minecraftColors.mcPanelBorder} !important;
color: ${minecraftColors.mcTextLight} !important;
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark};
}
/* --- ALL BUTTONS (GENERAL GRAY MINECRAFT STYLE) --- */
.btn, button:not(.pcr-app button), input[type="submit"],
li.page-item .page-link,
ul.nav.nav-pills li.nav-item a.nav-link,
.dropdown-menu .dropdown-item,
.drawcontrols-popupbutton,
.gesturespicker-item, .gesturespicker-item.gesturespicker-spawnedavataritem-sep,
.gesturespicker-item.gesturespicker-spawnedavataritem,
#musictracks-addnew, #musictracks-search,
.pagination-nav .page-item,
#continueautosaved-run, #continueautosaved-clear, .discordlink,
/* Apply to general drawcontrols-buttons that are not colors */
.drawcontrols-button:not(.drawcontrols-color) {
background-color: ${minecraftColors.mcButtonBg} !important;
border: 2px outset ${minecraftColors.mcButtonBorder} !important; /* Beveled effect */
color: ${minecraftColors.mcTextLight} !important; /* Text on buttons is light */
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark} !important; /* Dark outline for button text */
box-shadow: none !important;
border-radius: 2px !important; /* Blocky corners */
transition: background-color 0.05s linear, border-style 0.05s linear; /* Fast transition */
}
/* Button Hover State */
.btn:hover, button:not(.pcr-app button):hover, input[type="submit"]:hover,
li.page-item .page-link:hover,
ul.nav.nav-pills li.nav-item a.nav-link:hover,
.dropdown-menu .dropdown-item:hover,
.drawcontrols-popupbutton:hover,
.gesturespicker-item:hover,
.pagination-nav .page-item:hover,
#continueautosaved-run:hover, #continueautosaved-clear:hover, .discordlink:hover,
.drawcontrols-button:not(.drawcontrols-color):hover {
background-color: ${minecraftColors.mcButtonBgHover} !important;
border-color: ${minecraftColors.mcButtonBorder} !important; /* Border color remains */
transform: none !important; /* Prevent default transforms */
}
/* Button Active/Pressed State */
.btn:active, button:not(.pcr-app button):active, input[type="submit"]:active,
li.page-item .page-link:active,
ul.nav.nav-pills li.nav-item a.nav-link:active,
.dropdown-menu .dropdown-item:active,
.drawcontrols-popupbutton:active,
.gesturespicker-item:active,
#continueautosaved-run:active, #continueautosaved-clear:active, .discordlink:active,
.drawcontrols-button:not(.drawcontrols-color):active {
background-color: ${minecraftColors.mcButtonBgActive} !important;
border-style: inset !important; /* Simulate pressed effect */
transform: translateY(1px) !important; /* Slight shift down */
}
/* --- DRAW CONTROLS: COLOR SWATCHES (Keep original color, apply bevel) --- */
.drawcontrols-button.drawcontrols-color {
/* Preserve original background-color set by inline style/Drawaria JS */
border: 2px outset ${minecraftColors.mcButtonBorder} !important; /* Apply beveled border */
border-radius: 2px !important;
box-shadow: none !important;
transition: border-style 0.05s linear, transform 0.05s linear; /* Only transition border style and transform */
}
/* Remove transparent hover/active overlays */
.drawcontrols-button.drawcontrols-color:hover {
/* No background-color override here, allows original color to show */
border-color: ${minecraftColors.mcButtonBorder} !important; /* Keep border color consistent */
}
.drawcontrols-button.drawcontrols-color:active {
/* No background-color override here */
border-style: inset !important; /* Simulate pressed effect */
transform: translateY(1px) !important;
}
/* Ensure text/icons in color swatches are visible (e.g., for the "..." color picker) */
.drawcontrols-button.drawcontrols-color i,
.drawcontrols-button.drawcontrols-color span {
color: ${minecraftColors.mcTextLight} !important;
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark};
}
/* Specific fix for drawcontrols-circle inside drawcontrols-button for brush sizes, etc. */
.drawcontrols-button .drawcontrols-circle {
/* IMPORTANT: REMOVE background-color override here to allow Drawaria's JS to set it */
background-color: transparent !important; /* Ensure no override from our CSS */
border: 1px solid ${minecraftColors.mcButtonBorder} !important; /* Keep border for Minecraft look */
border-radius: 2px !important; /* Make it blocky */
image-rendering: pixelated; /* Ensure pixelation */
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
/* Specific elements that need the "selected" darker panel background */
ul.nav.nav-pills li.nav-item a.nav-link.active,
.drawcontrols-popupbutton.drawcontrols-popupbutton-active,
.custom-control-input:checked ~ .custom-control-label::before,
.pagination-nav .page-item.active .page-link {
background-color: ${minecraftColors.mcPanelBgSecondary} !important;
border: 2px inset ${minecraftColors.mcButtonBorder} !important; /* Inset border for active state */
color: ${minecraftColors.mcTextLight} !important;
}
/* Specific Highlight for Playerlist Drawer */
.playerlist-drawerhighlight {
background-color: ${minecraftColors.mcHighlight} !important;
}
/* Input fields and Textareas */
input[type="text"], input[type="number"], textarea, select, .form-control, .input-group-text {
background-color: ${minecraftColors.mcPanelBgSecondary} !important;
border: 1px solid ${minecraftColors.mcPanelBorder} !important;
color: ${minecraftColors.mcTextLight} !important;
text-shadow: none !important; /* No shadow on inputs */
box-shadow: none !important;
border-radius: 2px !important;
-webkit-font-smoothing: none;
font-smoothing: none;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus, .form-control:focus {
outline: none !important;
box-shadow: 0 0 0 2px ${minecraftColors.mcProgressBar} !important; /* Greenish border on focus */
}
/* Timer elements */
.timer-bg, .timer-face {
background-color: ${minecraftColors.mcPanelBgSecondary} !important;
border: 2px solid ${minecraftColors.mcPanelBorder} !important;
border-radius: 2px !important;
}
.timer-bar {
background: ${minecraftColors.mcProgressBar} !important;
}
svg[viewBox="0 0 1 1"] path[stroke="#673ab7"] { /* Timer SVG stroke */
stroke: ${minecraftColors.mcProgressBar} !important;
}
/* Draw controls and palette */
.palettechooser-row, .palettechooser-row .palettechooser-colorset, .colorset {
border: 1px solid ${minecraftColors.mcPanelBorder} !important;
border-radius: 2px !important;
}
.pcr-type {
background-color: ${minecraftColors.mcPanelBgSecondary} !important;
border: 2px solid ${minecraftColors.mcPanelBorder} !important;
color: ${minecraftColors.mcTextLight} !important;
}
.pcr-type.active, .pcr-type:focus {
background-color: ${minecraftColors.mcProgressBar} !important;
border-color: ${minecraftColors.mcProgressBar} !important;
}
.pcr-result:focus {
border: 2px solid ${minecraftColors.mcProgressBar} !important;
}
/* Images and Icons - pixelated rendering */
img, .sitelogo img, .navbar-brand img, .playerlist-avatar img,
.asset[draggable="false"], .turnresults-avatar, .tokenicon,
.playerlist-medal, .playerlist-star, .loginbutton-icon img, .a2a_svg {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.playerlist-avatar, .turnresults-avatar {
border: 1px solid ${minecraftColors.mcPanelBorder} !important;
border-radius: 0px !important;
background: transparent !important;
}
.a2a_kit .a2a_svg {
background-color: ${minecraftColors.mcProgressBar} !important;
border-radius: 0px !important;
}
.a2a_kit a:hover .a2a_svg {
background-color: ${minecraftColors.mcProgressBar} !important;
}
/* Scrollbars */
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: ${minecraftColors.mcPanelBgSecondary};
}
::-webkit-scrollbar-thumb {
background-color: ${minecraftColors.mcButtonBorder};
border: 1px solid ${minecraftColors.mcTextDark};
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background-color: ${minecraftColors.mcButtonBgHover};
}
::-webkit-scrollbar-corner {
background-color: ${minecraftColors.mcPanelBgSecondary};
}
/* Firefox scrollbar (defined globally and specifically where needed) */
* {
scrollbar-width: thin;
scrollbar-color: ${minecraftColors.mcButtonBorder} ${minecraftColors.mcPanelBgSecondary};
}
*:active {
scrollbar-color: ${minecraftColors.mcButtonBgHover} ${minecraftColors.mcPanelBgSecondary} !important;
}
/* Remove specified elements */
.extimages, .discordlink, #howtoplaybox, #socbuttons {
display: none !important;
}
/* Specific Overrides for Existing Drawaria Styles (from OCR) */
body[style*="background:url(/img/pattern.png)"], [style*="background:#f1f9f5"], [style*="background:#0087ff"], [style*="background:#00b7ff"], [style*="background:rgba(0,183,255,.3)"], [style*="background:#e1e1e1"], [style*="background:rgba(255,255,255,0.2)"], [style*="background:beige"], [style*="background:#ffffe5"], [style*="background:#ffeb3b"] {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
}
#login-midcol { /* Make login-midcol invisible */
background: transparent !important;
}
#login-rightcol .loginbox { /* Override loginbox background */
background: #3a3a3a !important; /* Specific solid dark gray */
border-radius: 2px !important; /* Ensure blocky */
border: 2px solid ${minecraftColors.mcPanelBorder} !important; /* Add consistent border */
}
#avatarcontainer { /* Specific styling for avatar container */
background-color: rgb(50, 50, 50) !important;
border: 1px solid rgb(40, 40, 40) !important;
border-radius: 2px !important; /* Ensure blocky */
}
#login-leftcol div:first-child { /* Specific div with inline background */
background: transparent !important;
}
div[style*="margin-top: 60px; text-align: right; color: white; font-size: 25px; padding: 20px; background: cornflowerblue; margin-bottom: 20px; padding-right: 100px;"] {
background: ${minecraftColors.mcPanelBgMain} !important;
border-radius: 2px !important;
}
div[style*="border-top: #00b7ff solid 1px; margin-top: 1em; padding: 0.5em; padding-bottom: 0;"] {
border-top: 1px solid ${minecraftColors.mcPanelBorder} !important;
}
/* Modal Header/Footer backgrounds */
.modal-header, .modal-footer {
background-color: ${minecraftColors.mcPanelBgSecondary} !important;
border-color: ${minecraftColors.mcPanelBorder} !important;
border-radius: 0px !important; /* Ensure no default rounded corners */
}
.popover-body, .dropdown-menu {
background-color: ${minecraftColors.mcPanelBgMain} !important;
border: 1px solid ${minecraftColors.mcPanelBorder} !important;
border-radius: 2px !important;
}
.dropdown-divider {
border-color: ${minecraftColors.mcPanelBorder} !important;
background-color: ${minecraftColors.mcPanelBorder} !important;
}
/* Remove box-shadow from levelbar div */
div[style*="position: absolute;"] {
box-shadow: none !important;
}
.playerlist-exp-bar span {
background-color: ${minecraftColors.mcProgressBar} !important;
}
#accountbox:hover *, #avatarcontainer:hover * { /* Consistent hover for account/avatar */
background: ${minecraftColors.mcButtonBgHover} !important;
}
#chatbox_textinput { /* Override aqua border from OCR */
border: 1px solid ${minecraftColors.mcPanelBorder} !important;
}
.invbox { /* Remove background from inventory box */
background: none !important;
}
/* Scoreboard/Table cells (td) in the account settings box */
#accountbox table.table td {
background-color: ${minecraftColors.mcPanelBgMain} !important; /* Ensure opaque background for table cells */
border: none !important; /* Remove internal cell borders */
}
#accountbox table.table tr {
border-bottom: 1px solid ${minecraftColors.mcPanelBorder} !important; /* Add row separators */
}
#accountbox table.table tr:last-child {
border-bottom: none !important;
}
`);
// B. Replace Logo (using JS for direct src change and precise sizing)
replaceLogo();
// C. Create and show the Music Toggle Button
createMusicButton();
// D. Activate Chat Auto-Scroller with conditional logic
activateChatScroller();
// E. Add click sound effect to buttons
addClickSound();
isThemeActive = true;
}
// --- 2. THEME DEACTIVATION FUNCTION ---
function deactivateTheme() {
if (!isThemeActive) return;
// A. Remove Injected Stylesheet
if (minecraftStyleElement) {
minecraftStyleElement.remove();
minecraftStyleElement = null;
}
// B. Remove Google Font Link
if (fontLinkElement && fontLinkElement.parentNode) {
fontLinkElement.parentNode.removeChild(fontLinkElement);
fontLinkElement = null;
}
// C. Restore original logo (best effort)
restoreLogo();
if (logoInterval) {
clearInterval(logoInterval);
logoInterval = null;
}
// D. Remove Music Toggle Button
if (musicToggleButton) {
musicToggleButton.remove();
musicToggleButton = null;
}
// E. Deactivate Chat Scroller
if (chatObserver) {
chatObserver.disconnect();
chatObserver = null;
}
// F. Remove click sound effect listener
removeClickSound();
// G. Stop music if playing
if (audio.backgroundMusic) {
audio.backgroundMusic.pause();
}
isThemeActive = false;
}
// --- 3. HELPER FUNCTIONS ---
// Logo replacement logic
function replaceLogo() {
const attemptReplaceLogo = () => {
const sitelogo = document.querySelector('.sitelogo img');
const navbarBrand = document.querySelector('.navbar-brand img'); // For secondary logo if present
if (sitelogo) {
sitelogo.src = minecraftColors.logoUrl;
sitelogo.style.width = 'auto';
sitelogo.style.height = '160px'; // Set preferred height to 160px
sitelogo.style.maxWidth = '100%';
sitelogo.style.objectFit = 'contain';
sitelogo.style.imageRendering = 'pixelated';
}
if (navbarBrand) {
navbarBrand.src = minecraftColors.logoUrl;
navbarBrand.style.width = 'auto';
navbarBrand.style.height = '160px'; // Set preferred height to 160px
navbarBrand.style.maxWidth = '100%';
navbarBrand.style.objectFit = 'contain';
navbarBrand.style.imageRendering = 'pixelated';
}
if (sitelogo || navbarBrand) {
console.log('Drawaria logo replaced.');
if (logoInterval) {
clearInterval(logoInterval);
logoInterval = null;
}
}
};
// Attempt immediately, then set interval for dynamic loading
attemptReplaceLogo();
if (!logoInterval) {
logoInterval = setInterval(attemptReplaceLogo, 500); // Check every half second
}
}
function restoreLogo() {
// This is a best-effort restoration. Original src would ideally be stored.
const sitelogo = document.querySelector('.sitelogo img');
const navbarBrand = document.querySelector('.navbar-brand img');
if (sitelogo) {
sitelogo.removeAttribute('src'); // Removes our custom logo
sitelogo.style = ''; // Clear inline styles
}
if (navbarBrand) {
navbarBrand.removeAttribute('src'); // Removes our custom logo
navbarBrand.style = ''; // Clear inline styles
}
console.log('Attempted to restore Drawaria logo.');
}
// Music button creation
function createMusicButton() {
musicToggleButton = document.createElement('button');
musicToggleButton.innerHTML = 'Music Off'; // Initial text
// NEW position for Music Toggle Button
musicToggleButton.style.cssText = `
position: fixed; bottom: 7px; right: 200px; z-index: 10000;
background-color: ${minecraftColors.mcButtonBg} !important;
color: ${minecraftColors.mcTextLight} !important;
border: 2px outset ${minecraftColors.mcButtonBorder} !important;
padding: 5px; border-radius: 2px; cursor: pointer;
font-family: 'Consolas', monospace; font-weight: bold;
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark};
image-rendering: pixelated;
`;
document.body.appendChild(musicToggleButton);
musicToggleButton.addEventListener('click', () => {
if (audio.backgroundMusic) {
if (!audio.backgroundMusic.paused) {
audio.backgroundMusic.pause();
musicToggleButton.textContent = 'Music Off';
} else {
playMusic();
musicToggleButton.textContent = 'Music On';
}
}
});
}
// Chat Auto-Scroller function with conditional scrolling
function activateChatScroller() {
const chatBox = document.getElementById('chatbox_messages');
if (!chatBox) return;
const scrollToBottomIfAtBottom = () => {
// Check if user is near the bottom (within 20px of scrollHeight)
const isAtBottom = (chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight) < 20;
if (isAtBottom) {
chatBox.scrollTop = chatBox.scrollHeight;
}
};
// Scroll immediately if already at bottom (on load or theme activation)
chatBox.scrollTop = chatBox.scrollHeight;
chatObserver = new MutationObserver(scrollToBottomIfAtBottom);
chatObserver.observe(chatBox, { childList: true });
}
// Add Minecraft click sound to ALL clickable elements (more robust)
function addClickSound() {
// More comprehensive list of selectors for interactive elements
const clickableSelectors =
'a, button, input:not([type="range"]), select, textarea, label, ' + // Standard interactive tags, exclude range inputs
'[role="button"], [role="link"], [role="checkbox"], [role="radio"], ' + // ARIA roles
'[onclick], ' + // Elements with an onclick attribute
'[tabindex]:not([tabindex="-1"]), ' + // Elements that are tabbable/focusable
'.btn, .nav-link, .page-link, .custom-control-label, ' + // Common Drawaria button-like classes
'.playerlist-row, .roomlist-item, .drawcontrols-button, .gesturespicker-item, ' + // Drawaria specific interactive divs
'.dropdown-item, .modal-header, .modal-footer, .popover-header, ' + // Menu/modal/popover headers/items
'.palettechooser-row, .colorset, .pcr-type, ' + // Color picker elements
'[data-toggle], [data-target], [data-dismiss], ' + // Bootstrap attributes
'.accountbox-inventorybutton, ' + // Specific Drawaria buttons that might be missed
'.turnresults-avatar, .playerlist-avatar, .playerlist-drawerhighlight'; // Avatar related elements
clickSoundHandler = (event) => {
const interactiveElement = event.target.closest(clickableSelectors);
if (interactiveElement) {
// Prevent sound on range inputs (sliders) as it's typically not desired
if (interactiveElement.tagName === 'INPUT' && interactiveElement.type === 'range') {
return;
}
// Ensure it's not disabled
if (!interactiveElement.disabled) {
playSound();
}
}
};
document.body.addEventListener('click', clickSoundHandler, true); // Use capture phase for broader coverage
}
// Remove Minecraft click sound listener
function removeClickSound() {
if (clickSoundHandler) {
document.body.removeEventListener('click', clickSoundHandler, true); // Must match phase used in addEventListener
clickSoundHandler = null;
}
}
// --- 4. Music and Sound Effects Framework ---
const audio = { backgroundMusic: null, soundEffect: null };
function loadAudio() {
audio.backgroundMusic = new Audio(minecraftColors.backgroundMusicUrl);
audio.backgroundMusic.loop = true;
audio.backgroundMusic.volume = 0.3;
audio.soundEffect = new Audio(minecraftColors.clickSoundUrl);
audio.soundEffect.volume = 0.6;
}
function playMusic() { if (audio.backgroundMusic && audio.backgroundMusic.paused) { audio.backgroundMusic.play().catch(e => console.log("Music play failed:", e)); } }
function playSound() { if (audio.soundEffect) { audio.soundEffect.currentTime = 0; audio.soundEffect.play().catch(e => console.log("Sound effect play failed:", e)); } }
// --- 5. INITIALIZATION ---
window.addEventListener('load', () => {
const masterToggleButton = document.createElement('button');
masterToggleButton.id = 'theme-toggle-button';
masterToggleButton.style.cssText = `
position: fixed; bottom: 7px; right: 10px; z-index: 10001;
background-color: ${minecraftColors.mcButtonBg} !important;
color: ${minecraftColors.mcTextLight} !important;
border: 2px outset ${minecraftColors.mcButtonBorder} !important;
padding: 5px; border-radius: 2px; cursor: pointer;
font-family: 'Consolas', monospace; font-weight: bold;
text-shadow: 1px 1px 0px ${minecraftColors.mcTextDark};
image-rendering: pixelated;
`;
document.body.appendChild(masterToggleButton);
masterToggleButton.addEventListener('click', () => {
if (isThemeActive) {
deactivateTheme();
masterToggleButton.textContent = 'Activate Minecraft Theme';
} else {
activateTheme();
masterToggleButton.textContent = 'Deactivate Minecraft Theme';
}
});
loadAudio();
activateTheme(); // Activate theme by default
masterToggleButton.textContent = 'Deactivate Minecraft Theme'; // Set initial text
console.log('Drawaria.online Ultimate Minecraft Theme v2.0 Initialized!');
// Update SVG stroke color to green on load and dynamically
const updateTimerStroke = () => {
const timerPath = document.querySelector('.timer-bar svg path');
if (timerPath) {
timerPath.setAttribute('stroke', minecraftColors.mcProgressBar);
}
};
updateTimerStroke();
// Use a MutationObserver for more robust SVG update if it's dynamically added/changed
const timerBar = document.querySelector('.timer-bar');
if (timerBar) {
const observer = new MutationObserver((mutationsList, obs) => {
for(const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.target.classList.contains('timer-bar')) {
updateTimerStroke();
}
}
});
observer.observe(timerBar, { childList: true, subtree: true });
}
});
})();